随笔分类 -  CSS

easy-animation | Animation for Sass
摘要：最近因为项目缘故，勾搭上了Sass。其实在折腾Sass之前，也有简单用过一下Less。但碍于Less提供的一些API实在让人觉得有点多余，用着就是不顺手，最后就不了了之啦。Sass之所以用起来舒服和顺手，很大程度上是因为Compass的存在。Compass提供的足够丰富的API，简直让你觉得写CSS是一种享受。不过...Compass居然不支持animation！对，没错，就是CSS3那个做来做动画的animation！（至少我翻了好久的Compass文档也没找到...）或许你会吐槽说：“啧，自己用Sass的@mixin封装一个animation的方法就搞定啦！”恩，我一开始也是这么想的，然后 阅读全文
posted @ 2014-04-12 00:21 Maple Jan 阅读(2513) 评论(0) 推荐(1)
如何编写更好的CSS
摘要：关于如何编写更高效更优雅的CSS代码，网上已经有很多文章了。但我还是在这里重新总结一下，算是对CSS的温习，也方便以后查找资料。下面开始正文。必不可少的reset.css不同的浏览器之间，对标签都有设置默认样式，所以需要重置这些影响布局统一性的样式。reset.css的代码， 可参考YUI的：http://developer.yahoo.com/yui/reset/如果是移动端的web开发，要清除浏览器默认的点击样式，还需加上：1 *, ::after, ::before{2 -webkit-tap-highlight-color: rgba(0,0,0,0);3 -moz-t... 阅读全文
posted @ 2013-05-12 22:55 Maple Jan 阅读(576) 评论(0) 推荐(0)
获取对象样式属性函数getStyle()
摘要：function getStyle(elem, styleName){ if(elem.style[styleName]){ //获取内联样式 return elem.style[styleName]; } else if(elem.currentStyle){ //IE特有的属性 return elem.currentStyle[styleName]; } else if(window.getComputedStyle){ //DOM标准属性 return window.getComput... 阅读全文
posted @ 2012-11-16 22:57 Maple Jan 阅读(328) 评论(0) 推荐(0)
解决img对大部分CSS样式不支持的问题
摘要：主要参考：http://webdesignerwall.com/demo/css3-image-styles/http://www.qianduan.net/css3-image-styles.html详情到上面两个连接看。主要自己整理一下，顺便把jQuery的代码专为JavaScript，做个备忘。DEMO:http://jsfiddle.net/QkRKC/embedded/result/代码:<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> 阅读全文
posted @ 2012-11-16 22:28 Maple Jan 阅读(266) 评论(0) 推荐(0)