How to realize Shadow, reflection and gradient effect in css3
This article mainly introduces css3 how to achieve shadow, reflection, gradient effect, the article is very detailed, has a certain reference value, interested friends must read it!
First, effect
Do:
Second, first, set up two texts and run as shown in the figure without processing.
Shadow the first div font
Text-shadow: 5px 5px 10px red
Text-shadow: 5px 5px 5px red,5px-5px 10px yellow
Box-shadow: the usage is similar to text-shadow, except that it is for boxes, such as DIV
Text-shadow: [color (Color) x axis (X Offset) y axis (Y Offset) blur radius (Blur), [color (color) x axis (X Offset) y axis (Y Offset) blur radius (Blur)]. The first two values can be negative, the third can not be negative, can be 0 (no effect)
Add a reflection to the first div
-webkit-box-reflect:below 10px
Direction (left and right left right under below on above) spacing.
Note: the reflection does not take up the space of the document stream, the level higher than the document stream reflection is for the tag (width and height).
Fifth, add gradual change
Background-image:-webkit-linear-gradient (left, red 0%, yellow 50%)
The first percentage is all this color from 0% to this percentage, and the last percentage is all this color from this percentage to 100%. If different percentages are gradients in the middle, the same is the dividing line.
6. All codes:
CSS3 div {font-size: 30px; width: 300px; height: 100px; background-image:-webkit-linear-gradient (left, red 0%, yellow 50%); / * gradient * / color: blue -webkit-box-reflect:below 10px; / * reflection * / text-shadow: 5px 5px 10px red; / * Shadow * /} span {background: aqua;}
I can do a somersault! Ha ha ha
The position that the reflection can't grasp is taken up! The position that the reflection can't grasp is taken up! The position that the reflection can't grasp is taken up! The position that the reflection can't grasp is taken up! The above is all the content of the article "how to achieve Shadow, reflection and gradient effect in css3". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!
