Artikel mit Schlagwort

Ich werde einzelne Pens verlinken, während ich die Lektionen bespreche, die ich gelernt habe. Wenn Sie jedoch einen Eindruck vom gesamten Projekt bekommen möchten, schauen Sie sich „60 days of Animation“ auf Undead Institute an. Ich habe dieses Projekt begonnen, um es am 1. August 2020 abzuschließen, passend zur Veröffentlichung eines Buches, das ich über CSS-Animationen, Humor und Zombies geschrieben habe – denn offensichtlich werden Zombies die Welt zerstören, wenn Sie nicht Ihre Webfähigkeiten einsetzen und die Apokalypse stoppen. Nichts bereitet der Horde mehr zu schaffen als ein HTML-Element in Bewegung!

Animationen können eine Website hervorheben. Oder sie können die Benutzererfahrung genauso leicht beeinträchtigen. Bei der Arbeit mit Webanimationen können einige Dinge schiefgehen, wie z. B. das Hinzufügen von Animationen, die keinen Zweck erfüllen, das Festlegen von Dauern, die …

Ich habe neulich an etwas gearbeitet, das einen sichtbaren Timer benötigte. Für diese Art von Timer gab es auf dem Projekt UI-Vorgaben. Die Leute wollten keine Zahlen sehen, die nach unten zählen; es war idealer, zu sehen …

Das Design der Netflix-Browsing-Seite ist seit einigen Jahren ziemlich ähnlich geblieben. Eine Hauptkomponente ist der Vorschau-Slider, mit dem Benutzer durch Inhalte blättern und mit der Maus über Elemente fahren können, um eine Vorschau anzuzeigen.

Ein einzigartiges Merkmal …

Hier ist etwas Lustiges. Wie könnten wir eine Reihe dieser coolen Matroschka-Puppen erstellen, bei denen sie ineinander verschachtelt sind… aber in CSS?

Ich habe diese Idee eine Weile im Kopf herumgespielt. Dann sah ich eine …

Anfang dieses Jahres stieß ich auf diese Demo von Florin Pop, bei der eine Linie entweder über oder unter den Buchstaben einer einzeiligen Überschrift verläuft. Ich fand das eine coole Idee, aber es gab ein paar kleine …

Sie alle kennen das berühmte Pac-Man-Videospiel, oder? Das Spiel macht Spaß und das Erstellen eines animierten Pac-Man-Charakters in HTML und CSS macht genauso viel Spaß! Ich zeige Ihnen, wie Sie einen erstellen können, indem Sie die Kräfte von … nutzen.

Hier ist der Trick: Indem wir den türkischen Buchstaben „ı“ und den Punkt „.“ kombinieren, können wir etwas erstellen, das wie der Buchstabe „i“ aussieht, aber aus zwei separaten Elementen besteht. Dies eröffnet uns einige unterhaltsame Möglichkeiten zum Stylen …

CSS ermöglicht es Ihnen, dynamische Layouts und Schnittstellen im Web zu erstellen, aber als Sprache ist es statisch: Sobald ein Wert festgelegt ist, kann er nicht mehr geändert werden. Die Idee der Zufälligkeit ist vom Tisch. Generierung von Zufallszahlen unter …