Ausgefallene Bilddekorationen: Einzelelement-Magie

Wie der Titel schon sagt, werden wir Bilder dekorieren! Es gibt eine Menge anderer Artikel, die darüber sprechen, aber was wir hier behandeln, ist ein bisschen anders, weil es eher eine Herausforderung ist. Die Herausforderung? Verzieren Sie ein Bild nur mit der Etikett und nichts weiter.

Richtig, kein zusätzliches Markup, keine Divs und keine Pseudoelemente. Nur das eine Etikett.

Klingt schwierig, oder? Aber am Ende dieses Artikels – und der anderen, aus denen diese kleine Serie besteht – werde ich beweisen, dass CSS leistungsfähig genug ist, um uns trotz der Beschränkung auf die Arbeit mit einem einzigen Element großartige und beeindruckende Ergebnisse zu liefern.

Beginnen wir mit unserem ersten Beispiel

Bevor wir uns mit dem Code befassen, wollen wir die Möglichkeiten für die Gestaltung von an aufzählen ohne zusätzliche Elemente oder Pseudo-Elemente. Wir können benutzen border, box-shadow, outlineUnd natürlich background. Es mag seltsam aussehen, einem Bild einen Hintergrund hinzuzufügen, da wir ihn nicht sehen können, da er sich hinter dem Bild befindet – aber der Trick besteht darin, Platz zu schaffen um das Bild verwenden padding und / oder border und zeichnen Sie dann unseren Hintergrund in diesen Raum.

Ich denke, Sie wissen, was als nächstes kommt, seit ich darüber gesprochen habe background, Rechts? Ja, Steigungen! Alle Dekorationen, die wir machen werden, sind auf viele Farbverläufe angewiesen. Wenn ja folgte mir Für eine Weile denke ich, dass dies für Sie wahrscheinlich überhaupt keine Überraschung ist. 😁

Kommen wir zurück zu unserem ersten Beispiel:

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);
}

Wir definieren padding und ein durchsichtiges border mit der variablen --s einen Raum um unser Bild herum zu schaffen, der dreimal so groß ist wie diese Variable.

Warum verwenden wir beides? padding und border statt dem einen oder anderen? Wir können nur einen davon verwenden, aber ich brauche diese Kombination für meinen Farbverlauf, da standardmäßig der Anfangswert von background-clip is border-box und background-origin entspricht padding-box.

Hier ist eine Schritt-für-Schritt-Darstellung, um die Logik zu verstehen:

Anfänglich haben wir keine Ränder auf dem Bild, daher erstellt unser Farbverlauf zwei Segmente mit 1px von Dicke. (Ich benutze 3px in dieser speziellen Demo, damit es einfacher zu sehen ist.) Wir fügen einen farbigen Rand hinzu und der Farbverlauf gibt uns immer noch das gleiche Ergebnis innerhalb des Polsterbereichs (aufgrund von background-origin), aber es wiederholt sich hinter der Grenze. Wenn wir die Farbe des Rahmens transparent machen, können wir die Wiederholung verwenden und erhalten den gewünschten Rahmen.

Das outline in der Demo hat einen negativen Offset. Dadurch entsteht eine quadratische Form am oberen Rand des Farbverlaufs. Das ist es! Wir haben unserem Bild eine schöne Dekoration mit einem Farbverlauf und einem hinzugefügt outline. Wir hätten mehr Steigungen gebrauchen können! Aber ich versuche immer, meinen Code so einfach wie möglich zu halten, und ich habe festgestellt, dass das Hinzufügen von an outline ist besser so.

Hier ist eine Nur-Farbverlauf-Lösung, bei der ich nur verwende padding um den Raum zu definieren. Immer noch das gleiche Ergebnis, aber mit einer komplexeren Syntax.

Versuchen wir es mit einer anderen Idee:

Dafür habe ich das vorherige Beispiel entfernt outline, und angewendet a clip-path um den Farbverlauf auf jeder Seite zu schneiden. Das clip-path value ist ein bisschen ausführlich und verwirrend, aber hier ist eine Illustration, um seine Punkte besser zu sehen:

Ich denke, Sie verstehen die Grundidee. Wir werden Hintergründe, Umrisse, Ausschnitte und einige Maskierungen kombinieren, um verschiedene Arten von Dekorationen zu erzielen. Wir werden auch einige coole Hover-Animationen als zusätzlichen Bonus in Betracht ziehen! Was wir uns bisher angesehen haben, ist nur ein kleiner Überblick über das, was kommt!

