Shadow in Html5 with Css3

Here in this code I use Css code with Html. In html I only write text (hello friends) and take a box.

By Css I defined initial size of the box is 200px and the color of box is green.In text I use H1(heading 1).

By Css I choose the background color of body is light yellow (#CF9) and align of text is center.

for rounded box I use box-radius.

for box shadow I use "text-shadow: h-shadow v-shadow blur spread color"
for text shadow I use "text-shadow: h-shadow v-shadow blur color".

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <style>

        body

        {

            background-color: #CF9;

        }

        h1

        {

            text-align: center;

            font-family: Algerian;

            font-size: 100px;

            color: #90F;

            text-shadow: 10px 10px 8px #666;

        }

        .box

        {

            width: 200px;

            height: 200px;

            border-radius: 40px;

            background-color: #0C6;

            margin-left: 40%;

            margin-top: 10%;

            box-shadow: 5px 10px 15px 5px #666666;

        }

    </style>

    <title>Untitled Document</title>

</head>

<body>

    <h1>

        HELLO FRIENDS</h1>

    <div class="box">

    </div>

</body>

</html>

Ebook Download
View all
Learn
View all