ウェブ制作で差がつくテクニックをつかった、コピー&ペーストで利用できる HTML/CSS スニペットをまとめてご紹介します。最新のデザインテクニックを駆使したレイアウトやスライダー、ボタンエフェクト、ホバーエフェクトなどユーザーがたのしむことができる工夫のつまった作品が数多く公開されています。これらのスニペットを利用することで、他とは一味違うユニークなウェブサイトを制作してみてみましょう。
「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。
詳細は以下から。
ウェブ制作で差がつく、コピペ可能なHTML/CSSスニペット50個まとめ
01. Fixed Images That Fades as You Scroll
SVGファイルにアニメーションを加えることで、美しい色の重なり方を表現します。ヘッダー用ヒーローデザインにもオススメ。
See the Pen Clouds of æther. by smlsvnssn (@smlsvnssn) on CodePen.
02. Color Changin’
カンバスをクリックするたびに、花火のように飛び散るエフェクト付きで配色を変化させていきます。
See the Pen Color Changin’ by Alex Zaworski (@alexzaworski) on CodePen.
03. The Deep Blue (Waves)
CSS のみでスタイリングされた、青い海のさざ波を表現するテクニック。
See the Pen the deep blue (waves) by Andy Fitzsimon (@andyfitz) on CodePen.
04. Fizzy Sparks
気泡にキラキラとした光エフェクトを追加し、リアルな動きを TweenMax で再現しています。
See the Pen Fizzy Sparks by Bennett Waisbren (@waisbren89) on CodePen.
05. Responsive Parallax Drag-Slider with Transparent Letters
レスポンシブに対応し、横方向へのスワイプができるパララックス型スライダー。文字テキストを半透明で重ねることで、アブストラクトな見た目を実現できます。
See the Pen Responsive Parallax Drag-slider With Transparent Letters by Ruslan Pivovarov (@mrspok407) on CodePen.
06. Clockwerk
時計のようにぐるりと一回転することでコンテンツが切り替わるイメージスライダー。
See the Pen Clockwerk by Chris Droom (@droom) on CodePen.
07. Fullscreen Slice Hero Slider
スライス状に展開するスライダーを使った魅せ方で、下方向に進むと各コンテンツを読み進めることができます。
See the Pen Fullscreen slice hero slider by Robert Borghesi (@dghez) on CodePen.
08.Flickity – Layered Parallax jQuery
レスポンシブ対応のスライダープラグイン Flickity を利用して、レイヤー状に重なったイメージスライダーを作成します。テンプレートとして利用できるベーシックなスタイリングのみとなっています。
See the Pen Flickity – layered parallax, jQuery by David DeSandro (@desandro) on CodePen.
09. Glitched Text
液晶テレビが壊れたようなグリッチエフェクトを、文字テキストに適用するテクニック。
See the Pen Glitched Text (study of The Verge) by Derek Palladino (@derekjp) on CodePen.
10. CSS3 Glitch Animation
疑似要素をうまくスタイリングすることで、マウスホバーに合わせてグリッチエフェクトが適用されます。
See the Pen CSS3 Glitch Animation by Petr Tichy (@ihatetomatoes) on CodePen.
11. Franchise – Animography Text Editor
タイプ入力したアルファベット文字をアニメーション付きで表示していくテキストエディタ。
See the Pen Franchise – Animography Text Editor by kittons (@airnan) on CodePen.
12. Krrak
入力されたアルファベット文字を真っ二つにする、ロゴデザインなどにもオススメのスタイリング術。
See the Pen KRRAK by Kevin Jannis (@kevinjannis) on CodePen.
13. Text Effect – Mystique
グラデーションアニメーションを文字テキストに適用したスタイリングは、ロゴなどデザインのアクセントにも最適。
See the Pen Text Effect – Mystique by Chris Johnson (@jhnsnc) on CodePen.
14. Jurassic Ipsum Generator in JS
ボタンをクリックすると映画ジュラシック・パークの一節を表示してくれる、Lorem Ipsum 文字テキストジェネレーター。
See the Pen Jurassic Ipsum Generator in JS by Matt Smith (@AllThingsSmitty) on CodePen.
15. Change the Layout by CSS
CSSのみでコンテンツのレイアウト変更を行うことができるテクニック。
See the Pen Change the Layout by CSS by Tatsuya Azegami (@42EG4M1) on CodePen.
16. Fixed Background on Mobile Browser. HTML/CSS
モバイル端末にも対応可能な、背景イメージを固定するCSSテクニック。
See the Pen Fixed Background on Mobile Browser. HTML & CSS only. by Joey Hayes (@joeyred) on CodePen.
17. Parallax Background
こちらも上記スニペット同様に、コンテンツがカーテン状に切り替わるスライダーデザイン。
See the Pen Parallax Background by Ravi Dhiman (@ravid7000) on CodePen.
18. Pure CSS Tabs with Indicator
CSS のみでスタイリングできるタブデザインで、滑らかなアニメーションが魅力的な作品のひとつ。
See the Pen Pure CSS Tabs With Indicator by Alex (@woranov) on CodePen.
19. Material Compact Login Animation
マテリアルデザインを参考にしたログイン画面で、アニメーションでより直感的な動きを表現できます。
See the Pen Material Compact Login Animation by Yusuf Bakır (@yusufbkr) on CodePen.
20. Fullscreen Background Video with Mix-Blend-Mode Overlay Text
文字テキストにブレンドモードを利用することで、背景のフルスクリーン動画が透けるテクニック。
See the Pen Fullscreen Background Video with Mix-Blend-Mode Overlay Text by Dudley Storey (@dudleystorey) on CodePen.
21. CSS Hue Rotation with Gradient
色合いを自由に変更できるプロパティ hue-rotateを利用し、背景イメージに鮮やかなグラデーションのアニメーションを追加します。
See the Pen CSS Hue rotation with gradient by Jamie Coulter (@jcoulterdesign) on CodePen.
22. Emblem – Auto Generate Circular Text
入力した文字テキストをクルクルと回転させる、ロゴデザインやローディング画面などにも活用したいテクニック。
See the Pen Emblem – Auto generate circular text by George Hastings (@georgehastings) on CodePen.
23. Animated Gradient SVG Loader
ロゴデザインが左からふわりと表示されるローディングエフェクトで、他にも応用できそうなテクニック。
See the Pen Animated Gradient SVG Loader by Paul Thomas (@motionimaging) on CodePen.
24. Daily UI 016
ボタンクリックすることでダイアログボックスが展開と一緒に背景デザインも変化します。
See the Pen Daily UI 016 by Adam Kuhn (@cobra_winfrey) on CodePen.
25. Rainbow Bordered Button
七色の虹をライン線に利用した、あまり他で見かけないユニークなボタンスタイリング。
See the Pen Rainbow Bordered Button by Stephy (@blindingstars) on CodePen.
26. Button Hover Animation
マテリアルデザインのような波型リップルエフェクトを CSSのみで実現したスタイリングテクニック。
See the Pen Button Hover Animation by Chris Ota (@chrisota) on CodePen.
27. Flat Download Button
フラットスタイルで表現されたダウンロードボタンで、クリックすることで進捗状況をプログレスバーで表示します。
See the Pen Flat Download Button by Dronca Raul (@rauldronca) on CodePen.
28. Button Draw on Hover Mixin
ホバーエフェクトに合わせてライン線がボタンにアニメーション変化する、UX改善にも良さそうなテクニック。
See the Pen Button Draw on Hover Mixin by Thomas Vaeth (@thomasvaeth) on CodePen.
29. Menu Concept (Using Clip)
CSSの新しいプロパティ clipを利用することで、より自由なアニメーションを手軽に実現が期待できるテクニック。
See the Pen Menu Concept (using clip) by Dronca Raul (@rauldronca) on CodePen.
30. Botton Hover Effects
ライン線を利用したホバーエフェクトが充実した、ボタン用スタイリングが5種類揃います。
See the Pen btn hover effects by _jpag (@jpag82) on CodePen.
31. Links / Buttons hover Animations
こちらでもカラフルなライン線がポイントのさまざまなホバーエフェクトをまとめています。
See the Pen Links / Buttons hover animations by Thomas Aufresne (@origine) on CodePen.
32. #1091 – Image with Rotating Title on Hover
他とはちょっと違うホバーエフェクト実装で検討したい、立体的なアニメーションが目を引くテクニック。
See the Pen #1091 – Image with rotating title on hover by LittleSnippets.net (@littlesnippets) on CodePen.
33. CSS-Only SLiding Panels using Transform
画面を二分割したスプリットエフェクトで、マウスホバーでエフェクトを追加することも可能。
See the Pen CSS-only Sliding Panels using transforms by Shaw (@shshaw) on CodePen.
34. #1562 – Button
マウスホバーに合わせてアウトラインを端から表示するアニメーションエフェクト。
See the Pen #1562 – Button by LittleSnippets.net (@littlesnippets) on CodePen.
35. Pure CSS – FIle Icons with Nice Hover Animation
CSSのみでスタイリングされた、ちょっとしたホバーエフェクトが素敵なフォルダ用アイコンを描きます。
See the Pen Pure CSS – File icons with nice hover animation by Aleksandar Čugurović (@mauriceconchis) on CodePen.
36. Background Color Select
表示されたサークルアイコンをクリックすると、背景が同じ色にじわりと変化するエフェクト。
See the Pen Background Color Select by Aaron Taylor (@beanbaag) on CodePen.
37. Random Colour Palette Generator
Spaceバーをクリックするたびに、4色の美しい配色カラーパレットを自動生成してくれます。
See the Pen Random Colour Palette Generator by Ahmed Tarek (@ahmedtarek2134) on CodePen.
38. Weather Forecast
降り止まない雨や雲、鳴り響く雷をCSSのみでスタイリングした、天気予報UIデザイン。
See the Pen Weather Forecast by Mohan Khadka (@khadkamhn) on CodePen.
39. Download Animation SVG
ボタンをクリックすることで完了までの様子を、アニメーションでユーザーに伝えます。
See the Pen Download Animation (SVG) by Nikolay Talanov (@suez) on CodePen.
40. Have Fun with Code!
文字テキストにオリジナル性の高いアニメーションを採用しています。
See the Pen Have Fun With Code! by Chris Gannon (@chrisgannon) on CodePen.
41. Diet Piechart
パイチャートにアニメーションを加えることで、より分かりやすく情報を伝える工夫が。
See the Pen Diet Piechart by Rafael González (@rgg) on CodePen.
42. Animated Clock
アナログな掛け時計の動きを秒針まで表現し、現在の時刻を表示してくれます。
See the Pen Animated Clock by Ophelia Fournier-Laflamme (@opheliafl) on CodePen.
43. React Morph Clock
自由にシェイプの形を変化させる、モーフィング・エフェクトを利用したアナログ時計。
See the Pen React Morph Clock by Siddharth Parmar (@Siddharth11) on CodePen.
44. SVG Counter (CSS Only)
CSS のみでスタイリングされたカウント用タイマーで、ラインのみを使ったユニークな動きが特長です。
See the Pen SVG Counter (CSS Only) by Siddharth Parmar (@Siddharth11) on CodePen.
45. Strobo 😉
文字テキストにマウスホバーすると、ぴかぴかとしたストロボ効果をCSSのみで実現しています。
See the Pen Strobo 😉 by Hornebom (@Hornebom) on CodePen.
46. Soldiers of Fortune
荒野の砂漠を砂けむりを上げながら爆走するトラックバンを描いたデザイン作品。
See the Pen Soldiers of Fortune by Chris Gannon (@chrisgannon) on CodePen.
47.Delivery Truck Animation
画像などは使わずに CSS のみでスタイリングされているトラックのアニメーション。
See the Pen Delivery truck animation by Dau Jakas (@donnervetter) on CodePen.
48. Olympic Rings
熱戦のつづいたオリンピックのロゴデザインを、多彩なアニメーションで表現した作品。
See the Pen Olympic Rings by Steve Gardner (@steveg3003) on CodePen.
49. Sass-Generated Box Shadow Pixel Art!
ピクセルアートで作成された人気キャラクター、実はCSSでスタイリングされています。
See the Pen Sass-Generated Box Shadow Pixel Art! by Una Kravets (@una) on CodePen.
50. Pure CSS minesweeper
往年のパズルゲーム、マインスイーパを CSS のみでスタイリングした作品。あやしい場所に旗フラッグを立てて、すべての爆弾を見つけましょう。
See the Pen Pure CSS minesweeper by Bali Balo (@bali_balo) on CodePen.
