Modele CSS
Abilitatea de a gestiona fundaluri prin CSS în combinație cu gradiente oferă posibilități absolut incredibile. Gradienții pot desena aproape orice, de la celule simple, dungi și cercuri la modele destul de complexe. Puteți juca pe termen nelimitat.
Principiul general este acesta: se creează un gradient, care trebuie repetat. În mod implicit, va ocupa întreaga zonă disponibilă, dar dacă setați dimensiunea fundalului, veți obține o imagine cu dimensiunea dorită, care va fi întregul fundal al elementului. Dacă setați gradientul în procente sau em. atunci puteți gestiona cu ușurință dimensiunea modelului modificând dimensiunea fontului și / sau mărimea fundalului.
De exemplu, puteți face benzi simple:
Dungile albe alternează cu transparență și pot fi plasate pe orice fundal. Gestionarea limitei dintre culoare și transparență poate ajusta lățimea benzilor.
Dacă în locul culorii albe setați un alb sau negru translucid, puteți obține un model universal care va arăta bine pe orice fundal:
Folosind două gradienți cu linii translucide colorate, poți să faci o față de masă:
Cu ajutorul dungilor multicolore puteți face elemente decorative mici:
Dacă aveți nevoie de un fundal dungat mai complicat, este logic să acordați atenție principiului ciclului:
Principiul este de a folosi mai multe fundaluri de dimensiuni diferite. Acest lucru înseamnă că acestea vor acosta și în locuri diferite, astfel că va fi imposibil să găsiți pe fundal site-uri duplicate sau site-uri de andocare. După părerea mea, a inventat ingenios.
Fundalul este suprapus între ele de la cel mai mare (de sus) până la cel mai mic (în cea mai adâncă parte). Ca rezultat, articulațiile celor mai puțin adânci și repetate vor fi suprapuse de straturile superioare.
Am realizat 4 culori diferite cu diferite culori și le-am întrebat diferite dimensiuni:
Acestea sunt numerele prime, adică cele care nu se împart în nimic altceva decât pe ei înșiși.
Arată ca magie. )
De asemenea, din gradientele dungate este ușor să se obțină, de exemplu, o foaie de hârtie într-o riglă:
Cu linii simple, totul este destul de clar, dar ce dacă aveți nevoie de un model de linii de înclinare?
repetarea-gradient liniar ar trebui să ajute, dar în practică, gradientul se comportă ca oribil (întinde fereastra browserului).
Să încercăm să facem benzi simple, rotite cu 45 °.
În exemplul dat, este clar că modelul constă în repetate pătrate, gradientul merge din colțul din stânga jos în dreapta sus, dar în colțurile opuse nu există nimic și linia se dovedește a fi intermitentă.
Pentru a închide spațiile, adăugați încă un gradient:
Am făcut un colț strălucitor, ca să văd de unde a ajuns:
Pictim colțul în culoarea potrivită și obținem linii înguste:
Adevărat, a trebuit să ajustăm ușor punctele de oprire a culorilor în primul gradient (50% → 49,9%), dar acum nu există articulații.
Dacă în loc de un unghi, specificați direcția cuvintelor cheie, de exemplu, în partea stângă sus. aceasta vă va permite să modificați unghiul gradientului prin modificarea dimensiunii acestuia, deoarece în acest caz, gradientul va fi întotdeauna direcționat de la un colț la altul, indiferent de dimensiunea fundalului.
Ultima linie are un gradient dreptunghiular. Datorită direcției și valorii opririlor în procente, puteți schimba dimensiunea dorită - unghiul liniilor se va schimba, dar modelul nu va suferi de acest lucru:
În unele cazuri, marginile liniilor devin jagged și randarea lor depinde de browser: Chrome se descurcă mai bine, în Firefox se pot vedea pașii. Pentru a face marginea netedă, puteți face ca joncțiunea dintre culori să nu fie clară, dar difuză, cu o lățime de 1-2%. De asemenea, țineți minte problema cu culori transparente în Firefox - aceasta este rezolvată folosind nuanța dreaptă cu transparență completă.
Experimentând cu liniile puteți obține alte modele interesante:
Cu toate acestea, am fost dus. Cu gradiente radiale, puteți face și lucruri interesante. Aici, de exemplu, mazărea obișnuită:
Pentru a face linia de gradient netedă, fără denticule, limita de transparență trebuie să fie făcută puțin mai departe decât punctul de oprire al culorii. Webkiturile, ca de obicei, fac mai bine cu anti-aliasing.
Principiul creării tiparelor este același ca și pentru gradientele liniare. Și combinarea gradientelor liniare și radiale poate fi obținută din forme geometrice simple mai complexe:
Puteți face modele destul de complexe, pentru aceasta este mai bine să utilizați capabilitățile preprocesoarelor:
Dezavantajele acestor tipare sunt, de obicei, în lungimea și complexitatea codului, precum și în lipsa suportului oferit de browserele mai vechi. Ar putea avea nevoie de o imagine. Pro - gradientele nu cântăresc nimic, nu trebuie să fie solicitate de la server și puteți schimba cu ușurință culorile și mărimea modelului.
Mai multe modele pot fi văzute în galeria inspiratoare de la Lea Verou: lea.verou.me/css3patterns/.