Ací tinc avui un truquillo molt xulo que sempre havia pensat fer però encara no l'havia provat perquè el meu temps no és infinit. Durant aquest matí, al curs de CSS avançat que estic fent a la Diputació, m'ha eixit finalment el truc de com mostrar una imatge fixa a l'esquina del navegador amb CSS, així pots escriure molts continguts diferents a les pàgines però encara que baixes amb l'scroll del navegador la imatge sempre es mantindrà fixa creant un efecte molt elegant. La imatge que veus és una captura de pantalla d'aquest resultat (he fet servir una imatge de Cameron Díaz, per supost)... i ací a continuació tens el codi CSS:
#contenedor {
margin: 0 auto;
width: 600px;
background-color: #666666;
border-left: 25px dashed #000;
border-right: 25px dashed #000;
padding: 0 50px 0 10px;
}
#cameron{
position: absolute;
bottom: -5px;
right: 17px;
}
@media screen {
div#superficie {position: fixed; bottom: 0px; right: 0px;}
* html {overflow-y: hidden;}
* html body {overflow-y: auto; height: 100%;padding: 0;}
* html div#superficie {position: absolute;}
}
body > div#cameron{
position: fixed;
bottom:0px;
right:0px;
}I també ací tens el codi XHTML que has d'afegir al teu document:
<div id="cameron">
<img src="./cameron.png" alt="" />
</div>
Com està la cameron, eh? T¡ha quedat de cine!!
Envia un nou comentari