CSSの参考になるアイデアがいっぱい!2018年スタイルシートを使ったテクニックのまとめ

2018年も、CSSの進化がすごかったです!
CSSを使ったアニメーションはより快適なものが増え、JavaScriptを使用しないと実装できなかったものがCSSだけで実装できるようになったり、vwやvhやcalc()などを効果的に使用したり、レイアウト、ナビゲーション、カードなどもより洗練されて実装されています。

さまざまな素晴らしいアイデアが取り入れられたスタイルシートを使ったテクニックを紹介します。

2018年総まとめ スタイルシートを使ったテクニック


各デモはCSSのみで実装されたものもありますが、JavaScript併用もあります。
動作を見るには、「Run Pen」をクリックするか、クリック後に右上「Edit on Codepen」をクリックしてください。

まずは、ダイナミックなアニメーションが楽しいソーラーシステム。動きが斬新で、スライドなどに応用してもよさそうです。ベストビューは、Operaです。

See the Pen Solar System Explorer in CSS only by Jamie Coulter (@jcoulterdesign) on CodePen.

clip-pathプロパティを使用して、斜めにデザインされたヘッダ。

See the Pen Header for landing page using clip path. by Gerardo Valencia (@grardovr) on CodePen.

スクロールすると背景のグラデーションが変化します。

See the Pen Pure CSS3 Gradient Background Animation by Manuel Pinto (@P1N2O) on CodePen.

右上のボタンをクリックすると、レイアウトが変化します。

See the Pen Type Festival - GSAP transitions by Karlo Videk (@karlovidek) on CodePen.

スクロールすると中央の要素が爆発するエフェクト。

See the Pen Headline explosion by Tobias Reich (@electerious) on CodePen.

スクロールするとヘッダ画像がズームします。ここ1,2年でこのエフェクトをたくさん見かけました。

See the Pen Zoom Hero Image On Scroll by Jason D'Oyley (@jdfd) on CodePen.

CSSのみで実装されたマスクのエフェクト。ベストビューはIEです。

See the Pen The Future Of Possible - DJI by Helkyle (@HelKyle) on CodePen.

キラキラしたが楽しいテキストのアニメーション。はじけ散る感じがきれいです。

See the Pen glow sparks text by Julius Horn (@Supercopra) on CodePen.

ラジオボタンを使用したタブ型コンテンツのナビゲーション。

磁石のように近づいてくるマグネットリンクのエフェクト。個人的にはこれが今年一番印象的でした。

See the Pen Magnetic link UI effect by Ryan Yu (@iamryanyu) on CodePen.

よく見かける水平型のナビゲーション。Home, Aboutも気持ちいいアニメーションですが、その先がもっと気持ちいいです。

See the Pen CodePen Challenge: Menu by Adam Kuhn (@cobra_winfrey) on CodePen.

ページ内の見出しをサイドバーに掲載し、追従させるナビゲーション。

See the Pen Sticky, Smooth, Active Nav by Chris Coyier (@chriscoyier) on CodePen.

アクティブのタブにハイライトがアニメーションで移動します。

See the Pen Fluid tab active state by Aaron Iker (@aaroniker) on CodePen.

サイドメニューが表示されるハンバーガーメニュー。表示する際の動きが快適です。

See the Pen Side Menu Animation by Jordan (@flyingcar) on CodePen.

カードが3Dにフリップします。ボタンがあるおかげで、さらに立体的に見えています。

See the Pen Card Flip by Charles Ojukwu (@cojdev) on CodePen.

こちらもフリップ。動きを一つ加えるだけで、操作の気持ちよさも変わります。

See the Pen Pure CSS Flip Card by Aron (@Aoyue) on CodePen.

カードを使った新しいスライダー。

See the Pen Responsive News Card Slider by Muhammed Erdem (@JavaScriptJunkie) on CodePen.

ふわふわ浮いている感が操作を楽しくします。

See the Pen Tricky CSS hover by Piotr Galor (@pgalor) on CodePen.

ソーシャルメディアのボタン。タイルがふわりと浮かぶのは他にも応用できそうです。

See the Pen 3D - CSS Social Tiles by Stockin (@Stockin) on CodePen.

Flexboxで実装された、カードを使ったアコーディオン。

See the Pen Expanding flex cards by Zed Dash (@z-) on CodePen.

これも一種のアコーディオンでしょうか。伸縮もいろいろな可能性がありますね。

2.5DのエフェクトをCSSで実装。

See the Pen 2.5D by Matt Drew (@highplainsdrifter) on CodePen.

この動きは想定外でした。

See the Pen Tariff Cards by Andreas Storm (@andreasstorm) on CodePen.

この動きも想定外です! 折りたたみ式のモーダルウインドウ。

See the Pen Folding Modal by Blake Bowen (@osublake) on CodePen.

CSS Gridを使用したアイソメトリックのレイアウト。来年あたりから増えてくるのでしょうか。

See the Pen Isometric eCommerce CSS Grid by Andy Barefoot (@andybarefoot) on CodePen.

