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

当前位置 : 首页 > 网页制作 > CSS > 用纯CSS3打造立体提示模块的效果实现(图) 附源码

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

来源: 作者: 时间:2015-11-18 11:58
CSS功能强大.有时候不需要图片.就代码就能实现特殊效果了.
CSS功能强大.有时候不需要图片.就代码就能实现特殊效果了.
最近一些日子都在看JS方面的书,写小游戏,好久没写CSS了,昨天看了一个纯CSS3进度条的例子,感觉很有创意,尤其是用background-size来repeat渐变斜线这招,妙不可言。今天再浩方打dota的时候刷不进房间,看到它弹出一个提示框,如下:
纯CSS3立体提示模块的实现,附源码
  发现跟进度条有个共通点,于是手痒参考了它写了这个模块,略做修改,效果图如下:
纯CSS3立体提示模块的实现,附源码
  代码我只写了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来做左下的拐角底面,具体情况如图:
纯CSS3立体提示模块的实现,附源码
  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投影加强立体感,因为右上角会穿帮,如果左下平移阴影的话,感觉怪怪的,所以就干脆不加了,或者你可以加上试试效果,看看会不会更好。
  源代码下载:
Tag:
网友评论

<