Conţinut
Utilizând codul CSS, puteți genera fundal dungat pentru o pagină web fără a utiliza grafică. Acest efect folosește niveluri de gradient CSS cu pauze multiple de culoare, precum și proprietatea dimensiunii de fond pentru a face ca vectorul de gradient să se repete pe ecran. Cea mai bună modalitate de a face acest lucru este să începeți cu o culoare solidă de fundal și să faceți una dintre dungile transparente pentru ca culoarea să fie evidențiată. Utilizatorii care vă accesează pagina utilizând browserele de internet vechi vor vedea o culoare solidă.
instrucțiuni de ghidare
-
Deschideți fișierul foaie de stil CSS în Notepad sau într-un program de editare a codului. Adăugați această regulă la sfârșitul fișierului:
html {înălțime: 100%; }
Această regulă face posibilă umplerea întregului fundal al unei pagini web cu banda de gradient pe care o va crea.
-
Setați o culoare de fundal pentru pagina dvs. în "html {}" pentru a furniza culoarea de bază pentru dungile dvs. și o valoare prestabilită pentru browserele vechi:
html {înălțime: 100%; fundal-culoare: negru; }
-
Adăugați următorul cod la valorile implicite "html {}" pentru a crea un efect de bandă orizontală:
fundal-imagine: gradient linear (transparent 50%, alb 50%);
Va crea două pauze de culoare, prima fiind transparentă, iar cea de-a doua fiind albă. Fiecare întrerupere a culorii necesită 50% din spațiul de gradient de pe ecran. Reglați lățimea benzilor modificând valorile procentuale.
-
Adăugați o valoare de zero la prima pauză de culoare și o separați cu o virgulă:
Imagine de fundal: gradient liniar (0, transparent 50%, negru 50%);
Aceasta vă va poziționa dungile în poziție verticală, mai degrabă decât poziționându-le orizontal.
-
Duplicați proprietatea imaginii de fundal și valorile acesteia într-o linie nouă. Faceți acest lucru de două ori, creând trei linii cu același cod. Adăugați prefixul "-moz" la gradientul liniar într-unul din liniile duplicat de cod. Adăugați prefixul "-webkit" la celălalt rând duplicat:
fundal-imagine: gradient liniar (0, transparent 50%, alb 50%); fundal-imagine: -moz-linear-gradient (0, transparent 50%, alb 50%); fundal-imagine: -webkit-gradient liniar (0, transparent 50%, alb 50%);
-
Limitați gradientul la o anumită sumă de pixeli prin setarea dimensiunii de fundal în următoarea linie din codul dvs. CSS:
dimensiune de fundal: 20 pixeli;
Modificați numărul pixelilor de dimensiune de fundal pentru a modifica dimensiunea gradientului. Datorită repetării constante a gradientului de lățime a paginii, fiecare repetare va corespunde unui set de benzi pe ecran.
instrucțiuni de ghidare
avertisment
- Unele browsere mai vechi nu acceptă gradienți CSS3. Când doriți să afișați dungi pentru toate tipurile de browsere, utilizați comentariile condiționale pentru a include o foaie de stil cu o diagramă repetată.