My common routines for writing CSS (Part 2)...
box-shadow
Add a shadow to the box, increase the three-dimensional sense of the box, can be stacked in multiple layers, and make the shadow more silky
The demo address: Pagination
Internal glow
Note that box-shadowthere is another one insetfor the light inside the box
Using this feature, we can set the color within a certain range inside the box to make a crescent shape
Add some animations and filter effects, and "Scarlet Moon" is here!
Notice that it emits a faint red light, which is actually the effect produced by applying the blur filter to 2 pseudo-elements
The demo address: Crimson Crescent Loading
text-shadow
Text shadows are essentially the box-shadowsame, but compared to text, they are often used for text luminescence, and they can also be used to create neon text and pseudo 3D text through multi-layer overlays.
Glowing text
The demo address: Staggered GlowIn Text
Neon text
The demo address: Neon Text
Pseudo 3D text
Book demo site: Staggered Bouncing 3D Loading
background-clip:text
Can cut the background into the foreground color of the text, often used to color: transparentgenerate gradient text in conjunction with
The demo address: Menu Hover Fill Text
gradient
Gradient can be used as a kind of background picture, has a strong color effect, and can even be used to simulate light
linear-gradient
Linear gradient is the most commonly used gradient by the author
This work uses HTML dialogtags, linear gradient backgrounds, animations and overflowblindfolds, can you see it carefully :)
The demo address: Confirm Modal
radial-gradient
Radial gradients are often used to generate circular backgrounds. In the example above, Snow’s background is an elliptical radial gradient.
In addition, because the background can be superimposed, we can superimpose multiple radial gradients of different positions and sizes to generate a dot group, plus animation to produce a kind of particle effect, without extra divelements
The demo address: Particle Button
conic-gradient
Cone gradient can be used to make pie charts
Use a pseudo-element superimposed on the pie chart and contentset it to a certain value (this value is calculated by CSS variables) to create the effect of the metric. The blind method has once again completed its mission
This demo site: Gauge (No SVG)
filter
The blurmost commonly used filters in PS
Fusion effect
When the blurfilter and the contrastfilter are used together, it will produce a gooeystrange effect of fusion ( )
The demo address: Snow Scratch
backdrop-filter
Apply a filter to the background to produce a frosted glass effect
The demo address: Frosted Glass
mix-blend-mode
The blending mode in PS is often used for special effects of text in the background
The following uses the filter mode ( screen) to achieve the text video mask effect
The demo address: Video Mask Text
clip-path
The cutting in PS can make various irregular shapes. It would be quite interesting if combined with animation
The demo address: Name Card Hover Expand
Failure effect
Thanks clip-pathto the cutting function, multiple texts can be stacked together and cut into multiple parts in proportion, and then interlaced animation can be used to create cool failure effects ( glitch).
The demo address: Cross Bar Glitch Text
mask
The mask in PS. The so-called mask is that the original picture only shows the non-transparent part of the mask picture
Hollow effect
Although it clip-pathcan cut out the shape, it cannot be hollowed out because it can’t control the inside of the shape.
Some people (including me) may use pseudo-elements to "simulate" hollowing out (by setting the same background color), but this is not really hollowing out. If you change the background or float on the picture, it will be exposed. Then we have to Turned to the mask
Suppose, you want to make a hollow ring, then you only need to use a radial gradient as the element's mask, and the first one is color-stopset to transparent, and the others are color-stopset to other colors, because the definition of the mask is only Show the non-transparent part of the mask image
Note: In order to eliminate aliasing, there needs to be an extra color-stopbuffer in the middle of this radial gradient , and the length is set to the original length plus 0.5px.
The demo address: Circle Arrow Nav
-webkit-box-reflect
Projection effect, not very commonly used, suitable for works with a strong sense of three-dimensionality
The demo address: Card Flip Reflection
web animations
Although this is not a CSS feature, it is often used to accomplish things that CSS cannot do
So when to use it? When there is a property in CSS animation that cannot be obtained from CSS, it will naturally be used
Track the position of the mouse
At present, CSS does not yet have an API to obtain the mouse position, so consider using JS to do it
By consulting the related DOM API, it is found that in the API that monitors mouse events, the current position of the mouse can be obtained through e.clientXande.clientY
Now that the position of the mouse can be obtained, it is not difficult to track the position of the mouse: Obtain the position of the mouse when it enters and exits an element through monitoring mouseenterand mouseleaveevents, and use this coordinate as the displacement distance of the mouse, and monitor the mousemoveevent to obtain The position of the mouse when it moves on the element, also use this coordinate as the displacement distance of the mouse, so that an effect of tracking the mouse is realized
Book demo site: Menu Hover Image
CSS Houdini
CSS Houdini is the underlying API of CSS, which allows us to extend the functionality of CSS through this set of interfaces
Let the gradient move
Currently, we cannot directly add animation to the gradient, because the browser does not understand what type of value is to be changed
At this time, we can use CSS.registerProperty()to register our custom variable and declare its syntax type ( syntax) as a color type <color>, so that the browser can understand and apply interpolation methods to the color to animate
Remember the tapered gradient mentioned above conic-gradient()? Since it can be used to make a pie chart, can we make the pie chart move? The answer is yes, define three variables: --color1, --color2and --poswhere --possyntax type as a percentage of the length <length-percentage>, from its 0turns 100%, clockwise rotation of the pie chart will appear
Using absolute positioning and cascading context, we can superimpose multiple pie charts from small to large, and then set them with different colors, apply staggered animation, and have the following dazzling effect
Book demo site: Mawaru
Easter eggs
A cautious brave style menu written by combining interlaced animation and pseudo-type pseudo-elements
Book demo site: Shinchou Menu
At last
If you need these materials, you can click here to get them
