Direkt zum Inhalt springen
CSS-Tricks
  • Artikel
  • Notizen
  • Links
  • Anleitungen
  • Almanach
  • Zufall
Suche
Artikel von

Temani Afif

CSS Challenges — CSS Generators — CSS Tip — CSS Pattern — CSS Loaders — CSS Shape

@ChallengesCss · support.temani-afif.com

Direkter Link zum Artikel Fancy Image Decorations: Single Element Magic
clip-path conic gradients hover images mask multiple backgrounds

Fancy Image Decorations: Single Element Magic

Wie der Titel schon sagt, werden wir Bilder dekorieren! Es gibt eine Menge anderer Artikel, die darüber sprechen, aber was wir hier behandeln, ist ganz anders, weil es eher eine Herausforderung ist. Die Herausforderung? …

28. Okt. 2022
Direkter Link zum Artikel So erstellst du wellenförmige Formen & Muster in CSS
Maske Mehrere Hintergründe Radial-Verlauf

So erstellst du wellenförmige Formen & Muster in CSS

Die Welle ist wahrscheinlich eine der schwierigsten Formen, die man in CSS erstellen kann. Wir versuchen immer, sie mit Eigenschaften wie border-radius und vielen magischen Zahlen zu approximieren, bis wir etwas haben, das irgendwie nahe kommt. Und das ist, bevor ...

29. Mär 2024
Direkter Link zum Artikel: Wie ich ein reines CSS-Puzzlespiel erstellt habe
Checkbox-Hack Spiel Grid Maske Radial-Gradient

Wie ich ein reines CSS-Puzzlespiel erstellt habe

Vor kurzem habe ich die Freude am Erstellen von reinen CSS-Spielen entdeckt. Es ist immer wieder faszinierend, wie HTML und CSS in der Lage sind, die Logik eines ganzen Online-Spiels zu bewältigen, also musste ich es ausprobieren! Solche Spiele basieren normalerweise auf dem alten …

9. Sep. 2022
Direkter Link zum Artikel CSS Grid und benutzerdefinierte Formen, Teil 2
clip-path css shapes grid hover mask

CSS Grid und benutzerdefinierte Formen, Teil 2

Nun, als wir uns das letzte Mal getroffen haben, verwendeten wir CSS Grid und kombinierten es mit CSS clip-path und mask Techniken, um Grids mit schicken Formen zu erstellen.

Hier ist nur eines der fantastischen Grids, die wir zusammen erstellt haben:...

11. Nov. 2022
Direkter Link zum Artikel CSS Grid und benutzerdefinierte Formen, Teil 1
clip-path css shapes grid implicit grid mask

CSS Grid und benutzerdefinierte Formen, Teil 1

In einem früheren Artikel habe ich die Fähigkeit von CSS Grid untersucht, komplexe Layouts mit seinen Auto-Placement-Fähigkeiten zu erstellen. Ich ging einen Schritt weiter in einem anderen Artikel, der einen Zoom-Hover-Effekt zu Bildern in einem Grid-Layout hinzufügte ...

11. Nov. 2022
Direkter Link zum Artikel Zooming Images in a Grid Layout
grid hover implicit grid

Zooming Images in a Grid Layout

Das Erstellen eines Bilderraster ist dank CSS Grid einfach. Aber das Gitter dazu zu bringen, schicke Dinge zu tun, *nachdem* die Bilder platziert wurden, kann schwierig sein.

Sagen wir, Sie möchten einen schicken Hover-Effekt hinzufügen zu ...

8. Aug. 2022
Direkter Link zum Artikel Exploring CSS Grid’s Implicit Grid and Auto-Placement Powers
grid grid-auto-flow grid-template-columns grid-template-rows implicit grid

Exploring CSS Grid’s Implicit Grid and Auto-Placement Powers

Bei der Arbeit mit CSS Grid ist das Erste, was zu tun ist, display: grid auf das Element anzuwenden, das zu einem Grid-Container werden soll. Dann definieren wir das Grid explizit durch eine Kombination von grid-template-columns, grid-template-rows...

8. Aug. 2022
Direkter Link zum Artikel Single Element Loaders: Going 3D!
3d clip-path gradients loader mask

Single Element Loaders: Going 3D!

Für diesen vierten und letzten Artikel unserer kleinen Serie über Single-Element-Loader werden wir uns mit 3D-Mustern beschäftigen. Bei der Erstellung eines 3D-Elements ist es schwer vorstellbar, dass nur ein HTML Element ausreicht, um beispielsweise alle sechs Seiten eines Würfels zu simulieren. Aber vielleicht kommen wir davon …

27. Aug 2023
Direkter Link zum Artikel: Single Element Loaders: The Bars
CSS-Animation Verläufe Loader Pseudoelemente Transformation

Ein-Element-Loader: Die Balken

Wir haben uns Spinner angesehen. Wir haben uns Punkte angesehen. Jetzt widmen wir uns einem weiteren gängigen Muster für Loader: Balken. Und wir werden in diesem dritten Artikel der Serie dasselbe tun wie in den anderen …

27. Aug 2023
  • Neuer
  • 1
  • 2
  • 3
  • ...
  • 4
  • Ältere

CSS-Tricks wird unterstützt von DigitalOcean.

Bleiben Sie auf dem Laufenden über Web-Entwicklung

mit unserem handverlesenen Newsletter

DigitalOcean
  • Über DO
  • Cloudways
  • Rechtliches
  • Holen Sie sich kostenloses Guthaben!
CSS-Tricks
  • Schreiben Sie für uns!
  • Werben Sie bei uns
  • Kontaktieren Sie uns
Soziales
  • RSS-Feeds
  • CodePen
  • Mastodon
  • X
Nach oben

© .