Dibujar con HTML5 y CSS3

Dibujar con HTML5 y CSS3

¿Cómo se dibujan figuras con Html5 y Css3?.

Vamos a empezar dibujando un círculo, comenzamos abriendo un archivo html.

<br />&lt;svg&gt;<br /><%%KEEPWHITESPACE%%>  &lt;circle id="circulonaranja" cx="200" cy="200" r="150" fill="orange" /&gt;<br />&lt;/svg&gt;<br />

Donde: cx= la coordenada “x” del centro y cy= la coordenada  “Y” del centro .

Y al visualizarlo veremos un círculo como el siguiente:

Dibujar un círculo con HTML5 y CSS3

La ventaja de este círculo será que no es una imagen en bitmap, sino que es una imagen vectorial y podremos modificar su tamaño en la pantalla sin que pierda calidad con las teclas control + “+” (si estás utilizando un pc y cmd + “+” si es un mac).

Ahora dibujaremos un rectángulo, lo haremos de la misma forma sin utilizar imágenes. Abrimos un documento html y ponemos el siguiente código:

<br />&lt;svg&gt;<br /><%%KEEPWHITESPACE%%>   &lt;rect id="rectangulo" width="400" height="200" fill="blue" /&gt;<br />&lt;/svg&gt;<br />

Y obtendremos la siguiente figura:

Dibujar un rectángulo con HTML y CSS3

Para terminar dibujaremos una elipse y una línea.

<br />&lt;svg&gt;<br /><%%KEEPWHITESPACE%%>   &lt;line x1="600" y1="300" x2="500" y2="100" style="stroke:violet;  stroke-width:4;" /&gt;<br /><%%KEEPWHITESPACE%%>   &lt;ellipse cx="200" cy="200" rx="200" ry="50" fill="green" /&gt;&lt;/svg&gt;<br />

Dibujar una Elipse y una recta con HTML5 y CSS3

 

Entradas Relacionadas

No hay comentarios

You can post first response comment.

Deja un comentario

Por favor introduzca su nombre Por favor introduzca una dirección e-mail válido Por favor deje un mensaje.

¿Qué es Togirl.net?

Togirl.net es un blog que intenta acercarte entre otras cosas al mundo tecnológico de una forma divertida y atractiva.

LBM Diseño Web

LBM Diseña tu web

Frikicamiseta.es

Los mejores diseños para tus camisetas

Pin It on Pinterest