Der Nur-Eck-Rahmen

Dieser nimmt vier Farbverläufe. Jeder Farbverlauf deckt eine Ecke ab und beim Bewegen der Maus erweitern wir sie, um einen vollständigen Rahmen um das Bild zu erstellen. Lassen Sie uns den Code für einen der Farbverläufe analysieren:

--b: 5px; /* border thickness */
background: conic-gradient(from 90deg at top var(--b) left var(--b), #0000 90deg, darkblue 0) 0 0;
background-size: 50px 50px; 
background-repeat: no-repeat;

Wir werden einen Farbverlauf mit einer Größe von gleich zeichnen 50px 50px und platzieren Sie es in der oberen linken Ecke (0 0). Für die Konfiguration des Farbverlaufs ist hier eine Schritt-für-Schritt-Darstellung, die zeigt, wie ich dieses Ergebnis erreicht habe.

Wir neigen dazu zu glauben, dass Farbverläufe nur für den Übergang zwischen zwei Farben geeignet sind. Aber in Wirklichkeit können wir so viel mehr mit ihnen machen! Sie sind besonders nützlich, wenn es darum geht, verschiedene Formen zu erstellen. Der Trick besteht darin, dafür zu sorgen, dass wir harte Stopps zwischen den Farben haben – wie im obigen Beispiel – und keine sanften Übergänge:

#0000 25%, darkblue 0

Dies bedeutet im Grunde: „Füllen Sie den Farbverlauf mit einer transparenten Farbe, bis 25% des Bereichs, dann füllen Sie den verbleibenden Bereich mit darkblue.

Vielleicht kratzen Sie sich darüber den Kopf 0 Wert. Es ist ein kleiner Hack, um die Syntax zu vereinfachen. In Wirklichkeit sollten wir dies verwenden, um einen harten Stopp zwischen den Farben zu machen:

#0000 25%, darkblue 25%

Das ist logischer! Die transparente Farbe endet bei 25% und darkblue beginnt genau dort, wo die Transparenz endet, und macht einen harten Stopp. Wenn wir die zweite durch ersetzen 0, erledigt der Browser die Arbeit für uns, daher ist dies ein etwas effizienterer Weg, dies zu tun.

Irgendwo in die spezifikation, es sagt:

wenn eine Farbe halt or Übergangshinweis eine Position hat, die kleiner als die angegebene Position eines Farbstopps oder Übergangshinweises davor in der Liste ist, setzen Sie seine Position auf die größte angegebene Position eines Farbstopps oder Übergangshinweises davor.

0 ist immer kleiner als jeder andere Wert, daher konvertiert der Browser ihn immer in den größten Wert, der in der Deklaration davor steht. In unserem Fall ist diese Zahl 25%.

Jetzt wenden wir dieselbe Logik auf alle Ecken an und enden mit dem folgenden Code:

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;
}

Ich habe CSS-Variablen eingeführt, um Redundanzen zu vermeiden, da alle Farbverläufe dieselbe Farbkonfiguration verwenden.

Für den Hover-Effekt erhöhe ich lediglich die Größe der Farbverläufe, um den vollen Rahmen zu erstellen:

img:hover {
  background-size: 51% 51%;
}

Ja es ist 51% statt 50% — das schafft eine kleine Überlappung und vermeidet mögliche Lücken.

Lassen Sie uns eine andere Idee mit derselben Technik ausprobieren:

Dieses Mal verwenden wir nur zwei Farbverläufe, aber mit einer komplexeren Animation. Zuerst aktualisieren wir die Position jedes Farbverlaufs und vergrößern dann ihre Größe, um das vollständige Bild zu erstellen. Ich habe auch mehr Variablen eingeführt, um Farbe, Größe, Dicke und sogar den Abstand zwischen Bild und Rahmen besser steuern zu können.

