我们平时一般都使用clear:both清除浮动,貌似就干这一件事件。用得很开心,但似乎理解上懵懵懂懂,我其实也是,早年的时候,测试过CSS clear:left/right,虽知其作用(80%确定而已),但不知其机理。
有必要再次整理下,温故知新。可能很多同行都没有注意left/right值,或者可能理解上含糊,或者不知道其实际意义在何处。So, follow me…
我们平时一般都使用clear:both清除浮动,貌似就干这一件事件。用得很开心,但似乎理解上懵懵懂懂,我其实也是,早年的时候,测试过CSS clear:left/right,虽知其作用(80%确定而已),但不知其机理。
有必要再次整理下,温故知新。可能很多同行都没有注意left/right值,或者可能理解上含糊,或者不知道其实际意义在何处。So, follow me…
今天,要实现一个长任务等待提示效果。然后设计师就把做好的gif效果图给我,就是下面这个,转转转等待提示效果。按照大众做法,我应该是把图片直接按图索骥,调调布局,然后早早回家抱老婆。
但是,我这个人,天生不安分守己。想到是用在客户端,客户端又是用的webkit内核,于是,立马决定使用CSS3来折腾一番……
我们应该都知道如果让连续的英文数字字符换行显示以及让单行文字超出的时候使用点点点表示(Chrome目前有属性可以让多行文字点点点,且点的位置是在中间)。
但是,如果是自适应的表格中,我们要实现上面两个效果,可能就会遇到挫折,你会发现屡试不爽的方法现在完全被无视了!。。。
search类型搜索框,设计师常常会设计一个叉叉图标,表示用户点之久可以清除输入的内容。
这是不错的体验!
当前现代浏览器中,Chrome浏览器下type=search的输入框会有清除按钮的动态呈现,不过搜索input框尺寸不太好控制(padding无视);FireFox浏览器貌似任何类型的输入框都无动于衷;IE10+浏览器貌似任何输入框都会出现清除按钮,但是长得略微粗糙了点,设计师同学接受不了。
貌似不和谐了,咋办?传授个新技能,借助HTML以及CSS,来模拟清除按钮可动态呈现的搜索框……
源代码、demo页面、截图一个不少,希望本文的内容能够对您的学习有所帮助。
现在的我,身在一个设计团队,自然要与各种视觉、效果打交道。啊,今天交互提出了一个效果:“可不可以让文字像脱衣服一样的,光影闪啊闪~” “当然可以啊!”虽然玩具多年未碰,但是有哪些玩具,自己还是清楚的,于是我很干脆的答应加这个效果。
实际上,之前就有类似效果实现,但是呢?之前的实现有一个不足,其渐变背景是图片实现的(10年时候CSS3渐变乃星星小火)。想想现在都什么年代了,渐变还要使用图片,简直弱爆了,而且还是webkit家族浏览器!显然,有改进的余地。于是……就有了有demo有截图还有源代码展示的本文了。
希望本文的内容能够对您的学习有所帮助。
“pointer-events:none提高页面滚动时候的绘制性能?”注意标题后面的问号。一般这种标题都说明作者要否定这个结论。我这里是否定呢还是坑定呢?不告诉你,你自己去寻找答案。
本文不单纯介绍技术,还探讨了关于“真理”的话题,若有兴趣,一起加入讨论吧。用真理来解决与研究技术问题。相信本文的内容不会让你失望的。
理论上,CSS3 box-shadow盒阴影可以生成任意的图形,小月格格的靓照,含韵格格的靓照那都不在话下。本文且听后宫茶话会上关于CSS3 box-shadow盒阴影图形生成技术的分享。截图、demo源代码示意,美女靓照一个都不少。说不定,你会有别样的收获哦!【挑眉】
前段时间,iOS7不是瓜未熟就落地了嘛,然后捡瓜的人很多,然后国内外开始了各种探讨,从界面到动画,从兼容到实现等。其中,“毛玻璃”一次梆梆出世,一些爱折腾的弄潮人就可以琢磨怎么用CSS实现之,国内有之,国外也有之……
虽然本文标题也有“毛玻璃”二字,sorry,是“三字”。但是,并不是介绍如何实现毛玻璃效果的,而是介绍毛玻璃效果实现的基础——模糊。哈哈,恕我取巧,借用“毛玻璃”之词,沾沾喜气,散发芳气;蜂飞蝶舞,围观博主。
本文很单纯,就是图片模糊效果的实现。demo、源代码、截图、拓展以及御用模特应有尽有,希望本文的内容能够对您的学习有所帮助!