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? Link to comment https://forums.phpfreaks.com/topic/241984-inset-shadow-on-2-edges-only/ 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> Link to comment https://forums.phpfreaks.com/topic/241984-inset-shadow-on-2-edges-only/#findComment-1243137 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. Link to comment https://forums.phpfreaks.com/topic/241984-inset-shadow-on-2-edges-only/#findComment-1243744 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 Link to comment https://forums.phpfreaks.com/topic/241984-inset-shadow-on-2-edges-only/#findComment-1243747 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.