Web开发者助手 FeHelper

CSS中的content属性应该大家都不陌生，conteng属性是和:befor、:after伪类搭配使用的，最常见的使用方法一般如下：

<div class="mod-testcase"></div>
<style type="text/css">
    div.mod-testcase:before {
        content:'测试用例开始！'
    }
    div.mod-testcase:after {
        content:'测试用例结束！'
    }
</style>

其实这个content是可以直接访问到该节点的Attribute的，比如，上面的代码可以改为：

这是一个神奇的东西：css3ps，一个可以将ps特效转换为css3代码的ps插件！

官网：http://css3ps.com

效果却是超赞！下面是一段通过css3ps自动生成的代码：

html：

<div class="Style0"></div>

css：

网上精美的东西太多了，自己Mark一下，没准儿以后就能用得上了。

1、8款精美的jQuery/CSS3菜单特效 http://web.itivy.com/8-css3-menus/

2、CSS伪元素实现的3D按钮 http://demo.itivy.com/CSSButtonsPseudoElements/index3.html

3、jQuery/CSS3实现3D相册效果

CSS '@Supports'

http://www.webmonkey.com/2012/11/use-tomorrows-web-standards-today-with-css-supports/

Opera 12.10和Firefox 19开始支持的一个新的CSS

PSpriter 1.0版本：

PSpriter一开始的目标，就是这个：Css Sprites。

简介：

今天同事在群里分享了一个特牛叉的前端小技巧：用button实现垂直水平居中对齐。

这个简直太强悍了，代码很简单，大概就是这个样子：

html代码：

<style type="text/css">
    button {  
        height:200px;
        width:300px;
        background: none;
        border: 1px solid #ccc;    
    }
</style>
<button><img src="http://static.baidufe.com/www/img/logo.png" /></button>

这个button的小技巧，值得收藏。

ref：http://jsfiddle.net/peterhry/wJ35V/

周末在家，玩儿了会儿CSS，随便搞了个Demo，DIV+CSS绘制Logo：

没啥特别的，就是花时间罢了。。。

demo地址：http://www.baidufe.com/demo/css3logo.html

IE中可以直接使用CSS Filter实现，但非IE浏览器，却没有直接的提供类似方法。

好在CSS3出现了，可以通过filter:graysacle实现，但是目前仅支持chrome（18 dev+），

其他浏览器好像暂时没有支持的打算！

不过没关系，在中国，目前IE（6/7/8/9）+ Chrome（18 dev+）基本能覆盖了绝大部分浏览器（包括360、Maxthon、Sougou等）。

其余浏览器就算可以不用考虑支持，代码：

html { 
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 
    -webkit-filter:grayscale(1.0);
}

写到这里，再顺便延伸一下-webkit-filter，严格意义上将，这个都不是CSS3的一部分，充其量算得上chrome浏览器的私有css，

其语法为：

-webkit-filter:effect(value);

effect可取下列值：

   grayscale           灰度，值为数值，x∈[0,1]

   sepia                  褐色，值为数值，x∈[0,1]

   saturate             饱和度，值为数值，默认是1，可以是小于1的小数，也可以大于1,x∈[0,+∞)

   hue-rotate         色相旋转，值为角度，x∈[0,360]，单位deg

   invert                  反色，值为数值，x∈[0,1]

   opacity               透明度，值为数值，x∈[0,1]

   brightness          亮度，值为数值，默认是1，可以小于1(变暗)，可以大于1(变亮)；

两年前写的东西，前几天项目里又用到了，贴在这里，记录下。实现效果：

这里的小三角方向是可以改变的，包括向上、向下、向右、以及这里的向左。

HTML代码：

<!-- 外框 -->
<div class="mod-container">
    <!-- 小三角部分 -->
    <div class="mod-triangle">
        <div class="t-border"></div>
        <div class="t-inset"></div>
    </div>
</div>

CSS代码：

/*外框容器*/
.mod-container {
    width:100px;
    height:60px;
    border:1px solid #000;
    margin:20px;
    background:#fff;
}
/*小三角部分*/
.mod-triangle {
    display:block;
    position:relative;
    left:-23px;
    top:18px;
    z-index:20;
}
.mod-triangle .t-border,
.mod-triangle .t-inset{
    left:0px;
    top:0px;
    width:0; 
    height:0; 
    font-size:0; 
    overflow:hidden; 
    position:absolute;
    border-width:12px;
    /*可在此处更改小三角方向：上-右-下-左（solid的位置）*/
    border-style:dashed solid dashed dashed;
}
/*小三角的边框，如果不需要，可将颜色值改变*/
.mod-triangle .t-border{
    border-color:transparent #000 transparent transparent;
    left:-1px;
}
.mod-triangle .t-inset{
    border-color: transparent #fff transparent transparent;
}