[Front-end blog] make a cute button gradient, cute button
It mainly involves three points: gradient, shadow, and data-icon. Based on the simple blog, you can easily write three articles every day. ^ V ^ this article is a gradient article. This article takes the core Web browser of webkit as an example. The support for each browser is as follows:
1. The basic syntax of the core webkit browser is as follows:
-webkit-gradient(type, start_point, end_point, / stop...)-webkit-gradient(type, inner_center, inner_radius, outer_center, outer_radius, / stop...)
Parameters
Parameter type |
Brief Description |
Type |
Gradient Type, which can be linear gradient (linear) or radial gradient (radial) |
Start_point |
Starting Point of the gradient in the gradient image |
End_point |
The end point of the gradient in the gradient image. |
Stop |
Color-stop () method to specify the specific color of a specific point in the gradient process |
Inner_center |
Inner center, radial gradient start ring |
Inner_radius |
Internal radius, radial gradient starting circle |
Outer_center |
Center of the external gradient ending circle |
Outer_radius |
Radius of the ending circle of the external gradient |
In this demo, both gradient types are used.
2. Linear Gradient
The red line in the figure is used to make the button more stereoscopic. The Code is as follows:
a:after {content: "";background-image: -webkit-gradient(linear, 0% 0, 100% 0, from(rgba(255, 255, 255, .55)),to(rgba(255, 255, 255, .5)), color-stop(.5, rgba(255, 255, 255, 0)),color-stop(.8, rgba(255, 255, 255, 0)));}
A linear gradient along the X axis. the start point is (0%, 0) and the end point is (100%, 0 ). Color gradient from rgba (255,255,255,. 55) to rgba (255,255,255,. 5 ). In rgba (255,255,255,. 55), 0.55 represents transparency, from 0 to 1 is transparent to opacity. There are two stop points in the middle, which are completely transparent.
Color-stop () is the transition point. These transition points have two parameters: the position of the point and the color of the transition point. To see more clearly, I changed the color of the two stop points as follows:
background-image: -webkit-gradient(linear, 0% 0, 100% 0, from(rgba(255, 255, 255, .55)),to(rgba(255, 255, 255, .5)), color-stop(.5, rgba(0, 255, 255, 1)),color-stop(.8, rgba(255, 0, 255, 1)));
3. Radial Gradient
In the demo, the radial gradient is used in the red box, and the gradient is removed. We can see that the gradient makes our button look like q like jelly.
background-image: -webkit-gradient(radial, 50% 0, 0, 50% 0, 100,from( rgba(255,255,255,0) ),to( rgba(255,255,255,0.7) ));
The gradient range is from the center of the circle (50%, 0), the incircle with a radius of 0 to the center is also (50%, 0), the radius is 100 of the circle. To make it more visible, I changed the gradient color value as follows:
background-image: -webkit-gradient(radial, 50% 0, 100, 50% 0, 0,from( rgba(0,255,255,1) ),to( rgba(255,255,0,1) ));
Demo stamp here: http://runjs.cn/detail/lchdzux7
Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.