{"id":3039,"date":"2017-02-20T18:03:38","date_gmt":"2017-02-21T00:03:38","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=2108"},"modified":"2017-02-20T18:03:38","modified_gmt":"2017-02-21T00:03:38","slug":"6-cool-ways-to-use-shadows-in-css","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/6-cool-ways-to-use-shadows-in-css\/","title":{"rendered":"6 Cool Ways to Use Shadows in CSS"},"content":{"rendered":"

CSS’s box-shadow and text-shadow properties are incredibly versatile, allowing you not just to add shadows to various elements and text, but also making it possible to create cool, multi-dimensional effects for your projects. If you’re looking for inspiration on new ways to use shadows in your sites, check out this list of some of the most professional, smooth, and innovative ways that box and text shadows can be easily implemented in any projects.<\/p>\n

1. Diffused Shadow<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

This tutorial demonstrates how to apply\u00a0a subtle, soft box shadow to your block level elements. The shadow in this tutorial is “diffused,” so the effect is a lot more realistic than your standard box-shadow code.<\/p>\n

2. Text-Shadow Hover Effects<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

One of the coolest things about the text-shadow property is that it can be used to create unique 3D\u00a0text effects. This snippet shows you how to use text-shadow to create a smooth shadow effect with an animated transition upon hover.<\/p>\n

3. Dashed Shadow<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

Not your average text-shadow effect — this snippet shows you how to create a text shadow that is dashed, rather than solid. Definitely a cool way to shake up the basic and expected solid text-shadow and add a little fun to your projects.<\/p>\n

4. Long Shadow Designs<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

According to the author of this tutorial, flat design is a thing of the past. If you’re on board with the new 3D design trend, then you’ll probably love this take on shadows. This snippet shows you how to create icons, buttons, and text with long, exaggerated shadows to add a cool 3D effect to your projects.<\/p>\n

5. Long Shadow Text<\/a><\/p>\n

\"Screen<\/a><\/p>\n

Another take on long text-shadows, the shadows in this snippet are more diffused with a longer fade than the shadows in the tutorial above.<\/p>\n

6. \u00a0Parallax Shadow<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

One of the more innovative tutorials on this list, the shadow in this snippet moves in conjunction with the scroll. So if the user scrolls down, the shadow effect on the text appears below the text. If the user scrolls back up, the shadow effect appears to move above the text. A pretty neat effect to add to any of your projects!<\/p>\n

Share and Enjoy !<\/h3>
0<\/span><\/span>Shares<\/small><\/div>
<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

CSS’s box-shadow and text-shadow properties are incredibly versatile, allowing you not just to add shadows to various elements and text, but also making it possible to create cool, multi-dimensional effects for your projects. If you’re looking for inspiration on new […]<\/p>\n

Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":2825,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[174,1],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3039"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=3039"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3039\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/2825"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=3039"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=3039"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=3039"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}