AjMrDeSiGn

Templates Blogger, exquisitez para usuarios curiosos.

Otro estilo en las etiquetas post

21 nov. 2012

Hace unos meses explicaba mediante un ejemplo como dar un estilo diferentes a las etiquetas de los post con la forma de taringa y os muestro a continuación otro ejemplo de forma dado, con un toque diferente.

Otro estilo en las etiquetas

La forma de hacerlo es la misma que se explica en esta entrada: Etiquetas al estilo taringa, solo se cambia la imagen y el css.

CSS

.post-labels {
margin: 0;
padding: 0;
}
.post-labels a {
float: left;
position: relative;
background: url("http://3.bp.blogspot.com/-MWUEa2vXH3M/UKzBMvVq1eI/AAAAAAAAGoo/294dv_qoVTw/s400/etiquetas-dado-ajmrdesign.png") no-repeat bottom right;
height: 30px;
line-height: 30px;
padding:0 10px 0 8px;
margin: 0 0 10px 40px;
color: #775d37;
font-size:13px;
font-weight: bold;
font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;
text-decoration: none;
}
.post-labels a:before {
background: url("http://3.bp.blogspot.com/-MWUEa2vXH3M/UKzBMvVq1eI/AAAAAAAAGoo/294dv_qoVTw/s400/etiquetas-dado-ajmrdesign.png") no-repeat;
content: "";
width:30px;
height: 30px;
float: left;
position: absolute;
top: 0;
left: -25px;
}
.post-labels a:hover {
color: #794f13;
}

Demo




2 comentarios:

  1. como haces para que si ya no caben en una linea,se pasen a otra?

    ResponderEliminar
    Respuestas
    1. Tenia un fallo el css, esta solucionado, solo tienes que copiarlo de nuevo.

      Eliminar

Normas comentarios › Leer antes de comentar...

« »

Suscríbete a nuestro feed...