jueves, 14 de julio de 2011

Oloblogger

Oloblogger


Chuleta para crear formas simples con CSS3

Posted: 13 Jul 2011 01:31 AM PDT

Las siguientes formas no son imágenes, sino CSS que incluye algunas de las últimas propiedades del estándar. Puedes probar a descargarlas, pero sólo para comprobar que efectivamente sólo tenemos ante nosotros fondos, bordes y unas pocas curvas.



Sabiendo que en una capa con ancho o alto igual a cero los bordes sí que se muestran del ancho con que se definan, que estos se solapan formando ángulos que pueden ser a su vez redondeados y como no, con un poco de lógica, se pueden construir estas y otras muchas más formas simples... o más complicadas.

La cosa funciona con un div vacío al cual le hemos asignado una ID. Previamente, a esa ID le hemos asignado una serie de propiedades CSS. Por ejemplo, lo que parece un banderín violeta (que me perdonen la señoras por mi incultura sobre los colores) se construiría con este código.

En la parte CSS de nuestra plantilla incluimos la ID bookmark-ribbon y sus propiedades:
#bookmark-ribbon {
width: 0;
height: 100px;
border-left:50px solid purple;
border-right: 50px solid purple;
border-bottom:35px solid transparent;
}

Y dónde queramos que aparezca la forma, se colocaría una capa como esta:
<div id="bookmark-ribbon"></div>

Experimentando un poco sobre este tipo de código, podéis comprobar mejor cómo funciona, pero por si acaso, en Land of Web han sido tan amables que han recopilado 36 de estas en una estupenda hoja de ayuda que incluye el código CSS ilustrado con la imagen que podremos formar ► CSS3 Simple Shapes – Cheat Sheet.

CSS3: Como es habitual, sólo disponible en los navegadores más modernos...


No hay comentarios:

Publicar un comentario

Correo Vaishnava