Tagged

阴影

A collection of 4 posts

css3

纯CSS3透明水晶盒

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

css

CSS文字排版终极指南

译自:[The Ultimate Guide to CSS Typography](http://www.threestyles.com/tutorials/css-tips-for-better-typography/) 中文:[CSS文字排版终极指南](http://www.qianduan.net/ultimate-guide-css-text-typography.html) 请尊重版权,转载请注明来源!多谢。 - - - - - - 在今天的设计中,排版常常被忽视,特别是被网页设计师忽视。这真是件遗憾的事情因为CSS可以做很多事情来控制我们的排版。也就是说,我们被局限于某些“网络安全”排版,但是我们不应该限制我们自己的创造性。本文整理了一些用于在网页上排版的CSS技巧。 Font属性 CSS提供了font属性,它允许我们在我们的页面中调整文字。这是一系列的关于语法和如何使用CSS调整文字的概述。 Font-size 使用font-size可以修改你的文字的大小。 font-size: 1.2em; font-size:

css3

CSS阴影详解

设计师常常使用一些独特的字体效果和页面效果,阴影是其中一个,它可以让页面中的文字和元素具有立体的效果,从而被突出出来。比如对于文字阴影,传统的方法可能需要将文字切出来,直接使用图片,如果考虑SEO和网站性能,还可能会使用CSS Sprites等技术将图片整合: h2{ background:url(sprites.png) no-repeat 0 0; font-size:0; text-indent:-9999em;...} h2#title1{background-position:0 -30px;} h2#title2{background-position:0 -60px;} .... 这是很棘手的事情,拼合图片会花掉你的大量时间,而且为了实现更好视觉效果,你可能还要使用高质量的32位png图片,这又要让你面对该死的IE 6的png透明问题! 事实上,对于文字的阴影效果,我们完全可以用CSS来实现! 可以查看查看demo先。 Text-shadow text-shadow可以让我们实现完美的文字阴影效果。基本写法: text-shadow:[颜色 x轴 y轴 模糊半径]

css

CSS3系列教程:阴影

阴影大约从CSS2就开始有了,但是只有Safari一个浏览器支持它,到现在依然是这样。阴影在CSS3中可以应用在边框和文字上,就像图片的阴影效果一样。 一般可以分为box-shadow和text-shadow两类。 CSS3的box-shadow和text-shadow可以写做:box-shadow:Apx Bpx Cpx #xxx; Apx = x轴 Bpx = y轴 Cpx = 投影长度 XXX = 像通常一样的颜色 了解了这些,我们就可以以下面的方法开始体验了… 浏览器兼容性: 在前面的介绍中,我们已经声明,并不是所有的浏览器都支持CSS3.最好的支持CSS3阴影效果的浏览器是Safari,也就是说,我们现在只需要用刀-webkit前缀。 #boxShadow{ border: 5px solid #111; -moz-box-shadow: 5px 5px 7px #999; -webkit-box-shadow: 5px 5px 7px #999; box-shadow: 5px 5px 7px #999; -moz-border-bottom-right-radius: