Heutzutage ist das Erstellen komplexer Formen mit clip-path eine einfache Aufgabe, aber das Hinzufügen eines Randes zu den Formen ist immer eine Qual. Es gibt keine robuste CSS-Lösung und wir müssen immer spezifischen „hackigen“ Code für jeden einzelnen …
Ich liebe Formen, besonders bunte! Formen auf Websites gehören in die gleiche Kategorie der Nützlichkeit wie Hintergrundfarben, Bilder, Banner, Trennlinien, Grafiken und vieles mehr: Sie können uns helfen, Kontext zu verstehen und unsere Handlungen durch Affordanzen zu informieren.
Ein …
Clipping und Masking gibt es in CSS schon seit einiger Zeit und sie werden auch von den Browsern ziemlich gut unterstützt. Ich habe kürzlich an einem Projekt gearbeitet, das eine Clipping-Technik für Tooltips benötigte, die über Links im Text angezeigt werden. ...
Vor ein paar Wochen bin ich auf diesen coolen Pop-Out-Effekt von Mikael Ainalem gestoßen. Er zeigt die clip-path: path() in CSS, die gerade korrekte Unterstützung in den meisten modernen Browsern erhalten hat. Ich wollte mich selbst damit beschäftigen, um …
Hallo, wir sind zurück mit wöchentlichen Updates über die Browserlandschaft von Šime Vidas.
Im dieswöchigen Update kann die CSS-:not-Pseudoklasse komplexe Selektoren akzeptieren, wie man sanftes Scrollen deaktiviert, wenn man „Auf Seite suchen…“ in Chrome verwendet, Safaris …
Diese Dinge sind sich so ähnlich, dass es mir schwerfällt, sie auseinanderzuhalten. Dies ist eine nette kleine Erklärung von viewBox (was für ein cooler Name und URL, ich hoffe, sie halten das durch).
Das Wichtigste ist, dass clipPath…
Sie kennen vielleicht einige Möglichkeiten, Diagramme mit reinem CSS zu erstellen. Einige davon werden hier auf CSS-Tricks behandelt, und viele andere finden Sie auf CodePen, aber ich habe noch nicht viele Beispiele für „Flächendiagramme“ gesehen (stellen Sie sich …
Nils Binder beschreibt die Wege
…1. Verwenden Sie eine SVG in Form eines Dreiecks. Diese Technik wird von Erik Kennedy auf CSS-Tricks schön beschrieben.
2. Verbergen Sie einen Teil Ihres Abschnitts mit
clip-path. Lesen Sie Diagonal Containers in
Ich war extrem aufgeregt, als ich zum ersten Mal hörte, dass clip-path: path() für Firefox kommt. Stellen Sie sich nur vor, Sie könnten eine atmende Box wie die untenstehende mit nur einem HTML-Element und sehr wenig CSS einfach codieren, ohne …
