Cartelitos de Navidad

Otra cosilla más para adornar el blog en estas fechas navideñas.

[1] Emplearemos unas líneas de CSS, que colocaremos en nuestra plantilla antes de ]]></b:skin>:

.etiqueta {
width: 150px;
background:#00CCFF url(http://img249.imageshack.us/img249/7826/xmastre3vs8.gif)center left no-repeat;
border: 2px solid #000;
padding: 5px 5px 5px 35px;
text-align: center;
color: #fff;
font-weight:bold;
}

[2] Una vez guardados los cambios, tendremos que usar este código donde vamos a mostrar nuestro cartelito.

<div class="etiqueta">Aquí es donde se verá
el mensaje dentro de la caja de texto</div>

Desde El Escaparate os deseo a todos una Feliz Navidad y mejor Año Nuevo
Rosa

[3]Si nos fijamos un poco en el código del CSS, podremos modificar nuestra etiqueta como más nos guste, incluso para usarla fuera de la época navideña:

width: Ancho de la etiqueta (la altura no hace falta indicarla, ya que la dará el propio contenido de la etiqueta)
background: El color de fondo de la etiqueta (#00CCFF) y la imagen (url) que en este ejemplo está centrada a la izquierda (center left) y no se repetirá sobre el fondo (no-repeat).
border: Grosor del borde(2px), tipo (solid) y color (#000).
padding Distancia del contenido a los margenes de la etiqueta, 5px en todos, menos en la parte izquierda, donde hemos de colocar la anchura de la imagen que usamos, para que el texto no se superponga a esta (35px, en este ejemplo)
text-align: El texto aparece centrado.
color: Color del texto.
font-weight: Texto en negrita.

[4] Aquí os dejo otro modelo, con la imagen a la derecha, fijaros que si vamos a usar más de un cartelito a la vez en el blog, hemos de cambiar su nombre en el CSS y en el código donde vamos a mostrarlo:
.etiqueta1 {
width: 150px;
background:#fff url(http://img249.imageshack.us/img249/4044/gif6603wt1.gif)center right no-repeat;
border: 1px solid #000;
padding: 15px 50px 15px 15px;
text-align: center;
color: #000;
font-weight:bold;
}

<div class="etiqueta1">Aquí es donde se verá
el mensaje dentro de la caja de texto</div>

Desde El Escaparate os deseo a todos una Feliz Navidad y mejor Año Nuevo
Rosa