CODEWITHSUNDEEP
cssshadow
Tim Daubenschütz
Tim Daubenschütz

Reputation: 2173

Shadow inside of a div

Is it possible to display a shadow inside a div box without using pictures? Instead I want to use css commands.

So is there some command like: -webkit-box-shadow: 1px inset; ?

Upvotes: 22

Views: 59961

Answers (3)

oezi
oezi

Reputation: 51797

In CSS3 there's box-shadow which can also be inset to do exactly what you need. This is supported by the following browsers:

  • Chrome >= 10.0 (>= 4.0 with -webkit prefix)
  • Firefox >= 4.0 (>= 3.5 with -moz prefix)
  • IE >= 9.0
  • Opera >= 10.5
  • Safari >= 5.1 (>= 5.0 with -webkit prefix)

Upvotes: 21

Arunraj S
Arunraj S

Reputation: 778

You can use Box shadow generator for shadow effects. I will give an example to show how to use the box shadow generator.

Step 1: Go to : Box Shadow Generator

Step 2: adjust the shadow property you want to add.

Step 3: Then copy the css code using "copy text" button.

step 4: Then you can past the css code into the style sheet file.

Do like this.

<html>
<head>
    <title>Title</title>
    <style type="text/css">
    #banner{

        position: absolute;
        width: 100%;
        height: 150px;
        background-color: #4E6C88;
        -webkit-box-shadow: -1px 9px 18px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: -1px 9px 18px 0px rgba(0,0,0,0.75);
        box-shadow: -1px 9px 18px 0px rgba(0,0,0,0.75);
    }

    </style>
</head>
<body>
 <div id="banner">    

 </div>
</body>
</html>

Thank you... ;)

Upvotes: 0

sandeep
sandeep

Reputation: 92803

Yup there is a command inset. like this:

-webkit-box-shadow: 0 0 1px 3px #000 inset;
-moz-box-shadow: 0 0 1px 3px #000 inset;
box-shadow: 0 0 1px 3px #000 inset;

You can generate from here http://css3generator.com/

Upvotes: 41

Related Questions