Home > Developer > Web Develop
Chapter 4
1. One-sided projection
Setting a projection for an element you can use the Box-shadow property to specify three length values (X-axis offset, y-offset, blur radius) and a color value
To set the projection only at the bottom, you need to use the fourth parameter: the expansion radius of the projection, and if the value is negative, it represents the reduced projection size
box-shadow:0 2px 4px Black; Even if you set the x-axis offset to 0, there will be a slight projection on both sides
box-shadow:0 5px 5px-5px Black, 0-5px 5px-5px blue; Set each side projection individually, separated by commas
In addition, you can also add projections to irregular shapes by filter:drop-shadow ();
2. Dyeing effect
Mouse focus on the image can be a picture color change or recovery, is now a very common Web page operation, it looks very cool
Multiple filters can be combined to achieve
{ width: 400px; height: 300px; transition: 0.5s filter; //Transition Animation effect filter: Sepia (1); // lower hue value : Saturate, //boost pixel saturation : hue-rotate}img:hover,img:focus{ filter:none;}3. Frosted Glass Effect
This effect is now often seen in the phone system drop-down menu, or the IPhone's Siri interface, which is a frosted glass effect
You can usually make the effect by adjusting the div background transparency, but this is not the glass effect, the real glass effect needs to be implemented with pseudo-elements, a pseudo-element is placed at the bottom of the element to be added to the background, and then the pseudo-element is obfuscated.
<body>
<Main><blockquote>"The only-to-get rid of a temptation is to yield to it. Resist it, and your soul grows sick with longing for the things it had forbidden to itself, with desire for what it monst Rous laws has made monstrous and unlawful. "</em><Footer>—<cite>Oscar Wilde, the picture of Dorian Gray</cite></Footer></blockquote></Main>
<body>
{backgroundurl ("http://csssecrets.io/images/tiger.jpg") 0/cover fixed;
}Main { position:relative; margin:0 Auto; Padding:1em; Max-width:23em; Background:hsla (0,0%,100%,.25) Border-box; Overflow:hidden; Cut off the excess blur effect Border-radius:. 3em; box-shadow:0 0 0 1px hsla (0,0%,100%,.3) inset, 0.5em 1em rgba (0, 0, 0, 0.6); text-shadow:0 1px 1px hsla (0,0%,100%,.3);} Main::before { content: '; Position:absolute; top:0; right:0; bottom:0; left:0;
margin: -30px; Z-index:-1; Place the lower filter:blur of main (20px);}CSS Disclosure (four) visual effects
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
