堆叠按钮

相信大家业已了解CSS3 icon font的诸多优势,在之前的文章中较为详细的介绍了icon font的制作和应用,但美中不足的是制作出的按钮icon只能为单色,而且受限与icon矢量缩放的特新,在单个字体中的形状也不会太复杂,今天的译文或许可以提供一种新的思路。 英文地址:http://conor.cc/posts/icon-stacks ————–以下为译文————————————— 结合不同的icon font 字形可以创建组合式的超级icon(mega-icon)。 如果你最近才加入设计师和开发者的队伍中并在使用icon font,那么你很可能正处在蜜月期。对于我来说,在我第一次在App中使用这些甜蜜而可伸缩的字形的时候,icon »

css3基础笔记

从7月份入职,开始写css3笔记的系列文章,保持一周一篇的进度,到现在这个系列的基本算是完了,这个系类的文章大多都是很粗浅的把css3乃至css2的知识串了一边(基本包含了语法、对应的示例、以及个人的总结性经验),定位为一个适合新手的可快速查阅的css3系列,此目录后续也会陆续细化完善。 HTML简介 css简介 css选择器以及各个浏览器对css3选择器的支持 文本相关属性:text-shadow、text-overflow、文本换行、文本模块text-module其他属性 盒模型相关属性:弹性盒模型介绍以及示例、边框border属性、背景background属性、溢出overflow、盒模型解析模式box-sizing、resize、nav-index、 »

css3笔记——2D动画

css动画中主要包括变形、转换和动画,有2D和3D两部分,首先是2D的动画部分。 一、css变形Transformation W3C中有2D变形和3D变形的的草案中定义了变形属性值有none和transform-function,transform-function包括: matrix():定义了矩阵变换,即基于X和Y坐标重新定位元素的位置(较为复杂,其使用在次暂不探讨,可点此查看详情)。 translate():移动元素,基于X和Y坐标重新定位元素,值应该为两个,第一个表示水平方向,为正数时基于右边框向右移动,第二个值表示垂直方向,当为正数时基于上边框向下移动。若只有一个值的情况下表示水平移动。 scale():缩放元素对象,可以使任意元素对象尺寸发生变化, »

css3笔记——渐变gradients

渐变无疑对网页的呈现有着很好的帮助,webkit最早支持渐变,随后火狐也开始支持渐变,但是语法上和webkit的不同,之后css3中也将渐变列入标准,语法与FF的相似。 之前的浏览器都不支持标准的写法,因此稍微早点的博客或者书籍都是分开描述两者的实现,但是现在webkit优化了渐变属性,而Firefox16之后也支持了标准的写法,因此本文主要讨论下css3规范中的写法。 渐变可以分为两类,线性渐变(linear)和径向渐变(radial)两种,css3渐变属性中值比较多,但是稍稍想想便可提炼出来渐变需要的值,渐变方式 ,始末点,变化着的颜色,以及颜色间的距离(步长),如果是线性渐变则还有渐变的角度。如果用过ps的渐变对此应该不难理解。 »

web font实践

因为css3的流行,@font-face也被越来越多的人熟知,因为其灵活配置的特点想将其用到公司的项目,于是有了这篇文章。 font-face应用的障碍之一便是其字体前期的制作成本较高,因此本文想简单分享下自己的制作经验。 首先需要的软件有adobe illustrator 和fontlab,fontlab在网上的版本大多不是最新版,因此在此也分享下该软件最新版本的下载,免去大家的麻烦,软件(5.2版本)+破解补丁下载,安装软件之后运行破解补丁就可以顺利破解(杀毒软件或许会报毒,请忽略)。 下面以新浪微博的图标为例,介绍下制作过程。 一,使用Ai将所要新浪微博图标的路径都勾了出来,如下图 新浪微博icon路径 2. »