Decoratiuni cu imagini de lux: Magie cu un singur element

După cum spune titlul, vom decora imagini! Există o grămadă de alte articole care vorbesc despre asta, dar ceea ce acoperim aici este destul de diferit, deoarece este mai mult o provocare. Provocarea? Decorați o imagine folosind numai etichetă și nimic mai mult.

Așa este, fără markup suplimentar, fără div-uri și fără pseudo-elemente. Doar o singură etichetă.

Sună dificil, nu? Dar până la sfârșitul acestui articol - și al celorlalți care compun această mică serie - voi dovedi că CSS este suficient de puternic pentru a ne oferi rezultate grozave și uimitoare, în ciuda limitării de a lucra cu un singur element.

Să începem cu primul nostru exemplu

Înainte de a pătrunde în cod, să enumerăm posibilitățile de stilare a unui fără elemente suplimentare sau pseudo-elemente. Putem folosi border, box-shadow, outline, Și, desigur, background. Poate părea ciudat să adăugați un fundal unei imagini, deoarece nu îl putem vedea așa cum va fi în spatele imaginii - dar trucul este să creați spațiu în jurul imaginea folosind padding şi / sau border și apoi desenați fundalul nostru în interiorul acelui spațiu.

Cred că știi ce urmează de când am vorbit despre asta background, dreapta? Da, gradienți! Toate decorațiunile pe care urmează să le facem se bazează pe o mulțime de degrade. Dacă ai m-a urmărit pentru o vreme, cred că acest lucru nu este deloc surprinzător pentru tine. 😁

Să revenim la primul nostru exemplu:

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

Noi definim padding și un transparent border folosind variabila --s pentru a crea un spațiu în jurul imaginii noastre egal cu de trei ori variabila.

De ce le folosim pe amândouă padding și border in loc de unul sau altul? Putem obține folosind doar unul dintre ele, dar am nevoie de această combinație pentru gradientul meu, deoarece, implicit, valoarea inițială a background-clip is border-box și background-origin este egal cu padding-box.

Iată o ilustrare pas cu pas pentru a înțelege logica:

Inițial, nu avem margini pe imagine, așa că gradientul nostru va crea două segmente cu 1px de grosime. (Eu folosesc 3px în această demonstrație specifică, astfel încât să fie mai ușor de văzut.) Adăugăm un chenar colorat și gradientul ne oferă în continuare același rezultat în interiorul zonei de umplutură (datorită background-origin) dar se repetă în spatele graniței. Dacă facem transparentă culoarea chenarului, putem folosi repetiția și obținem rama pe care o dorim.

outline în demo are un offset negativ. Aceasta creează o formă pătrată în partea de sus a gradientului. Asta este! Am adăugat un decor frumos imaginii noastre folosind un gradient și un outline. Am fi putut folosi mai multe degrade! Dar mereu încerc să-mi păstrez codul cât mai simplu posibil și am descoperit că adăugând un outline e mai bine asa.

Iată o soluție numai cu gradient în care folosesc numai padding pentru a defini spațiul. În continuare același rezultat, dar cu o sintaxă mai complexă.

Să încercăm o altă idee:

Pentru aceasta, am luat exemplul anterior eliminat outline, și a aplicat a clip-path pentru a tăia gradientul pe fiecare parte. The clip-path valoarea este puțin prolixa și confuză, dar iată o ilustrație pentru a vedea mai bine punctele sale:

Cred că ai înțeles ideea principală. Vom combina fundaluri, contururi, decupaje și unele mascări pentru a realiza diferite tipuri de decorațiuni. De asemenea, vom lua în considerare câteva animații grozave de hover ca un bonus suplimentar! Ceea ce ne-am uitat până acum este doar o mică privire de ansamblu asupra a ceea ce urmează!

Cadrul numai pentru colț

Acesta are patru degrade. Fiecare gradient acoperă un colț și, la trecerea cu mouse-ul, le extindem pentru a crea un cadru complet în jurul imaginii. Să disecăm codul pentru unul dintre gradienți:

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

