CSS3

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.

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

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

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

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

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

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

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

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

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

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

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

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.