Codrops hat einen sehr schönen Artikel über CSS-Shapes von Tania Rascia. Sie kennen vielleicht shape-outside, um den Bereich neu zu definieren, um den Text um dieses Element herumfließt, was einige interessante Designmöglichkeiten eröffnet. Aber es gibt ein paar echte CSS-Tricks hier.
- Lassen Sie
shape-outside-Elemente *sowohl* rechts als auch links schweben, damit der Text dazwischen fließt. - Sie können
shape-outsideso einstellen, dass es ein Bild verwendet, undshape-image-thresholdverwenden, um anzupassen, wo der Text fließt, was bedeutet, dass Sie sogar einen Farbverlauf verwenden könnten!
Formen sind in letzter Zeit im Kommen, da Heydon Pickering kürzlich ein kurzes Video zur Verwendung von Formen veröffentlicht hat. Er behandelt auch Dinge wie clip-path und Canvas und Ähnliches.
Wir haben kürzlich unsere langjährige Seite über (im Grunde gefälschte) CSS-Shapes in einen Blogbeitrag verschoben, damit sie leichter zu pflegen ist.
Robin hat auch Working with Shapes in Web Design geschrieben, das sich damit beschäftigt. So viele Tricks!
Siehe den Pen 10c03204463e92a72a6756678e6348d1 von CSS-Tricks (@css-tricks) auf CodePen.
Wenn wir über CSS-Shapes sprechen, ist es fast so, als würden wir mehr über *Werte* als über *Eigenschaften* sprechen. Was ich meine, ist, dass die Wertfunktionen wie polygon(), circle(), ellipse(), offset(), path() usw. repräsentativer für "CSS-Shapes" sind als die Eigenschaften, auf die sie angewendet werden. Mehrere Eigenschaften nehmen sie auf, wie shape-outside, clip-path und offset-path.
Ich habe einmal einen ganzen Vortrag darüber gehalten.
Das Einzige, was sich seitdem geändert hat, ist, dass Firefox clip-path: path() hinter dem Flag layout.css.clip-path-path.enabled erlaubt (Demo).
Und vergessen Sie nicht, dass Jen Simmons schon Jahre zuvor über die Möglichkeiten von CSS Shapes sprach (in ihren Lab-Demos)!
Mann, wann bekommt das volle Browserunterstützung. Es ist frustrierend, weil das das Spiel für Webdesign so sehr verändern würde!!!