画面の幅/高さ (CSS のみ)

Temani Afif は通常、CSS デモとともにこのリストに表示されます。今回は、印象的なことのおかげで、カスタム プロパティを at-property および三角関数と組み合わせることで、画面の高さと幅を表示できるようになりました。JavaScript は一切使用しません!

WebGL インタラクティブ BLOB

これらのかわいい塊の上にマウスを置くと、反応して動いているのがわかります (すでに動いている以上に)。これは、Ksenia Kondrashova による WebGL を使用した楽しいデモで、Web サイトのインタラクティブな (そして気を散らす) 背景として使用できます。

映画の名言ハック

映画の引用やペースの速い絞首刑執行人ゲームが好きなら、Alexandre Vacassin によるこのデモが最適です。文字をクリックして映画の引用を推測します (キーボード オプションはありません)。ただし注意してください。タスクを完了するには 1 分かかり、失敗するたびに 5 秒減算されます。

リング迷路

もう一つのゲーム、今回は ZIM によるものです。 ThreeJS で作成されたこの立体迷路はリング状になっています。 CodePen チャレンジ用にコード化されたこの楽しいデモでは、ボールが迷路の周りでマウスを追いかけます (時には難しい場合もあります)。

ナビゲーションホバー効果

Veronica Hristova がこの対話型ナビゲーションをコーディングしました。 ::before および ::after 擬似要素を使用して、データ属性で指定されたテキストを複製し、ホバー時にカラフルな 3D 効果を生成します。シンプルでかっこいい。

Three.Js ブロビーアップル

これは、Ksenia Kondrashova による別のデモです。回転すると流動的に動くこのリンゴの周りを回転させ、形を失ったり、新しい形を取り戻したりします。これは ThreeJS を使った素晴らしい実験です。

請求書分割アプリ

Dribbble (コードペンの説明にリンク) で見つかったデザインに触発され、Dilum Sanjaya は React と Tailwind を使用してこの請求書スプリッターのライブ バージョンをコーディングしました。見た目もすっきりしています。

スズメ

最近このシリーズには CSS アートがほとんどありませんでしたが、Alina によるこの美しいスズメの絵は注目すべき復活です。 Behance の図面 (コード内でリンクされている) に基づいており、コードの単純さは図面のきれいさと対照的です。素晴らしい仕事です。

IK ラグーンの生き物

画面上でマウスを動かして、この生き物/塊がどのように追従するかを確認してください。最初は上部に取り付けられていたこのワーム (? ヒル? 生き物!) は、移動するにつれて切り離されて成長します。リアム・イーガンがこのデモを開発しました。

3D ジェンガ — CSS

Josetxu によってプログラムされた 3D CSS ゲーム。ジェンガは完全には再生できませんが、中央のピースをクリックするとアニメーションして動きます (その後、「逆ジェンガ」でそれらを内側に押し戻すことができます)。

これらのデモが気に入ったら、2024 年 6 月の 10 個のクールな CodePen デモを含む前の記事をチェックしてください!