blog.michalprihoda.cz

Zda napíšu pár poznámek k tomu co se vyplatí z CSS3 používat. Nejen že to uspoří čas, ale i výslednou velikost stránek. Většina vlastností nemá plnou podporu, proto je nutno zapisovat více příkazy.

1. Box shadow

Tato CSS vlastnost přidává stín k blokovému prvku.

.shadow {
-moz-box-shadow:inset 0 0 10px #000000;
-webkit-box-shadow:inset 0 0 10px #000000;
box-shadow:inset 0 0 10px #000000;
}

Parametry: posun v ose Y posun v ose X velikost barva

Podpora: IE9, Chrome, Opera, Firexox, IE8 a IE7 viz. na konci článku

2. Border radius

Tato CSS vlastnost zakulatí rohy blokového prvku.

Zda napíšu pár poznámek k tomu co se vyplatí z CSS3 používat. Nejen že to uspoří čas, ale i výslednou velikost stránek. Většina vlastností nemá plnou podporu, proto je nutno zapisovat více příkazy.

.radius {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
.radiusTop {
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}


Parametry: velikost

Podpora: IE9, Chrome, Opera, Firexox, IE8 a IE7 viz. na konci článku

Závěr

Pro podporu těchto vlastností v IE7 a IE8  je dobré využít soubor PIE.htc, který i s grafickým udělátkem najdete na stránkách http://css3pie.com/.

Na internetu najdete spousty generátorů, která vám mohou při začátcích ušetřit práci. Pro border-radius například http://border-radius.com/.

A ještě jsem našel článek v češtině trochu rozsáhlejší než mám já http://www.24development.cz/blog/css-shadow-cross-browser.htm.