CSSの参考になるアイデアがいっぱい！2018年スタイルシートを使ったテクニックのまとめ
Post on:2018年12月13日
sponsors
2018年も、CSSの進化がすごかったです！
CSSを使ったアニメーションはより快適なものが増え、JavaScriptを使用しないと実装できなかったものがCSSだけで実装できるようになったり、vwやvhやcalc()などを効果的に使用したり、レイアウト、ナビゲーション、カードなどもより洗練されて実装されています。
さまざまな素晴らしいアイデアが取り入れられたスタイルシートを使ったテクニックを紹介します。
各デモは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 Scooped Selector | CSS-only cut-out tab navigation | @keyframers 1.16.0 by @keyframers (@keyframers) 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 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.
これも一種のアコーディオンでしょうか。伸縮もいろいろな可能性がありますね。
See the Pen ☑️ Transform Toggles, will-change ☑️ by Shaw (@shshaw) 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 CSS-only Responsive Image Grid (with ratio scaling) by Raymon Schouwenaar (@rsschouwenaar) on CodePen.
フォームの入力時に、ラベルをぽんっと弾くように動かします。
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.
このエフェクトは一時期、流行りましたね。
See the Pen #CodePenChallenge - del & ins - demotivational quotes by Halida Astatin (@halidaa) on CodePen.
複数行を看板のように重ねたエフェクト。
See the Pen Multiline padded text: experiments by Tim (@tfoh) on CodePen.
UX用のアニメーションがまとめられています。
See the Pen UX in Motion | Animation by Praveen Bisht (@prvnbist) on CodePen.
tableタグを使ったコードチャレンジで、まさかこうくるとは！
See the Pen Pure CSS <table&rt; flip toggle! 😉🎉 #CodePenChallenge by Jhey (@jh3y) on CodePen.
線が形状を変えて、モナリザを形成します。
See the Pen Line Lisa (based on low-sugar-eye-candy gif) by Nikita Dubko (@dark_mefody) on CodePen.
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
