CSS3で実現するMac OS Leopard風のStack実装例
2010年06月03日-
スポンサード リンク
CSS3 Stacks Experiment
CSS3で実現するMac OS Leopard風のStack実装例が公開されています。
クリックすると、アニメーションしながら出てくるStackがカッコいいです。

半透明、ボーダー付き角丸となかなかのテクニックを駆使しているみたいですね。
サイトに書かれている使われているプロパティとしては、次のようなものが使用されてるそうです。
・擬似 :target クラス
・transform
・transition
・border-radius
・border-image
・CSSグラデーション
・rgba colors
・text-overflow: ellipsis;
関連エントリ
CSS3で実現するMac OS Leopard風のStack実装例が公開されています。
クリックすると、アニメーションしながら出てくるStackがカッコいいです。

半透明、ボーダー付き角丸となかなかのテクニックを駆使しているみたいですね。
サイトに書かれている使われているプロパティとしては、次のようなものが使用されてるそうです。
・擬似 :target クラス
・transform
・transition
・border-radius
・border-image
・CSSグラデーション
・rgba colors
・text-overflow: ellipsis;
関連エントリ
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- 和柄背景画像フリー素材
- SVGのローディングアイコン「svg-spinners」
- グリッドにおしゃれなエフェクトをつけるサンプル
- 属性に値を設定するだけでパララックスアニメーションさせられる「Scroll Btween」
- スクロールで要素が迫ってくるようなエフェクトを作る「PushIn.js」
- 総数3.2万個のアイコンライブラリまとめサイト「Iconer」
- 2000個近いフリーのピクトグラムアイコン「tabler-icons」
- ページスクロールで背景ムービーが動くページが作れる「ScrollMovie」
- テキストがシャッフルされてかっこいいMENU実装
- 手書き風ピクトグラムアイコン400種「Doodle Icons」
- 過去のエントリ