CSS3

Z Multimediaexpo.cz

CSS3 (Cascading Style Sheets 3) je už třetí verzí kaskádových stylů CSS, a to již od roku 2005, kdy byl vývoj této technologie zahájen konsorciem W3C. Očekávané dokončení této technologie se předpokládá na rok 2015, ale již dnes je většina vlastností podporována nejběžnějšími webovými prohlížeči.

Přehled nových vlastností v CSS3

Zaoblené rohy

Jednou z, dnes již hojně využívaných, nových vlastností je zaoblení rohů u HTML prvků. Díky této vlastnosti se nemusí zaoblení řešit pomocí obrázků, ale pomocí border-radius. Tuto vlastnost můžeme použít s jednou, dvěma nebo čtyřmi hodnotami. A je potřeba to zapsat spolu s dalšími proprietárními vlastnostmi pro jednotlivé prohlížeče a to z důvodu kompatibility mezi prohlížeči.

border-radius s jednou hodnotou

Touto jednou hodnotou ovlivníme všechny čtyři rohy nějakého prvku.

div {
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
}

Podpora: firefox, opera, chrome, safari, internet explorer

border-radius se dvěma hodnotami

První hodnotou ovlivníme levý horní a pravý dolní roh. A druhou hodnotou ovlivníme levý dolní a pravý horní roh.

div {
-webkit-border-radius: 10px 25px;
-moz-border-radius: 10px 25px;
border-radius: 10px 25px;
}

Podpora: Mozilla Firefox, Opera, Google Chrome, Safari, Internet Explorer

border-radius se čtyřmi hodnotami

První hodnotou ovlivníme levý horní roh, druhou hodnotou pravý horní roh, třetí hodnotou pravý dolní roh a čtvrtou hodnotou ovlivníme levý dolní roh.

div {
-webkit-border-radius: 10px 20px 30px 40px;
-moz-border-radius: 10px 20px 30px 40px;
border-radius: 10px 20px 30px 40px;
}

Podpora: Mozilla Firefox, Opera, Google Chrome, Safari, Internet Explorer

Stín u blokového prvku

Tato vlastnost nastavuje stín u blokového prvku.

box-shadow

Tato vlastnost má čtyři hodnoty. První hodnotou nastavujeme horizontální posun stínu od objektu. Naopak druhá hodnota nastaví vertikální posun stínu od objektu. Třetí hodnota nastavuje okraj stínu, kde pak stín přechází do ztracena a poslední čtvrtá hodnota je určená pro barvu stínu. A opět je potřeba to zapsat spolu s dalšími proprietárními vlastnostmi pro jednotlivé prohlížeče a to z důvodu kompatibility mezi prohlížeči.

div {
-webkit-box-shadow: 15px 10px 20px #000;
-moz-box-shadow: 15px 10px 20px #000;
box-shadow: 15px 10px 20px #000;
}

Podpora: Mozilla Firefox, Opera, Google Chrome, Safari, Internet Explorer

Stín u textu

Tato vlastnost nastavuje stín u obyčejného textu.

text-shadow

Tato vlastnost má čtyři hodnoty. První hodnotou nastavujeme horizontální posun stínu od textu. Naopak druhá hodnota nastaví vertikální posun stínu od textu. Třetí hodnota nastavuje okraj stínu, kde pak stín přechází do ztracena a poslední čtvrtá hodnota je určená pro barvu stínu. A opět je potřeba to zapsat spolu s dalšími proprietárními vlastnostmi pro jednotlivé prohlížeče a to z důvodu kompatibility mezi prohlížeči.

div {
-webkit-text-shadow: 15px 10px 20px #000;
-moz-text-shadow: 15px 10px 20px #000;
text-shadow: 15px 10px 20px #000;
}

Podpora: Mozilla Firefox, Opera, Google Chrome, Safari, Internet Explorer

Transformace

Tato vlastnost umožňuje transformovat prvek. Rozlišují se tři transformace a to translate, rotate a scale

transform: translate

Tato vlastnost umožňuje pohyb prvku po x a y ose. Podhodnotou této vlastnosti je v tomto případě translate, která má dvě hodnoty a to hodnotu x osy a y osy kam se má prvek posunout. Když je x hodnota kladná, tak se prvek posune doprava a při záporné zase doleva. U osy y je to obdobné a to tak, že když je hodnota kladná, tak se prvek posune dolů a při záporné hodnotě se posune nahoru. A opět je potřeba to zapsat spolu s dalšími proprietárními vlastnostmi pro jednotlivé prohlížeče a to z důvodu kompatibility mezi prohlížeči.

div {
-ms-transform: translate(2em,1em);
-webkit-transform: translate(2em,1em);
-moz-transform: translate(2em,1em);
transform: translate(2em,1em);
}

Podpora: Mozilla Firefox, Opera, Google Chrome, Safari, Internet Explorer

transform: rotate

Tato vlastnost umožňuje rotaci prvku. Podhodnotou této vlastnosti je v tomto případě rotace, která má jednu hodnotu a to hodnotu pootočení. Prvek se poté pootočí okolo své osy ve směru hodinových ručiček o danou hodnotu. A opět je potřeba to zapsat spolu s dalšími proprietárními vlastnostmi pro jednotlivé prohlížeče a to z důvodu kompatibility mezi prohlížeči.

div {
-ms-transform: rotate(50deg);
-webkit-transform: rotate(50deg);
-moz-transform: rotate(50deg);
transform: rotate(50deg);
}

Podpora: Mozilla Firefox, Opera, Google Chrome, Safari, Internet Explorer

transform: scale

Tato vlastnost umožňuje změnu velikosti prvku. Podhodnotou této vlastnosti je v tomto případě scale, která má jednu hodnotu a to hodnotu zvětšení. Prvek se poté zvětší o danou hodnotu. Když je hodnota 1, tak se jedná o standardní velikost. A opět je potřeba to zapsat spolu s dalšími proprietárními vlastnostmi pro jednotlivé prohlížeče a to z důvodu kompatibility mezi prohlížeči.

div {
-ms-transform: scale(2,4);
-webkit-transform: scale(2,4);
-moz-transform: scale(2,4);
transform: scale(2,4);
}

Podpora: Mozilla Firefox, Opera, Google Chrome, Safari, Internet Explorer

Další vlastnosti

CSS3 přináší další nové vlastnosti jako nové barevné modely RGBA, HSL a HSLA. Nebo průhlednost a další. Jelikož je tato technologie pořád ve vývoji, tak se ještě některé vlastnosti dotvářejí, a z toho důvodu není potřeba zde rozepisovat všechny nové vlastnosti CSS3.

Externí odkazy

• domovská stránka CSS
• css3.info
• css3please.com
• jakpsatweb.cz