サイト構築 -CSS
[CSS]フラットなデザインに使いたい！タップ時の新しいエフェクト「波紋」のアニメーションを実装するテクニック
Post on:2014年7月1日
Googleが先日発表したAndroid Lで使われる新しいUX「Material Design」で採用されているようなタップすると波紋のように円が広がるエフェクトを実装するテクニックを紹介します。 タップやクリックでよ
[CSS]レスポンシブ対応、スクリプト無し、完成度も非常に高いタブコンテンツを実装するテクニック
Post on:2014年6月30日
スクリプトは一切使用せず、デスクトップ時はタブコンテンツ、スマフォ・タブレット時はタブをスケールダウンに変更してコンテンツを表示するスタイルシートのテクニックを紹介します。 単にレスポンシブ対応のタブというだけでなく、コ
[CSS]簡単な記述でアコーディオンコンテンツを実装するフレキシブルボックスを使ったテクニック
Post on:2014年6月26日
リスト要素で実装した複数のカラムを水平に配置し、各カラムをホバーすると滑らかなアニメーションで伸縮させるflexboxを使ったスタイルシートのテクニックを紹介します。 Flexbox outdatedbrowser.co
[CSS]この発想はすごい！画像をモザイクからくっきり見せるスタイルシートのテクニック
Post on:2014年6月20日
一枚の画像を使って、モザイク状の画像をアニメーションで少しずつくっきりさせるスタイルシートのテクニックを紹介します。 もうほんと、ナイスアイデア！ コードを見る前に実装方法をちょっと考えてみてください。 ↓はブラウザでの
[CSS]パタパタっと折り畳むアニメーションが気持ちいいナビゲーションを実装するテクニック
Post on:2014年6月18日
子アイテムをパタパタっと折り畳むアニメーションが気持ちいいナビゲーションを実装するスタイルシートのテクニックを紹介します。 Unfolding Menu Animation
[CSS]動画を背景として表示させ、オーバーレイでコンテンツを配置するテクニック
Post on:2014年6月13日
動画をブラウザいっぱいに背景として表示させ、その上にコンテンツをオーバーレイで配置するテクニックを紹介します。 Create Fullscreen HTML5 Page Background Video
[CSS]OS X Yosemiteのように背景が透ける美しいパネルを実装するスタイルシート
Post on:2014年6月4日
昨日発表された2014年秋リリースのOS X 10.10 Yosemiteで採用予定の背景を半透明のブラーで透けさせる美しいパネルを実装するスタイルシートを紹介します。 記事は一日遅れですが、スタイルシートは当日で、仕事
[CSS]ボタンにぷるるんとかわいいアニメーションを与えるスタイルシート -Galatin effect
Post on:2014年5月21日
a要素にテキストを配置して実装したシンプルなボタンに、ゼリーのようにぷるるんとさせるアニメーションを与えるスタイルシートを紹介します。 ↓は、デモをアニメーションgifにしてみました。
[CSS]アイデアがいい！よく見かける普通のアイコンに一手間加えるスタイルシートのデモ
Post on:2014年5月16日
ウェブページでよく見かけるアイコンをクリックやタップした時に、ちょっとしたアニメーションを加えたデモを紹介します。 かわいいアニメーションで楽しくなるだけでなく、アイコンをクリックしてどうなるのかが伝わる役目も果たしてい
IE9+ならスクリプト無しで、タブやカルーセルなどさまざまなコンポーネントがスタイルシートで実装できる -Pure CSS Components
Post on:2014年5月9日
最近のウェブページでよく見かけるカルーセル、アコーディオン、ドロップダウン、モーダルウインドウ、タブコンテンツなど、さまざまなコンポーネントをHTML5+CSS3で実装するライブラリを紹介します。 HTML5の「aria
sponsors
