マウスオーバーで常にカーソル位置を向いて変形する3Dアニメーションサンプル
今回のTipsは、ある要素のマウスオーバー時にその要素が常にマウスカーソルの位置の方向を向いて目で追ってくるような、視差効果を伴った3次元アニメーションのコーディングサンプルをご紹介します。 まずは以下の完成イメージで表示された画像をマウスオーバーでぐりぐり動かしてみてください。 See the Pen 3D hovering motion with chasing cursor by digistate (@digistate) on CodePen. HTMLの基本構成 今回のサンプルでは、WordPressテーマにおけるアーカイブページの記事一覧用のレイアウトを想定して、各記事にあたるarticle要素と、その中には記事タイトル、記事概要、寄稿者名を適当に入れてみました。 各記事は全体が画像として表示されていますが、これはimgタグではなくbackground-imageでdiv要素
HTML・CSS レスポンシブな正方形を作って、その中央にコンテンツを表示させたい。 - かもメモ
スマートフォン版のサイトなどを作る際に、例えば商品のサムネイル画像等をウィンドウ幅に合わせ、かつ中の画像を中央に表示させたいようなケースに結構遭遇します。 レスポンシブの正方形を作る vmin という単位を利用する方法 調べていると、widthとheightにvminという単位を使って、レスポンシブの正方形を作る方法がありました。 HTML <div class="squareBox"> <div class="content"></div> </div> CSS .squareBox /* margin 30px */ width: calc(100vmin - 60px) height: calc(100vmin - 60px) 参考: css3でレスポンシブな正方形を作る - Qiita この方法は、calcに対応しているブラウザの問題と、ボックスが1つなら良いのですが複数並べたい時
CSSでやりたかったことが数行のコードで実装できるスタイルシートの小技のまとめ -CSS Protips
リスト要素で実装したアイテム間の区切り線の最後だけ取り除く簡単なコード、リストの各アイテムをカンマ区切りで配置させるコード、テキスト表示をすべてのデバイスで最適化するコードなど、サイトやブログに役立つ便利なCSSのテクニックを紹介します。 CSS Protips -GitHub 当記事は、2015/11/4に公開した記事に追加分を加えたものです。 更新: 2016/3/7 13, 14, 15を追加。 更新: 2016/4/13 16, 17を追加。 CSS ProtipsのライセンスはCC0 1.0で、個人でも商用でも無料で利用できます。 スタイルシートの対応ブラウザはChrome, Firefox, Safari, Edge, IE11です。 1. リスト要素の最後だけ区切り線を削除 2. body要素に「line-height」を加える 3. 天地の中央に配置 4. リストをカンマ区
Flexboxを使った2カラム・3カラム・マルチレイアウトの基本と応用
2015年8月17日 CSS 以前「これからのCSSレイアウトはFlexboxで決まり！」という記事で紹介した、CSSでのレイアウト組みに大活躍できるFlexbox。前回は基本的な使い方の紹介をしたので、今回はより実践的に使える実例を紹介したいと思います！ ↑私が10年以上利用している会計ソフト！ Flexbox対応ブラウザー 前述の記事の通り、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。 そしておなじみの日本でのブラウザーシェア情報。2015年7月ではIE11が32.86%でトップです。Flexboxに対応していないIE9は3.17%。制作するサイトに応じてFlexboxを取り入れるか検討しましょう。 一番基本的なWebサイトのレイアウトである、2カラム。まずはこのレイア
あまり知られていないCSSの12の事実(続編) | POSTD
1年以上前に、私は最初の 12 Little-known CSS Facts（あまり知られていないCSSの12の事実） を発表しました。SitePointで最も人気の高い記事となりました。この記事を書いた後も、私はCSSのアドバイスやちょっとした情報の収集を続けました。だって、大ヒット映画も必ず続編を制作するじゃないですか。 注釈 SitePoint/ Natalia Balska によるイラスト それでは、早速今年も開発のヒントになる12の事実について話しましょう。もちろん、中にはもうすでにご存じのこともあると思いますが、この中で初めて知ったという事実がありましたら、コメントでお知らせください。 1. border-radius プロパティに”スラッシュ”シンタックスを使用できる事実 このプロパティについてはSitePointに4年以上 前に書いた のですが、この機能が存在することを、未
[CSS]レトロなデザインがいいね！CSSアニメーションで実装されたローディング用のスピナー
画像やJavaScriptは無し、それぞれdivタグ一つとCSSアニメーションで実装されたシンプルでかっこいいローディング用のスピナーを紹介します。
![[CSS]レトロなデザインがいいね！CSSアニメーションで実装されたローディング用のスピナー](https://cdn-ak-scissors.b.st-hatena.com/image/square/97e241cb850cccb7e305aced9830b1ed4c5cf3e3/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015081001.png)
第10回 CSS3で自由なボーダーデザインを実現する | gihyo.jp
神は細部に宿る 「おっ」と思わせるようなデザインにするためには「大胆なレイアウトをする」「バランスのよい配色にする」などたくさんの要素がありますが、一見目立たなくてもよいデザインに共通するポイントがあります。それは、「ディテールまでデザインされている」ということです。 近代建築の三大巨匠の一人である「ミース・ファン・デル・ローエ[1]」の言葉だと言われる「神は細部に宿る（God is in the details）」というフレーズがあります。細部にまできめ細かく配慮して作られたものこそ美しく、「細部」が「全体」の完成度に大きな影響を及ぼす、といった考え方を表したものです。 Webデザインにおいても、細部を丁寧にデザインして作り上げていくことがやはり大切。 人がやっていないようなところに手が施されたデザインは、人の目を惹き付けます。 たとえば、画像をボーダーで囲む際に、従来のCS
CSS3のブレンドモードが素敵！ 新プロパティmix-blend-modeを使いこなそう – ICS MEDIA
mix-blend-modeというCSSのプロパティ。これはDOM要素を重ねた時の見え方を指定するCSSプロパティです。デザイナー視点だとブレンドモードはごく当たり前に使う機能のひとつ。mix-blend-modeはウェブの表現手法が広がり、デザインの自由度が広がる注目すべきCSSプロパティです。本記事はmix-blend-modeの魅力と使い方をデモを交えて紹介します。 そもそもブレンドモードとは？ ブレンドモードはクリエイティブな表現を作る上での基本機能のひとつです。Adobe PhotoshopやIllustrator、After Effects、XDや、Figmaで搭載されていて、レイヤーを重ねたときにどのように重ねて表示するかの設定になります。ソフトによっては「ブレンドモード」や「描画モード」「モード」と異なる名称が使われていますが、機能としては同じものになります。本記事ではCS
CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス
CSS Flexboxとは水平または垂直に要素を配置し、柔軟なレイアウトを実現できるCSSのレイアウトモジュールです。複雑なレイアウトでも今までより少ないコードで、よりシンプルなプロセスで実装することができます。 CSS Flexboxの基礎知識、Flexboxの各プロパティがどのように機能するのか、Flexboxでどのようにレイアウトを実装するかを視覚的に解説します。 【アップデート: 2022年6月16日】 IEがサポート終了したことにあわせて、修正しました。 【アップデート: 2021年8月1日】 Flexboxの解説を2021年の現状にあわせて、修正しました。 【アップデート: 2020年8月23日】 Flexboxの解説を2020年の現状にあわせて、修正しました。 【アップデート: 2019年3月27日】 Flexboxの解説を2019年の現状にあわせて、修正しました。 【アップ
CSSで外部サイトへのリンクの後ろにアイコン画像を表示する
CSSで外部サイトへのリンクの後にアイコン画像を表示する方法を備忘録的に残しておきます。方法は色んなブログで紹介されていますが、画像リンクにアイコンを表示しない方法は決め手に欠けます。 外部サイトへのリンクの識別法 以下のようにすればリンクの後にアイコン画像を表示されます。 a { background:url(画像のURL) no-repeat right center; padding-right:15px; } これだとすべてのリンクに画像が表示されるので、外部リンクと内部リンクを識別する必要があります。 URLで識別する a[href^="http"] { background:url(画像のURL) no-repeat right center; padding-right:18px; margin-right:5px; } a[href^="http://weboook.blo
知っておくと便利！あのサイトでさりげなく使われていたCSS小技集 - コムテブログ
TL;DR 2014/12/01：続編である「最近のサイトで使われていた CSS 小技集」を書きました。 今回は CSS のみで実現できるもの、動きあるエフェクトやこれから使用頻度が高くなりそうなものをメモしておきます。さり気なく使いたい CSS テクニックです。 画像 １．キュレーションサイト風のランキングボタン キュレーションサイトがサイドバーに「よくつけてる」ランキングボタンです。counter-incrementで数値を増加させ、content: counter()でカウンターを表示します。人気の記事を表示させる WP プラグイン等と組み合わせるといいですね。ざっくりとしたソースで申し訳ないです、微調整はお願いします。 html <ul class="sample"> <li><img src="xxx.png" /><span class="post-title">テストテストテ
背景画像の拡大・縮小 → background-size ! - シンプルシンプルデザイン CSS
W3Cで「モジュール背景とボーダー」について2011年2月15日付けで更新されてますね。 CSS3では、背景画像の幅・高さを拡大・縮小するプロパティが追加されていますので、あらためてまとめてみます。 拡大・縮小による画像劣化が気になるところですが、許容できるかどうかの判断は個人差があると思います。近頃のブラウザは優秀で、いい感じでスムージングされるので「OK！」とぼくは判断しました。 さすがにIE6の拡大・縮小したときのジャキジャキ感は堪えられませんが、そもそも「background-size」は適用されず無視されるので、IE6では背景画像は拡大・縮小されません。 Safari、Google Chrome、Operaですでに実装されています。 Firefoxもプリフィックス「-moz-」で適用されます。 IE8では残念ながら未実装でした。。。この辺はプログレッシブエンハンスメントで乗り切り
deferloader – 株式会社ウフル技術ブログ
LoRa 開発シールドのデータを enebular で受け取る By hrd_pk|5月 9, 2017|未分類, | 花粉がまだ名残惜しく思っているようで、鼻がまだむずむずしています。 ぽかぽか陽気が続いていますが、みなさんいかがお過ごし… Read More
ラジオボタンでグラフィカルなトグルボタンを作ってみる - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） HTMLでトグルボタンを実装するにはinput[type=radio]が近道ですが、 リッチな雰囲気にする為に見た目を制御したい。今回はそんなお話です。 「ラジオボタンがすでにグラフィカルでは？」という細かいつっこみは置いといて頂き、 本稿ではより自由度高く外見をカスタマイズする方法を記していきます。 ラジオボタンでなくともトグルボタンはJavaScriptで作れますが、 択一で選択する仕組みをわざわざ自前で実装するよりも、 その為に作られた物をその為に使って実現してみます。 マークアップ 例えばこんなHTMLとCSSを書きます。 血液型を選択する簡単なトグルボタンです。 HTML <form class="question"> <h1>あなたの血液型は？</h1> <ul class="bloodtype-list"> <li
CSS - 立体的なボタン（CSS3）｜及川WEB室
画像を使わずに、CSSで立体的なボタンが作れます。 そのCSS（CSS3）をご紹介。 ※IE6,IE7,IE8 向け改良版も追記しました（2012/05/29）。 表示例 及川治建築設計室 Internet Explorer ではIE9しかきちんと見れていない。 IE6,IE7,IE8 ではグラデーションと影は見えていない。 (IE8 以下の対応については「IE6,IE7,IE8 向け改良版」参照。) HTMLのソースコードとCSS サンプル 及川治建築設計室 a.btn { /* 文字色、ボタンの横幅など */ color:#5F2500;padding:5px 0;display:block;width:200px;text-align:center; /* 背景のグラデーション */ background: linear-gradient(to bottom, #FFF, #CCC)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
iHover CSS3 hover effects pack
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
CSSのすごいアイデアが満載！実用的なものからスゴ技までスタイルシートのテクニックのまとめ
無料でしかも高品質！1ページで構成されたサイトを作るためのHTML5/CSS3のテンプレートのまとめ | コリス
