CSS3 Tips

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

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

在本文中制作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下的兼容问题,或者你也可以按照《浏览器兼容之旅的第四站:IE常见Bug——part2》介绍的来处理,此处我们就一起来看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》。使用我们也可以试试手,尝尝新了。如果您还有更好的方法,记得告诉我哟。

如需转载烦请注明出处:W3CPLUS

返回顶部