Einerseits ist es einfach, einfache Schachbrettmuster mit CSS zu erstellen. Andererseits, es sei denn, wir sind einer der CSS-Gradient-Ninjas, sind wir irgendwie auf einfache Muster beschränkt.
Zumindest dachte ich das, als ich auf … starrte.
Vor einiger Zeit schrieb Geoff einen Artikel über einen coolen Hover-Effekt. Der Effekt beruht auf einer Kombination aus CSS-Pseudo-Elementen, Transformationen und Übergängen. Viele Kommentare haben gezeigt, dass derselbe Effekt mit Hintergrund ...
Wenn man sich Dribbble oder Behance ansieht, werden Designer eine einfache Technik verwenden, um Bildern Textur hinzuzufügen: Rauschen. Das Hinzufügen von Rauschen macht sonst einfarbige Farben oder glatte Verläufe, wie Schatten, realistischer. Aber trotz der Vorliebe der Designer für Textur, ...
Ein echter CSS-Trick von Kirupa Chinnathambi. Um einen farbigen Schatten an die Farben im background-image eines Elements anzupassen, erben Sie den Hintergrund in einem Pseudo-Element, schieben ihn hinter das Original, und blenden und filtern ihn dann. …
In der dieswöchigen Zusammenfassung landet prefers-contrast in Safari, MathML erhält etwas Aufmerksamkeit, :is() ist tatsächlich ziemlich fehlerverzeihend, weitere gerichtsbezogene Klagen, inkonsistente Anfangswerte für CSS Background Eigenschaften können zu unerwünschten – aber irgendwie netten – Mustern führen. …
Sie können Streifen in CSS erstellen. Das war lange Zeit alles, was ich mir in Bezug auf CSS-Hintergrundmuster vorgestellt habe. An Streifen ist nichts falsch; Streifen sind cool. Sie können zu breiten und schmalen Bändern, überkreuzten ...
Eine coole Sache an CSS-Benutzereigenschaften ist, dass sie ein Teil eines Wertes sein können. Nehmen wir an, Sie verwenden mehrere Hintergründe, um ein Design zu realisieren. Jeder Hintergrund hat seine eigene Farbe, Bild, Wiederholung, Position usw. Es ...
Sie wissen, wie Sie mehrere Hintergründe haben können?
body {
background-image:
url(image-one.jpg),
url(image-two.jpg);
}Das ist nur background-image. Sie können auch deren Position festlegen, wie Sie es erwarten würden. Wir werden es abkürzen
body {
background:
url(image-one.jpg) no-repeat top right,
url(image-two.jpg) Nehmen wir an, Sie möchten die background-position eines Elements beim Überfahren mit der Maus verschieben, um dem Design etwas Pfiff zu verleihen. Sie haben ein Element wie dieses
<div class="module" id="module"></div>Und Sie fügen ihm einen Hintergrund hinzu
.module