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

PR

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

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

PR

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




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

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

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

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

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

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

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

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

Rainbow Blender
Javascriptのみで制御しているレインボーブレンダー。

Background Branches

CSS Eggs

コメント