CSS box-shadow cross browser
CSS box-shadow, border-radius, inset shadow. To jsou pojmy, které dnes použijeme. Vzhledem k tomu, že se jedná o vlastnosti implementované až na úrovni CSS3, je jasné, že využití bude spíše experimentální a nebo jen pro zpestření dojmu pro uživatele s moderním prohlížečem. Avšak dobrý webdesigner by tyto vlastnosti měl znát a měl by si jejich použití pomalu osvojovat.
Pojďme se tedy rovnou podívat na to, jak toho docílit.
Náš kód bude bezpečně fungovat v následujících prohlížečích
- Firefox 3.5+
- Safari 3+
- Google Chrome
- Opera 10+
- Internet Explorer 5.5 (zde je jen částečná podpora efektů, takže IE nezobrazí vše správně)
Box shadow
Využití podstínování se nabízí snadno u aplikačně laděného systému, avšak využijeme je s oblibou například u editačních polí a nebo roll-over menu.
Kompatibilita je s použitím vendoru a ostatních zaručena
-moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.2); -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.2); box-shadow: 2px 2px 2px rgba(0,0,0,0.2), 2px 2px 4px rgba(0,255,0,0.2); /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#efefef')"; /* IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#efefef');
Zde stojí za povšimnutí možnost zápisu vícenásobného podstínování.
box-shadow: 2px 2px 2px rgba(0,0,0,0.2), 2px 2px 4px rgba(0,255,0,0.2);
Box shadow s inset vlastností
V níže uvedeném příkladu ale vidíme něco, co připomíná podstínování objektu "zevnitř". Ano, je tomu tak, tohoto lehce dosáhneme pomocí CSS a inset vlastnosti.
-moz-box-shadow: inset 1px 2px 3px rgba(125,125,125,0.4); -webkit-box-shadow: inset 1px 2px 3px rgba(125,125,125,0.4); box-shadow: inset 1px 2px 3px rgba(125,125,125,0.4);
Border-radius
Zajímavé v kombinaci s prvky typu input.. a nebo jenom při nutnosti použití zaoblených okrajů kontejneru. Obzvláště se hodí této možnosti využít na místech, kde není tato věc nezbytně nutná a působí jenom pro potěšení oka návštěvníka. Opět využijeme vendor prefixy, abychom zajistili co nejvyšší kompatibilitu a případně si pomůžeme s JavaScriptovým CurvyCorners pluginem.
-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;
Kompletní ukázka včetně zdrojového kódu
Výsledek snažení je vidět níže, není na tom nic složitého, avšak je nutné si uvědomit, že pro obecné použití se příklad prostě nehodí. Nedostatečná podpora mezi prohlížeči téměř nedovoluje nasadit tyto metody v určitých projektech.
Celý zdrojový soubor je dostupný jako on-line demo, avšak zveřejníme zde kompletní zdrojový kód. Hlavní použití je ale zřejmé již z výše uvedených code-snippets.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head><!-- ščřžýŠČŘŽÝ -->
<meta name="author" content="Vaclav Kusak, 24DEVELOPMENT, www.24development.cz, 2011" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>CSS3 inner box shadow example</title>
<style type="text/css">
body
{
font-family: tahoma, sans-serif;
font-size:0.8em;
}
fieldset
{
padding: 15px;
}
input.searchbar
{
background: #fff;
-moz-box-shadow: inset 1px 2px 3px rgba(125,125,125,0.4);
-webkit-box-shadow: inset 1px 2px 3px rgba(125,125,125,0.4);
box-shadow: inset 1px 2px 3px rgba(125,125,125,0.4);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
border: 1px rgba(0,0,0,0.4) solid;
padding: 3px 5px 3px 5px;
font-size: 11px;
font-weight: bold;
width:150px;
}
input.submit
{
background: gray;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
color: #fff;
border: 1px #484848 solid;
padding: 2px 5px 2px 5px;
font-size: 11px;
font-weight: bold;
}
div.box
{
-moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
box-shadow: 2px 2px 2px rgba(0,0,0,0.2), 2px 2px 4px rgba(0,255,0,0.2);
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#efefef')";
/* IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#efefef');
border: 1px rgba(125,125,125,0.1) solid;
width: 220px;
padding: 10px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
</style>
</head>
<body>
<form method="get" action="./">
<fieldset>
<legend>Simple CSS3 search form example</legend>
<div class="box">
<input class="searchbar" type="text" name="search" value="Search.." />
<input class="submit" type="submit" value="search" />
</div>
</fieldset>
</form>
</body>
</html>
Doufám, že nadšencům tento příklad udělá radost.
