今天主要和大家一起学习Red写的《CSS3 tooltips》。从里面我们一起来学习如何使用CSS3来制作tips。
大家都知道,有时我们在web的页面制作中,需要使用另外的方法来解说其中的一个词或一张图片等,那么我们把这种称作为tips。那什么为要使用tips呢?很好回答,因为使用tips能提高你的网站的可用性,增强你网站的交互力。那么现在开始我们跟着Red大神来学习制作没有图片,没有js的tips。如:
我们需要CSS的tips?
你或许会问,我们需要CSS的tips?在HTML中有一个属性“title”,他也可以起到提示作用,我们完全可以使用这个属性来制作提示效果。但是这个默认的提示效果,我们无法给其进行任何样式的修改。如果你要制作出一个好看的,很帅的tips,一个你想的要风格的tips时,你就需要使用css来制作tips,这样才能解决。
如何制作Tips?
使用CSS来制作,要怎么样制作?我想这者是大家今天最想关注的。那么我们就一起往下看吧。这方法可能你有熟悉,或者已经使用过。首先我们需要把需要把一段描述性的内容放在一个,这部分描述性内容就是我们所说的tips的内容,最主要的是在tips父元素中定义“relative”而其自身使用“absolute”定位。在下面你会看到一个简单而且适当的tips结构,此文我们就要使用是的CSS3的属性来制作一个cool的tips。比如说tips下面的三角形,我们就是使用":before"和":after"来制作的,如下图所示:
在本文中制作Tips我们还使用了CSS3的其他几个属性:
HTML Markup
Tips Title
Your tips description
为什么使用锚元素?
这里为什么使用元素来制作tips呢?这个其实不用我说大家都知道的。原因很简单,就是为了兼容性的原因。因为在IE6浏览器下“:hover”会有一个问题,他只支持元素,其的他的元素不具有“:hover”的不能使用。
如果你执意不想使用元素来制作tips效果,那么为了兼容IE6浏览器下的效果,你就需要使用下面的代码来解决IE6下的兼容问题,或者你也可以按照《浏览器兼容之旅的第四站:IE常见Bug——part2》介绍的来处理,此处我们就一起来看Red是如何处理的
处理:hover兼容的jQuery代码
$(function() {
if ($.browser.msie && $.browser.version.substr(0,1)<7)
{
$('.tooltip').mouseover(function(){
$(this).children('span').show();
}).mouseout(function(){
$(this).children('span').hide();
})
}
});
CSS CODE
.tips{
position: relative;
background: #eaeaea;
cursor: help;
display: inline-block;
text-decoration: none;
color: #222;
outline: none;
}
.tips span{
visibility: hidden;
position: absolute;
bottom: 30px;
left: 50%;
z-index: 999;
width: 230px;
margin-left: -127px;
padding: 10px;
border: 2px solid #ccc;
opacity: .9;
background-color: #ddd;
background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
-moz-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.tips:hover{
border: 0; /* IE6 fix */
}
.tips:hover span{
visibility: visible;
}
.tips span:before,
.tips span:after{
content: "";
position: absolute;
z-index: 1000;
bottom: -7px;
left: 50%;
margin-left: -8px;
border-top: 8px solid #ddd;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 0;
}
.tips span:before{
border-top-color: #ccc;
bottom: -8px;
}
浏览器都兼容?
这个效果兼容所有浏览器,只是在IE6-8会有点不一样,因为我们此处使用了CSS3的渐变来制作的背景。在IE6-8下根本无法支持,不过大家也可以使用滤镜来解决。
使用CSS3制作Tips就是这么简单,当然你还可以制作不同色的tips,你只需要在其基础上增加一个其他颜色的类名,然后改变其背景色,就如Red给我们提供的DEMO。
如何?简单吧。学会了吗?要是还没有整明白就自己动动手吧,这样一下子你就明白了。最后再次感谢Red给我们带来《CSS3 tooltips》。使用我们也可以试试手,尝尝新了。如果您还有更好的方法,记得告诉我哟。
如需转载烦请注明出处:
如果觉得《html tips 属性 after CSS3 Tips》对你有帮助,请点赞、收藏,并留下你的观点哦!