2017ui流设计渐变_UI设计：带有CSS3渐变的光泽按钮

最新推荐文章于 2022-07-17 16:39:12 发布

cune1359

最新推荐文章于 2022-07-17 16:39:12 发布

阅读量211

点赞数

文章标签： css html css3 js javascript ViewUI

我们从线性渐变，径向渐变和重复渐变覆盖了CSS3渐变几次。这次，我们尝试利用这些功能创建一个不错的效果，以前需要使用一些图像才能使其发挥作用。

在本文中，我们将使用CSS3 Gradients和简单HTML标记来创建如上图所示的光泽按钮效果。

观看演示

HTML结构

与其他教程一样，我们将首先准备一些基本的东西，这一次，我们只需要这种亚麻质地作为背景即可。然后创建一个HTML文档，并放置以下HTML结构。

<!DOCTYPE html>
<html>
<head>
	<title>Glossy Effect with CSS3 Gradient</title>

	<link rel="stylesheet" href="http://necolas.github.com/normalize.css/2.0.1/normalize.css">
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<div class="container">
		<div class="glossy">
			<a>Click Here</a>
		</div>
	</div>
</body>
</html>

款式

然后，我们开始处理样式表。首先，在body添加背景纹理，指定容器宽度，然后将文本对齐中心，如下所示。

body {
	background: url('../img/ios-linen-white.jpg?new');
}
.container {
	width: 100px;
	margin: 50px auto;
}
.glossy a {
	margin: 6px 0 0 0;
	text-align: center;
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: #000;
}

接下来，我们为.glossy类的div添加一些装饰样式，包括边框半径，边框颜色和渐变颜色。有一些方便的工具可用于创建CSS3渐变，例如从Colorzilla中。关于此渐变色，我们仅混合两种颜色，并将第一个色标调整为31% 。

.glossy {
	width: 100px;
	height: 25px;

	margin: 10px auto;
	position: relative;

	background: #94c4fe;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(31%,#94c4fe), color-stop(100%,#d3f6fe));
	background: -webkit-linear-gradient(top,  #94c4fe 31%,#d3f6fe 100%);
	background: -moz-linear-gradient(top,  #94c4fe 31%, #d3f6fe 100%);
	background: -o-linear-gradient(top,  #94c4fe 31%,#d3f6fe 100%);
	background: -ms-linear-gradient(top,  #94c4fe 31%,#d3f6fe 100%);
	background: linear-gradient(to bottom,  #94c4fe 31%,#d3f6fe 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94c4fe', endColorstr='#d3f6fe',GradientType=0 );

	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px;

	border: 1px solid #4864a9;

	color: #000;
	font-size: 0.750em;
	text-shadow: 1px 1px 0px rgba(255,255,255,.5);

	-webkit-box-shadow:  0px 1px 3px 0px rgba(0, 0, 0, .2);    
    box-shadow:  0px 1px 3px 0px rgba(0, 0, 0, .2);

    position: relative;
}

在此阶段，外观如下。

现在，我们通过在其顶部添加闪光效果使其更加逼真，并:before伪元素:before添加:before 。同样，我们还将添加一些装饰样式，例如边框半径和渐变颜色。但是，这一次，我们将使用具有低Alpha通道的RGBA颜色格式作为背景颜色，如下所示。

.glossy:before {
	content: "";
	width: 90px;
	height: 16px;

	display: block;
	position: absolute;
	left: 5px;

	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;

	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0.7) 8%, rgba(255,255,255,0) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(8%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0)));
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 8%,rgba(255,255,255,0) 100%);
	background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 8%,rgba(255,255,255,0) 100%);
	background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 8%,rgba(255,255,255,0) 100%);
	background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 8%,rgba(255,255,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
}

而且，在这个阶段，它看起来要好得多。

但是，正如我们所看到的，伪元素:before的梯度略微覆盖了文本。因此，我们需要通过指定更高的z-index来将其向上移动，就像这样。

.glossy p {
	.glossy a {
	margin: 6px 0 0 0;
	text-align: center;
	display: block;
	width: 100%;
	height: 100%;

	text-decoration: none;
	color: #000;

	position: relative;
	z-index: 1;
}

现在，它看起来好多了。

您也可以尝试其他颜色。在此示例中，我们还使用绿色添加了另一个光泽效果。以下是所需CSS代码。

.glossys {
	background: #54bc3e;
	background: -moz-linear-gradient(top,  #54bc3e 0%, #aee850 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#54bc3e), color-stop(100%,#aee850));
	background: -webkit-linear-gradient(top,  #54bc3e 0%,#aee850 100%);
	background: -o-linear-gradient(top,  #54bc3e 0%,#aee850 100%);
	background: -ms-linear-gradient(top,  #54bc3e 0%,#aee850 100%);
	background: linear-gradient(to bottom,  #54bc3e 0%,#aee850 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#54bc3e', endColorstr='#aee850',GradientType=0 );
	border: 1px solid #1d6511;
}

最后，您可以查看演示并下载下面的源。

翻译自: https://www.hongkiat.com/blog/css3-glossy-effect/

cune1359

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2017ui流设计渐变_UI设计：带有CSS3渐变的光泽按钮

我们从线性渐变，径向渐变和重复渐变覆盖了CSS3渐变几次。这次，我们尝试利用这些功能来创建不错的效果，以前需要使用一些图像才能使其发挥作用。在本文中，我们将使用CSS3渐变和简单HTML标记来创建如上面的屏幕截图所示的光泽按钮效果。观看演示 HTML结构与其他教程一样，我们将首先准备一些基本的东西，这一次，我们只需要这种亚麻质地作为背景即可。然后创建一个HTML文...
复制链接

扫一扫