Boxes with Shadows

  • 1
  • Question
  • Updated 9 years ago
  • Answered
Boxes with Shadows - how do I add a nice box with a shadow like these http://www.westciv.com/tools/boxshado... I don't get what I need to do to add....
Photo of vasey888

vasey888

  • 51 Posts
  • 0 Reply Likes

Posted 9 years ago

  • 1
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Hi vasey888,

I have written this little style for you. Hope you like it. <!--

Put this at the top of your page in a html widget:

<style type="text/css">
.css3boxbylee {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border:1px solid #CCCCCC;
-moz-box-shadow:5px 5px 3px #CCCCCC;
-webkit-box-shadow:5px 5px 3px #CCCCCC;
}
</style>

Then put this on the page in a text widget where you want the box to be.

<div style="width: 300px;" class="css3boxbylee">
<br>
</div>

NOTES:

* I have made the box 300px wide you can change this or remove the style="width:300px" and it will go 100% wide.

* You can change the border colour here with this line of the css
border:1px solid #CCCCCC;

* These are the same thing for different browsers (keep the same)
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
&
-moz-box-shadow:5px 5px 3px #CCCCCC;
-webkit-box-shadow:5px 5px 3px #CCCCCC;

The first set do the rounded corners of the box and the second set do the box shadow.

-->

Lee. http://hexham.info

(if you need help with it just ask)
Photo of Kershnee

Kershnee

  • 2087 Posts
  • 152 Reply Likes
Awesome!! Thanks Lee.
Photo of vasey888

vasey888

  • 51 Posts
  • 0 Reply Likes
OK... YOU ARE A LEGEND!! Thanks - will put it to use and show you the results!!! thanks a million
Photo of vasey888

vasey888

  • 51 Posts
  • 0 Reply Likes
OK check this out :

http://natanddaveoctober2011.yolasite...

used the style from Lee on the What to see and Do test box. You can see the contrast with the old style box above. I like!!!! Thanks Again.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
It looks great!!
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
I love it vasey888, I think I will be using this one myself.

Lee.
Photo of vasey888

vasey888

  • 51 Posts
  • 0 Reply Likes
seems like it does not work on Internet Explorer.... odd - any way we can fix that? My Mac with Firefox was just perfect - but at work it's just a square box with no shadow :(
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Thats the way it is with CSS3 - you will notice in the link you leave above they are not compatible with IE.

Nothing you can do about it.

Alot of sites are using CSS3 styles which can not be seen in IE (Yola inc.) check the difference out between thi spage in IE and firefox http://yola.com/pricing for example.

Lee.
Photo of vasey888

vasey888

  • 51 Posts
  • 0 Reply Likes
ah I see - how bugging - oh well - still a superb add to my site - many thanks