CSS 3 Secrets for Rounded Corners and Box Shadows on Squidoo Lenses

This is a sample text box with a box-shadow

You can make the shadow more blurry like this

or change the shadow color

Here's an example of border radius 15

Here's one with a smaller radius

Set it to zero and the corners become square

Here's an orange background image.
With its original size,
this text falls outside the background

Here though we've set the width of the background image to 100%
So now it's a wide as the column
You can do the same with the height too!

Here's an example of a text shadow

You can put the shadow on the other side...

...or make the shadow more blurry

...or even try a different shadow color

Here's a red background with 20% opacity

Here's a red background with 40% opacity

Here's a red background with 60% opacity

Here's a red background with 80% opacity

Here's a red background with 100% opacity

One of the most exciting features in CSS3 is color gradients.
These let you easily fade from one color to another
without spending time creating the effect yourself using image slices.
It's also really easy to adjust

Rounded corners, shadow and transform all together!

• For backgrounds, boxes etc, the CSS has to be applied to the element you're styling, such as a paragraph: <p>


• Use inline style. Like this: style="color: black";