[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; } 效果如下:  

【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 转换。 … Continue reading “【css3】transform属性”

【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。 … Continue reading “【css3】box-shadow属性”

【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 … Continue reading “【css】RGB颜色查询对照表”

【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” … Continue reading “【css】解决IE浏览器对于定位的问题”

【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; 之类调整的设置就行了。