Elementos inclinados con CSS3

El otro día les comentaba sobre la posibilidad de animar sliders de fotografías a partir del uso de CSS3, y como era de esperarse, se siguen investigando opciones que permitan prescindir de las imágenes y brinden mayores posibilidades a la hora del diseño.

En este caso y nuevamente desde Tympanus, nos ilustran sobre algunos nuevos usos del CSS3, obviamente y como ya les comenté en otra oportunidad, estos elementos no se visualizan correctamente en todos los exploradores, por lo que solo podemos tomarlos como ejemplo si es que no queremos en una graceful degradation extrema y que se pierda por completo el sentido de nuestro diseño cuando se ingrese desde estos exploradores que no admiten todas las propiedades CSS3.

Pueden visitar y descargar el código completo y su utilización en Slopy Elements with CSS3, y los ejemplos, en ellos se pueden ver dos variaciones gráficas, en la primera podemos observar líneas diagonales que abarcan cajas contenedoras, deberemos luchar con las alineaciones y los floats probablemente ante la necesidad de diseñar para dispositivos diferentes, pero cierto es que resulta bastante original sin estar elaborado con imágenes. Incluso de tener que realizarlo con imágenes, la alineación sería un problema.

El segundo caso muestra divisiones dentro de la misma caja, se visualizan a modo de flechas cóncavas y convexas, algo que puede resultar muy útil para botones y elementos más pequeños que los del primer ejemplo.

Tamara: Artista multimedios, trabaja desde hace 9 años en disciplinas relacionadas con el mundo tecnológico, video, animación y procesamiento de imágenes. Arte y diseño alimentan su mojo.
Entradas relacionadas