XO in My Life » 图片

几个CSS的技巧

xoboy — Tue, 29 Dec 2009 09:48:54 +0000

很多朋友在编写html的时候往往会被一些小问题所困扰，这里介绍几个小小的技巧。

1. 防止图片撑破div层

.div-img {margin: auto; width: 600px;}
.div-img img{max-width: 100%!important; height: auto!important; width:expression(this.width > 600 ? “600px” : this.width)!important;}

2. 让div的内容图片垂直居中（可兼容多浏览器）

.div-img {*position:absolute; top:50%;}
.div-img img {*position:relative; top:-50%; left:-50%;}

3. 让文字从右往左竖排写

.text { layout-flow: vertical-ideographic; height:400px; line-height:200%; }

在线图片倒影生成器

xoboy — Tue, 10 Jun 2008 05:53:54 +0000

今天要介绍一款特别的在线的图片倒影生成器WaveMyPic，之所以说它特别是因为这个网站生成的图片倒影是会动的波浪水纹，真实性很强。

另外一款叫Wet-Floor-Maker，效果没有那么强大，是静态的倒影生成器，很多参数选项可供选择。

最后一款web2.0stylr，可以生成文本或者图像的倒影效果，可以设置文本字体、渐变开始颜色，渐变结束颜色和背景色等，以上的介绍有兴趣的朋友可以慢慢体验一下，实在是装饰我们的博客图片的一大利器！