现代 CSS

CSS3制作3D立体分页导航

作者：大漠 日期：2012-09-13 点击：587
css3
box-shadow
pager
3D
Buttons/Icons
入门级

特别声明：如果您喜欢小站的内容，可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法，欢迎发送邮件至: airenliao@gmail.com!或添加QQ：874472854(^_^)

CSS3制作3D立体分页导航

收集了很多DEMO和相关的PSD,于是想能不能通过自己学的CSS3相关技巧，将有关PSD图效果转换成CSS3效果。灵光的冲动，让我开始做起了这件事情，今天开始我会开始制作一些CSS3的DEMO效果，而这些DEMO效果都是由对应的PSD转换过来的，换句话说，如果你不考虑兼容IE低版本的话，这些DEMO你都可以使用。那我们开始吧

这个DEMO主要是一个3D立体居中的分页导航效果，其实主要三个关键处，第一渐变有明显的分隔线，即上半部是一色，下半部是一色；第二使用box-shadow来制作立体效果；第三使用CSS3伪类选择器，改变第一和最后两年导航项的效果。详细的看代码吧。

demodownload

HTML 结构：

<div class="pager">
  <a href="#">prev</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#" class="current">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">next</a>
</div<

CSS 代码

*{
  margin: 0;
  padding: 0;
}
body {
  background: url(data:image/jpeg;base64,/...=) repeat;
}
.pager {
  margin: 20px;
  text-align: center;
}
.pager a {
  display: inline-block;
  padding: 5px 15px;
  color: #474747;
  font-size: 26px;
  font-family: 'Francois One', sans-serif;
  text-transform: capitalize;
  border-radius: 10px;
  text-decoration: none;
  border: 1px solid #fff;
  box-shadow: 0 1px 0 0 #a1a0a0,0 2px 0 0 #a1a0a0,0 3px 0 0 #a1a0a0,0 4px 0 0 #a1a0a0,0 5px 0 0 #a1a0a0;
  background: #e7e7e7; /* Old browsers */
  background-color: #ffffff; /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ5JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2U3ZTdlNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk5JSIgc3RvcC1jb2xvcj0iI2U3ZTdlNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
  background-image: -moz-linear-gradient(top,  #ffffff 0%, #ffffff 49%, #e7e7e7 50%, #e7e7e7 1%); /* FF3.6+ */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(49%,#ffffff), color-stop(50%,#e7e7e7), color-stop(99%,#e7e7e7)); /* Chrome,Safari4+ */
  background-image: -webkit-linear-gradient(top,  #ffffff 0%,#ffffff 49%,#e7e7e7 50%,#e7e7e7 100%); /* Chrome10+,Safari5.1+ */
  background-image: -o-linear-gradient(top,  #ffffff 0%,#ffffff 49%,#e7e7e7 50%,#e7e7e7 100%); /* Opera 11.10+ */
  background-image: -ms-linear-gradient(top,  #ffffff 0%,#ffffff 49%,#e7e7e7 50%,#e7e7e7 100%); /* IE10+ */
  background-image: linear-gradient(to bottom,  #ffffff 0%,#ffffff 49%,#e7e7e7 50%,#e7e7e7 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e7e7e7',GradientType=0 ); /* IE6-8 */
}
.pager a:first-child,
.pager a:last-child {
  color: #fff;
  background-color: #f35252; /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YzNTI1MiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2YzNTI1MiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2IzMDEwMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiMzAxMDEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background-image: -moz-linear-gradient(top,  #f35252 0%, #f35252 50%, #b30101 51%, #b30101 100%); /* FF3.6+ */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f35252), color-stop(50%,#f35252), color-stop(51%,#b30101), color-stop(100%,#b30101)); /* Chrome,Safari4+ */
  background-image: -webkit-linear-gradient(top,  #f35252 0%,#f35252 50%,#b30101 51%,#b30101 100%); /* Chrome10+,Safari5.1+ */
  background-image: -o-linear-gradient(top,  #f35252 0%,#f35252 50%,#b30101 51%,#b30101 100%); /* Opera 11.10+ */
  background-image: -ms-linear-gradient(top,  #f35252 0%,#f35252 50%,#b30101 51%,#b30101 100%); /* IE10+ */
  background-image: linear-gradient(to bottom,  #f35252 0%,#f35252 50%,#b30101 51%,#b30101 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f35252', endColorstr='#b30101',GradientType=0 ); /* IE6-8 */
  box-shadow: 0 1px 0 0 #7f0505,0 2px 0 0 #7f0505,0 3px 0 0 #7f0505,0 4px 0 0 #7f0505,0 5px 0 0 #7f0505;
  border-color: #e25c5c #b75555 #d96767 #fdb0b0;
}
.pager a:hover,
.pager a:active,
.pager a.current{
  box-shadow: 0 1px 0 0 #a1a0a0,0 2px 0 0 #a1a0a0,0 3px 0 0 #a1a0a0;
  position:relative;
  top:2px;
}
.pager a:first-child:hover,
.pager a:last-child:hover {
  box-shadow: 0 1px 0 0 #7f0505,0 2px 0 0 #7f0505,0 3px 0 0 #7f0505;
}

demodownload

如需转载，烦请注明出处：http://www.w3cplus.com/demo/css3-pager.html

Lebron Soldiers XI 11
返回顶部