Click para ultima información

Translate/Traduce

Buscador Blogger

Cargando...

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;


Escuchar post


1 opiniones:

DEXTER dijo...

es un buen post, debia tener comentarios antes, no deseo usar este tip pero me llamo la atencion leerlo, es interesante.

Creative Commons License
Esta obra está bajo una licencia de Creative Commons.