SVG图标颜色文字般继承与填充

2014年07月22日 by 张 鑫旭 阅读 123451 次, 今日 69 次

前文介绍了SVG Sprites身材和内涵,顺大便客观的评价了SVG Sprites比font-face高几层楼的事实(看看外国同行的对比)。但是呢,人总是这样,总是容不得说自己现在使用东西的不好。于是乎,不经意间戳动了点小小的自尊。导致文章也没细读就大肆反驳:SVG图标颜色要内联设置,不像font-face那样好控制!而且还不只一位兄弟这么说。
其实呢,我并不忍心说实话的:SVG图标颜色控制要比font-face有过之而无不及……

阅读全文…

未来必热:SVG Sprites技术介绍

2014年07月10日 by 张 鑫旭 阅读 188278 次, 今日 125 次

未来必热:SVG Sprite技术介绍
本文是本月文章的压轴篇,介绍SVG Sprite技术的。内容丰富大而全,面向各个人群,无论你是开发还是设计,还是纯正的前端,都可以在web中使用SVG Sprite技术,比CSS Sprite技术应用还要简单。可谓老少皆宜,出门旅行,必备佳肴。好了,就不调皮了,截图比较多,内容也不少,总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

HTML5 <template>标签元素简介

2014年07月8日 by 张 鑫旭 阅读 181454 次, 今日 21 次

<template>标签元素基本上可以确定是2013年才出现的新的标签元素,主流的Chrome以及Firefox浏览器很快就支持了这个标签,可见这个标签的出现还是呼声很高的。作为有特性行为表现的标签,其中还是有很多tips可以共享的,本文就将简单介绍下<template>标签元素的一些特异之处,有demo,有源代码展示,希望本文的内容能够对你的学习有所帮助。

阅读全文…

小tip: SVG和Canvas分别实现图片圆角效果

2014年06月30日 by 张 鑫旭 阅读 64194 次, 今日 13 次

实现图片圆角的方法很多,图片覆盖,CSS3圆角,SVG, Canvas都可以实现,前两个大家可能都比较熟悉,这里,着重介绍后面2种技术实现。希望在某一时刻对有需要的同行能有帮助。必须的,有demo, 有截图,有源代码展示。

阅读全文…

SVG+JS path等值变化实现CSS3兴叹的图形动画

2014年06月24日 by 张 鑫旭 阅读 135371 次, 今日 36 次

数值变化驱动的SVG图形动画

展示SVG动画的优势与潜力,介绍SVG动画实现的基本理论,Snap.svg.js进一步的实例应用展示。多多demo,多多帅气的效果,多多通俗易懂的解释。希望本文的内容能够对您的学习有所帮助。

阅读全文…

深度掌握SVG路径path的贝塞尔曲线指令

2014年06月12日 by 张 鑫旭 阅读 239651 次, 今日 103 次

如题,本文就是讲解SVG路径path的贝塞尔曲线指令的,不过,除了技术之外,还吐槽了很多自己的思考,自己的想法,对行业对前端的一些看法与认知,希望可以引起一些共鸣或争议。当然,主要内容还是讲得很详尽的,截图,demo,源代码展示一个都少不了。希望本文的内容能够对您的学习有所帮助!

阅读全文…

准确理解CSS clear:left/right的含义及实际用途

2014年06月9日 by 张 鑫旭 阅读 106343 次, 今日 12 次

我们平时一般都使用clear:both清除浮动,貌似就干这一件事件。用得很开心,但似乎理解上懵懵懂懂,我其实也是,早年的时候,测试过CSS clear:left/right,虽知其作用(80%确定而已),但不知其机理。

有必要再次整理下,温故知新。可能很多同行都没有注意left/right值,或者可能理解上含糊,或者不知道其实际意义在何处。So, follow me…

阅读全文…

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

2014年05月13日 by 张 鑫旭 阅读 49243 次, 今日 12 次

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

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

阅读全文…

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

2014年04月25日 by 张 鑫旭 阅读 89738 次, 今日 12 次

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

阅读全文…

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

2014年04月23日 by 张 鑫旭 阅读 109302 次, 今日 15 次

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

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

阅读全文…