CSS3 je naozaj začína rýchlejšie, s mnohými z príkazov uvedených v CSS3 pracovná verzia podporuje Firefox, Safari a Google Chrome. Mysleli sme, že sme chceli dať dohromady niektoré z našich obľúbených. Než začneme CSS3 príkazy vyžadujú prehliadač špecifické syntaxe pre nich pracovať.

Pre Mozilla Firefox je potrebné použiť-moz-prefix, napríklad:

-Moz-border-radius:

A pre Safari-WebKit-prefix, napríklad:

-Webkit-border-radius:

1. Hraničný polomer

Hranice CSS3 radius príkaz vytvorí zaoblené rohy na element. Namiesto použitia 4 a viac snímok na vytvorenie zakrivené rohy použiť nasledujúce príkazy:

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

/ * Pre Safari a Google Chrome * /
-Webkit-border-radius: 20px;
}

2. Box tieň

Tieň môže byť aplikovaný na prvky pomocou CSS3 box tieňa príkaz. Box tieni prijíma tri číselné hodnoty a farbu, ktorá v tomto zmysle. Tieto čísla sú:

1. Vzdialenosť horizontálny posun tieňa - Kladná hodnota znamená, že tieň bude cast vpravo a záporná hodnota vľavo
2. Vzdialenosť vertikálny posun tieňa - Kladná hodnota znamená, že tieň pod cast a záporná hodnota nad
3. Ako by ste rozmazané ako tieň

S pridaním hodnoty farby tieňa dokončenia:

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

/ * Pre Safari a Google Chrome * /
-Webkit-box-shadow: 5px 5px 5x # b6ebf7;

3. Priehľadnosť alebo RGBA

Transparentnosť je vždy zradné. Rôznych prehliadačoch historicky použili transparentnosť pomocou rôznych príkazov. Pokračovať v tejto naprieč prehliadači rozpor máme pridanie nových vlastností CSS3 pozadí RGBA, ale v zásade tento príkaz je logickejšie. Príkaz sa skladá zo 4 hodnôt - prvý, druhý a tretí sú červené, zelené a modré hodnoty (0-255), respektíve nasleduje alfa kanál, alebo priehľadnosť (0-1).

Pre príkaz RGBA prehliadač špecifické prefixy (-moz-,-WebKit-) sa nevyžaduje:

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

Farbu pozadia príkaz pridá pekné modro-šedom pozadí na 0,5 alebo 50% krytie v prehliadačoch, ktoré chápu CSS3 RGBA majetku.

Bohužiaľ Internet Explorer pokúsi vykresliť pozadie príkazom, ale nerozumel RGBA. Aby sa zabezpečilo, že farba pozadia je tiež nastaviť v IE IE len hack je nutné. V nasledujúcom príklade: posledné dieťa pseudo voliča, ktorý Internet Explorer nerozumie, je používaný vylúčiť.

telo: Posledné dieťa # {box3
/ * Vylúčiť všetky prehliadača IE pomocou: posledné dieťa * /
background-color:! RGBA (110, 142, 185, .5) dôležité;
}

4. Stĺpce

Možnosť pridávať stĺpca bola pridaná do CSS3. Skôr než plávajúcich prvkov v kontajneroch môžeme nastaviť číslo stĺpca, šírka a pravidlá:

/ * Pre Mozilla Firefox * /
-Moz-stĺp-Počet osôb: 2;
-Moz-stĺpec medzery: 20px;
-Moz-stĺp-pravidlo: 1px solid # 6e8eb9;

/ * Pre Safari a Google Chrome * /
-Webkit-stĺpec-Počet osôb: 2;
-Webkit-stĺpec medzery: 20px;
-Webkit-stĺpec-pravidlo: 1px solid # 6e8eb9;
}

5. Viac obrázkov na pozadí

Pozadie snímok bola vždy reštriktívne, pokiaľ ide o CSS vzhľadom k tomu je možné použiť iba jeden obrázok na pozadí na element. To nie je prípad CSS3, ktoré umožňuje viac obrázkov na jeden prvok tým, že jednoducho čiarkou oddeľuje.

Ak chcete umiestniť obraz na ľavej a pravej strane prvku, môžete použiť nasledujúce príkazy, s trochou styling:

padding: 0 20px;
}

Tento príkaz sa mis-poskytovaných Internet Explorer, pretože neprijíma 2 obrázky pozadia na jednom prvku. Vylúčiť všetky hack IE je potrebné.

# {Box5 blockquote
/ * Pre všetky prehliadače, stačí otvoriť citácie * /
pozadia: url (/ i / quotel.gif) 0 0 no-repeat;
padding: 0 20px;
}

telo: Posledné dieťa # box5 blockquote {
/ * Vylúčiť všetky prehliadača IE pomocou: posledné dieťa * /
/ * Potom sa obaja obrazy * /
pozadia: url (/ i / quotel.gif) no-repeat 0 0, url (/ i / quoter.gif) no-repeat: 100% 0;
}

6. Pozadie prechody

CSS3 pozadia, prechody sú veľmi flexibilné a môžu byť použité na vytváranie zložitých vzorcov. Vo svojej najjednoduchšej CSS lineárny prechod umožňuje prechod byť aplikovaný na element od zhora nadol a zľava doprava.

Tento príklad CSS3 gradientu v Mozilla Firefox používa svetlo modrý prechod na dne krabice, len 20% z polí "výšky

Safari používa menej intuitívne, ale pružnejší prístup s použitím farebných hodnôt zastaviť. Príkladom Safari špecifický kód takto (všimnite si LINEAR je uvedená v zátvorke miesto vonku):

# {Box8
Pozadie:-WebKit-gradient (lineárne, vľavo dole, vľavo hore, farba-stop (0, # b6ebf7), farba-stop (0,20, # FFF));
}

7. Rotácia

CSS3 tiež umožňuje otočenie prvkov pomocou príkazu transformácie s majetkom točiť prijatie tituly ako parameter.

<code> # {box9
-Moz-transform: Rotácia (2deg);
-Webkit-transform: Rotácia (2deg);
} </ Code>

8. Obrysy

Outilines sú zahrnuté v špecifikácii CSS3 a umožniť obom hranice a prehľad, ktoré sa použijú na jeden prvok.

Prehľad vlastností je totožný s príkazom hranicu. Ďalší posun majetku však umožňuje, aby hranice sa pohyboval ešte viac vo vnútri alebo mimo prvku.

Súbor pod: Css admin