不自重者,取辱。不自长者,取祸。不自满者,受益。不自足者,博闻。

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的,比如,上面的代码可以改为:

#css #content 浏览(1642) 阅读全文 评论

PSpriter一开始的目标,就是这个:Css Sprites。

简介:

/**
* 在CSS中,将小图合并,并用大图替换原来的小图,修正或添加background-position
*
* 1、如果background-repeat:repeat | repeat-x | repeat-y
#PSpriter #Css Sprites 浏览(845) 阅读全文 评论

今天同事在群里分享了一个特牛叉的前端小技巧:用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/

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;
}
#web前端 #CSS #div+css小三角 浏览(1643) 阅读全文 评论(1)