SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2011
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to create box shadow on only one side

    I'm trying to figure a way to add a box shadow but to only one side.
    Here is a link to the page:http://aaronhaas.com/pitchshark7/index10.html

    HTML Code:
    #content{
    	font-family: Helvetica,Arial,sans-serif;
    	width:995px;
    	height:1780px;
    	margin:0px auto;
    	padding-left:20px;
    	background-color: #fff;
    	-moz-border-radius-topleft: 0px;
    	-moz-border-radius-topright: 0px;
    	-moz-border-radius-bottomright: 12px;
    	-moz-border-radius-bottomleft: 12px;
    	-webkit-border-radius: 0px 0px 12px 12px;
    	border-radius: 0px 0px 12px 12px;
    
    	-webkit-box-shadow: inset -2px -3px 1px 1px #aaa;
    	-moz-box-shadow: inset -2px -3px 1px 1px #aaa;
    	box-shadow: inset -2px -3px 1px 1px #aaa;
    }

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,585
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Do you know what each value stands for? box-shadow: h-shadow v-shadow blur spread color inset;

    Ify ou want a box shadow on either the bottom or right, adjust the first two values. If you want left/top, you have to use negative values

    Here is one on the right
    Code:
    div
    {
    width:300px;
    height:100px;
    background-color:yellow;
    box-shadow: 10px 0px 4px #888888;
    }
    Top
    Code:
    div
    {
    width:300px;
    height:100px;
    background-color:yellow;
    box-shadow: 0px -10px 4px #888888;
    }
    Left
    Code:
    div
    {
    width:300px;
    height:100px;
    background-color:yellow;
    box-shadow: -10px 0px 4px #888888;
    }
    Bottom
    Code:
    div
    {
    width:300px;
    height:100px;
    background-color:yellow;
    box-shadow: 0px 10px 4px #888888;
    }
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Enthusiast Albablue89's Avatar
    Join Date
    Jul 2005
    Location
    Scotland
    Posts
    98
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Try this..

    Code:
    #content{
    	font-family: Helvetica,Arial,sans-serif;
    	width:995px;
    	height:1780px;
    	margin:0px auto;
    	padding-left:20px;
    	background-color: #fff;
    
    	-moz-border-radius: 0px 0px 12px 12px;
    	-webkit-border-radius: 0px 0px 12px 12px;
    	border-radius: 0px 0px 12px 12px;
    
    	-moz-box-shadow: 10px 0px 5px -2px #aaa;
    	-webkit-box-shadow: 10px 0px 5px -2px #aaa;
    	box-shadow: 10px 0px 5px -2px #aaa;
    }
    Positioning first, 10px (horizontal offset sends it to the right and 0px (vertical offset) keeps it hidden under it's parent element. Radius next, so 5px is the blur radius. Then the fourth -2px property is the shadow spread, so change that to your spec, to make it appear on one side only.

  4. #4
    SitePoint Zealot
    Join Date
    Dec 2011
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by aaron4osu View Post
    I'm trying to figure a way to add a box shadow but to only one side.
    Thanks, but I'm trying to make it so the shadow only appears on the bottom.

    Even better, is there a way to make the shadow a gradient and get darker as it goes down border gradient on the side of the page?
    http://aaronhaas.com/pitchshark7/index10.html

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,585
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by aaron4osu View Post
    Thanks, but I'm trying to make it so the shadow only appears on the bottom.

    Even better, is there a way to make the shadow a gradient and get darker as it goes down border gradient on the side of the page?
    http://aaronhaas.com/pitchshark7/index10.html
    Did you not read my post?

    If you blur it out, it'll start dark and work to light, but you'll need to increase the "blur" value to make it a longer effect.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •