2013年09月22日 by 张 鑫旭 阅读 166516 次, 今日 5 次
对SVG有所关注的同行应该都知道,IE8-以及Android 2.3默认浏览器是不支持SVG的,实际项目,这些浏览器,至少IE8浏览器还没有到不管不问的时候,因此,在使用视网膜显示友好的SVG同时,我们还要做一点优雅降级,使IE8等考古价值浏览器也能手染余香。
本文在介绍一种新的SVG降级技术的同时,同时把以前css-tricks中提到的技术又总结了一遍。大集合什么的我做喜欢了,以后不要找来找去,因此,这里,我按照个人的理解,配合自己的一些实际测试,分享下。
demo, 截图、表格、源代码什么的应有尽有,希望本文的内容能够对您的学习有所帮助。
阅读全文…
标签: Modernizr, png, SVG, 优雅降级, 渐进增强
发布在 SVG相关 | 29 条评论 »
2013年09月16日 by 张 鑫旭 阅读 57972 次, 今日 2 次
CSS选择器可以用来实现搜索功能。
以前提过CSS3的选择器结合表单元素可以用来控制元素的显隐,这里,类似的,还是CSS3的选择器,居然可以用来过滤和搜索页面元素。有兴趣就进来看看吧,可能会有启发哦!
阅读全文…
标签: :not, 属性选择器, 搜索, 选择器
发布在 CSS相关 | 9 条评论 »
2013年09月9日 by 张 鑫旭 阅读 109319 次, 今日 4 次
emmet前身是zen coding. 我是通过接触sublime Text而认识的。
据说,emmet支持各种编辑器,神器Notepad++支持, 神器他哥Sublime Text支持,坦克Eclipse也支持,哟,甚至Dreamweaver也支持!
虽众仙喜欢神器,我却依旧Dreamweaver粉。因此,我就讲讲如何在Dreamweaver中使用emmet.
多多截图,简单易懂,可以错过哦~
阅读全文…
标签: dreamweaver, emmet, 快捷键, 插件, 空格
发布在 CSS相关 | 31 条评论 »
2013年09月7日 by 张 鑫旭 阅读 88267 次, 今日 3 次
CSS3的世界已经愈发侵犯我们的世界,so,当下,很多设计师设计的东西都是通过CSS3来实现,而不是想办法弄一张图片,例如,一些渐变效果,投影等。
但是,有时候,我们的渐变可能是斜的,或者说起点不是从边缘开始。对于web重构人员来讲,要准确表达设计师的效果就比较头疼了。因为肉眼显然无法精确识别,现有的些工具大多测量尺寸、间距,获取颜色值之类,无法判断渐变的起止点或者投影的距离以及模糊程度。唯一的办法就是……
阅读全文…
标签: css3, CSS3Ps, photoshop, 投影, 插件, 渐变, 设计师, 页面重构
发布在 Design相关 | 11 条评论 »
2013年09月6日 by 张 鑫旭 阅读 159737 次, 今日 9 次
CSS3斜向渐变,看上去好像挺简单。实际上,其远没有你想得那么简单。本文就将逐步揭开其一些复杂、特意的地方。避免您在日后的使用中掉进坑里。
很多自己制作演示图,希望本文的内容能够对您的学习有所帮助。
阅读全文…
标签: css3, CSS渐变, css相关, gradient, linear-gradient, web标准, 旋转, 渐变
发布在 CSS相关 | 25 条评论 »
2013年08月30日 by 张 鑫旭 阅读 210927 次, 今日 3 次
CSS3动画、SVG和canvas都与贝塞尔曲线存在基情关系,哟呵呵呵,本文就将揭示其中不为人知的基情,习惯八卦的你可不能错过哦……
阅读全文…
标签: canvas, css3, cubic-bezier, SVG, transition, 动画, 贝塞尔曲线
发布在 Canvas相关, CSS相关, SVG相关 | 23 条评论 »
2013年08月25日 by 张 鑫旭 阅读 257596 次, 今日 25 次

关于锚点,我3年前就写过关于锚点跳转及jQuery下相关操作与插件,不过内容略浮躁,都是偏表象、偏基本应用层面的东西;这里还是关于锚点,探讨的内容可能更深层次一点。
我们可能就很简单地认为锚点定位的触发是通过点击事件。而实际上,这种顺势而然的理解类似于古人理解为太阳绕着地球转一样,是有失偏颇的。我个人认为,锚点的定位是通过……
长篇,内容丰富,干货较多,希望本文内容能够对您的学习有所帮助!
阅读全文…
标签: :target, animation, hash, transition, URL, 伪类, 动画效果, 延时, 滚动条, 锚点, 锚点跳转, 锚链
发布在 Web综合 | 49 条评论 »
2013年08月7日 by 张 鑫旭 阅读 129798 次, 今日 5 次
发表评论的时候,我们经常会遇到点击星星做评分的交互。大部分情况下,大家使用的是5个一排5个一排的大块星星背景图实现的。实际上,两颗星星就可以搞定。本文就将展示这个。同时,有人觉得,实际需求还需要记住你选中的星星,CSS搞不定。实际上,这是可以使用CSS实现的。如何实现呢?就是本文要介绍的内容。
本文多技术展示,为便于理解,自制了不少原理示意图,以及必要的源代码展示,总之,希望本文的内容能够对您的学习有所帮助。
阅读全文…
标签: :checked, css3, CSS伪类, 交互, 兄弟选择器, 单选框, 星星评分
发布在 CSS相关 | 32 条评论 »
2013年07月30日 by 张 鑫旭 阅读 115465 次, 今日 3 次
图片式按钮的文字隐藏看来是大家都比较关注的一个问题(分享讨论、微博转发等可见一斑),text-indent负值为最常用方法,然问题有三……
上周分享,有同行提到另外一个隐藏之法,简称为:font: 0/0 a法,然而也有不足……
我午饭后打瞌睡的时候想到了一个方法,一句话概括就是letter-spacing负值+first-letter伪元素负值实现……
阅读全文…
标签: ::first-letter, button, IE6, IE7, inline-block, letter-spacing, margin负值, text-indent, 文字, 隐藏
发布在 CSS相关 | 31 条评论 »
2013年07月27日 by 张 鑫旭 阅读 113358 次
其实在10年的时候,3年前我就介绍过背景色镂空技术,文章名为:“使用CSS实现Photoshop选区效果及应用”。
实现的就是类似下面的效果。虚框是个gif动画背景,水果图片1像素镂空,于是就有效果啦!
今天我翻墙逛twitter的时候,见到了这种技术更为实际的应用……
阅读全文…
标签: background-color, color, css sprites, IE8, 字符, 背景透明
发布在 CSS相关 | 28 条评论 »