Jump to content
Sign in to follow this  
kellid

Adding drop shadow to feature slider

Recommended Posts

kellid

Hi! I'm using platform pro and wondering how I would go about adding drop shadow to my feature slider. More specifically to the bottom of the slider so that it looks like it's standing up a bit? But drop show in general would give me a start. Also, I wanted to add a thin 2px light gray border around my boxes. I saw a previous post that said to add the following to the custom code but it did nothing for me. Any ideas? Lastly, is there a way to have a set of 3 boxes as well 1 soapbox of a different set on the same page? .fixed_width #boxes .dcol-pad { border: 1px solid #cccccc;} Thanks all!! K

Share this post


Link to post
Share on other sites
alisamski
Link First, you need to make your shadow art.. this is what I used .. at link above. art size here is 960 x 400 (960 is the size of my pages) This is the custom css used below:
.page-id-2 #maincontent .content {min-height:400px; margin-left:-7px;}
	.mcolumn-pad{padding-top:1em; }
	
	.page-id-2 #maincontent .content  {background:url(http://PATH TO ART.PNG) no-repeat;
	}

Hope this helps.

Share this post


Link to post
Share on other sites
kellid

thanks Alisa!! I really appreciate the response :)) Kelli

Share this post


Link to post
Share on other sites
kellid

it didn't look as good as it did on Alisa's site. i wanted to put drop shadow on 3 or 4 sides of the feature slider.

Share this post


Link to post
Share on other sites
catrina

Can you post a link to your site? The CSS might be slightly different...


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
kellid

sure. www.modelalliance.org usr:kelli psw:modelall2011 thank you!!

Share this post


Link to post
Share on other sites
timlinson

For all 4 sides, I would style it with something like this: ` #feature_slider { box-shadow: 5px 5px 5px gray, -5px 5px 5px gray, -5px -5px 5px gray, 5px -5px 5px gray; -moz-box-shadow: 5px 5px 5px gray, -5px 5px 5px gray, -5px -5px 5px gray, 5px -5px 5px gray; -webkit-box-shadow: 5px 5px 5px gray, -5px 5px 5px gray, -5px -5px 5px gray, 5px -5px 5px gray; } `

Share this post


Link to post
Share on other sites
alisamski

@Tim You created a shadow effect with CSS?

Share this post


Link to post
Share on other sites
kellid

That's great!! I just changed the offset and blur...thanks so much Tim!! K

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×