Sunteți sigur că știți cu toții despre astfel de proprietăți simple CSS ca "box-shadow" și "background"? Și poate, cu ajutorul lor, puteți desena o imagine întreagă? Am obținut chiar și 4 imagini minunate pe CSS pură.
Recent am descoperit imagini despre care se spunea că au fost executate pe un CSS pur, cu doar un bloc. La început nu am crezut că este posibil să facem fotografii atât de frumoase cu un singur stil. Am fost foarte interesați de acest subiect, deci am decis să ne aprofundăm cunoștințele în fundal - ah și box-shadow-ah.
* Exemplele din acest articol pot să nu fie afișate în mod corespunzător în versiunile mai vechi ale browserelor.
Primul nostru test este următorul:
Ideea este de a stiliza un div astfel încât să obțineți o imagine completă. Pentru aceasta este convenabil să se utilizeze astfel de caracteristici CSS ca mai multe fundaluri și cutie-umbra. Și pentru a nu se pierde în stiluri, am folosit mai puțin preprocesorul și funcția de "îmbinare".
Îmbinarea sau îmbinarea vă permite să adăugați proprietăți la o valoare separată prin virgulă sau spațiu. În cazul nostru, a avut sens. Uitați-vă la exemplu:
La compilare au fost recepționate astfel de linii în CSS:
Sunt de acord că această linie nu este foarte ușor de înțeles, dar există doar 2 fundaluri.
Pentru o simplă pictogramă, aceasta nu este critică, dar asta este pentru o imagine deplină. De exemplu, pentru a atrage atenția (un exemplu de mai jos), am aplicat simultan 20 de fundaluri.
Dacă specificați toate dimensiunile în procente, puteți obține o pictogramă scalabilă. Iată rezultatul (mutați cursorul la scară):
Perspectivele de a beneficia de CSS pur nu sunt atât de limitate, dar foarte largi. Pentru a confirma aceste cuvinte, am atras un ochi și o pizza, fiecare dintre ele fiind doar un bloc.