CodePen は、ブラウザ上でコーディング、プレビュー確認ができ、ソースコードの共有を行うことができる、世界でも人気のウェブサービスです。
今回は、Codepenで2018年に人気の高かったHTMLスニペットベスト100選「The Most Hearted of 2018」が公開されていたので、その中でも特に印象に残った作品をまとめてご紹介します。あっと驚くようなエフェクトやテクニックを、今後のウェブデザイン制作にいかしてみましょう。
2018年人気だったすごいHTMLスニペットベスト【Codepen編】
CSSのみでスタイリングされたイラストアニメーションで、四季をぞれぞれ表現しています。
See the Pen Animated CSS Seasons by agathaco (@agathaco) on CodePen.
#97 Apple Keyboard
CSSでスタイリングされた、本物そっくりなAppleキーボード。
See the Pen Apple Keyboard by Jon Kantner (@jkantner) on CodePen.
#93 Mouse-Based-Parallax Sunset
マウスカーソルの動きに合わせて、イラストの奥行き感が変換するパララックスエフェクト。
See the Pen Mouse-Based-Parallax Sunset by Adam Quinlan (@quinlo) on CodePen.
#90 Types of Coffee | Pure CSS
コーヒーの種類をまとめたリストは、CSSのみでスタイリングされています。
See the Pen Types of Coffee | Pure CSS by Julie Park (@juliepark) on CodePen.
#87 Thank You.
マウスの動きにあわせて、隠れていた数字がキラキラと表示できるエフェクト。
See the Pen Thank You. by Liam Egan (@shubniggurath) on CodePen.
#85 Apple Watch Scroll Border | @keyframers 1.20.0
Apple公式ページで使われていた、スクロールに合わせて拡大表示される、コンテンツボックスのスタイリングが魅力的。
See the Pen Apple Watch Scroll Border | @keyframers 1.20.0 by @keyframers (@keyframers) on CodePen.
#82 Hamburger Icons Animations
ハンバーガーメニュー用アイコンのさまざまなマイクロインタラクションをまとめたコレクション。
See the Pen Hamburger Icons Animations by Ahmad Emran (@ahmadbassamemran) on CodePen.
#80 Perlin Noise
絶え間なく形を変える、カラフルなシェイプをカスタマイズ表示できるので、ウェブサイトのヘッダーイメージなどにも最適。
See the Pen Perlin Noise by Victor Vergara (@vcomics) on CodePen.
#78 STARDUST
ロケット花火が縦横無尽に飛び散るユニークなエフェクト。
See the Pen STARDUST by Marco Dell’Anna (@plasm) on CodePen.
UIデザインで利用できるマイクロインタラクションをひとまとめで解説したコレクション。
See the Pen UX in Motion | Animation by Praveen Bisht (@prvnbist) on CodePen.
#72 Text Animation?
CSSの@keyframeを活用したテキストアニメーション。
See the Pen Text Animation? by Short (@short) on CodePen.
#69 Interactive SVG mask w/full screen image
マウスカーソル部分のみがカラー表示され、マウス長押しでフルスクリーン写真が。
See the Pen Interactive SVG mask w/full screen image by Craig Roblewsky (@PointC) on CodePen.
#65 Gradient Shapes
CSSプロパティ linear-gradientを活用した、さまざまなシェイプの作り方をまとめています。
See the Pen Gradient Shapes by yuanchuan (@yuanchuan) on CodePen.
#59 Click Me
サークル円がマウスホバーに合わせて展開するボタンアニメーション。
See the Pen Click Me by Andreas Storm (@andreasstorm) on CodePen.
#58 CSS / SVG Blobby Background
背景をぼんやりと形を変えながら浮遊するアニメーションをCSS/SVGで表現しています。
See the Pen CSS / SVG Blobby Background by Cassie Evans (@cassie-codes) on CodePen.
#55 Stylized Buttons
ラインアニメーションを利用した、エレガントで高級感のあるCSSボタンのスタイリング。
See the Pen Stylized Buttons by Paraskevas Ntinakis (@perry_nt) on CodePen.
#53 How Many Steps Does It Take To Get From Me To You?
選択した任意の2色の間を、自由な色数でグラデーション表示する、配色に便利なツール。
See the Pen How Many Steps Does It Take To Get From Me To You? by Jase (@jasesmith) on CodePen.
#51 Low poly animals
カラフルなポリゴンスタイルを利用し、あらゆる動物のシルエットをアニメーション表示しています。
See the Pen Low poly animals by Mikael Ainalem (@ainalem) on CodePen.
遠近感のあるカードUIデザインで、立体的なホバーエフェクトも魅力的。
See the Pen Isometric Card Grid by Jon Kantner (@jkantner) on CodePen.
#40 Bubbly Button
ボタンをクリックすると、バブル状のアニメーションが飛び出すエフェクト。
See the Pen Bubbly Button by Nour Saud (@nourabusoud) on CodePen.
マウスカーソルの動きに合わせ、サイケデリックなウェーブ波が変化し、カスタマイズも可能。
See the Pen Psychedelic waves by Karim Maaloul (@Yakudoo) on CodePen.
ランダムで表示される美しいグラデーションカラーを、6色のHEXカラーコードで表示してくれます。
See the Pen “Random” color harmonies by David A. (@meodai) on CodePen.
CSSのｍにでスタイリングされた、エレガントな時計のアニメーションが素敵な作品。
See the Pen Pure CSS watch animation by Grzegorz Witczak (@Wujek_Greg) on CodePen.
マウススクロールするとグラデーションカラーがなめらかに変化するCSSテクニック。
See the Pen Scrolling Gradient by Mike (@MadeByMike) on CodePen.
#27 Fashion concept
背景に歪みエフェクトを実装したインタラクティブなスライダー。
See the Pen Fashion concept by jesper landberg (@ReGGae) on CodePen.
#25 Jelly
数字キー「1,2,3」をつかって、重量を自由自在に操ることができ、スローモーションでもなめらかな動きを演出します。
See the Pen Jelly by dissimulate (@dissimulate) on CodePen.
サークル円でマスキングされたイメージスライダー。
See the Pen Masked Circle Slider by Fabio Ottaviani (@supah) on CodePen.
#16 Pure CSS Toggle Buttons | ON-OFF Switches
トグルスイッチのさまざまなCSSエフェクトをまとめたコレクション。
See the Pen Pure CSS Toggle Buttons | ON-OFF Switches by Himalaya Singh (@himalayasingh) on CodePen.
#13 Star Wars Imperial Army’s Product Slider!
レスポンシブにも対応した、奥行き感たっぷりなイメージスライダー。
See the Pen Star Wars Imperial Army’s Product Slider! by Muhammed Erdem (@JavaScriptJunkie) on CodePen.
CSSのみでスタイリングされたイラスト４種盛り。
See the Pen Pure CSS 4 Designers by Julia Muzafarova (@miocene) on CodePen.
スライド表示に合わせて歪み（英: Distortion）エフェクトを利用したイメージスライダー。
See the Pen WebGL Distortion Slider by Ash Thornton (@ashthornton) on CodePen.
#10 Isometric eCommerce CSS Grid
CSS Grid プロパティを利用した、立体感たっぷりな商品ページで、レスポンシブ対応となっています。
See the Pen Isometric eCommerce CSS Grid by Andy Barefoot (@andybarefoot) on CodePen.
ハンバーガーメニュー用アイコンのユニークなマイクロインタラクション8種類。
See the Pen Flippin’ burgers by Mikael Ainalem (@ainalem) on CodePen.
#8 Responsive Blog Card Slider
ドロップシャドウをつかった奥行き感のあるイメージスライダー。
See the Pen Responsive Blog Card Slider by Muhammed Erdem (@JavaScriptJunkie) on CodePen.
クレジットカード決済をよりスムーズに行うUIアニメーション。
See the Pen Credit Card Payment Form by Adam Quinlan (@quinlo) on CodePen.
#6 Tower Blocks
土台とぴったり重なるようにSpaceキーを押しながら、回数を競うミニゲーム。
See the Pen Tower Blocks by Steve Gardner (@ste-vg) on CodePen.
#5 The Mine: No JS, CSS only adventure game
CSSのみで設計されたアドベンチャーゲーム。矢印キーをつかってステージクリアを目指します。
See the Pen The Mine: No JS, CSS only adventure game by Jamie Coulter (@jcoulterdesign) on CodePen.
#4 Solar System Explorer in CSS only
太陽系の仕組みをインタラクティブに説明したコンセプトで、CSSのみで作成されたとは思えないレベル。
See the Pen Solar System Explorer in CSS only by Jamie Coulter (@jcoulterdesign) on CodePen.
入力してほしい項目を、ニョロニョロとした蛇のようなアニメーションで強調する小技テクニック。
See the Pen Snake highlight by Mikael Ainalem (@ainalem) on CodePen.
メルマガの定期購読を解除、キャンセルによって表情が変わる仕組み。
See the Pen Animated Unsubscribe Page by agathaco (@agathaco) on CodePen.
CSSだけでスタイリングされたとは思えないほど複雑なイラストアニメーションで、背景までじっくり作り込まれています。
See the Pen Pure CSS Moustached Nanny by Julia Muzafarova (@miocene) on CodePen.
その他のHTMLスニペット関連まとめ
この他にも、当サイトではカテゴリ別にHTMLスニペットをまとめて紹介しています。コピー&ペーストで利用できるものも多いので、ぜひサイト制作に取り入れてみてはいかがでしょう。
思わず押したくなるボタンに関するスタイリングをまとめています。
Webサイトのヘッダーやフッターを、より魅力的にするときに参考にしたい、そんなHTML/CSSスニペットをまとめています。
モバイルサイトにも対応しやすさで人気で、定番となっている「カード型」レイアウトのユニークなスニペットはこちら。
ウェブサイトにとって重要なナビゲーションメニュー、100種類のスタイルを揃えています。
文字を利用したテキストエフェクトは、ユーザーの視線を釘付けにするデザイン要素と言えるでしょう。
より多くの情報をまとめて表示できるスライダーは、さまざまなアニメーションを加えることで、より魅力的でオリジナルに。
より操作性、ユーザビリティを改善できるUIデザインの小技テクニックをまとめています。
もっと他の作品をお探しのひとは、HTMLスニペットページを参考にしてみましょう。
&Nbsp;
