codescracker


css

CSS3 Shadows



« Previous Tutorial Next Tutorial »


Demo CSS3 Shadow

You can create Shadow effects using CSS3

CSS3 Shadow Effects

Using CSS3, you can easily create shadow effect to elements.

This tutorial is divided into the following two parts:

CSS3 Shadows Example

Here is an example on creating shadow effect using CSS3:

<!DOCTYPE html>
<html>
<head>
	<title>CSS3 Shadows Example</title>
</head>
<body>

<p style="text-shadow:2px 2px 2px purple;font-size:130%;">
	This is CSS3 Shadows Tutorial</p>
<p style="text-shadow:2px 2px blue;font-size:130%;">
	This is CSS3 Shadows Example</p>
<p style="text-shadow:4px 4px 10px green; font-size:130%;">
	This is CSS3 Shadows Exercise</p>
<p style="text-shadow:4px 4px 6px black;color:white;font-size:130%;">
	This is CSS3 Shadows Test</p>

</body>
</html>

Here is the sample output produced by the above CSS3 shadow effect example code:

css3 shadows example

In the above example of shadow effect, we have used the text-shadow property available in CSS3 to create shadow effect. You will learn all about this property in next tutorial along with their examples.


« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test