サイト構築 -CSS
2013年上半期、チェックしておきたいCSSのフレームワークのまとめ
Post on:2013年7月26日
最近リリースされたものを中心に、これは！というCSSのフレームワークを紹介します。 フラットなスタイルはもちろんですが、オブジェクト指向CSS（OOCSS）ベースで設計されたものが目立ちますね。 一番最後のフォームに特化
[CSS]アニメーションで細かい動きを加えたカード状のドロップダウンのデモがかなりかっこいい
Post on:2013年7月24日
ドロップダウンが展開する際のアニメーションがかなりかっこいいのでご紹介。 上記はデモをアニメーションgifにしたもので、初期はアイテムがカード状に重なっており、クリックすると中身がするすると表示されます。 最初にぱかっと
[CSS]画像を使わずに、スタイルシートでぎざぎざの線をかくテクニック
Post on:2013年7月12日
画像を使わずに、ノコギリの歯のようなぎざぎざの線をスタイルシートでかくテクニックを紹介します。 下記は、p要素一つだけです。
CSS3アニメーションを使ったかっこいいページを簡単につくりたい！そんな人に -CSS3 Animation Cheat Sheet
Post on:2013年7月11日
Appleのプロダクトページのように、スクロールをトリガーにCSS3アニメーションが展開するようなページを簡単に実装できるCSS3 Animation Cheat Sheetを紹介します。 「Cheat Sheet」とい
[CSS]ヘッダをホバーするとナビゲーションがスライド表示されるスタイルシート（スクリプト無し）
Post on:2013年7月11日
スクリプトを使わずに、ヘッダをホバーすると非表示だったナビゲーションがアニメーションで表示させるスタイルシートのテクニックを紹介します。 Create a Hidden Sliding Navigation Bar Us
[CSS]パーセントで指定された正確なサイズが不明な要素を天地左右の中央に配置するスタイルシートのテクニック
Post on:2013年7月9日
天地左右の中央に配置したい要素のサイズが幅も高さもピクセルで指定されていれば、marginやpaddingで簡単に配置できますが、サイズ指定にパーセントを使用した要素だと表示サイズに依存されてサイズが分かりません。 そん
[CSS]テキストの天地に美しいグラデーションのボーダーと背景を適用するスタイルシート
Post on:2013年7月3日
p要素などで実装したテキストの天地に、美しいグラデーションのボーダーと背景を適用するスタイルシートのデモを紹介します。 カルピスもちはおやつにもらったのがおいしかっただけで、スタイルシートには何の関係もありません。
[CSS]モーダルウインドウをシンプルな操作とアニメーションでどれだけかっこよく表示できるかのデモ
Post on:2013年6月27日
トリガーはシンプルなクリック操作、そしてシンプルなアニメーションを使って、モーダルウインドウをいかにかっこよく表示するかのデモンストレーションを紹介します。 NIFTY MODAL WINDOW EFFECTS
[CSS]ラッパーに含まれたコンテンツとヘッダ、ヘッダの幅だけラッパーを超えさせるテクニック
Post on:2013年6月25日
全体をラッパーで包み、ホワイトのコンテンツはラッパーで指定した幅だけど、レッドのヘッダは表示サイズが指定した幅より広い時にラッパーを超えた幅で表示するスタイルシートのテクニックを紹介します。 いやー、日本語ムズカシイ、、
[CSS]さまざまなデザインのボタンを簡単に実装できるSass/Compassのボタンライブラリ -Buttons
Post on:2013年6月24日
フラットをはじめ、定番の角丸、サークル、アイコン添えなど、さまざまなデザインのボタンを簡単に実装できるSass/Compassで作られたボタンライブラリを紹介します。 Buttons Buttons- GitHub
sponsors
