[CSS3]使用grayscale滤镜将图片由彩色变为黑白照

在实现图片切换效果的时候,需要用到一个滤镜功能,将一张彩色图片变成一张黑白照,这就需要用到css3的grayscale来对图片进行滤镜处理。

代码如下:

img{
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}

效果如下:

20140316225050

 

20140316225215

【css3】transform属性

实例

旋转 div 元素:

div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); 	/* IE 9 */
-moz-transform:rotate(7deg); 	/* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); 	/* Opera */
}

浏览器支持

Internet Explorer 10、Firefox、Opera 支持 transform 属性。

Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换)。

Safari 和 Chrome 支持替代的 -webkit-transform 属性(3D 和 2D 转换)。

Opera 只支持 2D 转换。

定义和用法

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

为了更好地理解 transform 属性.

默认值: none
继承性: no
版本: CSS3
JavaScript 语法: object.style.transform=”rotate(7deg)”

语法

transform: none|transform-functions;
描述
none 定义不进行转换。
matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4×4 矩阵。
translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换,只是用 X 轴的值。
translateY(y) 定义转换,只是用 Y 轴的值。
translateZ(z) 定义 3D 转换,只是用 Z 轴的值。
scale(x,y) 定义 2D 缩放转换。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle) 定义 2D 旋转,在参数中规定角度。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
perspective(n) 为 3D 转换元素定义透视视图。

【css3】box-shadow属性

实例

向 div 元素添加 box-shadow:

div
{
box-shadow: 10px 10px 5px #888888;
}

浏览器支持

IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。

定义和用法

box-shadow 属性向框添加一个或多个阴影。

提示:请使用 border-image-* 属性来构造漂亮的可伸缩按钮!

默认值: none
继承性: no
版本: CSS3
JavaScript 语法: object.style.boxShadow=”10px 10px 5px #888888″

语法

box-shadow: h-shadow v-shadow blur spread color inset;

注释:box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

描述
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。请参阅 CSS 颜色值。
inset 可选。将外部阴影 (outset) 改为内部阴影。

【css】屏蔽谷歌浏览器中input获得焦点时边框为橘红色

在谷歌浏览器中,当在input输入框中输入内容时,就会出现橘红色的边框。也就是说input获得焦点边框就会成橘红色。如何来屏蔽它?

先看下如下截图:

可以通过css来修改outline属性即可,请看代码:

.class(自定义样式):focus { outline: none;}

【css】最新区分兼容IE6/IE7/IE8/IE9/FF的CSS HACK写法

IE8 最新css hack:

"\9" 例:"width:100px\9;".这里的"\9"可以区别所有IE6、IE7、IE8、IE9和FireFox.


"*" IE6、IE7可以识别.IE8、FireFox不能.


"_" IE6可以识别"_",IE7、IE8、FireFox不能.

在 CSS中常用特殊字符识别表: 


(1) *:  IE6+IE7都能识别*,而标准浏览器FF+IE8是不能识别*的;


(2)!important: 除IE6不能识别 !important外,  FF+IE8+IE7都能识别!important;


(3)_ : 除IE6支持_ 外,  FF+IE8+IE7都不支持_;


(4)\9:所有IE浏览器都识别(IE6、IE7、IE8、IE9)

【css】什么是CSS hack?

最近因各种需要,所以搜集下css的资料:

由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack,也叫写CSS hack。

 

 

CSS Hack的原理是什么?

 

由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。

 

比如 IE6能识别下划线"_"和星号" * ",IE7能识别星号" * ",但不能识别下划线"_",而firefox两个都不能认识。等等。书写顺序,一般是将识别能力强的浏览器的CSS写在后面。下面如何写里面说得更详细些。

【css】RGB颜色查询对照表

