Archive for CSS

笔记:css 实现玻璃磨砂效果

.test{
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -ms-filter: blur(3px);
    -o-filter: blur(3px);
    filter: blur(3px);
}

很简单,只要给个

filter: blur(3px);

就可以了,其中里面的数值是玻璃模糊程度

对于 -webkit-backface-visibility: hidden 这样的样式你需要知道的,在chrome和safari里会导致某些别的浮动在此上面的div的 overflow:hidden 失效

-webkit-backface-visibility:hidden 这个CSS3可以在CSS3动画时解决闪烁的问题,但是你或许不知道,加上这个样式后可能会让你在某些时候遇到奇葩的问题。

我今天就因为这个样式让我纠结了半天,同样的CSS代码在别处可以,在这边就会出现overflow:hidden失效的问题,但是始终找不到问题所在,最后使用替换、一部分一部分大面积的删除代码的办法找到了问题所在。。。

然后我把CSS代码进行提炼,做了一个demo出来,链接 : http://jsfiddle.net/jonwang/q9LaB/5/

注意,用chrome或safari打开,我的浏览器版本是28.0.1500.95,截止目前是最新的。用firefox打开是好的,是浏览器BUG还是什么问题?

其实不光 -webkit-backface-visibility:hidden 这个CSS,当一个DIV使用了 -webkit-transform: translate(0, 0, 0); 这样的CSS后,也有可能导致某些异常问题,可能还是浏览器实现的细节需要完善吧,不过现在来说,还是要避免的,特别是当自己遇到一些奇葩的问题时,建议多从这些CSS上找问题,在使用时要特别小心。

这边在列举几个我遇到的问题,当然不是浏览器的问题,而是需要提升的CSS经验。
比如一个div样式 -webkit-transform: translate(0, 0, 1px); 然后又设置了 z-index: 1; 这时因为这个div已经设置了translate的Z轴,所以z-index就会没有用了。这种情况多发生在明明某个div的z-index比另外一个低,但是它却显示在另外一个div上。

当然,还有这哥儿遇到的问题 http://stackoverflow.com/questions/10355564/backface-visibility-broken-in-chrome-certain-platforms-versions
他贴了一个在线测试的地址 http://jsfiddle.net/csaltyj/TYuL3/
第二个div按传统的理解它应该覆盖在第一个div上,但是却没有。
这也是 -webkit-backface-visibility: hidden; 导致的,这和我遇到的问题不一样,这个表现应该是正确的,因为这个样式就是用来隐藏掉动画的背面的。

总之,CSS3有很多新的特性,有些问题可能是浏览器实现的bug,有些可能就是我们的经验问题了

Emmet LiveStyle – 适合前端攻城狮使用的实时在线调试CSS的工具,怎么好用?看了官方视频你肯定会心动

二话不说,先看 Emmet LiveStyle 官方视频:

顺便吐槽下万恶的TC网络,为了下载官方被河蟹的视频,我搞了1个小时才把视频拉下来

官方网站地址 http://livestyle.emmet.io/

这边稍微介绍下安装方法:
首先,你需要使用 Sublime ,这个编辑器是一款非常强悍的编辑器,在编辑器里装上LiveStyle的扩展,安装方法:
按ctrl+shift+p,然后输入controll后选择Install Package,再在弹出的对话框里输出 LiveStyle 确定后即开始安装了,骚等几秒钟即可安装好,若再不会请google。

然后,给浏览器装上插件,Chrome直接在应用商店里即可安装,地址 https://chrome.google.com/webstore/detail/diebikgmpmeppiilkaijjbdgciafajmg

至此,就可以开始使用了。

我这里简单说下使用方法:
在需要调试的页面上打开“开发人员工具”,window下F12键,Mac下option+command+j键,打开后你会发现在原来的控制台最后多了一个LiveStyle的标签,切换到这个标签,然后勾选启用。

这时候你会看到它列出很多CSS喝对于给你选择的下拉框,注意,下拉框里列出的就是你Sublime开启的所有CSS的文件列表。
选择对应关系后(当然也可以自行添加)你就可以开始用它了,整个插件的使用还是很简单的,最关健的就是它是双向实时的,和控制台结合的也非常完美。

挖出来的好东西,Glyphicons Pro Icons 字体图标打包提供下载了,含ttf, woff, eof, svg格式,是矢量的哦

Glyphicons (http://glyphicons.com/) 图标是一个非常好的图标组合。

本图标可以直接替换掉 bootstrap 的icon,详情查看 http://twitter.github.io/bootstrap/base-css.html#icons
也可与著名的 Font-Awesome 配合使用

DEMO在线演示
https://www.queyang.com/demo/glyphicons/

打包下载
https://www.queyang.com/demo/glyphicons/glyphicons.zip

使用方法:
HEAD里加入CSS

<link href="css/glyphicons.css" rel="stylesheet" />

需要使用图标时加入样式即可,比如

<i class="icon-glass"></i>

上一个PNG图
glyphicons

当 test-overflow: ellipsis 遇到 button

超出宽度的文字自动加省略号…的css很简单,但是如果在button上使用这个要注意了,在chrome26及以下不支持,升级到27后可以

.overflow {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width:50px;
  display:inline-block;
}
<button class="overflow">测试文字测试文字</button>
<div class="overflow">测试文字测试文字</div>

在线测试:
http://jsfiddle.net/jonwang/Qhaqw/