CSS3 tikrai pradeda įgauti pagreitį su daugeliu komandų, nurodyta CSS3 darbo Firefox, Safari ir "Google Chrome" remia projektą . Mes galvojome, mes norime sujungti kai mūsų pasirinkimą. Prieš mes pradėti CSS3 komandos reikalauja naršyklės sintaksė juos dirbti.

Mozilla Firefox, mes turime naudoti-MOZ-priešdėlis, pavyzdžiui :

MOZ-border-radius:

Ir "Safari WebKit-priešdėlis, pavyzdžiui:

WebKit-border-radius:

1. Sienos spindulys

CSS3 sienos spindulys komanda sukuria kreivų kampų elementas. , Vietoj 4 arba daugiau vaizdų kurti kreivų kampų naudokite šias komandas :

/ * Mozilla Firefox * /
-Moz-border-radius: 20px;

/ "Safari" ir "Google Chrome" * * /
-WebKit-border-radius: 20px;
}

2. Dėžutė šešėlis

Šešėlis gali būti taikomi elementai, naudojant CSS3 lange šešėlis komandą. Laukelio šešėlis priima trys skaitines vertes plius spalvą taikyti šį poveikį. Šie numeriai yra šie:

1. Horizontali kompensuoti šešėlių atstumas - teigiama vertė reiškia, šešėlis mesti į dešinę ir į kairę neigiama reikšmė
2. Atstumas vertikaliųjų kompensuoti šešėlių - teigiama vertė reiškia šešėlį mesti žemiau ir neigiama vertė viršija
3. Kaip neryškus norite šešėlis

Su spalva vertė be šešėlio yra baigtas:

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

/ "Safari" ir "Google Chrome" * * /
WebKit-dėžė-šešėlis: 5x 5px 5px # b6ebf7;

3. Skaidrumo arba RGBA

Skaidrumo visada buvo sudėtinga. Skirtingų naršyklių, istoriškai buvo taikomos skaidrumo naudojant skirtingas komandas. Tęsti šį kryžminio naršyklės nenuoseklumo turime naują CSS3 RGBA nuosavybė background to, tačiau iš esmės ši komanda yra labiau logiška. Komanda sudaro 4 vertybės - pirmoje, antroje ir trečioje raudonos, žalios ir mėlynos spalvų vertes (0-255) alfa kanalas arba skaidrumo (0-1).

RGBA komandą naršyklės priešdėliai (-MOZ-,-WebKit) nėra reikalingas:

# Box3 {
fono spalva: RGBA (110, 142, 185, .5);
}

Fono spalva komandą priduria, gražus mėlynos spalvos pilkame fone .5 arba 50% neskaidrumo naršyklių, kurie supranta CSS3 RGBA nuosavybė.

Deja "Internet Explorer" taip pat bus bandoma padaryti fono spalva komandą, tačiau nesupranta RGBA. Siekiant užtikrinti, kad fono spalva yra taip pat nustatyti IE IE tik Hack. Toliau pateiktame pavyzdyje: paskutinės vaikų pseudo selektorius naudojamas pašalinti "Internet Explorer nesupranta.

korpusas: paskutiniai vaiko # box3 {
/ * Pašalinti visus IE naršykles, naudojant: paskutinis vaikas * /
fono spalva:! RGBA (110, 142, 185, .5) svarbūs;
}

4. Stulpeliai

Buvo įtraukta į CSS3 gebėjimą pridėti stulpelių. O ne per konteinerius kintamų elementų mes galime nustatyti stulpelio numeris, plotis ir taisyklės:

/ * Mozilla Firefox * /
MOZ stulpelių skaičius: 2;
MOZ kolonėlės tarpo: 20px;
-MOZ stulpelio taisyklė: 1px solid # 6e8eb9;

/ "Safari" ir "Google Chrome" * * /
WebKit stulpelių skaičius: 2;
WebKit kolonėlės atotrūkis: 20px;
-WebKit stulpelio taisyklė: 1px solid # 6e8eb9;
}

5. Keli fono paveikslėlius

Fono vaizdai visada buvo ribojančių, kai jis ateina į CSS, nes tai už elementas galite taikyti tik vieną fono paveikslėlius. Tai ne su CSS3, kuri leidžia kartotinius paveikslus per elementas tiesiog kableliais atskirdami juos.

Vaizdas tiek į kairę ir į dešinę elementą, galite naudoti šias komandas, su šiek tiek stiliaus:

padding: 0 20px;
}

Ši komanda bus neteisingai suteiktas "Internet Explorer", kaip ji nesutinka 2 vieno elemento fono paveikslėlius. Pašalinti visus IE Hack.

# Box5 blockquote {
/ * Visose naršyklėse, tik atvirą citata * /
background: url (/ i / quotel.gif) 0 0 no-repeat;
padding: 0 20px;
}

korpusas: paskutiniai vaiko # box5 blockquote {
/ * Pašalinti visus IE naršykles, naudojant: paskutinis vaikas * /
/ * Tada du paveikslėliai * /
background: url (/ i / quotel.gif) no-repeat 0 0, url (/ i / quoter.gif) no-repeat 100% 0;
}

6. Fono nuolydžiai

CSS3 fone gradientai yra labai lanksti ir gali būti naudojama siekiant sukurti sudėtingų modelių. Paprasčiausia CSS gradiento leidžia gradientas turi būti taikomas elementas iš viršaus į apačią ir iš kairės į dešinę.

Šis CSS3 gradientas Mozilla Firefox pavyzdys taikoma tik 20% dėžės aukštis šviesiai mėlynos gradientas langelį apačioje

Safari naudoja mažiau intuityvi, bet lankstesnį požiūrį, naudojant spalvų sustabdyti vertės. Safari specialų kodą, pavyzdžiui, taip (atkreipkite dėmesį, linijinis skliausteliuose, o ne už jos ribų):

# Box8 {
fonas: WebKit-gradiento (linijinė, kairiajame apatiniame, kairiajame viršutiniame, spalva langelio (0, # b6ebf7), spalvos langelio (0,20, # fff));
}

7. Rotacija

CSS3 taip pat leidžia naudojant komandą transformacijos elementų rotacija, pasukti nuosavybės priimti kaip parametras laipsnių.

<code> # BOX9 {
-Moz-transformacija: pasukti (2deg);
WebKit transformacija: pasukti (2deg);
} </ Code>

8. Kontūrai

Outilines CSS3 specifikacija ir leisti pasienio ir kontūro būti taikomas vienas elementas.

Kontūro turtas yra tapatus pasienio komandą. Tačiau papildomų kompensuoti nuosavybės leidžia sienos turi būti perkeltas toliau viduje ar už jos ribų elemento.

By admin Filed under: Css