For example, the following is a very classic long projection design:
Photographers often choose long projections to bring dramatic effects to the pictures, and in nature, long projections occur at dusk when the sun approaches the horizon, and the objects on the horizontal floor overlook the effect of a long projection. In the interface design, we usually use the effect of simulating the 45 degree angle, simulating the sunlight from the northwest corner, so as to create a sharp contrast with the theme of the design. There are many ways to make long projections using Photoshop, you can read the common four ways to create a long projection effect, your favorite is also the fourth type, through the layer copy and move to achieve such effects, such as their own in behance upload this picture,
The general principle is that you copy a current layer, check the layer style, fill it with black, and move it below the original layer. You can then use the mouse or filter to achieve panning, move a unit and move down one unit.
Then we'll copy the layer and pan again. Then merge the two shadow layers
Then we repeat the action, which is to copy the layer one at a time, move down and 2 units to the right. Perform the merge again. Copy, and so on, move even multiples of units, merge, and then repeat.
Of course, you can use the filter----and other displacement will be more convenient
This is basically the effect, then the final set of transparency is good.
Above is the design, how the front end through the CSS code to achieve this effect? The first time you think about it is the Text-shadow that CSS3 has supported.
First of all, we add a more prominent color to the background, the strong Amway flatcolors this site, there are many color schemes, with the use of. Let's set the background color for the body. I like blue more. Next we go to Google font to choose the font you like, if you think the default font can accept it doesn't matter. I chose passion one.
Then introduce it in the CSS code.
@import url (' Https://fonts.googleapis.com/css?family=Passion+One ');This time we are in our body in a random number of letters, such as Long shadow
<body>Then we define some basic patterns of H1;
h1{ Text-align:center; Font-size:6rem; Padding-top:2rem;}The next step is to achieve the core of the code that writes Text-shadow.
The value of the Text-shadow can have the displacement of the x, Y axis, plus the blur radius and color.
/* offset-x | offset-y | Blur-radius | Color */text-shadow:1px 1px 2px black;We just have to translate it over and over and make it close to the background color.
That's the code for that.
text-shadow:1px 1px Rgba (0.5), 2px 2px rgba (107, 0.51), 3px 3px Rgba (+, 113, 0.52), 4px 4px RGBA (119, Bayi, 0.53), 5px 5px Rgba (25, 85, 125, 0.54) ...But it must be unrealistic to write this down, and you need to calculate the step size and growth over and over again. Fortunately we have a pre-processing framework such as SCSS and less. We can complete the conversion and growth of colors very conveniently.
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) *; $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 of the function is similar to I wear a color A and a color B, where the color A is the beginning of the color of the shadow, color B is the color of the background, the step is similar to how you want your shadow to be long, the last one is transparency. Then it is calculated, we do not have to move a unit, and then the color of the decline in percentage, the final organization of the style is OK.
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));One of the $BG: is the color of our background: #3498db.
Related reading:
CSS implements a moving cat face
CSS Variable description and Tutorials
How to set div scroll bar properties and styles
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
