CSS: Layer styles

Tweet

Following similar articles about online CSS tools, today I would like to share Layer Styles.
The web site has a simple graphical interface with sliders and selectors where we can insert parameters and see the results of our choices with a screen preview. The possibilities are quite interesting and the customizable parameters are surely the most used for most web developers. The resulting CSS style can be then copied for our personal use.

Let's see what we can do in depth.


Drop and Inner Shadow
We can choose parameters for:
color
opacity
angle
distance
blur
size

Background

For the background, we can select:
opacity
gradient
gradient style
angle

Border

The border can be customized with:
color
opacity
size
style (solid, dashed, dotted and double)

Border Radius

We can select the radius for each of the four corners separately, which is incredibly handy.

The results

The result is a CSS style code that can be with RGB or HEX colours. It is quite clear that - once again - compatibility could be an issue here. What is really useful, is the fact that we can check the results of our customization in every possible browser installed on our testing machine. I know it could be a pain in the neck, but it's better than walking in complete dark.

Have a splendid day and let me know what you think about it.