What's CSS Gradient?
CSS Gradient (CSS) Gradients are an image effect that shows two or more colours smooth transitions in the web page. Compared to traditional background pictures, CSS Gradients have the advantage of speed of loading, unlimited magnification and ease of code modification, and are the core technologies for addressing the issues of “visual sense” and “modern sense” in modern web design.
Linear, directional and conical gradients
- Linear Gradients: Colours smooth transition along a straight line (axis). By adjusting your angle, you can create a transition from top to bottom, from left to right or any diagonal direction.
- Radial Gradients: Colours are exposed outward from a central point (original point). It is well suited to simulate photo-stun effects or create circular visual centres.
- Conical gradients: Colours rotate around centre points. It is often used to create pie charts, colour wheels or unique modern abstract contexts.
How to create a spectacular gradient?
A good gradient should not be a hard-coloured pile, but a delicate transition:
- To avoid the mud feeling: Select a similar colour (near colour) on the wheel for gradient, which is easier to achieve than the contrast.
- (a) Use of transparency: By regulating the Alpha channel for colour points, you can create a semi-transparent superimpose effect, which will allow the background to be more deep.
- More fine-tuning: Do not use only two colours. By adding 3-5 points of break in close proximity, you can simulate more real photomagnetic changes.
Common issues (FAQ)
Q: Can the gradient code be displayed in the old version browser?
A: Modern mainstream browsers fully support standard grammar. If you want to be compatible with an extremely old browser, you may need to add `-webkit-` , this tool produces standard modern syntax.
Q: Does gradient affect web performance?
A: Not really. Gradient is a mathematical image that is rendered in real time by the browser and is extremely low-cost and far better than loading a high-resolution picture background.
Q: Can cone gradients be used to make load animations?
A: Yes, rotate with CSS animation `conic-gradient ' The starting point is the production of a smooth spin loader (spinner) pop programme.