7 {{ upvoteCount | shortNum }}
7 {{ upvoteCount | shortNum }}

Background shadow of a div container

by Snatch
6 replies
Hi all, I would need to change the background of a div container. Its transparent but I would need to make it a little bit with shadow like this example -

www.natur-zen.fr/naturist-massage-a-la-pen-l-flight-of-way.htm

Notice how the background of the box is still transparent, but it has like a shadow.

How could I do that?

Thanks
#background #container #div #shadow
  • Profile picture of the author Dong Lee
    have you tried this ?

    background: url("image-url") no-repeat scroll center top #000000

    I think this will give you same thing as above website
    {{ DiscussionBoard.errors[7255197].message }}
    • Profile picture of the author viescripts
      search for CSS filters in google or background transparency. Play a while with params color and transparency. Different browsers have different filters.

      try apply a CSS filter like this (transparent black background):

      Code:
          .myfilter {
        /* use RGB if browsers don't use RGBa filter */
        background: rgb(0, 0, 0);
        /* set opacity to 75% */
       background: rgba(0, 0, 0, 0.75);
    }
      This code won't work in all browsers.
      {{ DiscussionBoard.errors[7255524].message }}
      • Profile picture of the author viescripts
        Here's a example. Just copy and paste it in a html file, then open the file with your browser (tested in Chrome):

        Code:
        <!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
        .myfilter {
          /* use RGB if browsers don't use RGBa filter */
          background: rgb(0, 0, 0);
          /* set opacity to 50% */
          background: rgba(0, 0, 0, 0.50);
       }
       .squarebox {
       	  width: 400px;
       	  height : 200px;
       	  position: absolute;
       	  left: 50px;
       	  top: 20px;
       	  /*background: #000;*/
       }
	</style>
</head>
<body>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum enim sit amet nunc semper gravida. Fusce ultrices auctor commodo. Suspendisse ac ante neque, vitae venenatis urna. Quisque pharetra purus ac mauris tincidunt lacinia. Proin risus arcu, luctus eget commodo sed, aliquam eu risus. Phasellus ut volutpat odio. Donec lacus enim, elementum non sodales ac, cursus a justo. Ut ullamcorper elit et odio porta pretium. Aliquam nec interdum dolor. Nam elementum fermentum dolor at vulputate.</p>
	<div class="squarebox myfilter"></div>
</body>
</html>
        {{ DiscussionBoard.errors[7255794].message }}
  • Profile picture of the author scottlpool2003
    You could have given a warning on what the website contained we're not all in places where that is allowed...
    {{ DiscussionBoard.errors[7256039].message }}
    • Profile picture of the author viescripts
      Originally Posted by scottlpool2003 View Post

      You could have given a warning on what the website contained we're not all in places where that is allowed...
      Isn't it enough in a previous post? It was mentioned - filter won't work in all browsers. There exist cross browser solutions, should search in google.
      {{ DiscussionBoard.errors[7260642].message }}
  • Profile picture of the author y8y8
    you can you background is an image or use CSS3, search on google.com 'shadow div in css3'
    {{ DiscussionBoard.errors[7281999].message }}

Trending Topics