Kreative Hintergrundmuster mit Gradienten, CSS -Formen und sogar Emojis

Jenseits einfacher Streifen bietet CSS ein überraschend vielseitiges Toolkit für das Erstellen dynamischer Hintergrundmuster. Während Streifen ihren Platz haben, lassen Sie uns mithilfe von Gradienten, Formen und sogar Emojis fantasievolle Ansätze untersuchen.

Hintergrundmuster, im Wesentlichen wiederholte Bilder, können extern (wie PNGs) bezogen oder direkt in CSS erzeugt werden, wobei häufig Gradienten nutzen. Lineare Gradienten, die häufig für Streifen verwendet werden, sind nur der Anfang. Lassen Sie uns mit kreativeren Anwendungen eintauchen.

Gradientenbasierte Muster

CSS liefert drei Gradientenarten:

1. linear-gradient() : Erstellt einen linearen Farbübergang entlang einer bestimmten Richtung.
2. radial-gradient() : Farben strahlen von einem zentralen Punkt aus und bilden Kreise oder Ellipsen.
3. conic-gradient() : Farben werden um einen Kreis verteilt und erzeugen strahlähnliche Effekte. (Hinweis: Die Browserunterstützung kann variieren.)

Das Verständnis der Gradientensyntax - definierende Farbstopps und -positionen - ist entscheidend für die effektive Mustererstellung.

Beispiele für radiale Gradienten

Radiale Gradienten bieten den Vorteil der Erzeugung von Kreisen und Ellipsen, ideal für einzigartige Muster.

 Hintergrund: Radialgradient (<gradient values=""> );</gradient>

Hier ist ein Beispiel für ein Wassermelonenmuster:

 Hintergrund: 
    Radialgradient (Kreis bei 25px 9px, schwarz 2px, transparent 2px), 
    Radialgradient (Kreis bei 49px 28px, schwarz 2px, transparent 2px), 
    Radialgradient (Kreis bei 38px 1px, schwarz 2px, transparent 2px), 
    Radialgradient (Kreis bei 20px 4px, schwarz 2px, transparent 2px), 
    Radialgradient (Kreis bei 80px 4px, schwarz 2px, transparent 2px), 
    Radialgradient (Kreis bei 50px 10px, schwarz 2px, transparent 2px), 
    Radialgradient (Kreis bei 60px 16px, schwarz 2px, transparent 2px), 
    Radialgradient (Kreis bei 70px 16px, schwarz 2px, transparent 2px), 
    Radialgradient (Ellipse bei 50px 0, rot 33px, Kalk 33px, Kalk 38px, transparent 38px) 
    Weiß;
Hintergrundgröße: 100px 50px;

Dieser Code überlagert mehrere radiale Gradienten: Ellipsen für das Wassermelonenfleisch und kleinere Kreise für die Samen. Die Eigenschaft background-size steuert die Wiederholung des Musters.

Kegelgradientenmuster

Kegelgradienten erzeugen strahlende Formen. Obwohl für geometrische Muster nützlich ist, denken Sie daran, dass die Browserkompatibilität berücksichtigt werden sollte.

 Hintergrund: Conic-Gradient (<gradient values=""> );</gradient>

Beispiel:

 Hintergrund: 
 Conic-Gradient (Yellow 40DEG, Blue 40DEG, Blue 45 Grad, transparent 45 Grad), 
 CONIC-Gradient (transparent 135 Grad, Blue 135de, Blue 140 Grad, transparent 140di);
Hintergrundgröße: 60px 60px;
Hintergrundfarbe: weiß;

(Überprüfen Sie Caniuse.com auf aktuelle Browser-Supportinformationen.)

Emoji-basierte Muster

Gehen wir über geometrische Formen hinaus und integrieren wir die organischen Formen von Emojis.

Solid-Color-Emojis

Mit transparenten Text- und Textschatten können wir Solid-Color-Emoji-Muster erstellen:

 Farbe: transparent;
Text-Shadow: 0 0 schwarz;

Diese Emojis können dann in ein SVG -Bild integriert und als Hintergrund über eine Daten -URL verwendet werden.

<svg>
<foreignobject>
  
</foreignobject></svg>

Hintergrund: URL ("Daten: Bild/SVG XML,<svg viewbox="" xmlns="" http:></svg> ");

Beispiel:

 Hintergrund: 
    URL ("Daten: Bild/SVG XML, <svg viewbox="" xmlns="" http:><foreignobject height="" width=""><div black=""  color:transparent xmlns="" http:> ? ‍♀️</div></foreignobject></svg> "),, 
    Weiß; 
Hintergrundgröße: 60px 60px;

Gradienten und durchscheinende Emojis

Ähnliche Techniken können verwendet werden, um Gradienten oder durchscheinende Emoji-Muster zu erstellen, indem der Textschatten angepasst oder background-clip: text; .

SVG -Text- und CSS element() -Methoden

Obwohl weniger häufig unterstützt, verwenden Sie SVG<text></text> Elemente oder die Funktion CSS element() bieten alternative Ansätze zum Erstellen von Emoji-basierten Mustern. Die Browserkompatibilität sollte jedoch vor der Implementierung sorgfältig bewertet werden.

Abschluss

Die Fähigkeit der background , mehrere Werte zu akzeptieren, ermöglicht kreative Schichten und Kombination von Techniken. Experimentieren Sie mit verschiedenen Gradienten, Emojis und Formen, um Ihre eigenen einzigartigen Hintergrundmuster zu entdecken. Denken Sie daran, die Browserkompatibilität immer auf weniger weit verbreitete Funktionen zu überprüfen.

Das obige ist der detaillierte Inhalt vonKreative Hintergrundmuster mit Gradienten, CSS -Formen und sogar Emojis. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!