你所选择的标签为: CSS3

ublue-ContactsList.js(模拟IOS通讯录列表)

12

January

2016

先祝大家新年快乐!作为2016年的开篇,再祝各位单身狗早日托单,已托单的早日生猴子!

前年接触到个移动端项目,需要把相关门店信息以类似IOS(iPhone)联系人列表的形式呈现。左侧是城市列表,右侧是滑动首字母快速查找。
先是去网上搜了下,发现相关资料少之又少,无法满足项目需求。以我性格,改一个差距甚远的代码,不如在条件范围内动手写一个,也利于后期调试、扩展。

可在项目结束之后,感觉这形式的交互效果今后试用范围和需求会不少,便拎出来改为一个独立的插件。 [ 查看全文... ]

Hello CSS! 和图片说Bye Bye

25

July

2013

在一次聊天中讨论到如何利用CSS来制作一个按钮,不但能自适应宽高,并且还要在不实用图片的情况下,让按钮有类似“外描边”、“内描边”和圆角的效果,并且兼容IE6、IE7。所以今天特地花了点时间来做这个。

当完成以后,发现单纯的按钮有点单调,就想加点ICON来美化一下。可既然按钮都是用CSS来完成,那ICON还用图片来显示,是否有些背道而驰,所以仍然利用CSS属性来给按钮增添我们所需的图标。此时在保证“低配用户”能正常显示的情况下,也加入一些CSS3属性,起到渐进增强的目的,让“高级用户”能够得到更好的呈现效果。

这样做的好处在于按钮和图标颜色都能通过CSS来调整,维护起来比较方便。还有就是CSS的渲染速度比较快,同时还减少了HTTP请求量。

不过,并不是说用CSS必定比图片好,关键还是要根据实际环境和需求,合理使用才是关键。

本例兼容:IE6-10、Chrome、Safari、Opera。 [ 查看全文... ]

jQuery Slider Gallery(滑动相册 带拖动按钮)

12

July

2013

以前做过个项目,需求是做一个图片集(图片相册),其中有个小功能是底部带拖动按钮,拖动按钮相册列表一起滚动。当初单独做个拖动按钮没什么问题,问题不知道怎么让上面的内容随着这滚动条一起等比例的滚动,后来这块是由我同事帮忙写的。所以空下来便研究一下,把思路理清自己写个试试,结果比想象中的要简单很多。

当前版本:v1.2
兼容:IE6+、Firefox、Chrome、Safair [ 查看全文... ]

box-shadow和filter:drop-shadow的区别

06

June

2013

在CSS3中,box-shadow和filter:drop-shadow,都能实现阴影效果。乍看之下几乎没有任何区别:Demo1,可事实上并非如此。

最常见的情况,不知各位有没遇到过在某个带阴影的元素上,通过伪类添加一个箭头。此时会遇到一个蛋疼的情况,那就是所添加的箭头没有阴影。对此,我们通常会理解为这是两个“元素”所以没有很正常,但如果再给这箭头添加阴影,可能会导致两个元素的阴影重叠,影响效果。而filter:drop-shadow的最大优点,就是能够识别一个元素的轮廓和透明度:Demo2 [ 查看全文... ]

杂志翻页效果(基于jQuery CSS3)

14

May

2013

由于自己的工作主要是做移动终端的产品(某阅读App),所以翻页啊什么更是一直接触。本人属于看到新鲜的、好玩的东西就手痒,所以诱使我写了今天的这个例子。

操作:键盘中“←左”“右→”方向键来实现翻页。

为了能带给您最佳的呈现效果,请使用基于webkit内核的浏览器:Chrome、Safari;不支持IE! [ 查看全文... ]

CSS3 3D图书展示 (3D Book Showcase)

31

January

2013

今天的例子,主要实现了:图书的360°翻转和图书打开的过渡效果。

这个效果,是我从一个国外网站上所看到的,由于效果逼真便又开始手痒了起来,自己制作了一个。有时候,光看代码觉得还好,但当自己从0开始制作的时候,顿时变的道路坎坷。期间遇到了很多小BUG和细节上的我问题,不过本人高要求搞标准,看到问题一定要修复的洁癖,这几天一直在不断的修改修改再修改,好在终于制作完成了(T_T)...

虽然花了大把的时间,不过总算有所收获,对CSS 3D Transforms有了一个更为详细的了解过程。平时觉得CSS 3D Transforms并没有那么复杂,想不到实际运用的时候还是会有很多未知的问题在等着你。其中,有个让我非常胸闷的问题。那就是为了偷懒,使用了prefixfree.min.js,导致页面每次加载的时候,都会触发transition-duration,导致有些效果在刷新的时候就执行了一次。我还以为是我哪写错了,寻找了好久... [ 查看全文... ]