Vom desena un gradient cu o dimensiune egală cu 50px 50px și puneți-l în colțul din stânga sus (0 0). Pentru configurația gradientului, iată o ilustrare pas cu pas care arată cum am ajuns la acel rezultat.

Avem tendința de a crede că degradeurile sunt bune doar pentru tranziția între două culori. Dar, în realitate, putem face mult mai mult cu ei! Sunt utile mai ales atunci când vine vorba de crearea diferitelor forme. Trucul este să ne asigurăm că avem opriri grele între culori - ca în exemplul de mai sus - mai degrabă decât tranziții netede:

#0000 25%, darkblue 0

Acest lucru înseamnă în esență: „umpleți gradientul cu o culoare transparentă până când 25% a zonei, apoi umpleți zona rămasă cu darkblue.

S-ar putea să vă scărpinați cu capul peste 0 valoare. Este un mic hack pentru a simplifica sintaxa. În realitate, ar trebui să folosim acest lucru pentru a face o oprire grea între culori:

#0000 25%, darkblue 25%

Asta e mai logic! Culoarea transparentă se termină la 25% și darkblue începe exact acolo unde se termină transparența, făcând o oprire grea. Dacă îl înlocuim pe al doilea cu 0, browser-ul va face treaba pentru noi, deci este o modalitate ceva mai eficientă de a face acest lucru.

Undeva în caietul de sarcini, se spune:

în cazul în care un oprirea culorii or indiciu de tranziție are o poziție care este mai mică decât poziția specificată a oricărui indiciu de oprire de culoare sau de tranziție înaintea sa în listă, setați poziția să fie egală cu cea mai mare poziție specificată a oricărui indiciu de oprire de culoare sau de tranziție dinaintea acesteia.

0 este întotdeauna mai mică decât orice altă valoare, astfel încât browserul o va converti întotdeauna la cea mai mare valoare care apare înaintea acesteia în declarație. În cazul nostru, acest număr este 25%.

Acum, aplicăm aceeași logică tuturor colțurilor și încheiem cu următorul cod:

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

Am introdus variabile CSS pentru a evita o anumită redundanță, deoarece toate gradienții folosesc aceeași configurație de culoare.

Pentru efectul de hover, tot ceea ce fac este să măresc dimensiunea gradienților pentru a crea cadrul complet:

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

Da, este 51% în loc de 50% — care creează o suprapunere mică și evită eventualele goluri.

Să încercăm o altă idee folosind aceeași tehnică:

De data aceasta folosim doar doi gradienți, dar cu o animație mai complexă. Mai întâi, actualizăm poziția fiecărui gradient, apoi creștem dimensiunile pentru a crea cadrul complet. De asemenea, am introdus mai multe variabile pentru un control mai bun asupra culorii, mărimii, grosimii și chiar a decalajului dintre imagine și cadru.

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

De ce nu --_i și --_p variabilele au un caracter de subliniere în numele lor? Linerele de subliniere fac parte dintr-o convenție de denumire pe care o folosesc pentru a lua în considerare variabilele „interne” folosite pentru a optimiza codul. Nu sunt nimic special, dar vreau să fac o diferență între variabilele pe care le ajustăm pentru a controla cadrul (cum ar fi --b, --c, etc.) și cele pe care le folosesc pentru a scurta codul.

Codul poate părea confuz și nu este ușor de înțeles, dar am scris a serie din trei părți unde detaliez o astfel de tehnică. Recomand cu căldură să citești cel puțin primul articol pentru a înțelege cum am ajuns la codul de mai sus.

Iată o ilustrație pentru a înțelege mai bine diferitele valori:

Dezvăluirea cadrului

Să încercăm un alt tip de animație în care dezvăluim cadrul complet la hover:

Cool, nu? Iar tu, dacă te uiți cu atenție, vei observa că liniile dispar în direcția opusă pe mouse-ul, ceea ce face efectul și mai elegant! Am folosit un efect similar în un articol anterior.

