“CSS相关”目录存档
2014年06月9日,星期一
我们平时一般都使用clear:both
清除浮动,貌似就干这一件事件。用得很开心,但似乎理解上懵懵懂懂,我其实也是,早年的时候,测试过CSS clear:left/right
,虽知其作用(80%确定而已),但不知其机理。
有必要再次整理下,温故知新。可能很多同行都没有注意left/right
值,或者可能理解上含糊,或者不知道其实际意义在何处。So, follow me…
阅读全文…
标签:clear, css相关, float, 垂直环绕布局, 布局
发布在 CSS相关 | 52 条评论 »
2014年03月28日,星期五
search类型搜索框,设计师常常会设计一个叉叉图标,表示用户点之久可以清除输入的内容。
这是不错的体验!
当前现代浏览器中,Chrome浏览器下type=search的输入框会有清除按钮的动态呈现,不过搜索input框尺寸不太好控制(padding无视);FireFox浏览器貌似任何类型的输入框都无动于衷;IE10+浏览器貌似任何输入框都会出现清除按钮,但是长得略微粗糙了点,设计师同学接受不了。
貌似不和谐了,咋办?传授个新技能,借助HTML以及CSS,来模拟清除按钮可动态呈现的搜索框……
源代码、demo页面、截图一个不少,希望本文的内容能够对您的学习有所帮助。
阅读全文…
标签::valid, css3, HTML5, required, 伪类, 表单
发布在 CSS相关 | 29 条评论 »
2014年03月13日,星期四
quickLayout为自己这些年来CSS积累最强代表作,可以说是多年来压箱底的东西。自己强力推荐,年度个人力作。如果您是有经验的重构,这个东西会让你如虎添翼,蓬荜生辉。超长篇,但没有什么废话,有图有代码有视频。希望本文的内容能够对您的学习有所帮助。
阅读全文…
标签:CSS库, CSS架构, quickLayout, 框架
发布在 CSS相关 | 43 条评论 »
2014年02月28日,星期五
现在的我,身在一个设计团队,自然要与各种视觉、效果打交道。啊,今天交互提出了一个效果:“可不可以让文字像脱衣服一样的,光影闪啊闪~” “当然可以啊!”虽然玩具多年未碰,但是有哪些玩具,自己还是清楚的,于是我很干脆的答应加这个效果。
实际上,之前就有类似效果实现,但是呢?之前的实现有一个不足,其渐变背景是图片实现的(10年时候CSS3渐变乃星星小火)。想想现在都什么年代了,渐变还要使用图片,简直弱爆了,而且还是webkit家族浏览器!显然,有改进的余地。于是……就有了有demo有截图还有源代码展示的本文了。
希望本文的内容能够对您的学习有所帮助。
阅读全文…
标签:background-clip, background-size, text-fill-color, 文字渐变, 遮罩
发布在 CSS相关 | 9 条评论 »
2013年11月29日,星期五
理论上,CSS3 box-shadow盒阴影可以生成任意的图形,小月格格的靓照,含韵格格的靓照那都不在话下。本文且听后宫茶话会上关于CSS3 box-shadow盒阴影图形生成技术的分享。截图、demo源代码示意,美女靓照一个都不少。说不定,你会有别样的收获哦!【挑眉】
阅读全文…
标签:box-shadow, canvas, css3, font-face, getImageData, ie9, SVG, 伪元素, 图形生成, 盒阴影, 视网膜显示器
发布在 Canvas相关, CSS相关 | 37 条评论 »