clip-path ist eine dieser CSS-Eigenschaften, von denen wir generell wissen, dass sie existieren, aber sie vielleicht aus irgendeinem Grund nicht oft verwenden. Sie ist ein wenig einschüchternd, da sie an Matheunterricht erinnert, da sie die Arbeit mit geometrischen...
Wollten Sie jemals sicherstellen, dass nichts von einem (Pseudo-)Element außerhalb der border-box seines Elternteils angezeigt wird? Falls Sie Schwierigkeiten haben, sich vorzustellen, wie das aussieht, nehmen wir an, wir wollten folgendes Ergebnis mit minimalem Aufwand erzielen...
Machen wir eine kleine Schritt-für-Schritt-Anleitung für eine Situation, in der man nicht ganz das hinbekommt, was man sich vorstellt, aber es trotzdem mit CSS-Tricks schaffen kann. In diesem Fall geht es darum, einen Schatten auf eine Form anzuwenden. …
Manchmal braucht es nur 35 Sekunden, bis ein Konzept wirklich sitzt. Mikael Ainalem liefert das hier, falls du die Konzepte hinter pfadbasierten CSS-Eigenschaften wie clip-path und shape-outside noch nicht ganz verstanden hast. …
Ich mag Adam Laki's Schneller Tipp: CSS-Dreiecke, weil er diese allgegenwärtige Tatsache über Frontend-Techniken abdeckt: es gibt immer viele Wege, dasselbe zu tun. In diesem Fall kann das Zeichnen eines Dreiecks mit
border und einem
Ich bin kürzlich auf ein interessantes geschnittenes Scheibendesign gestoßen. Die Scheibe hatte einen diagonalen Verlauf und war in horizontale Scheiben unterteilt, die von links nach rechts leicht versetzt waren. Natürlich begann ich nachzudenken, was der effizienteste Weg dafür wäre...
Eine Sache, die mich schon lange überrascht (und betrübt) hat, ist, dass die clip-path Eigenschaft, so fantastisch sie auch ist, nur wenige Werte annimmt. Die Funktionen circle() und ellipse() sind nett, aber das Verstecken von Überläufen und das Runden mit border-radius im Allgemeinen...
Codrops hat einen sehr schönen Artikel über CSS-Formen von Tania Rascia. Sie wissen vielleicht, dass shape-outside dazu dient, den Bereich neu zu definieren, um den herum Text um das Element herum fließt, was interessante Designmöglichkeiten eröffnet. Aber es gibt ein paar ...
Dies ist eine Fortsetzung meines früheren Beitrags über Clip-Pfade. Damals haben wir uns mit den Grundlagen des Clipping beschäftigt und wie man anfängt. Wir haben uns einige Ideen angesehen, um zu veranschaulichen, was wir mit … tun können.
