<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/platform.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/16734928?origin\x3dhttp://sid05.blogspot.com', where: document.getElementById("navbar-iframe-container"), id: "navbar-iframe" }); } }); </script>

CSS: immagini ed effetti 04/01/07

Ancora un post dedicato ai CSS; in questo caso descriverò come applicare "effetti" alle immagini direttamente nel codice html, con un semplice "richiamo" allo stile (style). Descriveremo il Gray Filter, che ci permette di visualizzare l' immagine in toni di grigio (bianco e nero); il filtro Xray, letteralmente raggi X e il filtro Invert che inverte la gamma dei colori dell' immagine. Troverete utile il metodo dove non avrete il controllo del folgio di stile (o come nel mio caso se non volete inserire altre classi nel CSS)...


Immagine originale


Immagine originale

Filter:gray


Immagine con Filter:gray

Il codice da inserire nel proprio HTML:


<img src="percorso/nomefile.jpg" style="Filter:gray"/>

Filter:Xray


Immagine cin Filter:Xray

Il codice HTML:


<img src="percorso/nomefile.jpg" style="Filter:Xray"/>

Filter:Invert


Immagine con Filter:invert

Il codice HTML:


<img src="percorso/nomefile.jpg" style="Filter:Invert"/>

Etichette: ,

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

Ultimi commenti