用纯CSS3打造立体提示模块的效果实现(图) 附源码

最近一些日子都在看JS方面的书，写小游戏，好久没写CSS了，昨天看了一个纯CSS3进度条的例子，感觉很有创意，尤其是用background-size来repeat渐变斜线这招，妙不可言。今天再浩方打dota的时候刷不进房间，看到它弹出一个提示框，如下：

　　发现跟进度条有个共通点，于是手痒参考了它写了这个模块，略做修改，效果图如下：

　　代码我只写了moz，没写webkit，可自行添加，下面我对该模块要点进行分析：
　　1、结构
　　整个模块是一个tipsBox，然后里面hd放左侧标题，bd放内容，每个标题用tipsTitle来写基本样式，默认绿色，然后用blue、yellow多类名权重覆盖的方式来实现多种底色标题。
　　2、折角
　　右上角有个像纸张的折角，增加模块的立体感。如果你看了我的代码，会发现里面没有多余挂折角的钩子，那是因为我用了tipsBox的伪类before\after来实现的。在设定了基本的宽高后，主要是设置颜色，我设置before的颜色代码如下：
　　-moz-linear-gradient(-135deg,#e6f2fe 50%,#fff 50%);
　　看懂了吗?就是一个打斜的线性渐变，但是不存在过渡，而是再50%这里明显分界，0%-50%跟背景底色一样，50%-100%用白色，这样就出现了一个假象：tipsBox右上角缺了一个三角形。然后设置after的z-index比before低，用来投影，不过after的大小比before略小些，因为如果投影的话宽高都会增加，这样会越过before右上角的底色区域，就穿帮啦，没人规定投影不能比本身尺寸小对吧，所以调节一下再稍加旋转，这样就出现了一个折角，又不会穿帮。
　　3、标题项
　　标题项目tipsTitle控制基本的样式，其中一些基本的宽高定位这些就不说咯，拉一个从左向右的线性渐变由浅到深，一般光源在左侧看起来比较顺眼，主要还是说下伪类的作用，我用after来做左侧带弧度的受光面，before来做左下的拐角底面，具体情况如图：

　　after用-moz-transform:skew(0deg,-20deg);实现纵向斜切，before设定左下角为圆角，调整位置衔接起来就是一个拐角，因为斜切是一个直线，不过幅度小，所以不容易发觉，再设置after颜色为从左向右的线性渐变由浅到深，before为一个纯深色，同时border与主体衔接，这样基本的效果就出来了。
　　4、高光阴影
　　实现标题项基本元素后，就开始着手“不会变化”的高光、阴影、斜线了，这里的不会变化意思就是不会变化，很废哈...其实是不用变化，就是在你变化标题项底色的时候，这一块是不用改变的，我给提取出来用实现，我比较喜欢用标签来挂钩，你也可以替换成其它标签，这个无大碍。highlight主体拉一个由上到下，透明至0.2不透明的线性渐变，代码如下：
　　-moz-linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,0.2));
　　highlight:before用来画白色斜线，低调点就是模仿进度条，恶俗点就是抄袭，千古文章一大抄哈...这斜线放在highlight而不放在tipsTitle，其实还有个点，就是highlight可以覆盖tipsTitle+tipsTitle:after还是放再tipsTitle上的话，最左侧是不会出现斜线的，这样就感觉是拼起来的两块不连续。
　　highlight:after用来画左下侧的黑影，由左向右拉一个由黑到透明的横向渐变，这样就可以透过底色，整个highlight都是黑白透明无色系构成，所以对更换底色不会产生影响。
　　5、镂空
　　基本效果出来后，感觉标题出现的有点突兀，所以还是给加个镂空的效果，原来的hd没有用到，别浪费，调节一下用box-shadow inset实现内投影，向左拉一点，这样看起来标题项就像是从背部穿过镂空展示在前面，感觉就舒服了些。
　　6、其它
　　看到这个其它基本就没有其它的了，只不过补充下一些杂项而已，比如文字用的是白色底色，黑色透明投影然后居中对齐;整个文本框有个虚线外框，不过特别想说的是，不能给tipsBox加box-shadow投影加强立体感，因为右上角会穿帮，如果左下平移阴影的话，感觉怪怪的，所以就干脆不加了，或者你可以加上试试效果，看看会不会更好。
　　源代码下载：https://www.jb51.net/jiaoben/54998.html

最新评论