[Front-end blog] make a cute button gradient, cute button

[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.