CSS3制作下拉工具条
Tooltip的效果,在Web上的运用对大家来说不在陌生了,然而很多tooltip的效果都是依赖于JavaScript或者jQuery来实现。但是随着IE6的慢慢死去,制作这样的效果是无需任何脚本语言来支持。今天我们一起来看一款使用CSS3制作的下拉工具条,也类似于tooltip的效果。在这个效果中比较难处理的是阴影色配合,另个整个效果最有特色的是CSS3属性选择器的运用。感兴趣的话继续往下看吧。
HTML结构
对于结构来说,大家都熟悉,典型的一个下拉菜单制作的结构,但这里需要注意,使用了一个“div.list-wrapper”容器包裹了链接下下拉项,主要是方便悬浮状态时,显示隐藏的工具体,但其实简单一点的话,这个容器可以完全去掉,只需要在外成的li上做悬浮效果,也能实现相同的功能。(在这里保留了白牙同学的原结构,未做处理。)
CSS代码
CSS代码也并不太复杂,主要的是CSS3属性选择器的灵活运用以及盒子阴影box-shadow与背景以及边框的容入,其次使用了渐变、transition、@font-face等属性辅助一些效果的制作。
演示:http://www.w3cplus.com/demo/css3/DropdownTools/index.html
下载:DropdownTools.zip
HTML结构
<ul class="dropdownlist">
<li class="list-1">
<div class="list-wrapper">
<a href="#">#</a>
<ul>
<li class="item-1"><a href="#1">"</a></li>
<li class="item-2"><a href="#2">$</a></li>
<li class="item-3"><a href="#3">!</a></li>
</ul>
</div>
</li>
</ul>
对于结构来说,大家都熟悉,典型的一个下拉菜单制作的结构,但这里需要注意,使用了一个“div.list-wrapper”容器包裹了链接下下拉项,主要是方便悬浮状态时,显示隐藏的工具体,但其实简单一点的话,这个容器可以完全去掉,只需要在外成的li上做悬浮效果,也能实现相同的功能。(在这里保留了白牙同学的原结构,未做处理。)
CSS代码
CSS代码也并不太复杂,主要的是CSS3属性选择器的灵活运用以及盒子阴影box-shadow与背景以及边框的容入,其次使用了渐变、transition、@font-face等属性辅助一些效果的制作。
/*默认样式*/
body {
background:url("bg.jpg") center center no-repeat fixed #333;
background-size: 100% 100%;/*背景图全屏显示,可以参考《CSS3 Background-size》一文*/
}
.demo {
text-align: center;
min-height: 200px;
}
.dropdownlist {
display: inline-block;
margin: 50px;
}
/*tooltip的实现*/
.dropdownlist li {
list-style-type:none;
position:relative;
}
.dropdownlist li a {
font-size:20px;
font-family:"signal-icon";
text-align:center;
line-height:48px;
color:#fff;
display:block;
width:58px;
height:48px;
background-image:-*-linear-gradient(top,rgb(105,96,106),rgb(80,73,80));/*制作工具条背景色*/
transition:all 500ms linear;/*设置动画过渡*/
text-decoration:none;
}
/*下拉列表项容器样式*/
.list-wrapper {
border-radius:4px;
border:3px solid rgba(243,233,229,0.2);
box-shadow:0 0 0 1px rgba(243,233,229,0.6);/*盒子阴影*/
position:relative;
}
/*使用属性选择器控制需要的元素。详细参阅《CSS3 选择器——属性选择器》一文*/
.dropdownlist li[class^="list-"] {
padding-bottom:20px;
}
.dropdownlist li[class^="list-"] .list-wrapper > a {
font-size:30px;
border:1px solid rgb(63,57,66);
border-radius:3px;
box-shadow:inset 0 1px 0 rgb(132,127,137),
inset 0 -1px 0 rgb(73,66,71),
inset 0 0 0 1px rgb(106,98,111),
0 1px 0 rgb(137,121,118),
0 2px 0 rgb(163,144,141),
0 0 0 1px rgb(175,155,151);/*使用多阴影效果*/
}
.dropdownlist li:nth-child(1)[class^="item-"] a {
box-shadow: inset 0 1px 0 rgb(132,127,137),
inset 0 -1px 0 rgb(73,66,71),
inset 0 0 0 1px rgb(106,98,111),
-1px 0 0 rgba(110,93,101,0.2),
1px 0 0 rgba(110,93,101,0.2),
0 -1px 0 rgba(110,93,101,0.2);
}
.dropdownlist li:nth-child(2)[class^="item-"] a {
box-shadow: inset 0 1px 0 rgb(132,127,137),
inset 0 -1px 0 rgb(73,66,71),
inset 0 0 0 1px rgb(106,98,111),
-1px 0 0 rgba(110,93,101,0.4),
1px 0 0 rgba(110,93,101,0.4);
}
.dropdownlist li:nth-child(3)[class^="item-"] a {
box-shadow: inset 0 1px 0 rgb(132,127,137),
inset 0 -1px 0 rgb(73,66,71),
inset 0 0 0 1px rgb(106,98,111),
-1px 0 0 rgba(110,93,101,0.6),
1px 0 0 rgba(110,93,101,0.6),
0 1px 0 rgba(89,75,84,0.8),
0 2px 0 rgba(89,75,84,0.6),
0 3px 0 rgba(89,75,84,0.4);
}
.dropdownlist li[class^="item-"] > a {
border:1px solid rgb(64,57,66);
border-bottom:none;
}
.dropdownlist li:last-child[class^="item-"] > a {
border:1px solid rgb(64,57,66);
}
.dropdownlist li:first-child[class^="item-"] > a{
border-radius:3px 3px 0 0;
}
.dropdownlist li:last-child[class^="item-"] > a {
border-radius:0 0 3px 3px;
}
.dropdownlist li[class^="item-"] > a:visited {
color:#033e6b;
}
.dropdownlist li a:hover {
background-image:-*-linear-gradient(top,rgb(90,80,80),rgb(65,68,65));
cursor:pointer;
}
/*下拉列表默认隐藏*/
.dropdownlist li[class^="list-"] ul {
position:absolute;
left:-3px;
top:130%;
border-radius:4px;
padding:0;
border:none;
transition: all 500ms ease-in;
border:3px solid rgba(243,233,229,0.2);
box-shadow:0 0 0 1px rgba(243,233,229,0.6);
display: none;/*隐藏工具体*/
}
/*工具条icon的实现方法*/
.dropdownlist li[class^="list-"] ul:before {
content:'';
position:absolute;
width:1px;
height:1px;
border:5px solid transparent;
border-bottom-color:rgba(243,233,229,0.4);
left:50%;
top:-15px;
margin-left:-5px;
}
/*悬浮时显示下拉工具条,实现tooltip效果*/
.dropdownlist li[class^="list-"]:hover ul {
display:block;
}
/*调用服务器字体,详细参阅读《CSS3 @font-face》一文*/
@font-face {
font-family: 'signal-icon';
src:url('fonts/signal-icon.eot');
src:url('fonts/signal-icon.eot?#iefix') format('embedded-opentype'),
url('fonts/signal-icon.svg#signal-icon') format('svg'),
url('fonts/signal-icon.woff') format('woff'),
url('fonts/signal-icon.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
演示:http://www.w3cplus.com/demo/css3/DropdownTools/index.html
下载:DropdownTools.zip
【CSS3制作下拉工具条】相关文章
1. CSS3制作下拉工具条
2. CSS3制作下拉菜单
5. 利用CSS3制作动画效果
6. 用css3制作纸张效果
7. 利用CSS3制作动画效果
8. CSS3制作的分页导航
9. CSS3制作Login栏
10. CSS3制作分步注册表单
本文来源:https://www.51html5.com/a907.html
上一篇:CSS 中的分离、抽象和层叠
下一篇:Toolbar Menu
﹝CSS3制作下拉工具条﹞相关内容
- CSS3制作价格标牌
- css3制作日历风格登陆表单
- CSS3制作登录表单
- CSS3制作莲花开放
- 用CSS3制作一个令人印象深刻的产品展示
- 分享Jquery+CSS3实现的3D下拉菜单特效
- 更好用的 jQuery 下拉选择框插件
- jQuery Bootstrap响应式下拉菜单
- jQuery多级联动美化版Select下拉框
- jQuery二级下拉菜单 菜单简易实用