freelance84 Posted July 14, 2011 Share Posted July 14, 2011 Does anyone know if it is possible to get an 'inset' shadow to only appear on the top and bottom inside edges of a div and not the sides, i.e: Giving a kind of half-log effect, or pencil drawn shaded cylinder effect? Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted July 15, 2011 Share Posted July 15, 2011 as far as i know this is not directly possible. But you could put a div inside a div and than put a box-shadow on the inner div and than give the outer div the same padding as you gave as a width for the shadow. But this will look pretty ugly. have a look here: http://www.css3.info/ for what is possible. as an example of what i mean: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> .outer{border:1px solid #eee;padding:0 0 3px 3px;} .inner{box-shadow:#eee -3px 3px 3px;padding:5px;} </style> </head> <body> <div class="outer"> <div class="inner"> moo says the cow </div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
JasonLewis Posted July 17, 2011 Share Posted July 17, 2011 Or use an image to achieve the desired result? Shadows can be a bit frustrating at the moment. Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted July 17, 2011 Share Posted July 17, 2011 Or use an image to achieve the desired result? Shadows can be a bit frustrating at the moment. that is definitely better for a production site Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.