Tagged

投影

A collection of 2 posts

css3

纯CSS3透明水晶盒

相信大家有看过这个例子:3D盒子,在书《CSS3 实战》上第282页有个综合实战“设计动态立体盒子”的例子,实现方式跟它一样,我的盒子也是以它为原型来设计的,不过在实现方面有做修改、优化,以及增添了一些细节,下面是我的盒子Firefox截图: 透明化了盒子,通透性强了,因为透明了,所以背部的三个面也就要做出来了,所以总共6个面,比原作多3个; 投影镜像,让盒子的立体感更强烈; 边角线的处理,让盒子面与面之间过渡和谐。 你可以点击这里下载 源代码(只是写了moz下的效果,webkit的就没写了) 盒子的HTML结构很简单,如下: 前 后 左 右 上 下 一个大盒子包住“前、后、左、右、上、下”6个面,因为定位产生层高的关系,所以它的顺序其实是“后、下、左、前、

css3

纯CSS3文字 渐变内发光投影效果

前阵子做了个css3文字效果,涉及css3投影,渐变,蒙版,伪类等知识点,现在写下设计思路,仅供参考。发个效果图大家看先: 投影shadow box-shadow 一般我们都是用css3的box-shadow来实现盒投影,用text-shadow来实现文字投影,box-shadow设置方型盒子投影,用raidus的话可以让盒子产生圆角,看起来就很圆滑舒服,一般的写法是这样的: -moz-box-shadow:1px 1px 5px #000; 1px(水平方向偏移)  1px(垂直方向偏移)  5px(阴影羽化)  #000(颜色); 当偏移量为负数时就向反方向偏移,试试就明白了,这里不贴图。 这个是一般的投影效果,如果是内阴影,那么就加个inset属性,写法如下: -moz-box-shadow:**inset** 1px 1px 5px #000; 这样就变成了PS里面的内阴影,效果很赞,很实用,如果需要内发光效果,则背景底色深,投影颜色浅,这样就会感觉是发光,而背景颜色深,