CodePen|HTML/CSSでできる参考にしたいデザインまとめ

IT
スポンサーリンク

ウェブデザイン、アニメーションで差がつくテクニックをつかった、コピー&ペーストで利用できる HTML/CSS コードを、定期的にまとめてご紹介しています。CSSのみでのアニメーションから、JavaScriptを使用したアニメーション、普段使いしやすい小技テクニック、現在利用するデザイナーが増えているCSS Gridの可能性を探る実践向けスニペットまで、今後のウェブデザインで参考にしたい作品を中心に紹介します。。

「Run Pen」をタップすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をタップしましょう。これらのコードを利用することで、他とは一味違うユニークなウェブサイトを制作してみましょう。

スポンサーリンク

コピペできるスニペットのまとめ




Revolved and lofted table
赤い絨毯に置かれたテーブルの下の影が幻想的に動きます。オークションなどで使えそう。

Have you ever been lonely?
機械人形が自動的に動き続けます。以前同じものがCodePenに挙げられていました。

#Codevember – 1 – Infinity
鉛筆が回転し、鉛筆のおしりの消しゴムでどんどん消していく。

#Codevember 02 – Time
時刻を刻んでいます。一番外枠が秒、次が分、次が時ですね。

Candles (Pure CSS Animation)
背の高いろうそくが背の低いろうそくの火を消して、背の低いろうそくは頑張って火を付け直します。

Droppy woppy input
キーボードで入力した値が上から次々と降り注ぎます。

#codevember – 01 – Uroboros
3Dの蛇が画面上でうずくまっており、少しづつ全容が見れるようになっています。

Sliding Cards with Matrix Rain !
画面上の窓からマトリックスの雨が降り注ぎます。