Dibujar figuras con CSS3

Actualización: 1/2/2012
Ya llevamos dos artículos de CSS en el que tratamos las formas triangulares hechas solo con Cascading Style Sheets.CSS así que he pensado que es hora de tratar el tema un poquito más a fondo.

Todas las figuras estarán conformadas por un div… como sabeis se pued usar cualquier etiqueta como veremos en el ejemplo, así que todos los divs toman el siguiente formato:
 
 
 
 

div {
	display: block;
	width: 100px;
	height: 100px;
	margin: 0 auto;
}

Cuadrado con CSS

Lo primero que vamos a crear es un cuadrado… es algo fake ya que el cuadrado es un div pintado…

El código es bastante sencillo:
 
 
 
 
 
 
 
 
 
 
 

.cuadrado {
	background-color: #ccc;
}

Ahora lo vamos a modificar un poco y hacer un cuadrado con los bordes redondeados… de esta forma entenderemos como funciona la propiedad border-radius de css3

.redondeado {
	background-color: #344567;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
}

Como ya debéis saber el -moz es para mozilla el -webkit para navegadores con dicho motor como chrome y border-radius es el estandard… también existe -o para Opera.

Si solo quisiéramos redondear los dos bordes superiores haríamos:

.medio_redondeado {
	background-color: #344567;
	-moz-border-radius: 20px 40px 0 0;
	-webkit-border-radius: 20px 40px 0 0;
	border-radius: 20px 40px 0 0;
}

Así, entonces, queda claro que cada valor es para cada borde.. como siempre un único valor significa todos los bordes y dos valores significa arriba y abajo.

Circulo y derivados con CSS

Si queremos crear un círculo perfecto solo tenemos que establecer los bordes a 75px.

.circulo {
	background-color: #c06;
 
	-moz-border-radius: 75px;
	-webkit-border-radius: 75px;
	border-radius: 75px;
}

Si queremos un semicírculo la técnica es similar, solo que dibujando la mitad de la altura y redondeando los bordes superiores únicamente.

.semi_circulo {
	background-color: blue;
	height: 50px;
	-moz-border-radius: 75px 75px 0 0;
	-webkit-border-radius: 75px 75px 0 0;
	border-radius: 75px 75px 0 0;
}

Un cuarto de círculo sigue la misma pauta que el anterior… aplicando la mitad del ancho y la mitad del alto y solo redondeando un borde.

.cuarto_circulo {
	background-color: green;
	height: 50px;
	width: 50px;
	-moz-border-radius: 75px 0 0 0;
	-webkit-border-radius: 75px 0 0 0;
	border-radius: 75px 0 0 0;
}

Los triángulos y el CSS

Los triángulos son un poco más difíciles de explicar.
La técnica consiste en colorear los bordes, coloreando un solo borde y los demás haciéndolos transparentes.
Por alguna razón, si coloreamos el borde superior de un cuadrado y dejamos el resto transparente se dibujará un triangulo inverso.

Recomiendo que hagáis pruebas en vuestro ordenador con los ejemplos para verlo más claro.

Este es el primer triángulo

.triangulo {
	border-color: red transparent transparent transparent;
	border-style: solid;
	border-width: 40px;
	width: 0px;
	height: 0;
}

El resto solo son modificaciones de la propiedad border-color

Los nombres son según donde se ubica su base.

.abajo {
	border-color: transparent transparent yellow transparent;
}
.derecha {
	border-color: transparent orange transparent transparent;
}
.izquierda {
	border-color: transparent transparent transparent green;
}

A la hora de dibujar objetos con CSS nos puede convenir tener en cuenta otras herramientas.

En este caso trataremos el degrado y las transparencias.

Degrado

El degrado es una de las mejores herramientas que nos trae CSS3 y que, desgraciadamente, IE no acaba de tomar bien…
El degrado se ve perfectamente menos, adivinen en cual, IE 9 que se ven otros colores.. y en las versiones anteriores no tengo ni idea pero creo que ni funcionaba.

