Css gradienți gradienții liniari • despre css
CSS-gradienți: gradienții liniari
CSS-gradienti permit să facă fundalul a două sau mai multe culori, trecerea lin de la unul la altul. Ei au fost cu noi pentru o lungă perioadă de timp, și au un suport destul de bun pentru browsere. Cele mai multe browsere moderne, fără a le înțelege prefixe pentru IE9 si mai mari au filtru Gradient. De asemenea, pentru IE9 pot folosi SVG.
Gradienții pot fi folosite ori de câte ori sunt folosite imagini: în fundaluri, ca liste cu marcatori, acestea pot fi setate în conținutul, sau de frontieră imagine.
Linear gradient
gradienții liniari sunt destul de simplu de utilizat. Pentru a cere suficient de început și de final gradient de culori de bază:
Culorile pot fi orice număr mai mare de două. De asemenea, este posibil să se controleze direcția și limitele de gradient (puncte de oprire) culori.
Direcția poate fi setată de grade sau de cuvinte cheie.
În grade de la 0 la 360, de exemplu 270deg.
Cuvinte cheie: sus = 0deg; la dreapta = 90deg; în jos = 180deg - valoarea implicită; la stânga = 270deg.
Tag-uri pot fi combinate între ele pentru a obține un gradient diagonal, de exemplu stanga sus.
Mai jos puteti vedea modul în care diferitele direcții pe porțiune de liliac la galben:
Aici este codul primului pătrat, de exemplu:
Trebuie amintit faptul că la dreapta sus nu este același lucru ca și 45deg.
linii de culoare gradientului sunt perpendiculare pe direcția gradientului. Când a început linia dreapta merge de la stânga jos spre dreapta sus, la 45deg - situat strict la acest unghi independent de dimensiunile formei.
Diferența de comportament este în mod clar vizibil pe cifrele dreptunghiulare:
Este de asemenea posibil pentru a stabili punctul de oprire pentru valorile culorii gradientului sunt specificate în unități sau procent, și poate fi mai mare de 100% și mai puțin de 0%.
Exemple valori de referință în%. le și valorile care depășesc elementele:
Cele mai aproape de oprire sunt culorile adiacente punctiforme, mai clar va fi granița dintre ele. Astfel, puteți face cu ușurință fundaluri cu dungi:
Deci, este posibil să se facă, de exemplu, în fundal bara laterală care se întinde pe întreaga înălțime a elementului mamă:
Dungi pe fundalul barei laterale (pare rău, nu a putut rezista) - un alt gradient constând dintr-o alternanță de transparență deplină și alb, cu o transparență de 30%. Gradienții cu culori translucide sunt convenabile în care acestea pot fi suprapuse pe fundalul orice culoare.
Gradientul în exemplul dat de cod lung complex, deoarece benzile trebuie plasate chiar deasupra fundalul barei laterale. Dacă nu încercați să faceți tot fundalul pentru un singur bloc, s-ar putea rezolva problema cu ajutorul pseudo. În lipsa codului restricții poate fi mult mai scurt:
Prima linie setează culoarea de fundal a elementului, tipul și direcția (direcția de culoare, și poate fi omisă), al doilea - determină gradientul de culoare și granița dintre ele, a treia - poziționarea și rezoluția imaginii rezultate. Cea mai importantă parte - dimensiunea. Fundalul implicit se repetă, astfel încât modelul rezultat va umple un element de fond. Foarte ușor și ușor de înțeles. )
Întreaga înregistrare se poate face într-o singură linie, dar este mai convenabil să scrie pentru lizibilitate în unele, mai ales pentru gradienți complexe.
De asemenea, este important să se știe că cuvântul cheie transparent transparent înseamnă negru, nu alb transparent, astfel încât atunci când îl utilizați în Firefox, puteți obține doar o astfel de bătaie de cap:
Pentru a evita acest lucru, utilizați o nuanță de culoare complet transparentă dorită, de exemplu, alb: RGBA (255, 255, 255, 0) sau RGBA negru (0, 0, 0, 0). Despre diferite moduri de a seta culorile pot fi citite aici.
Pentru a afla rgb-notație de o anumită culoare, puteți utiliza CSS.coloratum. instrument de Lea Verou.
In afara de obicei liniar gradientul poate fi repetarea liniar gradient - gradient de repetarea
Din păcate, gradienți repetitive se comportă ca și oribil potrivite numai pentru modele care nu sunt importante de precizie. Dacă aveți nevoie de precizie, utilizați un gradient liniar în combinație cu fundal și dimensiunea de fundal se repetă.
Gradienții au aceeași limitare ca box-umbra. ele nu pot specifica o culoare sau direcție separată. Acest lucru duce la duplicarea de cod și necesitatea urgentă de a utiliza preprocesoare la crearea gradienti complexe.
O altă limitare este faptul că gradienții nu sunt animate, care, cu toate acestea, ar putea fi într-o anumită măsură evitată.
Pentru a crea rapid cross-browser gradienții există un instrument foarte util: colorzilla.com/gradient-editor/. În plus față de codul pentru browserele moderne, acesta va oferi codul pentru IE mai vechi si SVG pentru al 9-lea.
În combinație cu imagini de bază de control de fond gradienți oferă cele mai bune oportunități pentru crearea de medii de diferite grade de dificultate în întregime, fără utilizarea de imagini. Gradienții pot face modele complexe și interesante, dar asta e un alt subiect.