CSS -Tricks, die nur einen Gradienten verwenden

CSS-Gradienten sind ein Grundnahrungsmittel für die Front-End-Entwicklung und bieten vielseitige Styling-Optionen. Während ihre Syntax komplex werden kann, untersucht dieser Artikel die überraschende Kraft und Einfachheit, die mit nur einem -Gradienten erreicht werden kann. Wir werden über grundlegende Verwendungen hinausgehen, um erweiterte Techniken zum Erstellen von Mustern, Gitterlinien, gestrichelten Linien, Regenbogeneffekten, Schwebeanimationen, Formen und Grenzbildtricks freizuschalten.

Vergessen Sie die Vorstellung, dass ein einzelner Gradienten einschränkend ist. Erforschen wir sein Potenzial:

Wiederholungsmuster

erzeugen

Gradienten exponieren Sie beim Erstellen wiederholbarer Muster. Die repeating-conic-gradient() -Funktion ist hier der Schlüssel. Ein einfaches Schachbrettmuster wird erreicht mit:

background: repeating-conic-gradient(#000 0 25%, #fff 0 50%) 0 / 100px 100px;

Farbstopps stellt unterschiedliche Ergebnisse aus. Zum Beispiel schafft die Halbierung der Farbe (25% bis 12,5%, 50% bis 25%) ein dreieckiges Muster. Die Verwendung von CSS -Variablen verbessert die Flexibilität und ermöglicht eine einfache Anpassung von Farbe und Größe. Komplexere Muster können sich visualisieren, indem die Wiederholung (no-repeat) vorübergehend deaktiviert wird, um eine einzelne Fliese zu isolieren. Für tiefere Tauchgänge in die Mustererstellung finden Sie auf folgende Ressourcen:

• So erstellen Sie Hintergrundmuster mit CSS & Conic-Gradient (Verpex-Blog)
Lernen Sie CSS-Radialgradient, indem Sie Hintergrundmuster (Freecodecamp)
• bauen

Hintergrundmuster, vereinfacht durch Konizgradienten (Ana Tudor)

Konstruktion dynamischer Gitter

.grid-lines {
  --n: 3; /* rows */
  --m: 5; /* columns */
  --s: 80px; /* size */
  --t: 2px; /* thickness */
  width: calc(var(--m)*var(--s) + var(--t));
  height: calc(var(--n)*var(--s) + var(--t));
  background: conic-gradient(from 90deg at var(--t) var(--t), #0000 25%, #000 0) 0 0/var(--s) var(--s);
}

Erweitern Sie das Musterkonzept, um flexible Netze zu erstellen. CSS -Variablen Kontrolldicke, Zellzahl und Größe:

var(--t) --m Die width: calc(round(down, 100%, var(--s)) var(--t)); sorgt vollständige Zeilen an den Kanten. Responsive Gitter sind möglich, indem calc-size() und width: calc-size(auto, round(down, size, var(--s)) var(--t)); die Spaltenzahl basierend auf dem verfügbaren Speicherplatz dynamisch anpassen. Die Zukunftssicherung beinhaltet die Verwendung

:

Erstellen gestrichelter Zeilen

.dashed-lines {
  --t: 2px;  /* thickness */
  --g: 50px; /* gap */
  --s: 12px; /* dash size */
  background: conic-gradient(at var(--t) 50%, #0000 75%, #000 0) var(--g)/calc(var(--g) + var(--t)) var(--s);
}

vertikale oder horizontale gestrichelte Linien sind leicht zu erstellen:

Experimentieren Sie, um horizontale Versionen zu erstellen. Die Kombination gestrichelter Linien mit Gitter erfordert zwei Gradienten, wie in der CSS -Formensammlung des Autors beschrieben.

Regenbogeneffekte

erzeugen

background: linear-gradient(90deg in hsl longer hue, red 0 0);

Erstellen eines glatten Regenbogengradienten erfordert einen cleveren Ansatz:

in hsl longer hue background: conic-gradient(in hsl longer hue,red 0 0); Die

nutzt die HSL -Farbraum -Interpolation und erzeugt ein vollständiges Spektrum aus einer einzelnen Farbe. In ähnlicher Weise wird ein Farbrad mit

erstellt

Implementierung von Hover -Effekten

Gradienten bieten elegante Schwebebereicheffekte und ersetzen die Notwendigkeit von Pseudoelementen. Ein Beispiel für eine Unterstreichung eines Gleitens:

background: repeating-conic-gradient(#000 0 25%, #fff 0 50%) 0 / 100px 100px;

bastelnde komplexe Formen

Gradienten sind überraschend geschickt darin, komplexe Formen zu erzeugen. Techniken zur Erzeugung von Zick-Zack-Grenzen, geschöschten Ecken, Funkeln und Ikonen (wie ein Pluszeichen) werden in der "Modern Leitfaden des Autors zum Herstellen von CSS-Formen" (Smashing Magazine) und der CSS-Formkollektion aufgeführt.

Verwenden von Grenzbildtricks

Die border-image Eigenschaft, kombiniert mit Gradienten, schaltet weitere kreative Möglichkeiten frei. Beispiele sind Gradientenüberlagerungen, Hintergründe mit voller Breite, Überschriften und Bänder. Diese Effekte erforderten traditionell komplexe Problemumgehungen, aber das moderne CSS vereinfacht den Prozess.

Schlussfolgerung

Mastering-Single-Gradient-Techniken erweitert Ihre CSS-Funktionen. Während sich dieser Artikel auf einzelne Gradienten konzentriert, denken Sie daran, dass die Kombination mehrerer Gradienten ein noch größeres Potenzial freischaltet. Der Schlüssel ist das Verständnis von Gradientenverhalten, um innovative und effiziente CSS -Lösungen zu schaffen.

Das obige ist der detaillierte Inhalt vonCSS -Tricks, die nur einen Gradienten verwenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!