?
Solved

Creating CSS shadow effect in HTML5

Posted on 2012-09-03
7
Medium Priority
?
673 Views
Last Modified: 2012-09-04
I have a question regarding a site that I am creating.  The concept is here:  www.interstellar9.com/sharonfarber.html

I want the content to be centered in the browser, and I want to create a cast shadow from the section that holds the image with the quote (this will be a slide show).

My question is, is there, and if there is, how do I create this CSS or HTML shadowing, or does it have to be done in the background image that surrounds the section div?

Thanks!
0
Comment
Question by:Revolution9
  • 3
  • 3
7 Comments
 
LVL 13

Assisted Solution

by:Abhijeet Rananaware
Abhijeet Rananaware earned 1000 total points
ID: 38361788
.box_shadow{

-moz-box-shadow: 0px 0px 40px #000000;
-webkit-box-shadow: 0px 0px 40px #000000;
box-shadow: 0px 0px 40px #000000;
}

For box shadow you can try above code.

You can achieve most of things using css.

Regards.
Abhijit
0
 

Author Comment

by:Revolution9
ID: 38361799
Thanks Abhijit - will this work on all browsers?
0
 
LVL 13

Expert Comment

by:Abhijeet Rananaware
ID: 38361813
It works on all browsers except IE7

IE7 doesnt support blur property in box-shadow.


You need to put fallback for IE7.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

Author Comment

by:Revolution9
ID: 38362256
This is obviously wrong.  Can you help me?  

.container {
      width: 960px;
      background: #FFF;
      margin: 0 auto;
      .box_shadow{
-moz-box-shadow: 0px 0px 40px #000000;
-webkit-box-shadow: 0px 0px 40px #000000;
box-shadow: 0px 0px 40px #000000;
}
0
 
LVL 84

Accepted Solution

by:
Dave Baldwin earned 1000 total points
ID: 38362777
Your format is wrong.  either...
.container {
      width: 960px;
      background: #FFF;
      margin: 0 auto;}
.box_shadow{
  -moz-box-shadow: 0px 0px 40px #000000;
  -webkit-box-shadow: 0px 0px 40px #000000;
  box-shadow: 0px 0px 40px #000000;
} 

Open in new window

or
.container {
      width: 960px;
      background: #FFF;
      margin: 0 auto;
  -moz-box-shadow: 0px 0px 40px #000000;
  -webkit-box-shadow: 0px 0px 40px #000000;
  box-shadow: 0px 0px 40px #000000;
} 

Open in new window

0
 
LVL 13

Expert Comment

by:Abhijeet Rananaware
ID: 38362947
Yes your format is incorrect. Use Dave's code.
0
 

Author Closing Comment

by:Revolution9
ID: 38364356
Thanks guys!
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Suggested Courses

807 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question