“CSS相关”目录存档

CSS属性选择器驱动的过滤搜索技术

2013年09月16日,星期一

CSS选择器可以用来实现搜索功能。
以前提过CSS3的选择器结合表单元素可以用来控制元素的显隐,这里,类似的,还是CSS3的选择器,居然可以用来过滤和搜索页面元素。有兴趣就进来看看吧,可能会有启发哦!

阅读全文…

小tip:如何在Dreamweaver中使用emmet(ZenCoding)

2013年09月9日,星期一

emmet前身是zen coding. 我是通过接触sublime Text而认识的。
据说,emmet支持各种编辑器,神器Notepad++支持, 神器他哥Sublime Text支持,坦克Eclipse也支持,哟,甚至Dreamweaver也支持!
虽众仙喜欢神器,我却依旧Dreamweaver粉。因此,我就讲讲如何在Dreamweaver中使用emmet.

多多截图,简单易懂,可以错过哦~

阅读全文…

深入理解CSS3 gradient斜向线性渐变

2013年09月6日,星期五

CSS3斜向渐变,看上去好像挺简单。实际上,其远没有你想得那么简单。本文就将逐步揭开其一些复杂、特意的地方。避免您在日后的使用中掉进坑里。
很多自己制作演示图,希望本文的内容能够对您的学习有所帮助。

阅读全文…

贝塞尔曲线与CSS3动画、SVG和canvas的基情

2013年08月30日,星期五

CSS3动画、SVG和canvas都与贝塞尔曲线存在基情关系,哟呵呵呵,本文就将揭示其中不为人知的基情,习惯八卦的你可不能错过哦……

阅读全文…

折腾:2颗星星+纯CSS实现星星评分交互效果

2013年08月7日,星期三

发表评论的时候,我们经常会遇到点击星星做评分的交互。大部分情况下,大家使用的是5个一排5个一排的大块星星背景图实现的。实际上,两颗星星就可以搞定。本文就将展示这个。同时,有人觉得,实际需求还需要记住你选中的星星,CSS搞不定。实际上,这是可以使用CSS实现的。如何实现呢?就是本文要介绍的内容。

本文多技术展示,为便于理解,自制了不少原理示意图,以及必要的源代码展示,总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

letter-spacing+first-letter实现按钮文字隐藏

2013年07月30日,星期二

图片式按钮的文字隐藏看来是大家都比较关注的一个问题(分享讨论、微博转发等可见一斑),text-indent负值为最常用方法,然问题有三……

上周分享,有同行提到另外一个隐藏之法,简称为:font: 0/0 a法,然而也有不足……

我午饭后打瞌睡的时候想到了一个方法,一句话概括就是letter-spacing负值+first-letter伪元素负值实现……

阅读全文…

CSS背景色镂空技术实际应用及进阶

2013年07月27日,星期六

其实在10年的时候,3年前我就介绍过背景色镂空技术,文章名为:“使用CSS实现Photoshop选区效果及应用”。
实现的就是类似下面的效果。虚框是个gif动画背景,水果图片1像素镂空,于是就有效果啦!

今天我翻墙逛twitter的时候,见到了这种技术更为实际的应用……

阅读全文…

first-line伪类实现兼容IE6/IE7的单标签多背景效果

2013年07月5日,星期五

background+filter滤镜可以实现低版本IE浏览器下的多背景效果,::first-line伪元素也是可以实现的,本文就将介绍这种技巧。有表格数据、有源代码展示,有demo页面,有效果截图,总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

小tip: CSS3 animation渐进实现点点点等待提示效果

2013年06月9日,星期日

一个名叫“阿贾克斯”的屌丝男在名为“客户端”的学校上学,为了追女神,下狠心,借了高利贷给女神买Mac. 结果,期限已到,要债的找上门,没办法,只能向身在“服务器端”的父母要钱。但是,要钱是要一定的过程和时间的。他必须想办法向要债的表明,钱正在过来的过程中,否则,可能要债的会认为你在忽悠,直接使大招——”Ctrl+W”,瞬间灭了你,眼不见心不烦。
如果告知钱正在过来的过程中呢?
有人可能如下处理,弄个转转转的小图片告诉要债的,看,我在原地不停地转……

阅读全文…

伪元素表单控件默认样式重置与自定义大全

2013年06月7日,星期五

所有的form表单元素都有或多或少的伪元素可以重置其浏览器内置的UI样式,我光demo就有17个之多,截图30+之多,本文虽参考之作,自己条条亲自验证设置。虽目前价值并未凸显,但是,过段时间,可能就是宝了。

阅读全文…