<body><script type="text/javascript"> function setAttributeOnload(object, attribute, val) { if(window.addEventListener) { window.addEventListener('load', function(){ object[attribute] = val; }, false); } else { window.attachEvent('onload', function(){ object[attribute] = val; }); } } </script> <div id="navbar-iframe-container"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <script type="text/javascript"> gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() { if (gapi.iframes && gapi.iframes.getContext) { gapi.iframes.getContext().openChild({ url: 'https://www.blogger.com/navbar.g?targetBlogID\x3d16734928\x26blogName\x3dSid05+weblog\x26publishMode\x3dPUBLISH_MODE_BLOGSPOT\x26navbarType\x3dSILVER\x26layoutType\x3dCLASSIC\x26searchRoot\x3dhttp://sid05.blogspot.com/search\x26blogLocale\x3dit_IT\x26v\x3d2\x26homepageUrl\x3dhttp://sid05.blogspot.com/\x26vt\x3d2587781031737933902', where: document.getElementById("navbar-iframe-container"), id: "navbar-iframe" }); } }); </script>

CSS filter: dropshadow 27/12/06

I filtri CSS: grazie agli aggiornamenti delle versioni dei browser maggiormente diffusi, possiamo divertirci con i fogli di stile garantendo un buon livello di "copertura"; del resto era da parecchio che, sia IE che Firefox, supportavano le maggiori novità introdotte dai CSS 2.0 e le nuove versioni spostano ancora in avanti le possibilità offerte al web-designer... i comportamenti dei vari browser in relazione alle "nuove regole" potete trovarli in questa ottima tabella.

Ma andiamo con ordine, o meglio, introduciamo alcuni filtri di base a livello di design: il primo della serie (nessun valore in particolare, ma uno ne serviva per iniziare questa mini-guida) è il DropShadow; si tratta di un ombra inserita "sotto" il testo (o un immagine).

I parametri a disposizione :

Color - il colore dell' ombra in valore esadecimale.

Offx - lo "scostamento" sull' asse x dell' ombra in pixel; valori positivi spostano l' ombra verso destra mentre al contrario, valori negativi verso destra.

Offy - lo "scostamento" sull' asse y; valori positivi spostano l' ombra verso il basso mentre valori negativi verso l' alto.

Positive - può avere valore true (vero) o false (falso), di default il valore è true e l' ombra è applicata ai pixel opachi (o pieni) mentre false applicherà l' ombra ai pixel trasparenti.

Questo è il codice CSS da inserire nel foglio di stile:


.ombra {
widht:200px;
height:80px;
filter:dropshadow(color=#FF9900,offx=3, offy=3);
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 34px;
color: #0066FF;
font-weight: bold;
}

E questo è l' HTML:


<h6 class="ombra">DropShadow</h6>

Questo il risultato con la classe applicata al testo

DropShadow

Etichette: ,

[Sid]
del.icio.us Digg technorati Design Float http://www.wikio.it oknotizie | Permalink | |

Ultimi commenti