Tutorial – Creación del Logo Olímpico con HTML y CSS

Falta poco tiempo para la realización del acontecimiento más esperado por los deportista, Los juegos Olímpicos que este año 2012 se realizaran en Londres. Así que vamos a hacer un homenaje a este grandioso evento, vamos a crear el logo de los olímpicos solo usando CSS y una lista desordenada de HTML, solo con esto nos bastara para hacer este trabajo.

Este será el resultado:

juegos-olimpicos-css

Vamos con el codigo html.

Solo vamos a utilizar una lista desordenada <ul> y le damos el id aros, cada ítem <li> será un aro y tiene el nombre de su color, repetimos el ítem y su color porque tenemos que superponer los aros y dar la apariencia de que están entrelazados.

Ahora vamos con la primera parte del CSS:

Lo que hicimos con el anterior código css fue posicionar el logotipo, posicionar cada aro.

Con #aros posicionamos el logotipo completamente, con su altura y anchura, luego con #aros li le damos la apariencia circular a cada ítem de la lista con border-radius le damos altura y anchura a cada ítem, luego con li:before y li:after damos lo que seria los bordes de cada aro el interno y el externo para dar la apariencia de cada uno superpone al otro, Luego posicionamos cada ítem es decir cada aro individualmente Por su clase por medio de left y top damos su ubicación y con z-index damos el orden de apilación. El resto de codigo son detalles de para lograr la apariencia.

Esto es lo que llevamos hasta este momento:

aros-css

Seguimos con la segunda parte del CSS para dar colores a los diferentes aros.

Con el anterior código damos color a los aros y obtenemos la siguiente apariencia, pero todavía no llegamos al objetivos, por que recuerda que los aros van entrelazados uno a otro.

aros-css-color

Ahora vamos con el último trozo de código CSS para dar la apariencia de la superposición de los aros.

Lo que hicimos en el anterior código fue activar el ítem .alt, que es el mismo ítem del color pero con una sub-clase alt, a cada uno de estos le damos un z-index 23 para que este ítem se coloque por encima de los aros base, luego ocultamos la gran parte del aros con las propiedades que tienen transparent dejando visible solo una porción de este aro para dar la sensación de que esta superpuesto.

aros-olimpicos-con-css

Y listo, hemos terminado este ejercicio de HTML y CSS, donde el objetivo era crear el logotipo de los juegos olímpicos. De pronto existen muchas más manera de hacerlo, esta es solo una más.

Espero que te sirva para algo.

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo

1 Respuesta

  1. Luis dice:

    Buen tutorial…