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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.