img {
  --b: 8px;  /* border thickness*/
  --s: 60px; /* size of the corner*/
  --g: 14px; /* the gap*/
  --c: #EDC951; 

  padding: calc(var(--b) + var(--g));
  background-image:
    conic-gradient(from  90deg at top    var(--b) left  var(--b), #0000 25%, var(--c) 0),
    conic-gradient(from -90deg at bottom var(--b) right var(--b), #0000 25%, var(--c) 0);
  background-position:
    var(--_p, 0%) var(--_p, 0%),
    calc(100% - var(--_p, 0%)) calc(100% - var(--_p, 0%));
  background-size: var(--s) var(--s);
  background-repeat: no-repeat;
  transition: 
    background-position .3s var(--_i,.3s), 
    background-size .3s calc(.3s - var(--_i, .3s));
}
img:hover {
  background-size: calc(100% - var(--g)) calc(100% - var(--g));
  --_p: calc(var(--g) / 2);
  --_i: 0s;
}

Warum tun die --_i und --_p Variablen haben einen Unterstrich im Namen? Die Unterstriche sind Teil einer Namenskonvention, die ich verwende, um „interne“ Variablen zu berücksichtigen, die zur Optimierung des Codes verwendet werden. Sie sind nichts Besonderes, aber ich möchte einen Unterschied zwischen den Variablen machen, die wir anpassen, um den Rahmen zu steuern (wie z --b, --c, etc.) und die, die ich verwende, um den Code kürzer zu machen.

Der Code sieht vielleicht verwirrend aus und ist nicht leicht zu verstehen, aber ich habe a geschrieben dreiteilige Serie wo ich diese Technik beschreibe. Ich empfehle dringend, mindestens den ersten Artikel zu lesen, um zu verstehen, wie ich den obigen Code erreicht habe.

Hier ist eine Illustration, um die verschiedenen Werte besser zu verstehen:

Die Rahmenenthüllung

Lassen Sie uns eine andere Art von Animation ausprobieren, bei der wir beim Schweben den gesamten Rahmen anzeigen:

Cool, oder? Und wenn Sie genau hinschauen, werden Sie feststellen, dass die Linien beim Herausziehen der Maus in die entgegengesetzte Richtung verschwinden, was den Effekt noch ausgefallener macht! Ich habe einen ähnlichen Effekt in verwendet ein vorheriger Artikel.

Aber dieses Mal decke ich nicht alle Elemente ab, sondern nur einen kleinen Teil, indem ich a definiere height um sowas zu bekommen:

Dies ist der obere Rand unseres Rahmens. Wir wiederholen den gleichen Vorgang auf jeder Seite des Bildes und wir haben unseren Hover-Effekt:

img {
  --b: 10px; /* the border thickness*/
  --g: 5px; /* the gap on hover */
  --c: #8A9B0F; 

  padding: calc(var(--g) + var(--b));
  --_g: no-repeat linear-gradient(var(--c) 0 0);
  background: 
    var(--_g) var(--_i, 0%) 0,
    var(--_g) 100% var(--_i, 0%),
    var(--_g) calc(100% - var(--_i, 0%)) 100%,
    var(--_g) 0 calc(100% - var(--_i, 0%));
  background-size: var(--_i, 0%) var(--b),var(--b) var(--_i, 0%);
  transition: .4s, background-position 0s;
  cursor: pointer;
}
img:hover {
  --_i: 100%;
}

Wie Sie sehen können, wende ich denselben Farbverlauf viermal an und jeder hat eine andere Position, um jeweils nur eine Seite abzudecken.

Noch einer? Lass uns gehen!

Dieser sieht ein bisschen knifflig aus und erfordert tatsächlich etwas Vorstellungskraft, um zu verstehen, wie zwei konische Farbverläufe diese Art von Magie hervorbringen. Hier ist eine Demo, um einen der Farbverläufe zu veranschaulichen:

Das Pseudoelement simuliert den Gradienten. Es ist zunächst außer Sicht und beim Schweben ändern wir zuerst seine Position, um die Oberkante des Rahmens zu erhalten. Dann erhöhen wir die Höhe, um die richtige Kante zu erhalten. Die Verlaufsform ähnelt der, die wir im letzten Abschnitt verwendet haben: zwei Segmente, um zwei Seiten abzudecken.

Aber warum habe ich die Breite des Farbverlaufs gemacht? 200%? Sie würden denken 100% würde reichen oder?

100% sollte ausreichen, aber ich kann den Farbverlauf nicht wie gewünscht verschieben, wenn ich seine Breite gleich behalte 100%. Das ist eine weitere kleine Eigenart in Bezug auf das Wie background-position funktioniert. Ich decke das ein ein vorheriger Artikel. ich auch hat eine Antwort bei Stack Overflow gepostet Umgang damit. Ich weiß, es ist viel zu lesen, aber es lohnt sich wirklich.

Nachdem wir die Logik für einen Farbverlauf erklärt haben, ist der zweite einfach, da er genau dasselbe tut, aber stattdessen den linken und unteren Rand abdeckt. Alles, was wir tun müssen, ist, ein paar Werte zu tauschen, und wir sind fertig:

img {
  --c: #8A9B0F; /* the border color */
  --b: 10px; /* the border thickness*/
  --g: 5px;  /* the gap */

  padding: calc(var(--g) + var(--b));
  --_g: #0000 25%, var(--c) 0;
  background: 
    conic-gradient(from 180deg at top    var(--b) right var(--b), var(--_g))
     var(--_i, 200%) 0 / 200% var(--_i, var(--b))  no-repeat,
    conic-gradient(            at bottom var(--b) left  var(--b), var(--_g))
     0 var(--_i, 200%) / var(--_i, var(--b)) 200%  no-repeat;
  transition: .3s, background-position .3s .3s;
  cursor: pointer;
}
img:hover {
  --_i: 100%;
  transition: .3s, background-size .3s .3s;
}

Wie Sie sehen können, sind beide Farbverläufe nahezu identisch. Ich vertausche einfach die Werte der Größe und Position.

Die Rahmendrehung

Diesmal werden wir keinen Rahmen um unser Bild ziehen, sondern das Aussehen eines bestehenden anpassen.

Sie fragen sich wahrscheinlich, wie zum Teufel ich eine gerade Linie in eine abgewinkelte Linie umwandeln kann. Nein, die Magie ist anders. Das ist nur die Illusion, die wir bekommen, nachdem wir einfache Animationen für vier Farbverläufe kombiniert haben.

Mal sehen, wie die Animation für den oberen Farbverlauf erstellt wird:

Ich aktualisiere einfach die Position eines sich wiederholenden Farbverlaufs. Noch nichts Besonderes! Machen wir dasselbe für die rechte Seite:

Fängst du an, den Trick zu sehen? Beide Farbverläufe schneiden sich an der Ecke, um die Illusion zu erzeugen, dass die gerade Linie in eine abgewinkelte geändert wird. Lassen Sie uns den Umriss entfernen und den Überlauf ausblenden, um ihn besser sehen zu können:

Jetzt fügen wir zwei weitere Farbverläufe hinzu, um die verbleibenden Kanten abzudecken, und wir sind fertig:

img {
  --g: 4px; /* the gap */
  --b: 12px; /* border thickness*/
  --c: #669706; /* the color */

  padding: calc(var(--g) + var(--b));
  --_c: #0000 0 25%, var(--c) 0 50%;
  --_g1: repeating-linear-gradient(90deg ,var(--_c)) repeat-x;
  --_g2: repeating-linear-gradient(180deg,var(--_c)) repeat-y;
  background:
    var(--_g1) var(--_p, 25%) 0, 
    var(--_g2) 0 var(--_p, 125%),
    var(--_g1) var(--_p, 125%) 100%, 
    var(--_g2) 100% var(--_p, 25%);
  background-size: 200% var(--b), var(--b) 200%;
  transition: .3s;
}
img:hover {
  --_p: 75%;
}

Wenn wir diesen Code nehmen und leicht anpassen, können wir eine weitere coole Animation erhalten:

Können Sie die Logik in diesem Beispiel herausfinden? Das ist deine Hausaufgabe! Der Code sieht vielleicht beängstigend aus, verwendet aber die gleiche Logik wie die vorherigen Beispiele, die wir uns angesehen haben. Versuchen Sie, jeden Farbverlauf zu isolieren, und stellen Sie sich vor, wie er animiert wird.

Wrapping up

Das sind viele Farbverläufe in einem Artikel!

Es ist sicher und ich habe dich gewarnt! Aber wenn die Herausforderung darin besteht, ein Bild ohne zusätzliche Elemente und Pseudoelemente zu dekorieren, bleiben uns nur wenige Möglichkeiten, und Farbverläufe sind die stärkste Option.

Machen Sie sich keine Sorgen, wenn Sie sich in einigen Erklärungen ein wenig verloren fühlen. Ich empfehle immer einige meiner alten Artikel, in denen ich ausführlicher auf einige der Konzepte eingehe, die wir für diese Herausforderung recycelt haben.

Ich werde mit einer letzten Demo gehen, um Sie bis zum nächsten Artikel in dieser Serie zu verweilen. Diesmal verwende ich radial-gradient() um einen weiteren lustigen Hover-Effekt zu erzeugen. Ich lasse Sie den Code analysieren, um zu verstehen, wie er funktioniert. Stellen Sie mir Fragen in den Kommentaren, wenn Sie nicht weiterkommen!