CSSの実用的なテクニックから素晴らしいアイデアまで!スタイルシートの最新テクニックのまとめ

次のプロジェクトに使ってみたくなるような実用的なものをはじめ、CSSでこんなこともできるの!という素晴らしいアイデアまで、クリエイティブなスタイルシートのテクニックを紹介します。

デモのキャプチャ

pen#PwLXXP

アニメーションで動くハートを実装する様子をアニメーションで楽しめます。
これにインスパイアされたWebページ作成編yourwebdevもあります。

デモのアニメーション

Jiggle

一見ただの角丸ボタン、ほっておくとプルっとします。

デモのアニメーション

Circle waves

ぽよんと弾けて、波紋のように広がります。

デモのアニメーション

Pseudo Placeholders in Pure CSS

プレースホルダーのテキストを入力時にアニメーションで移動させます。

デモのアニメーション

Nearly CSS3 Animated Search Input

SVGのように見えるかもしれませんが、検索アイコンも入力欄もアニメーションもCSSで実装された検索ボックス。
※classの置き換えにスクリプトを使用しています。

デモのアニメーション

Login Box Concept

ID/PWを入力してからログインするまでのコンセプトデザイン。
バリバリにスクリプトを使用していますが、あまりにもかっこいいのでご紹介。

デモのアニメーション

CSS Checkbox

チェックボックスのチェックがダイナミックなアニメーションで表示・非表示されます。

デモのアニメーション

Pure CSS Fullscreen Navigation

フルスクリーンのナビゲーションをピュアCSSで実装しています。

デモのアニメーション

Off Canvas Pop Out Menu

オフキャンバスのメニューを下部からポップアウトで表示します。
※トグルの切り換えにスクリプトを使用しています。

デモのキャプチャ

10 stylish hover effects

a要素で囲ったテキストに適用するかっこいいホバーエフェクト集。

デモのキャプチャ

10 stunning hover effects

上記の第二弾。実装力だけでなく、そのアイデアもすごいですね!

デモのキャプチャ

Hello Buttons

背景とボーダーをずらしたかわいいデザインのボタン。

デモのキャプチャ

Button Hover States

ボタンをホバーした際のさまざまなエフェクトのまとめ。

デモのキャプチャ

Colorful CSS Buttons

ボタンをホバーした際に、ボーダーや背景をアニメーションさせます。

デモのキャプチャ

CSS Only Material Design Animated Buttons

Material Designの美しい波紋のエフェクトをピュアCSSで実装。

デモのアニメーション

Material Button Hover

Material Designのエフェクトは波紋だけではありません。

デモのアニメーション

Animated Gradient Ghost Button

移り変わる繊細なグラデーションのアニメーションが美しいゴーストボタン。

デモのキャプチャ

Perspective Scrolling in CSS

パララックスの視差効果を使い、プロダクトを3Dに見せます。

デモのキャプチャ

Sticky Footer Magic

フッタをコンテンツ量が少ない時は最下部に固定表示、コンテンツ量が多い時は成り行きで表示させます。

デモのキャプチャ

Constructivist Headlines

見出しを斜めに組み合わせてレイアウト、雑誌風でかっこいい!

デモのキャプチャ

Split Showcase

画像をさまざまな形状に分割して、アニメーションで表示します。

デモのキャプチャ

Box-bubble Cutout in CSS

sectionで実装したパネルを自由に形状で切り取ります。

デモのアニメーション

Swanky Lil Drop Down Menu

ピュアCSSのドロップダウンは当ブログでもいくつか紹介してきましたが、そのディテールや細かいエフェクトなどかなり作りこまれています。

デモのキャプチャ

CSS3 Responsive Navigation Menu

レスポンシブ対応のシンプルなドロップダウン型のナビゲーション。

デモのキャプチャ

Navigation Animation

テキストベースのシンプルなナビゲーションのさまざまなホバーエフェクト集。

デモのキャプチャ

One Page Navigation CSS Menu

ページ全体を使った大胆なナビゲーション。その動きはぜひデモで!

デモのアニメーション

Pull Down to Refresh

スクリプトを併用した実装ですが、こういう使って楽しそうなUIはいいですね。

デモのキャプチャ

Edgars Lair - a Pure CSS RPG

最後は、なんとピュアCSSでつくられたロールプレイングゲーム。もちろん動きます。

top of page

©2017 coliss