Orman Clark的Chunky 3D Web按钮:CSS3版本

今天,我们将制作一些很棒CSS3按钮! 它们基于流行的PSD免费赠品 Orman Clark为他的网站Premium Pixels制作的。 我们将尝试精确复制CSS副本,并尽可能减少HTML标记。


编者注: Orman允许我们对我们选择的任何Premium Pixel免费赠品进行CSS修饰。 这些粗大的按钮只是可用的许多免费赠品之一,因此将来会希望有更多类似的教程。 晕!


步骤1:概述HTML文档

我们将从创建一个新HTML文档开始。 我基于HTML5样板 ,只是为了能够快速启动并具有完美的文档标记。 我也使用了它附带CSS规范化文档。 然后,我们将添加一个包含一些基本锚点的列表。 如此简单,我们不需要任何额外的跨度或div,我们的好朋友CSS3会解决这个问题。

为了给它一些CSS样式,我们为列表提供了一个“按钮”类。 并且由于我们将展示Orman设计中使用的所有颜色,因此我们将为每个链接提供不同的颜色作为类。

<ul class="buttons">
	<li><a href="#" class="button gray">Download</a></li>
	<li><a href="#" class="button pink">Download</a></li>
	<li><a href="#" class="button blue">Download</a></li>
	<li><a href="#" class="button green">Download</a></li>
	<li><a href="#" class="button turquoise">Download</a></li>
	<li><a href="#" class="button black">Download</a></li>
	<li><a href="#" class="button darkgray">Download</a></li>
	<li><a href="#" class="button yellow">Download</a></li>
	<li><a href="#" class="button purple">Download</a></li>
	<li><a href="#" class="button darkblue">Download</a></li>
</ul>

这就是我们现在所需要的,我们HTML文档已完成!
到目前为止,这是您在浏览器中查看时的外观:

简单HTML标记

步骤2:一些基本CSS样式

在开始使用渐变,圆角等样式之前,我们将首先应用一些基本样式。
这里没有什么特别的,只是普通CSS2东西。

ul { list-style: none; }
         
a.button {
	display: block;
	float: left;
	position: relative;
	height: 25px;
	width: 80px;
	margin: 0 10px 18px 0;
	
	text-decoration: none;
	font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: bold;
	line-height: 25px;
	text-align: center;
}

由于我们添加了类,因此我们也可以轻松更改按钮的颜色。 因此,我们将对其他所有颜色(例如灰色)执行此操作。 您可以检查演示文件中的所有颜色代码。

/* GRAY */
.gray,
.gray:hover {
	color: #555;
	border-bottom: 4px solid #b2b1b1;
	background: #eee;
}

