The Sweet Long Shadow Effect Tutorial:
What will you need:
- Adobe Photoshop
- 5 minutes
Part of the recent, “flat design” trend, long shadow effects are a popular but not necessarily new phenomenon. The trend’s strongest impact seems to be on interface design elements and icons but it is being increasingly used as part of web designs, as well. In this tutorial, I will show you the easiest way out there to achieve this effect, it’ll take you no time at all 🙂
There are 2 main characteristics of long shadow effects.
- Each object of the design must have a flat, 2-dimensional shadow that extends for at least 2.5 times the diagonal of the object, which makes the shadow very long, this adds emphasis and drama to the design.
- The shadow should be cast at a 45 degree angle, preferably towards the right.
The shadow color can vary in its darkness compared to the background color, and in some cases, fade out into a transparent fill. There are many tweaks that can be added to the effect, and it’s all up to you to decide what final result you’re going for.
Hey guys , this is my very first coding tutorial, I really hope you find it helpful especially if you are learning CSS
This tutorial might be a little advanced you need some really basic knowledge on HTML and CSS.