Jump to content


Photo
- - - - -

Drop Shadow to content area

drop shadow

  • Please log in to reply
12 replies to this topic

#1 joeltwalters

joeltwalters

    Member

  • Members
  • 17 posts
  • Country: Country Flag

Posted 11 May 2013 - 03:34 PM

How do I add drop shadow to my content area? I do not know CSS very well and need a simple explanation as to how to do this.  Thanks!



#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 11 May 2013 - 03:41 PM

Hello Joel,

 

This link will explain (and demonstrate) the box-shadow element in CSS.

Please Login or Register to see this Hidden Content

 

I suggest using the Try It Now (green) button, which will demonstrate its use.

 

There needs to be a unique class (part of a DIV)  that the element is added to.  In order to find that, you'll need to use Firebug for Firefox or, Chrome's Inspection Tool.  Of course, you can always add your own custom class. 

 

Are you familiar with using DIVs?



#3 joeltwalters

joeltwalters

    Member

  • Members
  • 17 posts
  • Country: Country Flag

Posted 11 May 2013 - 03:43 PM

Thank you!

 

No I am not familiar with DIVs.



#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 11 May 2013 - 03:44 PM

Do you have Firebug?



#5 joeltwalters

joeltwalters

    Member

  • Members
  • 17 posts
  • Country: Country Flag

Posted 11 May 2013 - 03:46 PM

No



#6 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 11 May 2013 - 03:48 PM

I'd suggest getting it, free, at

Please Login or Register to see this Hidden Content

.

 

Meanwhile, can you point me to the particular box you want to shadow and I'll take a look, and give you some example code?



#7 joeltwalters

joeltwalters

    Member

  • Members
  • 17 posts
  • Country: Country Flag

Posted 11 May 2013 - 03:52 PM

url is: www.kidsbibleresources.com

 

I have a blue image as the BG image and then my content area is white. Can I have a drop shadow to be on both sides of my white content area.



#8 joeltwalters

joeltwalters

    Member

  • Members
  • 17 posts
  • Country: Country Flag

Posted 11 May 2013 - 04:12 PM

Ok, so I have firebug installed.



#9 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 11 May 2013 - 04:25 PM

My apologies.  Box-shadow won't work for the content-area.  The problem is that the content area is broken into several instances of the .content element, and since the box-shadow element doesn't allow you to assign a shadow to any specific side without shadowing the top and/or bottom as well; the net result of which is each portion of your page having its own shadow.

 

In that case, I'd recommend using a graphic solution in place of simple CSS. Unfortunately, this can take a toll on load time, and on the responsiveness of your site in mobile devices.

 

See the image below.  Honestly, I didn't think the element was so limiting.

Please Login or Register to see this Hidden Content

 

Please Login or Register to see this Hidden Content

  78KB   2 downloads

 

 

The graphic option can be seen here. 

Please Login or Register to see this Hidden Content

  This site incorporates both background and the shadowed whitespace.  However, it's using the Framework's background option, rather than CSS to apply the background to the .content area.

 

We could try that, if you prefer.

 

 



#10 joeltwalters

joeltwalters

    Member

  • Members
  • 17 posts
  • Country: Country Flag

Posted 11 May 2013 - 04:32 PM

I like the graphic option. How do I go about doing this?



#11 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 11 May 2013 - 04:51 PM

You look at the width of your content area set at Dashboard > PageLines > Site Options > Layout Editor.  It will be found in the little box at the bottom labelled Global Content Width (px).

 

Then, using a graphics tool such as Photoshop, you create a 1px high image, of the width found in that box.  So, if it says 1100, make a new image 1100px wide by 1px high.  Use the buttonize function of your graphics editor to set a 3 to 5px buttonize action to both sides of your image.  Save it with a unique name as a .png file.  I do not recommend .jpg as this can introduce interlacing (speckles) and we want to keep it white.

 

Upload the image to Dashboard > Media Library > Add New.  Copy the URL and make a note of it in a text file on your desktop. 

 

Try adding the image this way:

Please Login or Register to see this Hidden Content

This would be pasted (after editing) into Dashboard > PageLines > Site Options > Custom Code, on any line after body {}



#12 joeltwalters

joeltwalters

    Member

  • Members
  • 17 posts
  • Country: Country Flag

Posted 11 May 2013 - 05:50 PM

Thanks! I think I understand, minus one thing:

 

What is the "buttonize action?"

 

I am using Photoshop CS6.



#13 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 11 May 2013 - 09:24 PM

Buttonize is a tool in most photo editors. It places a gradient shading on the perimeter of things.  So, on the right and left side, you'd have shades of grey, going from darkest at the outside, to lightest towards center, with whitespace being the 'top of the button'.  If you set the width of that buttonize function to 5px, then it will appear as 5 different shades of grey until white is reached.

 

may help you.







Also tagged with one or more of these keywords: drop shadow