最近在写插件的时候,需要用到不同的颜色,结果自己了解的就那么几个(red,green,#000,#333,#999,#ccc,#ddd,#fff…)于是就查资料了解下RGB颜色,对应资料如下:

因为兼容性问题,色阶板功能只能在IE浏览器中运行

RGB颜色对照表

  #FFFFFF   #FFFFF0   #FFFFE0   #FFFF00
  #FFFAFA   #FFFAF0   #FFFACD   #FFF8DC
  #FFF68F   #FFF5EE   #FFF0F5   #FFEFDB
  #FFEFD5   #FFEC8B   #FFEBCD   #FFE7BA
  #FFE4E1   #FFE4C4   #FFE4B5   #FFE1FF
  #FFDEAD   #FFDAB9   #FFD700   #FFD39B
  #FFC1C1   #FFC125   #FFC0CB   #FFBBFF
  #FFB90F   #FFB6C1   #FFB5C5   #FFAEB9
  #FFA54F   #FFA500   #FFA07A   #FF8C69
  #FF8C00   #FF83FA   #FF82AB   #FF8247
  #FF7F50   #FF7F24   #FF7F00   #FF7256
  #FF6EB4   #FF6A6A   #FF69B4   #FF6347
  #FF4500   #FF4040   #FF3E96   #FF34B3
  #FF3030   #FF1493   #FF00FF   #FF0000
  #FDF5E6   #FCFCFC   #FAFAFA   #FAFAD2
  #FAF0E6   #FAEBD7   #FA8072   #F8F8FF
  #F7F7F7   #F5FFFA   #F5F5F5   #F5F5DC
  #F5DEB3   #F4F4F4   #F4A460   #F2F2F2
  #F0FFFF   #F0FFF0   #F0F8FF   #F0F0F0
  #F0E68C   #F08080   #EEEEE0   #EEEED1
  #EEEE00   #EEE9E9   #EEE9BF   #EEE8CD
  #EEE8AA   #EEE685   #EEE5DE   #EEE0E5
  #EEDFCC   #EEDC82   #EED8AE   #EED5D2
  #EED5B7   #EED2EE   #EECFA1   #EECBAD
  #EEC900   #EEC591   #EEB4B4   #EEB422
  #EEAEEE   #EEAD0E   #EEA9B8   #EEA2AD
  #EE9A49   #EE9A00   #EE9572   #EE82EE
  #EE8262   #EE7AE9   #EE799F   #EE7942
  #EE7621   #EE7600   #EE6AA7   #EE6A50
  #EE6363   #EE5C42   #EE4000   #EE3B3B
  #EE3A8C   #EE30A7   #EE2C2C   #EE1289
  #EE00EE   #EE0000   #EDEDED   #EBEBEB
  #EAEAEA   #E9967A   #E8E8E8   #E6E6FA
  #E5E5E5   #E3E3E3   #E0FFFF   #E0EEEE
  #E0EEE0   #E0E0E0   #E066FF   #DEDEDE
  #DEB887   #DDA0DD   #DCDCDC   #DC143C
  #DBDBDB   #DB7093   #DAA520   #DA70D6
  #D9D9D9   #D8BFD8   #D6D6D6   #D4D4D4
  #D3D3D3   #D2B48C   #D2691E   #D1EEEE
  #D1D1D1   #D15FEE   #D02090   #CFCFCF
  #CDCDC1   #CDCDB4   #CDCD00   #CDC9C9
  #CDC9A5   #CDC8B1   #CDC673   #CDC5BF
  #CDC1C5   #CDC0B0   #CDBE70   #CDBA96
  #CDB7B5   #CDB79E   #CDB5CD   #CDB38B
  #CDAF95   #CDAD00   #CDAA7D   #CD9B9B
  #CD9B1D   #CD96CD   #CD950C   #CD919E
  #CD8C95   #CD853F   #CD8500   #CD8162
  #CD7054   #CD69C9   #CD6889   #CD6839
  #CD661D   #CD6600   #CD6090   #CD5C5C
  #CD5B45   #CD5555   #CD4F39   #CD3700
  #CD3333   #CD3278   #CD2990   #CD2626
  #CD1076   #CD00CD   #CD0000   #CCCCCC
  #CAFF70   #CAE1FF   #C9C9C9   #C7C7C7
  #C71585   #C6E2FF   #C67171   #C5C1AA
  #C4C4C4   #C2C2C2   #C1FFC1   #C1CDCD
  #C1CDC1   #C1C1C1   #C0FF3E   #BFEFFF
  #BFBFBF   #BF3EFF   #BEBEBE   #BDBDBD
  #BDB76B   #BCEE68   #BCD2EE   #BC8F8F
  #BBFFFF   #BABABA   #BA55D3   #B9D3EE
  #B8B8B8   #B8860B   #B7B7B7   #B5B5B5
  #B4EEB4   #B4CDCD   #B452CD   #B3EE3A
  #B3B3B3   #B2DFEE   #B23AEE   #B22222
  #B0E2FF   #B0E0E6   #B0C4DE   #B0B0B0
  #B03060   #AEEEEE   #ADFF2F   #ADD8E6
  #ADADAD   #ABABAB   #AB82FF   #AAAAAA
  #A9A9A9   #A8A8A8   #A6A6A6   #A52A2A
  #A4D3EE   #A3A3A3   #A2CD5A   #A2B5CD
  #A1A1A1   #A0522D   #A020F0   #9FB6CD
  #9F79EE   #9E9E9E   #9C9C9C   #9BCD9B
  #9B30FF   #9AFF9A   #9ACD32   #9AC0CD
  #9A32CD   #999999   #9932CC   #98FB98
  #98F5FF   #97FFFF   #96CDCD   #969696
  #949494   #9400D3   #9370DB   #919191
  #912CEE   #90EE90   #8FBC8F   #8F8F8F
  #8EE5EE   #8E8E8E   #8E8E38   #8E388E
  #8DEEEE   #8DB6CD   #8C8C8C   #8B8B83
  #8B8B7A   #8B8B00   #8B8989   #8B8970
  #8B8878   #8B8682   #8B864E   #8B8386
  #8B8378   #8B814C   #8B7E66   #8B7D7B
  #8B7D6B   #8B7B8B   #8B795E   #8B7765
  #8B7500   #8B7355   #8B6969   #8B6914
  #8B668B   #8B6508   #8B636C   #8B5F65
  #8B5A2B   #8B5A00   #8B5742   #8B4C39
  #8B4789   #8B475D   #8B4726   #8B4513
  #8B4500   #8B3E2F   #8B3A62   #8B3A3A
  #8B3626   #8B2500   #8B2323   #8B2252
  #8B1C62   #8B1A1A   #8B0A50   #8B008B
  #8B0000   #8A8A8A   #8A2BE2   #8968CD
  #87CEFF   #87CEFA   #87CEEB   #878787
  #858585   #848484   #8470FF   #838B8B
  #838B83   #836FFF   #828282   #7FFFD4
  #7FFF00   #7F7F7F   #7EC0EE   #7D9EC0
  #7D7D7D   #7D26CD   #7CFC00   #7CCD7C
  #7B68EE   #7AC5CD   #7A8B8B   #7A7A7A
  #7A67EE   #7A378B   #79CDCD   #787878
  #778899   #76EEC6   #76EE00   #757575
  #737373   #71C671   #7171C6   #708090
  #707070   #6E8B3D   #6E7B8B   #6E6E6E
  #6CA6CD   #6C7B8B   #6B8E23   #6B6B6B
  #6A5ACD   #698B69   #698B22   #696969
  #6959CD   #68838B   #68228B   #66CDAA
  #66CD00   #668B8B   #666666   #6495ED
  #63B8FF   #636363   #616161   #607B8B
  #5F9EA0   #5E5E5E   #5D478B   #5CACEE
  #5C5C5C   #5B5B5B   #595959   #575757
  #556B2F   #555555   #551A8B   #54FF9F
  #548B54   #545454   #53868B   #528B8B
  #525252   #515151   #4F94CD   #4F4F4F
  #4EEE94   #4D4D4D   #4B0082   #4A708B
  #4A4A4A   #48D1CC   #4876FF   #483D8B
  #474747   #473C8B   #4682B4   #458B74
  #458B00   #454545   #43CD80   #436EEE
  #424242   #4169E1   #40E0D0   #404040
  #3D3D3D   #3CB371   #3B3B3B   #3A5FCD
  #388E8E   #383838   #36648B   #363636
  #333333   #32CD32   #303030   #2F4F4F
  #2E8B57   #2E2E2E   #2B2B2B   #292929
  #282828   #27408B   #262626   #242424
  #228B22   #218868   #212121   #20B2AA
  #1F1F1F   #1E90FF   #1E1E1E   #1C86EE
  #1C1C1C   #1A1A1A   #191970   #1874CD
  #171717   #141414   #121212   #104E8B
  #0F0F0F   #0D0D0D   #0A0A0A   #080808
  #050505   #030303   #00FFFF   #00FF7F
  #00FF00   #00FA9A   #00F5FF   #00EEEE
  #00EE76   #00EE00   #00E5EE   #00CED1
  #00CDCD   #00CD66   #00CD00   #00C5CD
  #00BFFF   #00B2EE   #009ACD   #008B8B
  #008B45   #008B00   #00868B   #00688B
  #006400   #0000FF   #0000EE   #0000CD
  #0000AA   #00008B   #000080   #000000

【css】解决IE浏览器对于定位的问题

在写discuz x2的图片展示的插件的时候,遇到了一个问题:就是在图片的两侧都有一个切换的按钮,当点击按钮的时候进入到一张图片。看下图:

但是问题就来了,在火狐以及谷歌浏览器上测试时没有问题的,而在IE浏览器上测试的则不显示出来。代码如下:

html代码:

<div id=”JImgShow”>

<div id=”JImgLeft”>

<a href=”#” ></a>

</div>

<div id=”JImgRight”>

<a href=”#” ></a>

</div>

<img class=”Jshowimg” src=”{$GLOBALS[‘hrg_twshow_showpic’]}” />

</div>

css代码:

#JImgShow{position:relative;}

#JImgShow img.Jshowimg{width:957px;height:600px;z-index:-1;position:absolute;top:-1px;left:0px;}

#JImgLeft,#JImgRight{width:475px;height:600px;cursor:pointer;background:#fff;filter:alpha(opacity=0);opacity: 0.0;-moz-opacity:0.00;}

#JImgLeft{float:left;}

#JImgLeft a{display:none;width:102px;height:95px;margin-top:252px;margin-left:10px;background:#fff url(../img/Right.png) no-repeat;}

#JImgLeft:hover a{display:block;}

#JImgRight{float:right;}

#JImgRight a{position:absolute;float:right;width:102px;height:95px;margin-top:252px;margin-right:10px;background:url(../img/Left.png) no-repeat;}

#JRRight{display:none;position:absolute;top:0px;right:0px;width:102px;height:95px;margin-top:252px;margin-right:10px;background:url(../img/Left.png) no-repeat;}

#JImgRight:hover a{display:block;}

测试了很久,最后给对应的DIV设置背景颜色,IE浏览器就识别了。

既然通过背景颜色就可以解决这个问题,于是我就采用把div中的a标签移出来,然后将div设置背景颜色,但是透明度为0.如果不将a标签移出来,a标签对应也是透明。然后再将a标签定位出来。看如下代码:

html代码:

<div id=”JImgShow”>
<div id=”JImgLeft”>
</div>
<a href=”#” id=”JLLeft” ></a>
<div id=”JImgRight”>
</div>
<a href=”#” id=”JRRight” ></a>
<img class=”Jshowimg” src=”{$GLOBALS[‘hrg_twshow_showpic’]}” />

css代码:

#JImgShow{position:relative;}

#JImgShow img.Jshowimg{width:957px;height:600px;z-index:-1;position:absolute;top:-1px;left:0px;}

#JImgLeft,#JImgRight{width:475px;height:600px;cursor:pointer;background:#fff;filter:alpha(opacity=0);opacity: 0.0;-moz-opacity:0.00;}

#JImgLeft{float:left;}

#JLLeft{position:absolute;top:0px;left:0px;z-index:1;display:none;width:102px;height:95px;margin-top:252px;margin-left:10px;background:url(../img/Right.png) no-repeat!important;}

#JImgRight{float:right;}

#JRRight{display:none;position:absolute;top:0px;z-index:1;right:0px;width:102px;height:95px;margin-top:252px;margin-right:10px;background:url(../img/Left.png) no-repeat!important;}

测试OK了。虽然不知道此方法如何?但是解决了这个问题。记下已备下次所用。

【css】多种浏览器下CSS控制DIV居中的代码

关于CSS 控制DIV水平居中问题,我看到很多新人搞不明月。记得第一次看CSS是一个老外写的书,那个里面谈到居中使用。

  margin-left:auto;
margin-right:auto;

其实等同于:

  margin:0 auto;

于是可以使用这种方式,但是有人用IE时发现没有居中。这里建议你看看是否遗漏了DTD声明。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>

非常多的人犯过类似的错误!这种方法也可以说屡试不爽,但是在某些情况下还是行不通的。于是有了第二种方法。

margin-left:50%;
left: -width/2;

这里的width不是CSS中的Width,而是你的DIV的宽度例如你的div是768px宽,那么你就应该设置left:-384px。很好,已经有两种方法了,可以说已经能够解决你可能遇到的问题了。

有时候你会发现,这两个还不行。不能兼容一些浏览器。于是发现有了第三种方法,这中方法主要是考虑IE,它是建立在第一种方法的基础之上。它需要设置body。

body {text-align: center;}

这样IE下也居中了,但是它带来一个新的问题,你发现你的页面中所有文字都是居中的,这样很不好看。这个就很容易解决了,只需要在你的DIV定义中加上 text-align: left; 之类调整的设置就行了。