Get Paid to Participate - up to $1 per post!     Twitter     Facebook     Google+
Hosting Discussion
 

forgot password?



Reply


Old
  Post #1 (permalink)   10-11-2009, 02:07 PM
HD Amateur
 
Join Date: Sep 2009
Posts: 60

Status: Exciter is offline
How do you get a shadow border around your website container or wrapper div?

Is it an image, or is that done using CSS?

I think this looks so cool and would love to use this on my sites as opposed to a regular border.

Thanks in advance.
 
 
 


Old
  Post #2 (permalink)   10-11-2009, 04:18 PM
CSN-UK | Charlie
 
csn-uk's Avatar
 
Join Date: Mar 2009
Location: Swindon (UK)
Posts: 470
Send a message via MSN to csn-uk

Status: csn-uk is offline
this is often done with both images and CSS, for a drop shadow effect as in often the shadow used arround an object often making them apear 3D (ish) its done by CSS.

however say for example a graidient or a wave (light dark /light dark) type situation it is both CSS and an image where by you create the image and use css to position and repeat it across the page. (to avoid incompatability and reduce load times)
__________________
CSN-UK | Shared Hosting | Dedicated | VPS | Custom Packages Avalible On Request | Quality SSL Certificates from COMODO CA
CSN-UK.net | Server Status | Client Area | Live Support
 
 
 


Old
  Post #3 (permalink)   10-19-2009, 09:25 AM
HD Amateur
 
Join Date: Sep 2009
Posts: 60

Status: Exciter is offline
Okay, thanks for the reply.

However, could you elaborate on exactly how, if you know.

I know a good bit of CSS, or so I would like to think.

Would you create a separate div(s) to achieve this look? Because for some reason faux css columns pop into my head.
 
 
 


Old
  Post #4 (permalink)   10-23-2009, 06:41 PM
HD Addict
 
Join Date: Jul 2009
Posts: 142

Status: Fellow is offline
I have tried numerous times to accomplish that look however I fumble the coding somewhere along the way. I would love to know the CSS method so that I could practice or play with this some. No matter what I try I cannot accomplish that look.
 
 
 


Old
  Post #5 (permalink)   11-07-2009, 08:02 PM
HD Master
 
Join Date: Nov 2009
Location: USA
Posts: 339
Send a message via AIM to energizedit Send a message via Skype™ to energizedit

Status: energizedit is offline
Here is the css you are looking for -moz-box-shadow:1px 1px 10px rgba(0, 0, 0, 0.3); A Google search will find what you need.

Mark
__________________
Energized I.T. Cpanel Hosting
A full service web company
Shared/Reseller Hosting | Website Building | Domain Names
 
 
 


Old
  Post #6 (permalink)   11-18-2009, 06:24 AM
HD Newbie
 
Join Date: Nov 2009
Posts: 1

Status: martin1 is offline
Hi, it's a so nice and good site ever. It's a really great and fantastic post here in this site. Thank you for the sharing of your ideas and information to all of us.
__________________
Active server pages - asp tutorial for beginners with free script codes.
 
 
 


Old
  Post #7 (permalink)   11-18-2009, 09:23 AM
HD Guru
 
siforek's Avatar
 
Join Date: Mar 2009
Location: Salt Lake City, UT
Posts: 663

Status: siforek is offline
Quote:
Originally Posted by energizedit View Post
Here is the css you are looking for -moz-box-shadow:1px 1px 10px rgba(0, 0, 0, 0.3); A Google search will find what you need.

Mark
Unfortunately that method only works with Firefox and isn't valid CSS. While most people can get away with validation errors, it's crucial that things look the same in all major browsers. This is how I do it:

Use Photoshop or Illustrator to create the box w/shadow. Slice it up: top and bottom, and a 1px high image that repeats the middle vertically. Then using CSS you use the 1px high image for the div's background, and place the div's top & bottom backgrounds using either the divs above and below them or style an element like an <hr />

That's just how I have done it in the past. There's actually many articles and various methods online if you use your best friend; Google
__________________
| | Fiber Elephant | | Virtuozzo & Reseller Hosting
█ | Never oversold, always managed & on the SoftLayer network!
█ | Call us toll free 24/7! | 1-888-92-FIBER
 
 
 


Old
  Post #8 (permalink)   11-20-2009, 11:02 AM
HD Amateur
 
Join Date: Sep 2009
Posts: 60

Status: Exciter is offline
Siforek, I actually found a solution using css faux columns. I created an image in GIMP, created two faux columns and set them as the background using CSS.

It's so easy and too simple.
 
 
 
Reply

Thread Tools

New Post New Post   Old Post Old Post
Posting Rules:
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On
Sponsored By: