» Publicación:
20 mayo 2011
/
Categoría:

LayerStyle: Crear Divs con bordes redondeados

Hace unas semanas hice una entrada en el blog un herramienta llamada –Prefix-My-CSS- la cual tenía la gran utilidad de generar todas las propiedades CSS como border redondeados para los navegadores que ocupan Webkit (Chrome, Safari) y Moz de Firefox (también comente que IE9 ya leía de forma nativa las propiedades como “Border-Radius” y “Box-Shadow”.

Bueno ahora tenemos a Layer Styles, una herramienta online que es capaz de crear DIVS con bordes redondeados y variados efectos.

Visualmente se comporta como el panel de edición de estilos de capas de Photoshop, verán que podrán seleccionar entre: sombra paralela (Drop Shadow), sombra interior (Inner Shadow), color de fondo (Background), borde (Border) y radio de borde (Border Radius). Para utilizarlo solo debemos desplazarnos entre una y otra característica y seleccionar lo que deseamos.

Lo peculiar de esta herramienta es que luego de que apliquemos todos los elementos que deseamos sobre la caja podemos extraer el código CSS para aplicarlo sin necesidad de generar

ninguna imagen accesoria. Al finalizar, podemos obtener el código CSS desde el botón inferior CSS Code. Además también genera el código para los navegadores Mozilla Firefox y los que ocupan Webkit (ya mencionados arriba).

Propiedades Destacadas:

– Inner Shadow: esta sombra se posiciona dentro de la caja y a través de ella podemos dar una sensación de profundidad. Layer Styles nos permite al igual que con el Drop Shadow, modificar los valores a gusto para que el resultado sea el que deseamos.

– Drop Shadow: se trata de una sombra paralela, exterior al cuadro o forma que estemos diseñando, tal y como lo hacemos en Photoshop, podemos cambiar el tamaño de la sombra, el color, la inclinación y el esfumado. Como así también el nivel de opacidad que queremos.

– Border radius: la herramienta permite generar bordes redondeados en la caja hasta el punto de dejarla hecha un círculo. Al mismo tiempo podemos seleccionar cuales esquinas deseamos que contengan este radio y cuales no.

Importante:
Como ya mencione, hay exploradores que no permiten la visualización de ciertos efectos, y otros que si lo hacen a través de hacks (incluye la variación en el código de hex y rgba). Siempre se deben utilizar con cuidado para que no se modifique estructuralmente nuestro diseño y poder darnos ciertas licencias dentro de lo que habíamos planeado inicialmente. Entre ellos que no leen casi nada esta Internet Explorer 5 – 6 – 7 – 8. Así que ojo con aquello.

Link de LayerStyle.org

  • Facebook
  • Twitter
  • Delicious
  • Tumblr
  • Google Buzz
  • StumbleUpon
  • Digg
  • Technorati
  • Netvibes
  • Windows Live
  • Reddit
  • LinkedIn
  • Google Bookmarks
  • E-Mail
» Sobre el autor: Reckless
Joven chileno de 29 años, con un paso por la escuela de Ingenieria de la UNAB, que dejo a medio camino para tomar la carrera de Diseñador Gráfico Profesional en la Universidad Santo Tomás, que era lo que siempre busco desde los 12 años. Fanático de la Universidad de Chile, el Metal y el Hardrock. Actualmente trabajando como Diseñador & Desarrolador Web para Especiales de Emol.com, ademas de "Freelancear" cuando se puede.
Comentarios
Por ahora esta entrada no contiene ningún comentario...
Se el primero en comentar está entrada en el formulario de abajo.
Escribe tú comentario
*
*
» Mensaje: