SitePoint Sponsor

User Tag List

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

    Smile Help with CSS drop shadows

    I'm trying to replicate what I have created in inDesign but I don't understand how to use drop shadows and gradients in css. I was hoping someone could get me started and comment some styles and then maybe I can play with it until it the same. I attached a picture of the border. Its 581px by 640px. The border color is #4B3B1E. Can some help with creating the drop shadow above it and how it desolves with a gradiant as it goes down. Thanks

    div_border18.jpg

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You have two options, one are browser hacks to get it working in the main browsers such as FF, Chrome, but IE would fall. If so Just look up CSS gradiants.

    I'd get a 1x2 image of the gradiant. Or whatever size. Not very tall but wide enough to cover how the gradiant looks. Aka the left hand side of the image.

    Set a background image on the element you want the image to repeat, and then have it repeat-y, which will make it repeat vertically. That'll give one side the gradiant. I'm not caught up with how many browsers support CSS3 multiple background images, but you could just nest elements to achieve this throughout all the sides.

    Hope this helped...
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,864
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Quote Originally Posted by aaron4osu View Post
    I'm trying to replicate what I have created in inDesign
    Just because you can draw it doesn't mean it's a good idea It also doesn't mean its suitable for the web either. Without seeing the context of where you want to use that graphic we can't really advise on the best approach or if indeed it will work in a real situation. Content should be the first priority and then you can design with content in mind.

    You can use css3 box shadow for shadow effects (IE9+) and border-radius (ie9+) for the round corners. If you want older browser support then you have to slice and dice multiple images as shown here.

    It all depends on what element that border is placed around whether the page is fluid or fixed etc.

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2011
    Location
    NY
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Gradient is really hard to understand i am trying to code this too but i use online editor to create the gradient divs and other boxs. But for the drop shadow you may try using this code " box-shadow: 0px -1px 0px #color " it will like this "box-shadow:
    vertical horizontal shadow #color ". Hope it will help you.

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,737
    Mentioned
    32 Post(s)
    Tagged
    1 Thread(s)
    Just because you can draw it doesn't mean it's a good idea
    Bests statement ever, and keep in mind the review comes from an art director. I firmly believe these are the kind of things that should be designed , code-wise and graphically, so that they gracefully degrade.

    Anyway, employing CSS3, this could be a job for border image.

    You could also do w/o any images ... like this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
    	<head>
    		<title></title>
    		<style type="text/css">
    			.test{
    					position: relative;/* can also be absolute*/
    					padding:12px;/*width of your 'border'*/
    				  background: -webkit-gradient(linear, left top, left bottom, from(#4B3B1E), to(#fff)) ; /* Saf4+, Chrome */
    				  background: -webkit-linear-gradient(top, #4B3B1E, #fff)  ; /* Chrome 10+, Saf5.1+, iOS 5+ */
    				  background: -moz-linear-gradient(top, #4B3B1E, #fff); /* FF3.6 */
    				  background: -ms-linear-gradient(top, #4B3B1E, #fff); /* IE10, you can also use filter: for IE lt 10... */
    				  background: -o-linear-gradient(top, #4B3B1E, #fff); /* Opera 11.10+ */
    				  background: linear-gradient(to bottom, #4B3B1E, #fff);
    				  -webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android ≤1.6; adjust radius(12px) to be equal to the one  in your image*/
    				  -moz-border-radius: 12px; /* FF1-3.6 */
    				  border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
    				  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;  
    				  -webkit-box-shadow: 0 -3px 3px  #555;
    				  -moz-box-shadow: 0 -3px 3px  #555;
    				  box-shadow: 0 -3px 3px  #555;
    
      }
      .test:before {
    				   position: absolute; 
    				   top:12px;/*width of your 'border'*/
    				   bottom: 0; 
    				   left:12px; /*width of your 'border'*/
    				   right:12px; /*width of your 'border'*/
    				   background: #fff; 
    				   content: ""; 
    				   border-radius:7px; -moz-border-radius:7px;-webkit-border-radius:7px; z-index: 0 /*width of your 'border'- (width of your 'border'x Pi); caus I LOVE MATH!!! ==:) */
       }
      .test li {
    	  position: relative; 
    	  z-index: 2; 
    	  margin:0; 
    	  padding: 1em .5em; 
    	  list-style: none
      }
    		</style>
    	</head>
    	<body>
    		<ul class="test">
    			<li>Content...Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>	
    			<li>Content...Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>	
    			<li>Content...Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>	
    		</ul>		
    
    		
    	</body>
    </html>
    (pardon the messy code and comments it's been a hectic morning)

    I hope that helps.

  6. #6
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    If you want older browser support then you have to slice and dice multiple images as shown here.
    The new URL is better -- reminds me I need to set up a redirect as that domain is going away in a couple months.
    http://www.cutcodedown.com/tutorials...ers/page1.html

    Though really:
    Quote Originally Posted by aaron4osu View Post
    I'm trying to replicate what I have created in inDesign
    ... amounts to "Well there's your problem" -- as Paul said just because you can draw a pretty picture of it doesn't mean it has ANYTHING to do with web design. "Tools" like the preview pane in WYSIWYG editors like Frontpage or Dreamweaver, much less screwing around drawing "pretty pictures" with graphical editors like Photoshop or inDesign does more to make uselessly bloated annoyingly broken websites than anything else.

    The "But I can do it in Photoshop" mentality usually leading to "not viable for web deployment" concepts -- concepts people deploy anyways then wonder why they have little to no traffic thanks to high bounce rates.


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
  •