Tagged

透明

A collection of 3 posts

css3

纯CSS3透明水晶盒

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

css

CSS3系列教程:透明度

CSS3透明…不透明…渐变…随便你怎么叫它吧!这里是一些使用CSS3透明度的指南以及一些例子。 其实这个firefox很久以前就支持了,而IE一直不支持! “opacity”声明用来设置一个元素的透明度:层、文字、图片等…一个opacity的值为1的元素是完全不透明的,反之,值为0是完全透明的,看不见的。1到0之间的任何值都表示该元素的透明程度。 浏览器兼容性 opacity是浏览器支持最好的一个CSS3元素…当然,除了IE! CSS3透明(例1:层) 上面的透明例子使用了下面的样式: div.opacityL1 { background:#036; opacity:0.2; width:575px; height:20px; } div.opacityL2 { background:#036; opacity:0.4; width:575px; height:20px; } div.opacityL3 { background:

IE6

5个简单的解决IE6透明背景问题的方法

当您按照最新流行的风格用Photoshop设计了一个完美的网站,其中一半的背景使用一个漂亮的50%不透明效果。这个时候唯一的问题就是应对古老的IE6浏览器,而且纳闷它是如何决定显示讨厌的灰色背景的。您尝试在网上搜索解决办法,却发现有几十个选择……那么你如何知道哪些方法是最好的呢? 在本文中,我将向你展示5种简单易用的解决这个问题的方法。 Unit PNG Fix 从哪里下载: 点击这里 不足? : 它不能正确平铺透明背景图片。相反,它会将你的图片拉伸。这不是一个大问题,但仍需谨慎使用。除此之外,这种方法表现的都很好。我发现我自己使用最多的就是这种方法。 DD_BelatedPNG Fix 从哪里下载? : 点击这里 不足? :没什么可说的。每种方法都有它的不足,但是这种新的袖中反复看起来是目前最完美的。 IE7.js Fix 从哪里下载? : 点击这里 不足? : 你会发现这个文件比其他的都要大。这是因为修正图片透明问题只是它要解决的问题之一!它还将IE6的许多其他缺陷修正到了现代标准。当你选择这个方法的时候注意这一点。如果你只想修正透明问题,它未必是最佳选择。 Twin Helix Fix (来自于Angus Turnbull)