Resaltar una Noticia.

+/- Leer entrada

El otro día buscando cómo darle un toque nuevo a mí blog, descubrí en Vagabundia una página Web realmente interesante CSSplay (De: Stu Nicholls).
En esta pagina podréis encontrar un montón de menús, galerías fotograficas y muchas más cosas hechas con CSS.

Cómo podéis ver es un ejemplo de cómo resaltar una noticia con una caja.
La primera parte del código va en la hoja de estilos, hay que añadirlo antes de

]]></b:skin> 

.xsnazzy h1, .zsnazzy h1 {
margin:0;
font-size:1.2em;
padding:0 10px 5px 10px;
border-bottom:1px solid #444;
}
.xsnazzy p, .zsnazzy p {
margin:0;
padding:5px 10px;
font-size:10px;
}
.xsnazzy {
background: transparent;
width:240px;
float:left;
margin:0 3px;
}

.xtop, .xbottom {
display:block;
background:transparent;
font-size:1px;
}
.xb1, .xb2, .xb3, .xb4 {
display:block;
overflow:hidden;
}
.xb1, .xb2, .xb3 {
height:1px;
}
.xb2, .xb3, .xb4 {
background:#fff;
border-left:1px solid #444;
border-right:1px solid #444;
}
.xb1 {
margin:0 5px;
background:#444;
}
.xb2 {
margin:0 3px;
border-width:0 2px;
}
.xb3 {
margin:0 2px;
}
.xb4 {
height:2px;
margin:0 1px;
}

.xboxcontent {
display:block;
border:0 solid #444;
border-width:0 1px;
height:auto;
}
* html .xboxcontent {
height:1px;
}

.color_a {
background:#c9ba65;
color:#fff;
}
.color_b {
background:#d4d8bd;
color:#000;
}
.color_c {
background:#758279;
color:#fff;
}
.color_d {
background:#b2ab9b;
color:#000;
}

Y la segunda parte la podéis añadir cómo un gadget, en cualquier parte del Blog

<center><div class="xsnazzy">

<b class="xtop"><b class="xb1"></b><b class="xb2 color_a">


</b><b class="xb3 color_a"></b><b class="xb4 color_a"></b></b>


<div class="xboxcontent">


<h1 class="color_a">R. Madrid-F.C Barcelona 2-6</h1>


<p>El F.C. Barcelona golea al Real Madrid.</p>


<p>Triunfo humillante que dejo hundida a la plantilla blanca.</p>


</div>


<b class="xbottom"><b class="xb4"></b><b class="xb3"></b>


<b class="xb2"></b><b class="xb1"></b></b>


</div></center>

Compartir