Bildschirmbreite/-höhe (nur CSS)

Temani Afif erscheint normalerweise in dieser Liste mit CSS-Demos. Diesmal wegen etwas Beeindruckendem: Durch die Kombination benutzerdefinierter Eigenschaften mit at-property- und trigonometrischen Funktionen kann er die Bildschirmhöhe und -breite anzeigen … überhaupt kein JavaScript!

Interaktive WebGL-Blobs

Fahren Sie mit der Maus über diese niedlichen Kleckse, um zu sehen, wie sie reagieren und sich bewegen (noch mehr, als sie es ohnehin schon tun). Dies ist eine unterhaltsame Demo mit WebGL von Ksenia Kondrashova, die als interaktiver (und ablenkender) Hintergrund auf einer Website verwendet werden könnte.

Filmzitat-Hack

Wenn Sie Filmzitate und rasante Galgenmännchenspiele mögen, ist diese Demo von Alexandre Vacassin genau das Richtige für Sie: Erraten Sie das Filmzitat, indem Sie auf die Buchstaben klicken (keine Tastaturoption, afaik). Aber seien Sie vorsichtig: Sie haben eine Minute Zeit, um die Aufgabe abzuschließen, und für jeden fehlgeschlagenen Versuch werden 5 Sekunden abgezogen.

Ringlabyrinth

Ein weiteres Spiel, dieses Mal von ZIM. Dieses mit ThreeJS erstellte dreidimensionale Labyrinth hat die Form eines Rings. In dieser unterhaltsamen Demo, die für eine CodePen-Herausforderung codiert wurde, folgt der Ball der Maus durch das Labyrinth (das kann manchmal eine Herausforderung sein).

Navigations-Hover-Effekt

Veronica Hristova hat diese interaktive Navigation codiert. Es verwendet die Pseudoelemente ::before und ::after, um den in einem Datenattribut angegebenen Text zu duplizieren und beim Schweben einen farbenfrohen 3D-Effekt zu erzeugen. Einfach und cool.

Three.Js Blobby Apple

Dies ist eine weitere Demo von Ksenia Kondrashova. Drehen Sie sich um diesen Apfel, der sich beim Drehen fließend bewegt, seine Form verliert und wieder eine neue annimmt – ein schönes Experiment mit ThreeJS.

Bill Splitter-App

Inspiriert von einem Design auf Dribbble (verlinkt in der Codepen-Beschreibung) hat Dilum Sanjaya eine Live-Version dieses Rechnungssplitters mit React und Tailwind codiert. Es sieht ordentlich aus.

Spatz

In letzter Zeit gab es in dieser Serie nur wenig CSS-Kunst, und diese wunderschöne Spatzenzeichnung von Alina ist ein bemerkenswertes Comeback. Basierend auf einer Zeichnung von Behance (im Code verlinkt) steht die Einfachheit des Codes im Kontrast zur Sauberkeit der Zeichnung. Erstaunliche Arbeit.

Kreatur aus der IK-Lagune

Bewegen Sie die Maus über den Bildschirm und sehen Sie, wie diese Kreatur/dieser Klecks ihr folgt. Ursprünglich an der Oberseite befestigt, löst sich dieser Wurm (? Blutegel? Kreatur!) ab und wächst, während er sich bewegt. Liam Egan hat diese Demo entwickelt.

3D-Jenga – CSS

Ein von Josetxu programmiertes 3D-CSS-Spiel. Während der Jenga nicht vollständig spielbar ist, können Sie auf die mittleren Teile klicken, die animiert und bewegt werden (Sie können sie dann im „umgekehrten Jenga“ wieder hineinschieben).

Wenn Ihnen diese Demos gefallen, schauen Sie sich den vorherigen Artikel mit 10 coolen CodePen-Demos vom Juni 2024 an!