2018年人気だったすごいHTMLスニペットベスト100選【Codepen編】

CodePen は、ブラウザ上でコーディング、プレビュー確認ができ、ソースコードの共有を行うことができる、世界でも人気のウェブサービスです。

今回は、Codepenで2018年に人気の高かったHTMLスニペットベスト100選「The Most Hearted of 2018」が公開されていたので、その中でも特に印象に残った作品をまとめてご紹介します。あっと驚くようなエフェクトやテクニックを、今後のウェブデザイン制作にいかしてみましょう。

2018年人気だったすごいHTMLスニペットベスト【Codepen編】

#99 Animated CSS Seasons

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.

#76 UX in Motion | Animation

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.

#50 Isometric Card Grid

遠近感のあるカード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.

#35 Psychedelic waves

マウスカーソルの動きに合わせ、サイケデリックなウェーブ波が変化し、カスタマイズも可能。

See the Pen Psychedelic waves by Karim Maaloul (@Yakudoo) on CodePen.

#34 “Random” color harmonies

ランダムで表示される美しいグラデーションカラーを、6色のHEXカラーコードで表示してくれます。

See the Pen “Random” color harmonies by David A. (@meodai) on CodePen.

#31 Pure CSS watch animation

CSSのｍにでスタイリングされた、エレガントな時計のアニメーションが素敵な作品。

See the Pen Pure CSS watch animation by Grzegorz Witczak (@Wujek_Greg) on CodePen.

#29 Scrolling Gradient

マウススクロールするとグラデーションカラーがなめらかに変化する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.

#18 Masked Circle Slider

サークル円でマスキングされたイメージスライダー。

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.

#12 Pure CSS 4 Designers

CSSのみでスタイリングされたイラスト４種盛り。

See the Pen Pure CSS 4 Designers by Julia Muzafarova (@miocene) on CodePen.

#11 WebGL Distortion Slider

スライド表示に合わせて歪み（英: 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.

#9 Flippin’ burgers

ハンバーガーメニュー用アイコンのユニークなマイクロインタラクション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.

#7　Credit Card Payment Form

クレジットカード決済をよりスムーズに行う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.

#3 Snake highlight

入力してほしい項目を、ニョロニョロとした蛇のようなアニメーションで強調する小技テクニック。

See the Pen Snake highlight by Mikael Ainalem (@ainalem) on CodePen.

#2 Animated Unsubscribe Page

メルマガの定期購読を解除、キャンセルによって表情が変わる仕組み。

See the Pen Animated Unsubscribe Page by agathaco (@agathaco) on CodePen.

#1 Pure CSS Moustached Nanny

CSSだけでスタイリングされたとは思えないほど複雑なイラストアニメーションで、背景までじっくり作り込まれています。

See the Pen Pure CSS Moustached Nanny by Julia Muzafarova (@miocene) on CodePen.

その他のHTMLスニペット関連まとめ

この他にも、当サイトではカテゴリ別にHTMLスニペットをまとめて紹介しています。コピー&ペーストで利用できるものも多いので、ぜひサイト制作に取り入れてみてはいかがでしょう。

思わず押したくなるボタンに関するスタイリングをまとめています。

Webサイトのヘッダーやフッターを、より魅力的にするときに参考にしたい、そんなHTML/CSSスニペットをまとめています。

モバイルサイトにも対応しやすさで人気で、定番となっている「カード型」レイアウトのユニークなスニペットはこちら。

ウェブサイトにとって重要なナビゲーションメニュー、100種類のスタイルを揃えています。

文字を利用したテキストエフェクトは、ユーザーの視線を釘付けにするデザイン要素と言えるでしょう。

より多くの情報をまとめて表示できるスライダーは、さまざまなアニメーションを加えることで、より魅力的でオリジナルに。

より操作性、ユーザビリティを改善できるUIデザインの小技テクニックをまとめています。

もっと他の作品をお探しのひとは、HTMLスニペットページを参考にしてみましょう。

&Nbsp;

参照元リンク : Top Pens of 2018 on CodePen – CodePen