Nuestros bullets

Comparte esta nota 01.09.04

En la anotación anterior decíamos que si teníamos un rato libre haríamos algunos bullets que podríamos incorporar a esa colección. Resulta que al final me he líado con ello cuando no debía pero ya puestos, aquí les muestro el resultado con un ejemplo:

Si ves que las imagenes desaparecen durante un instante es debido al FIR (flash image replacement)

Si queréis podéis bajaros los bullets (.zip) para que los uséis indescriminadamente siempre y cuando no sea con fines comerciales. Se agradecerá que se cite a los autores.

Para los curiosos aquí está el código y los estilos que hemos usado. Al final, a pesar de que son bullets nos ha parecido mejor usarlos como backgrounds pero eso es cuestión de gustos, ambos métodos son igualmente válidos:

Código HTML empleado:

<ul class="address">
<li class="nam">Walter Kobylanski</li>
<li class="add">Calle Avenida plaza central... B</li>
<li class="tlf">+ 555 434 25 45</li>
<li class="wrk"><a href="#">Studio.st</a></li>
<li class="mal"><a href="#">walter _at_ studio.st</a></li>
</ul>

Estilos empleados:

.address {
  font-family: tahoma, verdana, arial;
  font-size: 11px;
  color:#666;
  list-style: none;
  margin:0px;
  padding:0px;
}
.address li {
  padding-left: 22px;
  line-height: 19px;
}
.address a {
  color:#999;
}
.nam {
  background-image: url(1.gif);
  background-position: 0px 6px;
}
.add {
  background-image: url (2.gif);
  background-position: 1px 6px;
}
.tlf {
  background-image: url(3.gif);
  background-position: 3px 6px;
}
.wrk {
  background-image: url(5.gif);
  background-position: 2px 6px;
}
.mal {
  background-image: url(4.gif);
  background-position: 0px 7px;
}
.nam, .add, .tlf, .wrk, .mal {
  background-repeat: no-repeat;
  list-style: none;
}

En fin, suficiente por hoy. Ya mañana los subimos al sitio en cuestion.

5 comentarios

DarkSoldi

02.09.04

jeje como siempre, muy buenos :) por ciertooo muy guapo el diseño de la web jeje

Mastertotal

15.04.05

Realmente bueno :D

Absyrtus

09.11.06

discount phentermine
Thanks!

testhu

10.04.07

test

simtdopvhq

07.07.07

Hello! Good Site! Thanks you! puzfhacjtkrsj

Deja un comentario

Cerrar
Compartir con un amigo