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