1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

纯css写出tips的几种方法

作者:用户 来源:互联网 时间:2016-03-11 17:04:21

图片方法符号三角形tip一个tips页面优化tips

纯css写出tips的几种方法 - 摘要: 本文讲的是纯css写出tips的几种方法, 最近在项目中用到了很多的小tips,之前都是随便找一套UI控件拿过来用一下就算完事了,一直也没有去管这个东西究竟是怎么搞出来的,只是大概知 道这个东西怎么

最近在项目中用到了很多的小tips,之前都是随便找一套UI控件拿过来用一下就算完事了,一直也没有去管这个东西究竟是怎么搞出来的,只是大概知 道这个东西怎么实现的,但是一套UI毕竟是太大了,tips也就是那些UI的一些附属品,没必要这么兴师动众,而且想想这些小玩意也都上样式上的事情,就 决定自己就地解决一个算了,很自然的就引出了今天这篇文章。。。

主要的tips就长如下图这德行,就是个demo,所以比较丑。。

纯<a href=css写出tips的几种方法-css tips效果">

今天的主题就是这个小小的tips,但是还是有点文章可以做的,我主要介绍三种方法,可能还有更多的方法,但是在短时间内只能琢磨出以下三种方法:

第一种: 借助图片

这种方法估计是大家常用的方法,下面的小三角大家第一想法应该就是图片了,原理很简单,html的代码就是大概如下这种结构

纯css写出tips的几种方法-css tips

div是tips的容器,span是放tips小嘴的图片的,给span设置一个小嘴背景就行啦,css代码如下所示:

纯css写出tips的几种方法-css3 tips

这个是tips的小嘴的图片(./tips.png):纯css写出tips的几种方法-css3 tooltips (额。。。没截好,凑合着用吧,以学习为主)

这种方法的优点就是:简单,好理解,一学就会。首先对容器元素进行position的相对定位,是为了tips的小嘴的绝对定位能找到基准的父元素,然后就是span的绝对定位是为了任意的放小嘴的位置,用top和left来控制。

第二种:借助于CSS的border特性

这个技能相对于使用图片的比较灵活,图片是一个非常令人讨厌的东西,需要多一次http请求,熟悉网页性能优化的朋友应该对图片都是非常敬而远之 的,能不用就不用,而且用图片的话,想换一个大点的或者小点的tips小嘴相对比较复杂,好了,不说废话,介绍第二种方法的原理:

CSS的border蕴藏着一个牛叉的技能就是画三角形,具体的原理可以参考http://blog.sina.com.cn/s/blog_74d6cedd0100z0os.html,这位仁兄讲的还是比较到位的,既然能用css画三角形,那么为什么不画一个直接替换掉tips小嘴的图片呢??好了,上代码,此方法的html结构如下图所示:

纯css写出tips的几种方法-css tips特效

这次为什么有两个span呢?因为我们要画的是一个带border的三角形,类似于空心三角形,有canvas画图经验的朋友都知道空心的东东得这 么画的,所以我们用tips-out来表示外面的border的灰色三角形,tips-in来表示里面的黄色的三角形,具体的样式代码如下图所示:

纯css写出tips的几种方法-css tips效果

这个里面就是画出了两个三角形了,我们是借助于两个三角形的top定位的不同错开了1px,形成了一个border的视觉效果~

第三种:借助特殊符号

unicode编码支持很多特殊的符号,这些特殊符号是前端开发一笔宝贵的财富,因为这些符号就是一张张现成的图片,但是却不发起一次http请求,这种东西不用的话,还有天理吗??我们今天做这个小tips的话需要借助于这么一个特殊符号:▼

这就是一个三角形啊。。好了列出html代码:

纯css写出tips的几种方法-css tips

和借助border特性一样,需要两个三角形画出一个带border的三角形,这样的话,其实要控制tips小嘴的大小和颜色,我们其实只要控制这两个span的font-size和color,好了,我们接着看css代码,其实现在也是大同小异了:

纯css写出tips的几种方法-css3 tips

这段css也是通过postion:absolute; top和left的值来控制两个三角形的位置达到形成tips的小嘴的视觉效果。

好了,tips其实还是很有意思的,我个人比较喜欢第三种方法,首先CSS很短也不是很难理解,并且没有用到图片,而在常规的项目开发中我也会想方 设法的去尽可能的利用这些强大的特殊符号,能不用图片就不用图片。当然,也许tips的做法还有很多,我这里权当算是一个抛砖引玉吧。



以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索图片 , 方法 , 符号 , 三角形 , tip , 一个 , tips 页面优化tips css tips效果、css tips、css3 tips、css3 tooltips、css tips特效,以便于您获取更多的相关知识。

驱动-c语言读取硬盘原始数据的几种方法

问题描述 c语言读取硬盘原始数据的几种方法 我所知道的两种方法是: 1. CreateFile打开硬盘后直接从文件句柄里读 2. DeviceIO驱动读取 &lt;这里都是原始数据,比如第一个扇区就是MBR&gt; 这...

用css截取字符的几种方法详解(css排版隐藏溢出文本)_CSS/HTML

方法一: 复制代码 代码如下: 任意长度的字符串  说明:优点是内容可以为任何HTML元素,包括超链接和图片等,在IE6中还会在结尾自动显示省略号。缺点是必须指定宽度数值,并且宽度不能是百分数,否则在IE中会被认为...

ExtJS Grid tooltip的几种实现方式

看到问答里面的:http://www.iteye.com/problems/19761就顺便总结点自己的体会吧。     1.表头提示   在2.2里面是设置ColumnModel.tooltip,3.0则是Column.tooltip如下: var grid = new Ext.grid.GridPanel({columns:[{header:'名称',dataIndex:'name',tooltip:'对象名称'}, {hea...

Jekyll 使用 Rouge 主题

...HTML 中的 `blockquote` 标签,> 所以小生就选择了最为笨拙的方法,> 硬编码进去 `blockquote` 标签不就阔以了,如下:> > ```liquid> > this is test start> {% highlight shell %}> > this is code> {% endhighlight %}> this is test end> > ```>

10 Tips for Writing JavaScript without jQuery

... 这是一个很酷的HTML5技术应用,用户可以在画布上用画笔写出自己想看的文字或图案,这个应该能将你写的东西用3D方式呈现,而且让它围着中心3D旋转,只要你设计的巧妙,你可以绘制出让人惊叹的效果和图案。 ...

前三篇
后三篇