思わずクリックしてコンテンツを読み続けたくなるような、コピー&ペーストで利用できる最新 HTML/CSS スニペットをまとめてご紹介します。
新しいテクニックを利用した、ますます進化するWebの可能性を感じさせてくる作品ばかりで、今後のデザイン制作に活用してみてはいかがでしょう。
「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。
詳細は以下から。
ウェブをもっと面白く！コピペ可能なHTML/CSSスニペット45個まとめ
Fixed Disappearing Scrolling Header
スクロールすると表示されている文字テキストがフェードアウトで消えていくヘッダーエフェクト。
A Menu Overlay Simulating a Camera Focus Change
MENUをクリックするとアニメーション付きでフルスクリーンで展開するナビゲーションメニュー。
ハンバーガーメニューにカーソルを合わせると、グネグネと形を変化させてコンテンツを表示するナビゲーションメニュー。
CSSのみで再現できるナビメニューで、クリックすることでコンテンツをパネル状で立体的に表示します。
上部に配置された要素を左右に動かすことで、コンテンツを水平方向に閲覧できる新型ナビゲーションメニュー。
画面下に配置したナビメニューで、クリックすると下方向からスライドで子カテゴリが表示されます。
表示されている文字を上下にアニメーションさせた、ちょっとしたギミックが面白いナビメニュー。
テキストリンクをよりユニークに魅せる、８つのホバーエフェクトをまとめています。
ハンバーガーメニューアイコンのさまざまなアニメーションを再現しています。
Parallax 3D Button with JS Controlled CSS Variables
マウスをクリックしようとすると立体的に動くユニークなパララックスエフェクト。
背景がレインボーカラーにアニメーションするボタンエフェクト。
ボタンにホバーするとグラデーション状に色が変化するゴージャスなエフェクト。
CSSのみで再現するグラデーション付きのホバーエフェクトがポイント。
Simple Like Button #codevember
サイトにいいね機能を追加できるシンプルなボタンエフェクトで、クリックするとハートマークがアニメーション付きで変化します。
使い勝手の良いさまざまなボタンエフェクトの詰め合わせパック。
２つのボタンを重ねたようなエフェクトを実現する、ポップなホバーエフェクト。
並べられたロゴにカーソルを合わせると、背景がぼやけボタンが表示されるCSSスニペット。
ユラユラと漂う文字テキストをHTMLとCSSのみで実現するお手軽エフェクト。
ぼやけた文字にアニメーション付きでフォーカスを当てるCSSエフェクト。
文字テキストをネオン状に点滅させ、隠れている文字を照らし出すCSSエフェクト。
映画のようなオープニングシーンをCSSのみで表現するテキストエフェクト。
文字テキストをスライドさせながら変更していくアニメーションエフェクト。
ネオンライトが点滅しているようなエフェクトをCSSで実現します。
文字テキストをカラフルにシャッフルさせながら表示するエフェクト。Shuffleボタンを押すと再読込できます。
スロット状に回転しながら文字テキストを表示するSVGエフェクト。
クリスマス気分を盛り上げるユニークなアニメーションを利用して文字テキストを表示します。
シェイプに合わせて文字テキストをずらして表示できる、CSSの新しい利用方法を提案します。
CSS Filterプロパティを利用して、Photoshopも顔負けの写真加工を行うテクニックをまとめています。
シンプルで幅広いプロジェクトに活用できるカード型ホバーエフェクト３種。
マウスホバーによってキューブ状の立体的に切り替わるエフェクト。
JavaScriptを利用せずに、CSSのみで作成されたモーダルウィンドウ。
Bootstrapフレームワークに対応した、CSSで作成されたラジオボタン各種。
ステップ順に進めていくことでお問い合わせフォームを送信できる、インタラクティブなサインアップ画面を作成します。
下方向にスワイプすると新しいコンテンツが読み込まれ、同時にプリンターが印刷しているような様子を表現しています。
Parallax Scene with CSS Variables
Change Background Color with Fade Animation as You Scroll
Responsive Pure CSS Tabs & Accordion
画面幅に応じてタブとアコーディオン機能が切り替わるCSSテクニック。
コンテンツをリストアップするときに役立つスニペットで、ほんの少しの素敵なアニメーションを追加することで、思わずクリックさせます。
Smudge & Randomize Image with PIXI.js Mesh & GSAP
カラフルなサークル円が、マウス操作に合わせてぬるりと形を変えるユニークなテクニック。
Pure CSS – Responsive Animation | Test 1
レスポンシブデザインにも対応した、CSSのみで作成したローディングアニメーション。
ドットとラインを使った中毒性のある動きがユニークなローディングアニメーション。
四角形の大きさがすこしずつ変化する、キューブ状アニメーションエフェクト。
キャラクターが走る様子を@keyframesを利用してアニメーションさせるCSSテクニック。
CSSのみでおなじみのキャラクターをアニメーションさせるテクニック。