Yo recomiendo que si van a hacer un degrado y adaptarlo a IE9 primero miren como se ve.. sino simplemente dejen el background como solución arcaica.

.gradient {
	background: #cad;
	background: -moz-linear-gradient(#c0d, #cad);
	background: -webkit-gradient(linear, left top, left bottom, from(#c0d), to(#cad));
	background: -o-linear-gradient(#c0d, #cad);
	/*IE - el color no tiene nada que ver -.-*/
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c0d', endColorstr='#cad');
}

Transparencias

Las transparencias a mi me parecen bastante divertidas pero aún no les acabo de dar un uso inteligente… a ver si alguien me da un tip de para que pueden ser especialmente útiles.

.trans {
	/*IE*/
	filter:alpha(opacity=50);
	/*FF*/
	-moz-opacity:0.5;
	/*Standard*/
	opacity:0.5;
}

El ejemplo :)

No podía acabar esta redacción sin hacer un pequeño ejemplo así que el código queda aquí

.happy {
	background-color: yellow;
	text-align: center;
	position: relative;
	-moz-border-radius: 75px;
	-webkit-border-radius: 75px;
	border-radius: 75px;
}
 
.happy b {
	background-color: black;
	height: 20px;
	width: 20px;
	display: block;
	float: left;
	margin-left: 20px;
	margin-top: 25px;
	-moz-border-radius: 75px;
	-webkit-border-radius: 75px;
	border-radius: 75px;
}
 
.happy i {
	background-color: red;
	height: 30px;
	width: 50px;
	display: block;
	position: absolute;
	bottom: 12px;
	left: 24px;
 
	-moz-border-radius: 0 0 75px 75px;
	-webkit-border-radius: 0 0 75px 75px;
	border-radius: 0 0 75px 75px;
}

Como se puede ver en el ejemplo es una cara feliz. Utilizo las etiquetas b e i para hacer los ojos y la boca.
Si se están preguntado porque estas y no otras, no hay razón, simplemente probar que el css se puede aplicar a cualquier etiqueta… por extraño que parezca.

Por internet vi muy buenos ejemplos, como un corazón formado por dos rectángulo con los bordes redondeados, un iphone, etc..

Dejo los diferentes ejemplos que hemos ido tratando y los códigos como siempre, disfrutad!


Demo OnlineClic para ver la demo! Archivos EjemploDescargate el ejemplo!

Si crean alguna forma divertida con CSS comenten con el link al ejemplo, siempre es divertido ver este tipo de cosas


Así nos han encontrado!

  • dibujar con css3
  • figuras con css
  • dibujos css3
  • dibujar con css
  • triangulo css3
  • formas con css3
  • dibujar css3
  • circulo css
  • dibujar en css3
  • dibujos con css3
  • formas css3
  • figuras css
  • figuras css3
  • circulo en css
  • circulo con css
  • hacer figuras con css
  • como dibujar con css3
  • cuadrado css
  • hacer un circulo con css
  • formas en css3

6 Responses to Dibujar figuras con CSS3

  1. Miguel dice:

    Gracias, buen aporte

  2. Arquimidez Mora dice:

    Un grandisimo aporte, muchisimas gracias!!

  3. Luis dice:

    Lo del emoticon no he logrado como poner los div para que salga. ¿Podías añadir al artículo como se ponen los div?.

  4. Javier dice:

    Genial! La entrada es algo antigua, pero de gran ayuda. Gracias.

  5. walter dice:

    Hola. Quisiera saber si se puede dibujar por ejemplo una “L” usando un div, con css o es que tengo que usar ya varios divs. Desde ya uchas gracias y esto de “Dibujar figuras con CSS3″ esta espectacular….

  6. walter dice:

    Hola. Quisiera saber si se puede dibujar por ejemplo una “L” usando un div, con css o es que tengo que usar ya varios divs. Desde ya muchas gracias y esto de “Dibujar figuras con CSS3″ esta espectacular….

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">