<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 tutorial: sostituire il testo con un' immagine 19/08/07

CSS tutorial

Ho deciso di pubblicare un po' di tutorial di base relativi ai fogli di stile a cascata (CSS), diciamo una rubrica del fine settimana che spero possa tornare utile (fatemi sapere). Iniziamo dalla testa e vediamo come sostituire il titolo del blog con un' immagine...

» continua

Esistono svariati metodi per sostituire il testo con un immagine, in questo caso voglio descrivere il più semplice; niente JavaScript ma soltanto HTML e CSS... inutile farla troppo lunga, ecco di seguito gli esempi di codice, in coda al post trovate alcune considerazioni ed un paio di note.

Questo è il codice CSS:

#immagine-testo {
position: relative;
height: 40px;
width: 400px;
}
#immagine-testo span {
background-image: url(replacement.jpg);
background-repeat: no-repeat;
position: absolute;
height: 100%;
width: 100%;
}

Questo l' HTML:

<h2 id="immagine-testo" title="immagine al posto del testo"><span></span>Immagine al posto del testo</h2>

Questo il risultato:

image replacement

Considerazioni e note

questo metodo garantisce la massima compatibilità (nel caso di browser con immagini disattivate ad esempio) ma necessita di un tag span vuoto e non permette l' utilizzo di immagini trasparenti... infatti il testo rimane sotto l' immagine e nel caso di una PNG trasparente questo sarebbe il risultato:

image replacement

Una serie di alternative le trovate in questo "storico" post di Dave Shea.


Etichette: , ,

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

Ultimi commenti