In flat design, Long Shadow is considered a tried-and-true design skill. Here, for example, is a classic long projection:
Long projections are often chosen by photographers to give dramatic effect to images. In nature, long projections occur at dusk when the sun is near the horizon and objects on the horizontal ground look down on them. In the interface design, we usually adopt the effect of simulating the Angle of 45 degrees, which simulates the sunlight coming from the northwest Angle, so as to form a sharp contrast with the design theme. There are many different ways to create long shadows in Photoshop. You can read about four common ways to create long shadows, and your favorite fourth is to copy and move layers to achieve this effect, like this image I uploaded on Behance.
Basically, you copy the current layer, select the layer style, fill it with black, and move it below the original layer. Then use the mouse or filter to pan, move one unit and move one unit down.
Then, we duplicate this layer and pan it again. Then merge the two shadow layers
Then we repeat the action, duplicate the layer once, moving it down and to the right 2 units. Then perform the merge. By analogy, copy, move even multiple units, merge, and then repeat.
Of course you can use filter -> other -> displacement more easily
So that’s what it looks like, and then at the end I’ll just set the opacity.
This is about design. How does the front end achieve this with CSS code? Text-shadow is already supported by CSS3
Let’s start by adding a more prominent color to the background. Flatcolors is a website that offers a wide range of color schemes to use on demand. Let’s give the body a background color. I prefer blue. Next, we’ll go to Google Font and choose the font you like. If you think the default font is acceptable, that’s fine. I chose Passion One
And then you can introduce it in your CSS code.
@ import url (” https://fonts.googleapis.com/css?family=Passion+One “);
At this point, let’s just type some random letters inside our body, like long shadow
<body>
<h1>Long Shadow</h1>
</body>
Then we define some basic styles for h1’s;
h1{
text-align:center;
font-size:6rem;
padding-top:2rem;
}
The next step is to implement the core of the text shadow code
The value of text-shadow can have the displacement of the x and y axes, plus the blur radius and color.
/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black;
We just pan it over and over again, and make it close to the background color.
So that’s the code that looks like this
The text – shadow: 1px 1px rgba(18, 67, 100, 0.5), 2px 2px rgba(20, 72, 107, 0.51), 3px 3px rgba(22, 76, 113, 0.52), 4px 4px rgba(23, 81, 119, 0.53), 5px 5px RGBA (25, 85, 125, 0.54)…
But writing this way is certainly not realistic, you need to repeatedly calculate the step size and growth. Thankfully we have preprocessing frameworks like SCSS and LESS. We can very convenient to complete the conversion and growth of color.
SCSS code implementation reference
@function longshadow($color_a,$color_b,$stepnum, $opacity: 1){
$gradient_steps: null;
<a href=”http://www.jobbole.com/members/lowkey2046″>@for</a> $i from 1 through $stepnum {
$weight: ( ( $i – 1 ) / $stepnum ) * 100;
$colour_mix: mix($color_b, rgba($color_a, $opacity), $weight);
$seperator: null;
@if($i ! = $stepnum){
$seperator: #{‘,’};
}
$gradient_steps: append( #{$gradient_steps}, #{$i}px #{$i}px $colour_mix $seperator );
}
@return $gradient_steps;
}
The effect is similar to when I insert a color a and a color B, where color A is the color where the shadow starts, color B is the color of the background, step size is something like how long you want your shadow to be, and finally transparency. And then we calculate, we move one unit each time, and then we decrease the color by percentage, and then we organize it.
At this point we just need to use this function in the h1 style
@ include text – shadow (longshadow (darken ($bg, 30%), $bg, 50, 0.5));
$bg: is our background color: #3498db.
By Jack Pu
www.jackpu.com/shi-yong-css-3-zhi-zuo-chang-tou-ying-long-shadow/