Ausgefallene Bilddekorationen: Einzelelement Magie

In diesem Artikel werden kreative Bilddekorationstechniken unter Verwendung von nur dem img Tag und CSS untersucht, ein herausforderndes, aber lohnendes Unterfangen. Vergessen Sie zusätzliche Aufschläge, Divs oder Pseudoelemente; Wir werden atemberaubende Ergebnisse mit einem einzigen Element erzielen. Dies ist die erste in einer Serie, die die Kraft von CSS zeigt.

Die Serie:

• einzelne Elementmagie - Dieser Artikel
• Masken und fortgeschrittene Hover -Effekte
• umrissen und komplexe Animationen

Styling -Möglichkeiten:

Ohne zusätzliche Elemente sind unsere Stylingoptionen auf border, box-shadow, outline und background beschränkt. Interessanterweise können wir ihn, obwohl der background hinter dem Bild verborgen ist, es nutzen, indem wir mithilfe von padding und/oder border Platz um das Bild erstellen und dann den Hintergrund innerhalb dieses Raums zeichnen. Dies öffnet die Tür, um Gradienten für beeindruckende Effekte zu verwenden.

Beispiel 1: Gradientenrahmen

Dieses Beispiel verwendet einen Kegelgradienten, eine Polsterung und einen Umriss, um einen visuell ansprechenden Rahmen zu erstellen. Die transparente Grenze und die Polsterung arbeiten mit den Eigenschaften des Gradienten background-origin und background-clip zusammen, um den gewünschten Rahmeneffekt zu erzielen. Ein negativer outline-offset erzeugt eine saubere, quadratische Form.

img {
  --s: 10px; /* control the size */
  padding: var(--s);
  border: calc(2 * var(--s)) solid #0000;
  outline: 1px solid #000;
  outline-offset: calc(-1 * var(--s));
  background: conic-gradient(from 90deg at 1px 1px, #0000 25%, #000 0);
}

Beispiel 2: Rahmen nur Eck

In diesem Beispiel werden vier Kegelgradienten verwendet, eine für jede Ecke. Bei schwebem Umzug erweitern sich diese Gradienten, um einen kompletten Rahmen zu erstellen. Die Gradienten verwenden harte Stopps zwischen Farben, um scharfe Kanten zu erstellen, und CSS -Variablen verbessern die Code -Lesbarkeit.

img {
  --b: 5px; /* border thickness */
  --c: #0000 90deg, darkblue 0; /* define the color here */
  padding: 10px;
  background:
    conic-gradient(from 90deg  at top    var(--b) left  var(--b), var(--c)) 0 0,
    conic-gradient(from 180deg at top    var(--b) right var(--b), var(--c)) 100% 0,
    conic-gradient(from 0deg   at bottom var(--b) left  var(--b), var(--c)) 0 100%,
    conic-gradient(from -90deg at bottom var(--b) right var(--b), var(--c)) 100% 100%;
  background-size: 50px 50px; /* adjust border length here */
  background-repeat: no-repeat;
}
img:hover {
  background-size: 51% 51%;
}

Erweiterte Techniken und Animationen:

In dem Artikel werden komplexere Beispiele unter Verwendung von Gradientenmanipulation, clip-path und ausgefeilten Schwebeanimationen untersucht. Diese Beispiele zeigen die Vielseitigkeit von Gradienten bei der Erzeugung verschiedener Formen und Effekte. Die Verwendung von CSS -Variablen und internen Variablen (mit Unterstrichen vorangestellt) verbessert die Codeorganisation und die Wartbarkeit.

Schlussfolgerung:

Dieser Artikel zeigt die überraschende Kraft von CSS und Gradienten, um optisch beeindruckende Bilddekorationen mit einem einzigen img -Tag zu erzeugen. Die Serie setzt sich mit fortgeschritteneren Techniken fort, untersucht Masken, Schwebeffekte und komplexe Animationen. Eine weitere Untersuchung der verknüpften Artikel liefert ein tieferes Verständnis der zugrunde liegenden CSS -Prinzipien.

Das obige ist der detaillierte Inhalt vonAusgefallene Bilddekorationen: Einzelelement Magie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!