CSS

在使用facebook的visible-to-connection时，如何隐藏空白

在使用facebook的visible-to-connection是，因为使用的是visibility:hidden而不是display:none，所以使用有大片的空白出现（facebook真是弱X）。

<fb:fbml version="1.1">
    <fb:visible -to-connection>
            [form code]
    <fb:else>
             <img src="image_location.jpg" id="not-a-fan" />
    </fb:else>
    </fb:visible>
</fb:fbml>

如果使用上面的代码，会发现jpg上面有大量的空白，那是form的位置，怎么隐藏form呢？答案是使用绝对定位。

<style type="text/css">
    #wrapper {
        position: relative;
    }
    #not-a-fan {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
    }
</style>
<div id="wrapper">
<fb:fbml version="1.1">
    <fb:visible -to-connection>
            [form code]
    <fb:else>
             <img src="image_location.jpg" id="not-a-fan" />
    </fb:else>
    </fb:visible>
</fb:fbml>
</div>

这下就巧妙的去除留白了。

阅读全文 >>

CSS 跨浏览器解决方案之二渐变

渐变效果也是常用的效果之一，因为浏览器兼容性的原因，很多人都是用背景图片来达到渐变效果的，其实仅仅使用 CSS 就可以实现了。

.gradient {
	/* Firefox 3.6 */
	background-image: -moz-linear-gradient(top, #81a8cb, #4477a1);
 
	/* Safari & Chrome */
	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1, #81a8cb));
 
	 /* IE6 & IE7 */
	filter:  progid :D XImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');

阅读全文 >>

CSS 跨浏览器解决方案之一透明度

很多程序员都很奇怪，为什么IE就是就是不支持 opacity 这个属性呢？这个问题已经存在很长很长时间了，其实 opacity 是 CSS3 的属性，虽然IE不提供支持，但是IE可以通过专用的过滤器属性提供类似的透明度设置。

是不是很奇怪，为什么 IE 就是和别人不一样呢？

#myopacity {
    /* other browsers */
    opacity: 0.4;
    /* this works in IE6, IE7, and IE8 */
    filter: progid :D XImageTransform.Microsoft.Alpha(opacity=40);
    /* this works in IE8 only */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)";
}

阅读全文 >>

CSS生成跨浏览器的阴影效果

阴影效果是web开发中一个头疼的问题，和生成圆角一样，都是web开发中经常用到的，虽然实现麻烦，但是效果不错，所以客户经常要求有阴影效果。

我做过各种各样的阴影效果，有给整个站点的body添加阴影效果的，有给某个div实现的，其大部分都是用图片生成的，很难定位，而且添加了不少的div专门用于添加图片，维护起来太麻烦了。经常是为了修改其他的layout问题，而把阴影效果弄的面目全非。

现在好了，我找到了一种简单的用CSS生成阴影的方法，大家看看下面的例子：

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

阅读全文 >>

简单地利用CSS实现立体效果

Hello

上面的例子只用了几行CSS就实现了3D的重影效果，简单高效，但是只有IE8，Firefox，Chrome支持它。

阅读全文 >>

话说CSS的优先权

CSS2.1 中规定了关于 CSS 规则 Specificity（特异性）的计算方式，用一个四位的数字串（注：CSS2 中是用三位）来表示，最后以 Specificity 的高低判断 CSS 的优先权。

发现很多朋友对 CSS 的优先权不甚了解，规则很简单。需要说明的一点，如果你的样式管理需要深层判断 CSS 的优先权，更应反思自己的 CSS 代码，是否合理？是否优化？

CSS2.1 中规定了关于 CSS 规则 Specificity（特异性）的计算方式，用一个四位的数字串（注：CSS2 中是用三位）来表示，最后以 Specificity 的高低判断 CSS 的优先权。

Specificity 具体的计算规则：

  • 元素的 style 样式属性，加 1,0,0,0。

阅读全文 >>
较旧的文章