2

I want to create a round shadow for an image and a button for CSS, and I found a solution in CSS3 Drop Shadows Generator which creates round shadow for a box.

enter image description here

but I don't know how to apply code for my case (for an image and a button)

.box {
  position: relative;
  width: 400px;
  height: 300px;
  background-color: #fff;
  box-shadow: 0 1px 5px rgba(0,0,0,0.25), 0 0 50px rgba(0,0,0,0.1) inset;
  border-radius: 1%     1%     1%     1% /     1%     1%     1%     1%;
}
.box:after {
      position: absolute;
      width: 64%;
      height: 12%;
      left: 18%;
      border-radius: 50%;
      z-index: -1;
      bottom: 0%;
      content: "";
      box-shadow: 0 50px 24px rgba(0,0,0,0.24);
      }

Your support will be appreciated!

1
  • After all, I found that the shadow is at the bottom of page. Thanks all
    – suti
    Mar 30, 2014 at 10:52

4 Answers 4

5

Ok, create a html document and paste the following code :

<html>
<style type="text/css">
.box {
     position: relative;
     width: 400px;
     height: 300px;
     background-color: #fff;
     box-shadow: 0 1px 5px rgba(0,0,0,0.25), 0 0 50px rgba(0,0,0,0.1) inset;
     border-radius: 1%     1%     1%     1% /     1%     1%     1%     1%;
}
.box:after {
      position: absolute;
      width: 64%;
      height: 12%;
      left: 18%;
      border-radius: 50%;
      z-index: -1;
      bottom: 0%;
      content: "";
      box-shadow: 0 50px 24px rgba(0,0,0,0.24);
}
</style>
<body>
    <div class="box">
    <img src="img.jpg" />
    </div>
</body>
<html>

You have to create a div element inside body and assign the .box class to the div like this :

 <div class="box">
 // put your content here (eg. image or text) and it will be inside the box
 </div>

Thats all.

1
  • After all, I found that the shadow is at the bottom of page.
    – suti
    Mar 30, 2014 at 10:51
1

Place the image inside the box, this should create the shadow for the image.

 <div id='DIV' class='box'>
    <img src='imgsrc' /> <!-- place your image here -->
 </div>
1

Image elements do not allow pseudo elements to be placed inside them, therefor you will have to place your image inside a div and then apply the styles to that.

0

If you want to use the same code then you can do this way.

HTML :

<head id="Head1" runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
        .box
        {

            position: relative;
            width: 400px;
            height: 300px;
            background-color: #fff;
            box-shadow: 0 1px 5px rgba(0,0,0,0.25), 0 0 50px rgba(0,0,0,0.1) inset;
            border-radius: 1% 1% 1% 1% / 1% 1% 1% 1%;
        }
        .box:after
        {
            position: absolute;
            width: 64%;
            height: 12%;
            left: 18%;
            border-radius: 50%;
            z-index: -1;
            bottom: 0%;
            content: "";
            box-shadow: 0 50px 24px rgba(0,0,0,0.24);
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
            <asp:Image ID="Image1" CssClass="box" ImageUrl="YourImagePath" runat="server" />       
    </div>
     <div >
         <asp:Button CssClass="box" ID="Button1" runat="server" Text="Button" />
    </div>
    </form>
</body>

Please change width and height as per your need. I hope this will work for you.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.