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 editovat
Zaoblené rohy editovat
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 editovat
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 editovat
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 editovat
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 editovat
Tato vlastnost nastavuje stín u blokového prvku.
box-shadow editovat
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 editovat
Tato vlastnost nastavuje stín u obyčejného textu.
text-shadow editovat
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 editovat
Tato vlastnost umožňuje transformovat prvek. Rozlišují se tři transformace a to translate, rotate a scale
transform: translate editovat
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 editovat
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 editovat
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 editovat
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.