今天,我们将制作一些很棒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文档已完成!
到目前为止,这是您在浏览器中查看时的外观:
步骤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可以做或不能做的演示。 您可以随心所欲地做任何事情!
到目前为止,我的第一个教程。.希望您喜欢它,谢谢阅读!