JMiur [E]

One div es un sitio donde podemos buscar y copiar el código necesario para utilizar íconos o símbolos creados exclusivamente con CSS; una técnica cuyo uso se va va extendiendo ya que tiene la ventaja de no utilizar imágenes y de ser flexibles porque podemos variar su tamaño con sencillez sin que se deformen.

Además, basta un poco de imaginación para aprovechar las distintas propiedades, cambiar colores, agregar animaciones o utilizar efectos aunque, claro está, como todas estas cosas, la compatibilidad con los distintos navegadores es una limitación importante pero, poco a poco, es algo que deberíamos dejar de lado y empezar a aceptar que esas limitaciones existirán siempre y que nada es universal excepto que 2+2=4.

Algunos ejemplos:

<style>
.mug_animate {
  box-shadow: 0 -3em 0 0 #0AF inset;
  height: 2.5em;
  position: relative;
  -moz-transition: all 1000ms linear 0s;
  -webkit-transition: all 1000ms linear 0s;
  -o-transition: all 1000ms linear 0s;
  -ms-transition: all 1000ms linear 0s;
  transition: all 1000ms linear 0s;
  width: 1.5em;
}
.mug_animate:after {
  border-color: #DDD transparent #DDD #DDD;
  border-image: none;
  border-radius: 0.75em 0 0 0.75em;
  border-style: solid none solid solid;
  border-width: 0.25em medium 0.25em 0.25em;
  content: "";
  height: 1.5em;
  left: -1em;
  position: absolute;
  top: 0.25em;
  width: 0.75em;
}
.mug_animate:before {
  border: 0.25em solid #DDD;
  border-radius: 0 0 0.2em 0.2em;
  content: "";
  height: 2.5em;
  left: -0.20em;
  position: absolute;
  top: -0.5em;
  width: 1.5em;
}
.mug_animate:hover {
  box-shadow: 0 0 0 0 #00F inset;
}
</style>

<div class="mug_animate"></div>


<style>
.fir {
  box-shadow: 0em 0.9em 0 -0.8em #4D4,0em 1em 0 -0.8em #4D4,0em 1.1em 0 -0.8em #4D4,0em 1.2em 0 -0.8em #4D4;
  border-bottom: 1.7em solid #4D4;
  border-left: 1em solid transparent;
  border-right: 1em solid transparent;
  font-size: 20px;
  height: 0em;
  position: relative;
  width: 0em;
}

.fir:before {
  border-bottom: 1em solid #4D4;
  border-left: 0.7em solid transparent;
  border-right: 0.7em solid transparent;
  content: '';
  display: block;
  height: 0em;
  left: -0.7em;
  position: absolute;
  top: -0.2em;
  width: 0em;
}

.fir::after {
  border-bottom: 0.7em solid #4D4;
  border-left: 0.5em solid transparent;
  border-right: 0.5em solid transparent;
  content: '';
  display: block;
  height: 0em;
  left: -0.5em;
  position: absolute;
  top: -0.5em;
  width: 0em;
}
</style>

<div class="fir"></div>


<style>
.pacman {
  background-image: -webkit-radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);
  background-image: -moz-radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);
  background-image: -o-radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);
  background-image: -ms-radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);
  background-image: radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);
  border-radius: 3em 3em 0 0;
  height: 1.5em;
  position: relative;
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  width: 3em;
}

.pacman:after {
  background-color: #EE0;
  border-radius: 0 0 3em 0;
  content: '';
  height: 1.5em;
  left: 0em;
  position: absolute;
  top: 1.45em;
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  width: 1.5em;
}
</style>

<div class="pacman"></div>


3 comentarios:

Unknown  

Impensable hace un tiempo atrás, encantador :)

Responder
Rosendo Ramírez  

Wowwww esta supers! ;D, creo que dentro de poco a alguno se le ocurrira hacer una pagina para diseñar iconos con css y creo que asi facilitara el hecho de estar buscando por toda la red el icono que se apega a nuestras plantillas :D

Responder
Bonzu Pipinpadaloxicopolis III  

Está genial JMiur!°

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR