Búsqueda personalizada

21 de diciembre de 2007

Cartel con sombra para tu blog

Bueno , esto es muy sencillo de lograr y funciona con explorer y con mozilla (Con otros exploradores tambien solo que no fue comprobado).El equipo de Panorama ha logrado hacer esto sin mi , con clases CSS , sin imagenes ni scripts alternos , por lo que se merecen mis mas gratas felicitaciones.





Demo 1 (Con bordes renondos).

Demo 2 (Sin bordes renondos).




NOTA:[Los Carteles se extendran al maximo de los posts (por ej.:si tiene 10px tendra 10px )]



Pegar el siguiente codigo JUSTO antes de ]]></b:skin> para lograr bordes REDONDOS o redondeados







#shadow-container {
position: relative;
left: 3px;
top: 3px;
margin-right: 3px;
margin-bottom: 3px;
}

#shadow-container .shadow2,
#shadow-container .shadow3,
#shadow-container .container {
position: relative;
left: -1px;
top: -1px;
}

#shadow-container .shadow1 {
background: #F1F0F1;
-moz-border-radius:10px;
}

#shadow-container .shadow2 {
background: #DBDADB;
-moz-border-radius:10px;
}

#shadow-container .shadow3 {
background: #B8B6B8;
-moz-border-radius:10px;
}

#shadow-container .container {
background: #ffffff;
border: 1px solid #848284;
padding: 10px;
-moz-border-radius:10px;
}






O copiar el siguiente codigo JUSTO antes de ]]></b:skin> para obrener bordes RECTOS




#shadow-container {
position: relative;
left: 3px;
top: 3px;
margin-right: 3px;
margin-bottom: 3px;
}

#shadow-container .shadow2,
#shadow-container .shadow3,
#shadow-container .container {
position: relative;
left: -1px;
top: -1px;
}

#shadow-container .shadow1 {
background: #F1F0F1;
}

#shadow-container .shadow2 {
background: #DBDADB;
}

#shadow-container .shadow3 {
background: #B8B6B8;
}

#shadow-container .container {
background: #ffffff;
border: 1px solid #848284;
padding: 10px;
}




Y para utilizar este cartel usar este codigo en los post u otros:

<div id="shadow-container">
<div class="shadow1">
<div class="shadow2">
<div class="shadow3">
<div class="container">
[...TUS CONTENIDOS...]
</div>
</div>
</div>
</div>
</div>




Personalizaciones:

Para cambiar el radio de los bordes (en pixeles) buscar este codigo y reemplazarlo por tus valores en pixeles (en todos los lugares):-moz-border-radius:10px;

0 opiniones:

Publicar un comentario

Hola , el blog nesesita tu commentario asi que por favor escribe lo que tu de verdad quieras

Posicionamiento en buscadores

El secreto del Posicionamiento en Google está en los enlaces. Los buscadores valoran la popularidad de un sitio por el número de enlaces hacia el mismo y su calidad. Sin duda el posicionamiento web y el link building es un paso clave para cualquier blog.

Posicionamiento en buscadores

 

Copyright © 2011 Marketing y Posicionamiento en Internet. Trucos blogger | Design by Kenga Ads-template