.gray:hover { background: #e2e2e2; }

如果一切都做得不错,则应该有这样的东西。 如果我们住在2008年,那就太好了!

看起来不错。虽然有点无聊!

第3步:一路跨界!

现在,如果您仔细看一下Photoshop文件,您会发现底部不仅有较粗的边框,而且整个边框也较细,并且在较粗的部分之间有一些多余的线和实际的边界。 为了将最后一个细节转换为css,我们将使用CSS2技巧:before:after伪元素。

我们将这些元素(可以在单独的方框中看到)放置在具有position属性的实际按钮的正后方。 为了保存一些css线,我们将首先对两个元素进行样式设置,然后仅添加前元素的值。

a.button {
	display: block;
	float: left;
	position: relative;
	height: 25px;
	width: 80px;
	margin: 0 10px 18px 0;
	
	text-decoration: none;
	font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: bold;
	line-height: 25px;
	text-align: center;
}

a.button:before,
a.button:after {
	content: '';
	position: absolute;
	left: -1px;
	height: 25px;
	width: 80px;
	bottom: -1px;
}

a.button:before { 
	height: 23px;
	bottom: -4px;
	border-top: 0;
}

当我们添加正确的颜色时,一切开始看起来不错!

/* GRAY */
.gray,
.gray:hover {
	color: #555;
	border-bottom: 4px solid #b2b1b1;
	background: #eee;
}

.gray:before,
.gray:after {
	border: 1px solid #cbcbcb;
	border-bottom: 1px solid #a5a5a5;
}

.gray:hover { background: #e2e2e2; }
添加了一些细节

步骤4:添加CSS3 Magic

现在大家都在等待CSS3部分。 我们将从为所有按钮添加圆角开始:

a.button {
	display: block;
	float: left;
	position: relative;
	height: 25px;
	width: 80px;
	margin: 0 10px 18px 0;
	
	text-decoration: none;
	font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: bold;
	line-height: 25px;
	text-align: center;
	
	-webkit-border-radius: 3px; 
	-moz-border-radius: 3px;
	border-radius: 3px;
}

然后当然,我们的:before:after元素也需要圆角,以使边框合适。 但是, :before元素不需要将圆角修圆,否则我们将看到一个小错误。 由于:before元素是位置最低的元素,因此我们将框阴影添加到此元素,而不是添加到主要元素。

a.button:before,
a.button:after {
	content: '';
	position: absolute;
	left: -1px;
	height: 25px;
	width: 80px;
	bottom: -1px;
	
	-webkit-border-radius: 3px; 
	-moz-border-radius: 3px;
	border-radius: 3px;
}

a.button:before { 
	height: 23px;
	bottom: -4px;
	border-top: 0;
	
	-webkit-border-radius: 0 0 3px 3px; 
	-moz-border-radius: 0 0 3px 3px;
	border-radius: 0 0 3px 3px;
	
	-webkit-box-shadow: 0 1px 1px 0px #bfbfbf;
	-moz-box-shadow: 0 1px 1px 0px #bfbfbf;
	box-shadow: 0 1px 1px 0px #bfbfbf;
}

最后,我们将为每种单独的颜色应用一些渐变背景,一个内部阴影和一些文本阴影。 我们还将添加:visited状态,以防止IE6中的错误。

/* GRAY */
a.gray,
a.gray:hover,
a.gray:visited {
	color: #555;
	border-bottom: 4px solid #b2b1b1;
	text-shadow: 0px 1px 0px #fafafa;
	
	background: #eee;
	background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#e2e2e2));
	background: -moz-linear-gradient(top,  #eee,  #e2e2e2);
	
	box-shadow: inset 1px 1px 0 #f5f5f5;
}

.gray:before,
.gray:after {
	border: 1px solid #cbcbcb;
	border-bottom: 1px solid #a5a5a5;
}

.gray:hover {
	background: #e2e2e2;
	background: -webkit-gradient(linear, left top, left bottom, from(#e2e2e2), to(#eee));
	background: -moz-linear-gradient(top,  #e2e2e2,  #eee);
}

这应该是我们的结果。 看起来不错,是吗?

我们的最终结果!

步骤5:我们没有忘记什么吗?

我们仍然需要做一件事。 Orman也为活动状态进行了设计。 因此,我们当然会将其添加到我们CSS版本中!

我们将处于活动状态的代码置于所有颜色定义下,因为其中一些值需要覆盖。 与其他州的第一个区别是它没有国界。 它也位于较低位置以暗示缩进。 而且,我们需要使用2个阴影而不是一个阴影:普通的白色阴影和第二个透明的内部阴影。 最后,我们不再需要:before:after伪元素。

/* ACTIVE STATE */
a.button:active {
	border: none;
	bottom: -4px;
    margin-bottom: 22px;
	
	-webkit-box-shadow: 0 1px 1px #fff;
	-moz-box-shadow:  0 1px 1px #fff;
	box-shadow:  1px 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, 0.3);
}

a.button:active:before,
a.button:active:after {
	border: none;	
	
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

这是我们的按钮在活动状态下的样子:

活动按钮=快乐按钮

步骤6 :(可选)旧版浏览器

现在,我们有了一些不错CSS3按钮,它们可以在所有现代浏览器中使用。 但是,例如Internet Explorer呢? IE8和更低版本不支持框或文本阴影,也不支持渐变。

为了能够专门为这些浏览器设置元素样式,我们可以使用Modernizr ,这是一个JavaScript库,用于检测您的浏览器是否可以处理CSS3和HTML5属性。 它不能修复旧的浏览器的问题,它添加类的html标记(报告为准能力和不可用),以允许另类的造型。

另一个选择是使这些浏览器与其他一些JavaScript库一起运行(称为polyfills ),但这不是本教程要介绍的内容。 相反,我们只是将图像用于较旧的浏览器。

首先,我们将制作我们的自定义构建版本的Modernizr,那样我们就不必随身携带所有多余的javascript。 我们可以在他们的网站上轻松做到这一点。 当我们在html文件中实现javascript时,我们只需要为特定的html类定义替代样式即可。 我们将为不支持我们使用的2种最著名CSS3效果(边界半径和CSS渐变)之一的浏览器使用图像。 而且,由于某些较旧的浏览器甚至不支持生成的内容(:before和:after),因此我们也将提及其中之一。

/* MODERNIZR FALLBACK */
.no-cssgradients a.button, .no-cssgradients a.button:visited,
.no-borderradius a.button, .no-borderradius a.button:visited,
.no-generatedcontent a.button, .no-generatedcontent a.button:visited {
	background: url(images/sprite.png) no-repeat 0 0px;
	height: 32px;
	width: 82px;
}

.no-cssgradients a.button:hover,
.no-borderradius a.button:hover,
.no-generatedcontent a.button:hover {
	background: url(images/sprite.png) no-repeat 0 -32px;
}

.no-cssgradients a.button:active,
.no-borderradius a.button:active,
.no-generatedcontent a.button:active {
	background: url(images/sprite.png) no-repeat 0 -64px;
	bottom: 0;
	line-height: 35px;
}

.no-cssgradients a.gray,
.no-cssgradients a.gray:visited,
.no-cssgradients a.gray:hover { background-position-x: 0; }

.no-cssgradients a.pink,
.no-cssgradients a.pink:visited,
.no-cssgradients a.pink:hover { background-position-x: -82px; }

.no-cssgradients a.blue,
.no-cssgradients a.blue:visited,
.no-cssgradients a.blue:hover { background-position-x: -164px; }

.no-cssgradients a.green,,
.no-cssgradients a.green:visited,
.no-cssgradients a.green:hover { background-position-x: -246px; }

.no-cssgradients a.turquoise,
.no-cssgradients a.turquoise:visited,
.no-cssgradients a.turquoise:hover { background-position-x: -328px; }

.no-cssgradients a.black,
.no-cssgradients a.black:visited,
.no-cssgradients a.black:hover { background-position-x: -410px; }

.no-cssgradients a.darkgray,
.no-cssgradients a.darkgray:visited,
.no-cssgradients a.darkgray:hover { background-position-x: -492px; }

.no-cssgradients a.yellow,
.no-cssgradients a.yellow:visited,
.no-cssgradients a.yellow:hover { background-position-x: -574px; }

.no-cssgradients a.purple,
.no-cssgradients a.purple:visited,
.no-cssgradients a.purple:hover { background-position-x: -656px; }

.no-cssgradients a.darkblue,
.no-cssgradients a.darkblue:visited,
.no-cssgradients a.darkblue:hover { background-position-x: -738px; }

.no-cssgradients a.button, .no-cssgradients a.button:visited, .no-cssgradients a.button:hover, .no-cssgradients a.button:before, .no-cssgradients a.button:after,
.no-borderradius a.button, .no-borderradius a.button:visited, .no-borderradius a.button:hover, .no-borderradius a.button:before, .no-borderradius a.button:after,
.no-generatedcontent a.button, .no-generatedcontent a.button:visited, .no-generatedcontent a.button:hover, .no-generatedcontent a.button:before, .no-generatedcontent a.button:after {
	border: 0;
}

为了提高性能,我们将CSS Sprite用于悬停和活动状态。 而且:: visited状态仍然包含在内,以防止IE6错误。


结论

因此,现在我们有了完全跨浏览器CSS3按钮! 您可能会认为这看起来像是10个按钮的大量代码,但这当然仅是CSS3可以做或不能做的演示。 您可以随心所欲地做任何事情!

到目前为止,我的第一个教程。.希望您喜欢它,谢谢阅读!

翻译自: https://webdesign.tutsplus.com/tutorials/orman-clarks-chunky-3d-web-buttons-the-css3-version--webdesign-5731

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值