CSS3
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
Média použitá na této stránce