divinedesigns1 Posted November 3, 2013 Share Posted November 3, 2013 how would i go about make this box shadow to be displaying like this using css3 box shadow? the picture is below or would i have to create this in photoshop? Link to comment Share on other sites More sharing options...
Hadien Posted November 3, 2013 Share Posted November 3, 2013 .shadow{width:300px;height:100px;background-color:yellow;box-shadow: 0px 10px 15px -10px rgba(0, 0, 0, 1.0), 40px 0px 40px -30px rgba(0, 0, 0, 0.6) inset, -40px 0px 40px -30px rgba(0, 0, 0, 0.6) inset} 1st shadow definition is to the bottom, 2nd is for the left inside gradient and the 3rd is for the right inside gradient. the bottom shadow won't be as nearly rounded, but you can come close to the effect. you could also use SVG to make a dynamically sized shadow. and through filters it should be quite possible to duplicate the effect in your image, though I don't know quite enough about SVG to walk you through it Link to comment Share on other sites More sharing options...
divinedesigns1 Posted November 3, 2013 Author Share Posted November 3, 2013 .shadow{width:300px;height:100px;background-color:yellow;box-shadow: 0px 10px 15px -10px rgba(0, 0, 0, 1.0), 40px 0px 40px -30px rgba(0, 0, 0, 0.6) inset, -40px 0px 40px -30px rgba(0, 0, 0, 0.6) inset} 1st shadow definition is to the bottom, 2nd is for the left inside gradient and the 3rd is for the right inside gradient. the bottom shadow won't be as nearly rounded, but you can come close to the effect. you could also use SVG to make a dynamically sized shadow. and through filters it should be quite possible to duplicate the effect in your image, though I don't know quite enough about SVG to walk you through it thats not giving me exactly what i want, but thanks tho, ill look into svg some more Link to comment Share on other sites More sharing options...
dsonesuk Posted November 4, 2013 Share Posted November 4, 2013 http://nicolasgallagher.com/css-drop-shadows-without-images/demo/ <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" /> <title>Document Title</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script> <script type="text/javascript"> </script> <style type="text/css"> /* Curved shadows */ .drop-shadow { position:relative; float:left; width:230px; height:23px; /*padding:0 0 1em;*/ margin:0 7px; background:#D7DBDE; /* -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;*/ } .drop-shadow:before, .drop-shadow:after { content:""; position:absolute; } .curved:before { top:10px; bottom:10px; left:0; right:50%; -webkit-box-shadow:0 0 12px #000000; -moz-box-shadow:0 0 12px #000000; box-shadow:0 0 12px #000000; /*-moz-border-radius:10px / 100px; border-radius:10px / 100px;*/ z-index: -1; } .curved-hz-1:before { top:20%; bottom:0; left:16px; right:16px; -moz-border-radius:100px / 10px; border-radius:100px / 10px; }.box-outer{background-color: #E4E9ED; width:244px; height:50px; position: relative; z-index:5; overflow:hidden;} </style> </head> <body> <div class="box-outer"> <div class="drop-shadow curved curved-hz-1"> </div> </div> </body></html> Link to comment Share on other sites More sharing options...
shakir Posted November 23, 2013 Share Posted November 23, 2013 Yeah you could do this in photoshop or css. If would like to do it by css then follow @DDs1 Code or search in shadow making code in search engine. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now