• Top
• Category
• Contact
• About

サイト構築 -CSS

207

sponsorsr

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Related Posts

coliss