CSS Gridを使用すると、今までにはなかったレイアウトも登場しそうです。

See the Pen Stan Lee - In Memoriam (CSS Grid) by Brad Bales (@brad4au57) on CodePen.

中央のGridアイテムのサイズを変更すると、すべてが同じにコピーされます。

See the Pen Using grids to create copies by Roman Komarov (@kizu) on CodePen.

CSS Gridで実装されたマークシートの回答用紙。マークもできます。

See the Pen Scantron Answer Sheet (CSS grid demo) by Jon Kantner (@jkantner) on CodePen.

CSSだけで比率をスケーリングしたレイアウト。

フォームの入力時に、ラベルをぽんっと弾くように動かします。

See the Pen Elastic Input [Google Chrome] by Andreas Storm (@andreasstorm) on CodePen.

フォームの入力値をチェックする際に、ちょっとしたアニメーションを加えます。

See the Pen Elastic Validation [Google Chrome] by Andreas Storm (@andreasstorm) on CodePen.

フォームの入力時に、枠線をハイライトさせます。From middle, Circleとかいいですね。

See the Pen Animation Border by Itzik Pop (@chaofix) on CodePen.

ログインだけのページなら、こんなレイアウトも有りですね。

See the Pen Login Form by Tony Banik (@banik) on CodePen.

ラジオボタンをチェックする際に、ぷるるんと動かします。

See the Pen Wobble radiobuttons by Tamino Martinius (@Zaku) on CodePen.

CSSのみで実装されたアクセシブルなラベルを浮かせるテクニック。

See the Pen CSS-Only Accessible Floating Labels by Pablo Eugenio Lujambio Martinez (@elujambio) on CodePen.

スクロールに連動して、背景のグラデーションを変化させます。

See the Pen Scrolling Gradient by Mike (@MadeByMike) on CodePen.

スクロールに連動して、全体をプログレスバーで囲みます。

See the Pen Wraparound Progress Bar by Thomas Vaeth (@thomasvaeth) on CodePen.

水平スクロールの気持ちいいエフェクト。全体表示で見るのがオススメです。

See the Pen Horizontal scroll, drag, transition, bounce by jesper landberg (@ReGGae) on CodePen.

CSSのみで実装されたパララックス。

See the Pen CSS-Only Parallax Effect by Yago Estévez (@yagoestevez) on CodePen.

こういうは思わず、見入ってしまいます。

See the Pen The goddess is coming by Comehope (@comehope) on CodePen.

手前から奥に回転する動きは、珍しいですね。

See the Pen Helix CSS Loader by Jerry Low (@jerrylow) on CodePen.

パックマンにインスパイアされたページネーション。離れている方がいい動きです。

See the Pen Pacman pagination by Mikael Ainalem (@ainalem) on CodePen.

ぱたっと開くソーシャルメディアのシェアボタン。

See the Pen Share button by Veronica (@veronicadev) on CodePen.

スライド型のソーシャルメディアのシェアボタン。

See the Pen Social share button by Yancy Min (@yancy) on CodePen.

パースペクティブを使った面白いボタン。

See the Pen Perspective button hover effect by Comehope (@comehope) on CodePen.

ゴミ箱のかわいいモーションを与えたアニメーション。

See the Pen Delete Button With Micro-Interactions by Himalaya Singh (@himalayasingh) on CodePen.

脈打つような動きのボタン。この動きよく見かけます。

See the Pen CSS Pulsing Button by Sasha (@sashatran) on CodePen.

CSSのみで実装された波紋のライプルエフェクト。

See the Pen Versatile CSS-Only Ripple Effect by Jessie Proffitt (@jproffitt71) on CodePen.

消え去る際にさまざまなアニメーションを適用したボタン。

See the Pen Buttons falling apart by Mikael Ainalem (@ainalem) on CodePen.

付箋のように少しだけ浮かんで見えます。

See the Pen Lifted Paper Strips (Hover Effect) by Bastian Andre (@BastianAndre) on CodePen.

リンクの下線がうねうねアニメーションします。

See the Pen Link Effectz - Squiggle by Geoff Graham (@geoffgraham) on CodePen.

del要素とins要素の手書き風にデザインされたエフェクト。

See the Pen A Badly Written Answer - <del&rt; & by Leena Lavanya (@leenalavanya) on CodePen.

このエフェクトは一時期、流行りましたね。

複数行を看板のように重ねたエフェクト。

UX用のアニメーションがまとめられています。

See the Pen UX in Motion | Animation by Praveen Bisht (@prvnbist) on CodePen.

tableタグを使ったコードチャレンジで、まさかこうくるとは!

線が形状を変えて、モナリザを形成します。

CSSで実装されたロウソク。

See the Pen CSS Candle Flame Animation by Mamun Khandaker (@kh-mamun) on CodePen.

楽しげにダンスするアニメーション。最初見た時、ずっと見てしまいました。

See the Pen Pure CSS The Carlton dance by Grzegorz Witczak (@Wujek_Greg) on CodePen.

sponsors

top of page

©2019 coliss