CSS3 on tõesti hakanud hoogu paljude käsud välja toodud CSS3 tööversiooni toetab Firefox, Safari ja Google Chrome. Me arvasime, et oleme kokku pandud mõned meie lemmikud. Enne kui me Alustamiseks CSS3 käsud nõuavad brauseri kindlat süntaksit neile tööle.

Mozilla Firefox peame kasutama-moz-prefix, näiteks:

-Moz piiriülese raadiusega:

Ja Safari-WebKit-prefix, näiteks:

-WebKit-piiri-raadius:

1. Piirivalve raadius

CSS3 piiri raadius käsk loob kaardus nurki element. Asemel kasutada 4 või rohkem pilte, et luua kaardus nurkadega kasutada järgmisi käske:

/ * Mozilla Firefox * /
-Moz-piiri-raadius: 20px;

/ * Safari ja Google Chrome * /
-WebKit-piiri-raadius: 20px;
}

2. Box vari

Vari saab rakendada elemente kasutades CSS3 kasti vari käsk. Box vari aktsepteerib three arvväärtuste pluss värvi kohaldada käesolevat mõju. Need numbrid on:

1. Kaugus horisontaalse nihet vari - Positiivne väärtus tähendab shadow cast paremale ja negatiivne väärtus vasakule
2. Kaugusele vertikaalne nihe vari - Positiivne väärtus tähendab varju heidavad allpool ning negatiivse väärtusega üle
3. Kuidas udune soovid vari

Millele on lisatud värvi väärtus vari on sooritatud:

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

/ * Safari ja Google Chrome * /
-WebKit-box-vari: 5x 5px 5px # b6ebf7;

3. Transparency või RGBA

Läbipaistvus on alati olnud keeruline. Erinevad brauserid ajalooliselt on rakendanud läbipaistvuse kasutades erinevaid käske. Jätkuva seda piiriülese brauser vastuolu oleme lisaks uue CSS3 RGBA tausta vara, aga põhimõtteliselt see käsk loogilisem. Käsk koosneb 4 väärtust - esimene, teine ​​ja kolmas on punane, roheline ja sinine väärtused (0-255) vastavalt millele järgneb alfakanaliga või läbipaistvus (0-1).

Sest RGBA käsk brauser konkreetse eesliited (-moz-,-WebKit-) ei ole kohustatud:

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

Taustavärvi käsklus lisab kena sini-halli tausta juures 0,5 või 50% täpsusega brauserites et mõista CSS3 RGBA vara.

Kahjuks Internet Explorer on ka püüab teha taustavärvi käsu, kuid ei mõista RGBA. Selleks, et taustavärvi on sätestatud ka IE IE-only hack on vaja. Järgnevas näites: viimase lapse pseudo selektor, mida Internet Explorer ei saa aru, mida kasutatakse välista.

keha: viimase lapse # box3 {
/ * Välistatud kõik IE brauseritega kasutades: viimase lapse * /
background-color: RGBA (110, 142, 185, 0,5)! oluline;
}

4. Veerud

Võime lisada veerud on lisatud CSS3. Selle asemel, et ujuva elemente konteinerid saame veeru number, laius ja reegel:

/ * Mozilla Firefox * /
-Moz-column-count: 2;
-Moz-column-lõhe: 20px;
-Moz-veerus reegel: 1px solid # 6e8eb9;

/ * Safari ja Google Chrome * /
-WebKit-column-count: 2;
-WebKit-column-lõhe: 20px;
-WebKit-veeru reegel: 1px solid # 6e8eb9;
}

5. Mitu tausta pildid

Taust kujundlikkus on alati olnud piirav, kui tegemist on CSS tingitud asjaolust saab ainult rakendada ühte taustapilti per element. See ei ole nii CSS3 mis võimaldab mitme pildi kohta element lihtsalt komaga eraldades need.

Asetada pildi nii vasakule ja paremale element saab kasutada järgmisi käske, mis veidi stiili:

padding: 0 20px;
}

See käsk on valesti sulatatakse Internet Explorer, sest see ei nõustuda 2 taustapildi ühele element. Välja kõik IE hack on vaja.

# Box5 blockquote {
/ * Kõigi brauserite, just avatud quote * /
background: url (/ i / quotel.gif) 0 0 no-repeat;
padding: 0 20px;
}

keha: viimase lapse # box5 blockquote {
/ * Välistatud kõik IE brauseritega kasutades: viimase lapse * /
/ * Siis kaks pilti * /
background: url (/ i / quotel.gif) no-repeat 0 0, url (/ i / quoter.gif) no-repeat 100% 0;
}

6. Taust langustel

CSS3 tausta vahed on äärmiselt paindlik ja seda saab kasutada, et luua keerulisi mustreid. Kõige lihtsamalt CSS lineaargradienti võimaldab gradient tuleb kohaldada element ülevalt alla ja vasakult paremale.

See näide CSS3 gradient Mozilla Firefox kehtib helesinine gradient allosas kasti vaid 20% kastide "kõrgus

Safari kasutab vähem intuitiivne, kuid paindlikuma lähenemisviisi kasutades värvi stop väärtusi. Näiteks Safari erikood järgmiselt (pange tähele, lineaarne on toodud sulgudes asemel väljas):

# Box8 {
background:-WebKit-gradient (lineaarne, vasakul all, vasakul üleval, värvi-stop (0, # b6ebf7), värvi-stop (0,20, # fff));
}

7. Pöörlemine

CSS3 võimaldab ka rotatsiooni elemente kasutades muuta käsu, mille pöörata omandi vastu kraadi parameetrit.

<code> # box9 {
-Moz-muuta: pöörlema ​​(2deg);
-WebKit-muuta: pöörlema ​​(2deg);
} </ Code>

8. Ülevaade

Outilines kuuluvad CSS3 spetsifikatsioon ja võimaldavad nii piiri ja ülevaade, mida tuleb kohaldada ühe elemendina.

Ülevaade vara on identne piiri käsk. Täiendav kompenseerida vara võimaldab siiski piiri viia edasi või väljaspool element.

Filed under: Css by admin