新しいテクニックを活用した、最先端のウェブデザインから学ぶ、今後のウェブ制作に活用したい素敵なHTML/CSSコードスニペットをまとめています。
コピー&ペーストで利用できるお手軽なCSSアニメーションやホバーリンクなどに加え、インパクトのあるレイアウトを実現できる本格的なアイテムやプラグインが揃います。スマートフォン端末ユーザーがさらに増えると予想される2016年、レスポンシブデザインやSVG形式に対応したスニペットは、今後より必要になってくるでしょう。
詳細は以下から。
今どきのウェブサイトをつくろう！差がつくHTML/CSSコードスニペットまとめ
右下に表示されている「Return」をクリックすると、エフェクトが再読み込みされます。また各ソースはHTML、CSS、JSタブをクリックすることで確認することができます。
カード状に重ねたコンテンツをクリックすることで、まるでめくるような感覚で表示できるカルーセル機能。
See the Pen Simple Card Carousel by Andy Tran (@andytran) on CodePen.
水平方向へのスクロールを利用した、レスポンシブに対応するナビメニュー。リンクをクリックすると、背景カラーが変化します。
See the Pen Multi-device scrolling menu by Alberto (@ac_coding) on CodePen.
HTML/CSSのみでデザインされた、レスポンシブ対応のナビメニュー。
See the Pen Pure CSS Header Menu by Nikolay Talanov (@suez) on CodePen.
Velocity.js fullscreen flexbox overlay navigation
右上に配置されたハンバーガーメニューをクリックすると、フルスクリーンでナビメニュー用リンクが展開されます。滑らかさに定評のある Velocity.js プラグインを採用。
See the Pen Velocity.js fullscreen flexbox overlay navigation by Mirko Zorić (@fluxus) on CodePen.
megamenu.js – Last responsive megamenu
レスポンシブに対応した、滑らかなアニメーションが素敵なメガメニュー用プラグイン。※ 大きなスクリーンサイズでうまく確認できます。
See the Pen megamenu.js – Last responsive megamenu you’ll ever need by Mario Loncarek (@riogrande) on CodePen.
Demo for sass mixin library for text hover effects
左側メニューよりエフェクトを決め、「Hover Me」にマウスホバーすることで、ラインを利用した20種類以上のホバーエフェクトをまとめています。※ 大きなスクリーンサイズでうまく確認できます。
See the Pen Demo for sass mixin library for text hover effects by Antonija Šimić (@tonkec) on CodePen.
マウスホバーするとボタンがラインに変化するアニメーション。
See the Pen Hover effect by zessx (@zessx) on CodePen.
Awesome split-in-half hover effect
ドクンドクンという鼓動のようなエフェクトに、ボタンが上下に割れるスプリットエフェクトがユニーク。
See the Pen Awesome split-in-half hover effect by Kriszta (@vajkri) on CodePen.
ボタンをクリックすると、フルスクリーン画面にログインページがポップアップ表示されます。
See the Pen Sign In Button and Form by Cole Waldrip (@colewaldrip) on CodePen.
パタパタと羽ばたく鳥がかわいい、CSSアニメーションを利用したTwitterシェアボタン。
See the Pen Tweet Button v2 by Andreas Storm (@andreasstorm) on CodePen.
ボタンをクリックすると、ロックされていた各コンテンツが解除されます。
See the Pen Lock/Unlock Navigation by Andrew Canham (@candroo) on CodePen.
天地中央揃えを利用した、ブログコンテンツに適したレイアウト。
See the Pen Unicasts Blog Design by Mackenzie Child (@mackenzie) on CodePen.
Duo-tone example with scroll effects
カラフルな色使いに、幾何学模様のアニメーションが、今年のデザイントレンドにもあっています。
See the Pen Duo-tone example with scroll effects by Nicolás J. Engler (@nicolasjengler) on CodePen.
コンテンツが切り替わるたびに、単語がふわりと表示されるエフェクトが追加したスライダー。
See the Pen Untranslatable Slider by Joe Harry (@woodwork) on CodePen.
グリッドレをうまく崩した、雑誌のようなレイアウトが特長。
See the Pen Tile with gradient title by Fabio Ottaviani (@supah) on CodePen.
フラットスタイルにCSSを利用してドロップシャドウを適用した、トレンド性の高いレイアウト。
See the Pen Trending by Philip Stapelfeldt (@caphil) on CodePen.
work element project animation
新しいサムネイル用レイアウトを提案する、CSSホバーエフェクト。
See the Pen work element project animation by Valentin Galmand (@asstor_) on CodePen.
各ステップごとに進む、スライド式お問い合わせフォーム。
See the Pen Step by step register form by Jerome Renders (@JeromeRenders) on CodePen.
CSS Fill Murray welcome button!
プロフィール表示に活用できる、サークル型マウスホバーアニメーション。
See the Pen CSS Fill Murray welcome button! by Mathieu Lavoie (@theaftermath87) on CodePen.
スクロールに応じて、カードを重ねるようにコンテンツを表示することができるJSプラグイン。
See the Pen StickyStack.js by Mike Zarandona (@mike-zarandona) on CodePen.
See the Pen Hover Reveal Effect by Tiffany Stoik (@tstoik) on CodePen.
右端にあるナビメニューを利用して展開する、アニメーションが魅力的なスライダー。
See the Pen Slider Animation by Ettrics (@ettrics) on CodePen.
スクロールすることでキューブ状にコンテンツが展開する、立体的なエフェクト。
See the Pen Scrolling effect kinda 3d by Jerome Renders (@JeromeRenders) on CodePen.
スクロールに応じて残りのコンテンツ量を、分かりやすくローディングバーで表示します。
See the Pen Blog Concept by Brian Douglas (@BrianDGLS) on CodePen.
シンプルですが、デザインのアクセントになりそうなロゴ用CSSアニメーション。
See the Pen logo animation by Diego (@dieghh) on CodePen.
複数のラインがロゴのまわりをアニメーションするユニークなコンセプト。
See the Pen svg animation by Anna Batura (@Anna_Batura) on CodePen.
@keyframeアニメーションを利用した、ポリゴンスタイルのバットマン。
See the Pen Batman by massimo (@_massimo) on CodePen.
キラキラと輝くダイヤモンドを、SVGファイルで描いています。
See the Pen SVG Diamond by Chris Gannon (@chrisgannon) on CodePen.
