CSS3 Tips

今天主要和大家一起学习Red写的《CSS3 tooltips》。从里面我们一起来学习如何使用CSS3来制作tips。

大家都知道,有时我们在web的页面制作中,需要使用另外的方法来解说其中的一个词或一张图片等,那么我们把这种称作为tips。那什么为要使用tips呢?很好回答,因为使用tips能提高你的网站的可用性,增强你网站的交互力。那么现在开始我们跟着Red大神来学习制作没有图片,没有js的tips。如:

CSS3 Tips

我们需要CSS的tips?

你或许会问,我们需要CSS的tips?在HTML中有一个属性“title”,他也可以起到提示作用,我们完全可以使用这个属性来制作提示效果。但是这个默认的提示效果,我们无法给其进行任何样式的修改。如果你要制作出一个好看的,很帅的tips,一个你想的要风格的tips时,你就需要使用css来制作tips,这样才能解决。

如何制作Tips?

使用CSS来制作,要怎么样制作?我想这者是大家今天最想关注的。那么我们就一起往下看吧。这方法可能你有熟悉,或者已经使用过。首先我们需要把需要把一段描述性的内容放在一个<span>,这部分描述性内容就是我们所说的tips的内容,最主要的是在tips父元素中定义“relative”而其自身使用“absolute”定位。在下面你会看到一个简单而且适当的tips结构,此文我们就要使用是的CSS3的属性来制作一个cool的tips。比如说tips下面的三角形,我们就是使用”:before”和”:after”来制作的,如下图所示:

CSS3 Tips

在本文中制作Tips我们还使用了CSS3的其他几个属性:

  1. 渐变背景——《CSS3 Gradients
  2. 阴影效果——《CSS3 Box-shadow
  3. Tips的圆角——《CSS3 Border-radius
  4. css3的伪元素制作三角制作——《CSS3 选择器——伪类选择器

HTML Markup

<a href="#" class="tips">
    Tips Title
    <span>Your tips description</span>
</a>

为什么使用锚元素<a>?

这里为什么使用<a>元素来制作tips呢?这个其实不用我说大家都知道的。原因很简单,就是为了兼容性的原因。因为在IE6浏览器下“:hover”会有一个问题,他只支持<a>元素,其的他的元素不具有“:hover”的不能使用。

如果你执意不想使用<a>元素来制作tips效果,那么为了兼容IE6浏览器下的效果,你就需要使用下面的代码来解决IE6下的兼容问题,此处我们就一起来看Red是如何处理的

处理:hover兼容的jQuery代码

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
    $(function() {
        if ($.browser.msie && $.browser.version.substr(0,1)<7)
        {
            $('.tooltip').mouseover(function(){
                $(this).children('span').show();
            }).mouseout(function(){
                $(this).children('span').hide();
            })
        }
    });
</script>

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》。使用我们也可以试试手,尝尝新了。如果您还有更好的方法,记得告诉我哟。

原文链接:https://www.w3cplus.com/css3/create-tips-with-css3

发表评论

登录后才能评论