CSS3 je opravdu začíná rychlejší, s mnoha z příkazů uvedených v CSS3 pracovní verze podporuje Firefox, Safari a Google Chrome. Mysleli jsme, že jsme chtěli dát dohromady některé z našich oblíbených. Než začneme CSS3 příkazy vyžadují prohlížeč specifické syntaxe pro ně pracovat.

Pro Mozilla Firefox je třeba použít-moz-prefix, například:

-Moz-border-radius:

A pro Safari-webkit-prefix, například:

-Webkit-border-radius:

1. Hraniční poloměr

Hranice CSS3 radius příkaz vytvoří zaoblené rohy na element. Namísto použití 4 a více snímků na vytvoření zakřivené rohy použít následující příkazy:

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

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

2. Box stín

Stín může být aplikován na prvky pomocí CSS3 box stínu příkaz. Box stínu přijímá tři číselné hodnoty a barvu, která v tomto smyslu. Tato čísla jsou:

1. Vzdálenost horizontální posun stínu - Kladná hodnota znamená, že stín bude cast vpravo a záporná hodnota vlevo
2. Vzdálenost vertikální posun stínu - Kladná hodnota znamená, že stín pod cast a záporná hodnota nad
3. Jak byste rozmazané jako stín

S přidáním hodnoty barvy stínu dokončení:

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

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

3. Průhlednost nebo RGBA

Transparentnost je vždy ošidné. Různých prohlížečích historicky použili průhlednost pomocí různých příkazů. Pokračovat v této napříč prohlížeči rozpor máme přidání nových vlastností CSS3 pozadí RGBA, ale v zásadě tento příkaz je logičtější. Příkaz se skládá ze 4 hodnot - první, druhý a třetí jsou červené, zelené a modré hodnoty (0-255), respektive následuje alfa kanál, nebo průhlednost (0-1).

Pro příkaz RGBA prohlížeč specifické prefixy (-moz-,-webkit-) se nevyžaduje:

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

Barvu pozadí příkaz přidá pěkné modro-šedém pozadí na 0,5 nebo 50% krytí v prohlížečích, které chápou CSS3 RGBA majetku.

Bohužel Internet Explorer pokusí vykreslit pozadí příkazem, ale nerozuměl RGBA. Aby bylo zajištěno, že barva pozadí je také nastavit v IE IE pouze hack je nutné. V následujícím příkladu: poslední dítě pseudo voliče, který Internet Explorer nerozumí, je používán vyloučit.

tělo: Poslední dítě # {box3
/ * Vyloučit všechny prohlížeče IE pomocí: poslední dítě * /
background-color:! RGBA (110, 142, 185, .5) důležité;
}

4. Sloupce

Možnost přidávat sloupce byla přidána do CSS3. Spíše než plovoucích prvků v kontejnerech můžeme nastavit číslo sloupce, šířka a pravidla:

/ * Pro Mozilla Firefox * /
-Moz-sloup-Počet osob: 2;
-Moz-sloupec mezery: 20px;
-Moz-sloup-pravidlo: 1px solid # 6e8eb9;

/ * Pro Safari a Google Chrome * /
-Webkit-sloupec-Počet osob: 2;
-Webkit-sloupec mezery: 20px;
-Webkit-sloupec-pravidlo: 1px solid # 6e8eb9;
}

5. Více obrázků na pozadí

Pozadí snímků byla vždy restriktivní, pokud jde o CSS vzhledem k tomu lze použít pouze jeden obrázek na pozadí na element. To není případ CSS3, které umožňuje více obrázků na jeden prvek tím, že prostě čárkou odděluje.

Chcete-li umístit obraz na levé a pravé straně prvku, můžete použít následující příkazy, s trochou styling:

padding: 0 20px;
}

Tento příkaz se mis-poskytovaných Internet Explorer, jelikož nepřijímá 2 obrázky pozadí na jednom prvku. Vyloučit všechny hack IE je zapotřebí.

# {Box5 blockquote
/ * Pro všechny prohlížeče, stačí otevřít citace * /
pozadí: url (/ i / quotel.gif) 0 0 no-repeat;
padding: 0 20px;
}

tělo: Poslední dítě # box5 blockquote {
/ * Vyloučit všechny prohlížeče IE pomocí: poslední dítě * /
/ * Pak se oba obrazy * /
pozadí: url (/ i / quotel.gif) no-repeat 0 0, url (/ i / quoter.gif) no-repeat: 100% 0;
}

6. Pozadí přechody

CSS3 pozadí, přechody jsou velmi flexibilní a mohou být použity k vytváření složitých vzorců. Ve své nejjednodušší CSS lineární přechod umožňuje přechod být aplikován na element od shora dolů a zleva doprava.

Tento příklad CSS3 gradientu v Mozilla Firefox používá světle modrý přechod na dně krabice, jen 20% z polí "výšky

Safari používá méně intuitivní, ale pružnější přístup s použitím barevných hodnot zastavit. Příkladem Safari specifický kód takto (všimněte si LINEAR je uvedená v závorce místo venku):

# {Box8
Pozadí:-webkit-gradient (lineární, vlevo dole, vlevo nahoře, barva-stop (0, # b6ebf7), barva-stop (0,20, # FFF));
}

7. Rotace

CSS3 také umožňuje otočení prvků pomocí příkazu transformace s majetkem točit přijetí tituly jako parametr.

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

8. Obrysy

Outilines jsou zahrnuty ve specifikaci CSS3 a umožnit oběma hranice a přehled, které se použijí na jeden prvek.

Přehled vlastností je totožný s příkazem hranici. Další posun majetku však umožňuje, aby hranice se pohyboval ještě více uvnitř nebo vně prvku.

Soubor pod: Css admin