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).
- 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.
