CSS3 on todella alkaa kerätä vauhtia monien komentojen hahmoteltu CSS3 Working Draft tukee Firefox, Safari ja Googlen Chrome. Ajattelimme koota joitakin suosikkeja. Ennen kuin aloitamme CSS3 komennot vaativat selaimen erityistä syntaksia ne toimisivat.

Mozilla Firefox meidän on käytettävä-moz-etuliite, esimerkiksi:

-Moz-border-säde:

Ja Safari-WebKit-etuliite, esimerkiksi:

-WebKit-raja-säde:

1. Border säde

CSS3 raja säde käsky luo kaarevat kulmat elementti. Sijasta käyttää 4 tai enemmän kuvia luoda kaarevaa kulmat käyttää seuraavia komentoja:

/ * Mozilla Firefox * /
-Moz-border-säde: 20px;

/ * Tätä Safari ja Google Chrome * /
-WebKit-border-säde: 20px;
}

2. Laatikko varjo

Varjo voidaan soveltaa elementtien avulla CSS3 ruudussa varjo komento. Laatikko varjo hyväksyy kolme numeerisia arvoja plus väri soveltaa tätä vaikutusta. Nämä numerot ovat:

1. Etäisyys horisontaalisten offset of Shadow - Positiivinen arvo tarkoittaa varjo heitän oikealle ja negatiivinen arvo vasemmalle
2. Etäisyys vertikaalisen offset of Shadow - Positiivinen arvo tarkoittaa varjo heitän alla ja negatiivinen arvo yli
3. Miten epäselvä haluat varjo

Lisäämällä värin arvo varjo on valmis:

/ * Mozilla Firefox * /
-Moz-box-shadow: 5px 5px 5px # b6ebf7;

/ * Tätä Safari ja Google Chrome * /
-WebKit-box-shadow: 5x 5px 5px # b6ebf7;

3. Avoimuus tai RGBA

Avoimuus on aina ollut hankalaa. Eri selaimet historiallisesti ovat hakeneet avoimuutta käyttämällä erilaisia ​​komentoja. Jatkamme rajat selaimen epäjohdonmukaisuus olemme lisäksi uuden CSS3 RGBA tausta omaisuutta, mutta periaatteessa tämä komento on loogisempi. Komento koostuu 4 arvot - ensimmäinen, toinen ja kolmas ovat punainen, vihreä ja sininen arvot (0-255) vastaavasti jälkeen alfa-kanavan tai läpinäkyvyyttä (0-1).

Sillä RGBA komento Selainkohtaisia ​​etuliitteet (-moz-,-webkit-), ei tarvitse:

# Box3 {
background-color: RGBA (110, 142, 185, 0.5);
}

Taustaväri komento lisää mukava siniharmaa Tausta 0,5 tai 50% opasiteetti selaimissa jotka ymmärtävät CSS3 RGBA omaisuutta.

Valitettavasti Internet Explorer yrittää myös tehdä taustaväri komentoa, mutta eivät ymmärrä RGBA. Jotta taustaväri on myös asetettu IE IE-only hakata tarvitaan. Seuraavassa esimerkissä: viime lapsi pseudo valitsin, joka Internet Explorer ei ymmärrä käytetään jättää sitä.

runko: viime lapsi # box3 {
/ * Poissulje kaikki IE-selaimet käyttävät: viime lapsi * /
background-color: RGBA (110, 142, 185, 0.5)! tärkeää;
}

4. Sarakkeet

Mahdollisuus lisätä sarakkeita on lisätty CSS3. Sen sijaan kelluvat elementit kontit voimme asettaa sarakkeen numeron, leveyden ja sääntö:

/ * Mozilla Firefox * /
-Moz-sarake-count: 2;
-Moz-sarake-aukko: 20px;
-Moz-sarake-sääntö: 1px solid # 6e8eb9;

/ * Tätä Safari ja Google Chrome * /
-WebKit-sarake-count: 2;
-WebKit-sarake-aukko: 20px;
-WebKit-sarake-sääntö: 1px solid # 6e8eb9;
}

5. Useita taustakuvia

Taustaa kuvasto on aina ollut rajoittavaa, kun se tulee CSS koska voit vain käyttää yhtä taustakuvaa per elementti. Tämä ei päde CSS3 joka sallii useita kuvia per elementti yksinkertaisesti pilkulla erottaen ne.

Voit laittaa kuvan sekä vasemmalla ja oikealla puolella elementin voit käyttää seuraavia komentoja, hieman tyyli:

padding: 0 20px;
}

Tämä komento on väärin suorittamista Internet Explorer, koska se ei hyväksy 2 taustakuvia yhdelle elementti. Jättää kaikki IE hakata tarvitaan.

# Box5 blockquote {
/ * Kaikille selaimille, vain avoin tarjous * /
tausta: url (/ i / quotel.gif) 0 0 no-repeat;
padding: 0 20px;
}

runko: viime lapsi # box5 blockquote {
/ * Poissulje kaikki IE-selaimet käyttävät: viime lapsi * /
/ * Sitten kaksi kuvaa * /
tausta: url (/ i / quotel.gif) no-repeat 0 0, url (/ i / quoter.gif) no-repeat 100% 0;
}

6. Taustaa kaltevuudet

CSS3 tausta kaltevuudet ovat erittäin joustavia ja voidaan luoda monimutkaisia ​​kuvioita. Yksinkertaisimmillaan CSS lineaarinen gradientti mahdollistaa kaltevuus voidaan soveltaa osa ylhäältä alas ja vasemmalta oikealle.

Tämä esimerkki CSS3 kaltevuus Mozilla Firefox koskee vaaleansininen liukuväri alaosassa laatikko vain 20% laatikoiden korkeus

Safari käyttää vähemmän intuitiivinen mutta joustavampaa lähestymistapaa käyttäen väri stop arvoja. Esimerkki Safari koodilla seuraavasti (huomaa lineaarinen on suluissa sijaan ulkopuolella):

# Box8 {
Taustaa:-webkit-gradientti (lineaarinen, vasemmalla alhaalla, vasemmalla ylhäällä, väri-stop (0, # b6ebf7), väri-stop (0,20, # fff));
}

7. Kierto

CSS3 mahdollistaa myös kierto elementtejä käyttäen muunnos-komennon, jossa kiertää kiinteistön hyväksyä astetta parametri.

<code> # box9 {
-Moz-transform: pyöritä (2deg);
-WebKit-transform: pyöritä (2deg);
} </ Code>

8. Outlines

Outilines sisältyvät CSS3 spesifikaation ja mahdollistaa sekä raja-ja kaavan soveltaa yhden elementin.

Ääriviivat ominaisuus on identtinen raja-komentoa. Lisää offset omaisuus kuitenkin mahdollistaa rajaa siirretään edelleen sisällä tai ulkopuolella elementti.

Filed under: Css admin