CSS3 n pyöreät ja elliptiset gradientit [CSS3-vinkit]
Tänään jatkamme keskustelua CSS3-gradientit. Edellisessä postissa olemme osoittaneet, miten voit luoda Lineaariset gradientit. Tällä kertaa katamme heidän sukulaisensa, Pyöreät ja elliptiset kaltevuudet.
Gradientin syntaksi
CSS3: n gradientti ilmoitetaan käyttäen taustakuva omaisuutta. Tämä on parempi yhteensopivuus, kun meidän on myös lisättävä taustaväri samaan sääntöön, jotta ne eivät törmää toisiinsa. Sitten radiaalisen gradientin luomiseksi kutsumme sitä vain tähän radial-gradientilla () toimia. Toiminnossa on neljä arvoa, joilla kaltevuus asetetaan oikein.
Ensimmäinen arvo määrittää kaltevuusasento. Voimme käyttää kuvailevaa avainsanaa, kuten ylhäältä, alhaalta, keskeltä ja vasemmalta, tai voimme myös olla tarkempia, 50% 50% asettaa kaltevuus keskelle tai 0% 0% asettaa kaltevuus aloitettavaksi ylävasen.
Toinen arvo määrittää muodon ja kaltevuuden koon, on kaksi väitettä gradienttien muokkaamiseksi, ensin ellipsi joka on oletusarvo, ja toinen on ympyrä.
Ja gradientin koko, voimme valita yhden seuraavista kuudesta argumentista.
| arvot | Kuvaus |
|---|---|
Lähin puolella | Kaltevuuden muoto vastaa sen keskiosan lähimpää laatikkoa (ympyröitä varten) tai täyttää sekä pystysuorat että vaakasuorat sivut, jotka ovat lähinnä keskustaa (ellipsit). |
Lähin-nurkka | Gradientin muoto on mitoitettu siten, että se täyttää tarkasti laatikon lähimmän kulman sen keskeltä. |
kaukaisin-puolella | Samankaltainen kuin lähimpänä puolella, paitsi että muoto on mitoitettu vastaamaan keskellä olevaa kauimpana olevaa laatikkoa (tai pystysuoraa ja vaakasuoraa sivua). |
kaukaisin-nurkka | Gradientin muoto on mitoitettu siten, että se täyttää tarkasti laatikon kauimmaisen kulman sen keskeltä. |
sisältää | Synonyymi |
peite | Synonyymi |
Taulukon lähde: Mozilla Developer Network.
Lopuksi kolmas ja neljäs määrittävät väriyhdistelmä. Joten, tässä on, miten kirjoitamme syntaksin luomaan Elliptinen kaltevuudet, ja tällä kertaa käytämme peite gradienttikoon, joten se leviää laajasti, peittäen säiliön;
runko taustakuva: säteittäinen kaltevuus (keskikeskus, ellipsisuojus, # ffeda3, # ffc800);
Voit luoda Pyöreä kaltevuus, jota voimme yksinkertaisesti tehdä näin:
runko taustakuva: säteittäinen kaltevuus (keskikeskus, ympyrän kansi, # ffeda3, # ffc800);
Kuten nimestä käy ilmi, kaltevuuden muoto on ympyrä.
Selaimen tuki
Huomaa kuitenkin, että kaikki selaimet tarjoavat edelleen täyttä tukea tälle toiminnolle, joten he tarvitsevat edelleen toimittajan etuliitteen. Näin ollen koko täydellinen syntaksi, joka toimii kaikissa nykyisissä selaimissa - IE10 +, Firefox 3.6+, Chrome 4.0+, Safari 4.0+ ja Opera 11+ - näyttää jotain tältä;
runko taustakuva: säteittäinen kaltevuus (keskimmäinen pohja, ellipsi kansi, # ffeda3, # ffc800); taustakuva: -o-radiaalinen-kaltevuus (keskimmäinen pohja, ellipsisuojus, # ffeda3, # ffc800); taustakuva: -ms-radial-gradient (keskimmäinen pohja, ellipsisuojus, # ffeda3, # ffc800); taustakuva: -moz-radial-gradient (keskimmäinen pohja, ellipsi kansi, # ffeda3, # ffc800); taustakuva: -webkit-radial-gradient (keskimmäinen pohja, ellipsi kansi, # ffeda3, # ffc800);
Tutustu demoon tai lataa lähde, jos haluat pelata noin kaltevuuksilla.
- esittely
- Lataa lähde
Lopulliset sanat
CSS3-säteittäisen kaltevuuden luominen ei ole niin kovaa kuin luulet, ja varsinkin kun saat apua näistä työkaluista koodin luomiseksi:
- Colorzilla-gradientit
- Gradientoo
Radiaalinen kaltevuus on vain yksi CSS3-gadienttityyppi, jatkamme keskustelua aiheesta tulevissa viroissa, joten pysy ajan tasalla Hongkiat.com-sivustossa
