rain13 Posted July 6, 2015 Share Posted July 6, 2015 Hello. I found example that works for me except that I need to remove shadow from bottom. How do I do that? <!DOCTYPE html><html><head><style> div { width: 300px; height: 100px; background-color: yellow; box-shadow: 0px 0px 5px rgba(1, 1, 1, 0.7);}</style></head><body><div></div></body></html> Link to comment Share on other sites More sharing options...
Ingolme Posted July 6, 2015 Share Posted July 6, 2015 Here's the reference for the box-shadow property: http://www.w3schools.com/cssref/css3_pr_box-shadow.asp If you want to have a shadow in every direction except the bottom then give it a negative vertical offset. If you want the shadow gone altogether, just remove the box-shadow rule. Link to comment Share on other sites More sharing options...
rain13 Posted July 7, 2015 Author Share Posted July 7, 2015 Ok I've got a little closer to what I want but I still have question:How do I make shadow at sides to reach top and bottom?If you run this code you will see that that shadow at sides wont reach to top or bottom. Upper corners have no shadow. I tried to change vertical-offset, but then it causes shadow to appear at bottom. <!DOCTYPE html><html><head><style> a{ background-color: #FFF; border-radius: 5px 5px 0px 0px !important; position: relative; font-size: 24px;}</style></head><body><a style="box-shadow: 5px 0px 5px -5px rgba(1, 1, 1, 0.7), -5px 0px 5px -5px rgba(1, 1, 1, 0.7), 0 -5px 5px -5px rgba(1, 1, 1, 0.7) ;" href="#">New Tab</a></body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted July 7, 2015 Share Posted July 7, 2015 Create a box shadow evenly all-round, then use :after to create overlapping element that will have a background colour to match outer background colour a.shadow_bottom_none{ background-color: #FFF; border-radius: 5px 5px 0px 0px; position: relative; font-size: 24px; box-shadow: 0 0 5px 0 rgba(1, 1, 1, 0.7); } a.shadow_bottom_none:after { background-color: lightgray; /* change to requirement */ bottom: -20px; content: ""; height: 20px; left: -20px; position: absolute; right: -20px; } <a class="shadow_bottom_none" href="#">New Tab</a> Link to comment Share on other sites More sharing options...
rain13 Posted July 7, 2015 Author Share Posted July 7, 2015 Tnx 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