Textpattern CMS

#1 2009-03-05 02:06:09

davidoleski

Member

Registered: 2008-10-24

Posts: 10

drop shadows for containers

Maybe this is really simple, but I’m totally stumped. I want to have a simple and subtle dropshadow along the side and bottom of a basic container. Can this be done with entries in the CSS editor? The container changes dimensions based on what page content fills it, so it has to be dynamic. Is the only way to somehow built layers with a shadow gif? How do I implement a shadow gif with the CSS editor?

Thanks

#2 2009-03-05 04:19:07

MattD

Plugin Author

From: Monterey, California

Registered: 2008-03-21

Posts: 1,254

Website

Re: drop shadows for containers

I would recommend not using the css editor. There’s even talk or removing it.

---

My Plugins

Piwik Dashboard, Google Analytics Dashboard, Minibar, Article Image Colorpicker, Admin Datepicker, Admin Google Map, Admin Colorpicker

#3 2009-03-05 05:25:10

davidoleski

Member

Registered: 2008-10-24

Posts: 10

Re: drop shadows for containers

Good to know, but aside from the CSS editor, how would I create a simple and subtle dropshadow on a container? I can’t find any kind of tutorial on anything but making this effect on images, not containers.

#4 2009-03-05 06:51:00

smdnetau

Member

From: Sydney

Registered: 2008-10-09

Posts: 52

Website

Re: drop shadows for containers

Mmmmm…. drop shdows…. http://plugins.jquery.com/project/DropShadow

#5 2009-03-05 09:01:04

kemie

Plugin Author

From: mexico<-->sweden

Registered: 2004-05-20

Posts: 495

Website

Re: drop shadows for containers

a search for css drop shadow tutorial brings up hundreds and hundreds of results! but i recommend this basic but good one:

http://www.alistapart.com/articles/cssdropshadows/

You basically need a very big image of the shadow to set as the background image of your element/s through CSS

---

~~~~~~~~~~~~~| monolinea.com | pixilate.com | istockphoto.com/kemie |~~~~~~~~~~~~~

#6 2009-03-05 16:03:12

nemoorange

Plugin Author

From: Washington DC

Registered: 2006-11-29

Posts: 90

Website

Re: drop shadows for containers

Let’s not forget about the CSS box-shadow property. The example code is for a drop shadow that positioned 10px to the right, 10px down, with a spread of 5px, with a color of #888.

.contanter{
  box-shadow: 10px 10px 5px #888;
}

Granted, as of right now, this is only works in Safari, but Firefox 3.1 is probably only a couple months away. Once that breaks through, you’re looking at having more than 50% of your visitors seeing the drop shadow. Plus, you don’t have to get dirty with javascript or multiple div’s.

---

Txp admin themes | dropshado.ws – a blog for design noobs like me