致设计师:图标图形制作-路径为王

2014年05月13日 by 张 鑫旭 阅读 46873 次, 今日 2 次

楼外雨潺潺,春意阑珊!打球刚回身疲累,行文略懒散。一言蔽之,路径为王,谁知啰嗦甚多天甚晚,急得老婆直叫喊。

本来,下笔之时想大气磅礴说一通,现在看来,也就是不温不火的一句话:“设计师同事们,制作各类图标的时候使用路径绘制啊!会更powerful!”

阅读全文…

CSS3实现鸡蛋饼饼图loading等待转转转

2014年04月25日 by 张 鑫旭 阅读 83964 次, 今日 10 次

今天,要实现一个长任务等待提示效果。然后设计师就把做好的gif效果图给我,就是下面这个,转转转等待提示效果。按照大众做法,我应该是把图片直接按图索骥,调调布局,然后早早回家抱老婆。
但是,我这个人,天生不安分守己。想到是用在客户端,客户端又是用的webkit内核,于是,立马决定使用CSS3来折腾一番……

阅读全文…

CSS3图标图形生成技术个人攻略

2014年04月23日 by 张 鑫旭 阅读 105106 次, 今日 8 次

CSS3图标图形生成技术个人攻略
还在使用Sprite背景实现小图标效果?还是自以为潮流使用font face实现小图标?不妨试试CSS3来实现图标生成效果,更精致的效果,更方便的维护,没有额外的请求,可以Gzip, 同时适配retina视网膜屏幕。

本文就全方位展示了自己在CSS3图标图形生成上的一些技术、攻略心得。精良的demo,完整的兼容解决展示,详尽的各种图形实现分析,多多截图,必要的源代码展示。总是,希望本文的内容能够对你的学习有所帮助。

阅读全文…

支付宝捐赠历史-感谢大家的支持与鼓励

2014年04月23日 by 张 鑫旭 阅读 65935 次, 今日 1 次

我花了几个晚上的时间,把这两年来,对我博客有所捐赠的朋友数据全部整理出来了,以表达自己的感激之情。

阅读全文…

自适应表格连续字符换行及单行溢出点点点显示

2014年04月10日 by 张 鑫旭 阅读 43621 次, 今日 3 次

我们应该都知道如果让连续的英文数字字符换行显示以及让单行文字超出的时候使用点点点表示(Chrome目前有属性可以让多行文字点点点,且点的位置是在中间)。
但是,如果是自适应的表格中,我们要实现上面两个效果,可能就会遇到挫折,你会发现屡试不爽的方法现在完全被无视了!。。。

阅读全文…

纯CSS实现帅气的SVG路径描边动画效果

2014年04月8日 by 张 鑫旭 阅读 214772 次, 今日 58 次

本文属于简单实用的基础技术科普。有丰富的gif动画演示,有demo,有截图以及必要的源代码展示,还有官方文档释义。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

小tip: CSS动态实现文本框清除按钮的隐藏与显示

2014年03月28日 by 张 鑫旭 阅读 121917 次, 今日 7 次

search类型搜索框,设计师常常会设计一个叉叉图标,表示用户点之久可以清除输入的内容。

这是不错的体验!
当前现代浏览器中,Chrome浏览器下type=search的输入框会有清除按钮的动态呈现,不过搜索input框尺寸不太好控制(padding无视);FireFox浏览器貌似任何类型的输入框都无动于衷;IE10+浏览器貌似任何输入框都会出现清除按钮,但是长得略微粗糙了点,设计师同学接受不了。
貌似不和谐了,咋办?传授个新技能,借助HTML以及CSS,来模拟清除按钮可动态呈现的搜索框……

源代码、demo页面、截图一个不少,希望本文的内容能够对您的学习有所帮助。

阅读全文…

PhoneGap/Cordova控制iOS7状态栏的显隐/颜色

2014年03月20日 by 张 鑫旭 阅读 71782 次, 今日 5 次

虽说本文的主要内容是PhoneGap/Cordova控制iO7S状态栏的显示、隐藏与颜色,但是呢,没忍住,又说了很多其他东西,想法、感悟、吐槽等,好的坏的,杂的纯的。百花齐放百家争鸣,言论自由思想才会进步。这些似乎比技术本身更有价值,你觉得呢?

阅读全文…

quickLayout.css-快速构建结构兼容的web页面

2014年03月13日 by 张 鑫旭 阅读 104883 次, 今日 8 次


quickLayout为自己这些年来CSS积累最强代表作,可以说是多年来压箱底的东西。自己强力推荐,年度个人力作。如果您是有经验的重构,这个东西会让你如虎添翼,蓬荜生辉。超长篇,但没有什么废话,有图有代码有视频。希望本文的内容能够对您的学习有所帮助。

阅读全文…

小tip: CSS3与文字渐变光影流动动画效果实现

2014年02月28日 by 张 鑫旭 阅读 51324 次, 今日 6 次

现在的我,身在一个设计团队,自然要与各种视觉、效果打交道。啊,今天交互提出了一个效果:“可不可以让文字像脱衣服一样的,光影闪啊闪~” “当然可以啊!”虽然玩具多年未碰,但是有哪些玩具,自己还是清楚的,于是我很干脆的答应加这个效果。

实际上,之前就有类似效果实现,但是呢?之前的实现有一个不足,其渐变背景是图片实现的(10年时候CSS3渐变乃星星小火)。想想现在都什么年代了,渐变还要使用图片,简直弱爆了,而且还是webkit家族浏览器!显然,有改进的余地。于是……就有了有demo有截图还有源代码展示的本文了。

希望本文的内容能够对您的学习有所帮助。

阅读全文…