Dar de data aceasta, în loc să acopăr tot elementul, acoper doar o mică parte prin definirea a height pentru a obține ceva de genul acesta:

Aceasta este marginea superioară a cadrului nostru. Repetăm ​​același proces pe fiecare parte a imaginii și avem efectul de hover:

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

După cum puteți vedea, aplic același gradient de patru ori și fiecare are o poziție diferită pentru a acoperi o singură parte la un moment dat.

Încă unul? Sa mergem!

Acesta pare puțin complicat și într-adevăr necesită puțină imaginație pentru a înțelege modul în care doi gradienți conici realizează acest tip de magie. Iată o demonstrație pentru a ilustra unul dintre gradienți:

Pseudo-elementul simulează gradientul. Inițial nu se vede și, la hover, mai întâi îi schimbăm poziția pentru a obține marginea superioară a cadrului. Apoi creștem înălțimea pentru a obține marginea dreaptă. Forma gradientului este similară cu cele pe care le-am folosit în ultima secțiune: două segmente pentru a acoperi două laturi.

Dar de ce am făcut lățimea gradientului 200%? Te-ai gândi 100% ar fi suficient, nu?

100% ar trebui să fie suficient, dar nu voi putea muta gradientul așa cum vreau dacă îi păstrez lățimea egală cu 100%. Aceasta este o altă mică ciudatenie legată de cum background-position lucrări. Acopăr asta în un articol anterior. și eu a postat un răspuns la Stack Overflow se ocupă de asta. Știu că e mult de citit, dar chiar merită timpul tău.

Acum că am explicat logica pentru un gradient, al doilea este ușor, deoarece face exact același lucru, dar acoperă marginile din stânga și de jos. Tot ce trebuie să facem este să schimbăm câteva valori și am terminat:

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

După cum puteți vedea, ambele degrade sunt aproape identice. Pur și simplu schimb valorile mărimii și poziției.

Rotația Cadrului

De data aceasta nu vom desena un cadru în jurul imaginii noastre, ci mai degrabă vom ajusta aspectul unuia existent.

Probabil vă întrebați cum naiba reușesc să transform o linie dreaptă într-o linie unghiulară. Nu, magia este diferită de asta. Aceasta este doar iluzia pe care o avem după ce combinăm animații simple pentru patru degrade.

Să vedem cum este realizată animația pentru gradientul de sus:

Pur și simplu actualizez poziția unui gradient care se repetă. Nimic de lux încă! Să facem același lucru pentru partea dreaptă:

Începi să vezi trucul? Ambele degrade se intersectează la colț pentru a crea iluzia în care linia dreaptă este schimbată într-una unghiulară. Să eliminăm conturul și să ascundem preaplinul pentru a-l vedea mai bine:

Acum, mai adăugăm două degrade pentru a acoperi marginile rămase și am terminat:

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

Dacă luăm acest cod și îl ajustăm ușor, putem obține o altă animație cool:

Vă puteți da seama logica din acest exemplu? Asta e tema ta! Codul poate părea înfricoșător, dar folosește aceeași logică ca exemplele anterioare pe care le-am analizat. Încercați să izolați fiecare gradient și imaginați-vă cum se animă.

La finalul

Sunt o mulțime de degrade într-un articol!

Sigur este și te-am avertizat! Dar dacă provocarea este să decoram o imagine fără elemente suplimentare și pseudo-elemente, ne rămân doar câteva posibilități, iar degradeurile sunt cea mai puternică opțiune.

Nu vă faceți griji dacă vă pierdeți puțin în unele explicații. Întotdeauna recomand câteva dintre articolele mele vechi în care intru mai în detaliu câteva dintre conceptele pe care le-am reciclat pentru această provocare.

Voi pleca cu un ultim demo pentru a vă ține până la următorul articol din această serie. De data asta, folosesc radial-gradient() pentru a crea un alt efect de hover amuzant. Vă las să disecați codul pentru a înțelege cum funcționează. Pune-mi întrebări în comentarii dacă te blochezi!