css3

A collection of 18 posts

Mar 30, 2013

堆叠按钮

相信大家业已了解CSS3 icon font的诸多优势,在之前的文章中较为详细的介绍了icon font的制作和应用,但美中不足的是制作出的按钮icon只能为单色,而且受限与icon矢量缩放的特新,在单个字体中的形状也不会太复杂,今天的译文或许可以提供一种新的思路。 英文地址:http://conor.cc/posts/icon-stacks ————–以下为译文————————————— 结合不同的icon font 字形可以创建组合式的超级icon(mega-icon)。 如果你最近才加入设计师和开发者的队伍中并在使用icon font,那么你很可能正处在蜜月期。对于我来说,在我第一次在App中使用这些甜蜜而可伸缩的字形的时候,icon font就像是上帝送来的礼物。向混乱的雪碧图,farewall中的PNG,GIF,JPG图片说再见把,我再也不会为背景图片的位置是-1384px还是-1385px而折磨自己了。 在我尝试将所有的雪碧图和图片从我的代码仓库中移除的时候,

Dec 16, 2012

css3基础笔记

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

Dec 14, 2012

css3笔记——2D动画

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

Nov 24, 2012

css3笔记——渐变gradients

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

Nov 17, 2012

web font实践

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

Nov 12, 2012

css3笔记——columns多列布局

css2.1中并没有专门的布局属性,因此css3种新增了多列自动布局的功能,Multi-colum Layout。 Columns属性——定义多列布局 columns是多列布局的基本属性,具体定义多列布局时的属性有: column-width属性可以定义每列的宽度,其值有 | auto。 column-count属性定义了对象的列数,其值为 | auto 。 column-gap属性定义了列与列之间的间距,其值有normal | 。 column-rule属性定义了每列之间边框的属性,其用方式与border使用一致。 column-span属性定义了元素的跨列显示或者单列显示,其值有 1 | all。 column-fill属性定义了栏目的高度是否统一,其值有auto | balance,值为auto的时候各列的高度对着其内容的变化而自动变化,而值为balance时,各列的高度将会根据内容最多的那一列的高度进行统一。 其实列css为: .box { column-count:3;

Nov 3, 2012

css3笔记——外轮廓线outline属性

css2.1规范中便定义了元素的外轮廓线,但是浏览器的支持并不好,而在css3中增强了outline的属性,其扩展之后的属性有: :定义轮廓边框的颜色。 :定义轮廓边框的样式。 :定义轮廓边框宽度。 :定义轮廓边框偏移位置的数值。 inherit:默认值,继承。 当然其派生为四个外轮廓线属性: outline-color,该属性定义轮廓边框的颜色,除了支持所有的颜色外,还支持关键字invert,invert对屏幕上的像素点进行反转,而无论背景色是什么,主要用来保证焦点框的可见。 outline-style,定义了轮廓边框的样式,该属性的值和相应的用法和border-style相同,有none、dotted、dashed、solid、double、groove、ridge、inset、outset。但是hidden值并不是一个合法的轮廓样式。

Oct 29, 2012

css3笔记——盒模型解析模式,box-sizing属性

css3规范中新增了UI(User-Interface)模块,用来控制互用界面的呈现方式。符合标准的现代浏览器中盒子的width和height属性代表的是盒子的content区域,而在ie7以下的浏览器中对元素的呈现方式中border和padding都包含在width和height中,这样就造成了混乱,因此css3中新增了box-sizing属性来定义盒模型的尺寸解析方式,其值有: content-box:该属性维持css3以前盒模型的组成模式,即元素width/height=border+padding+content。 border-box:标准值,即元素width/height=content。 首先css的代码为: .box { width:250px; height:250px; border:5px solid #690; padding:10px;

Oct 29, 2012

css3笔记——溢出内容处理,overflow属性

overflow属性定义当一个块级元素溢出元素的框(它作为内容的包含块)时候,是否裁切显示。在css3中扩展了overflow属性,overflow-x属性定义了水平方向上的裁切,overflow-y定义了垂直方向上的裁切,它们的值有: visible:默认值,不裁切内容,也不添加滚动条,元素将被裁切为包含对象的窗口大小,且clip属性设置无效。 auto:在需要时裁切并添加滚动条,该属性为body和textarea元素的默认值。 hidden:不显示超出元素尺寸的内容。 scroll:当内容超出元素尺寸时,overflow-x显示为横向滚动条。overflow-y显示为纵向滚动条。 no-display:当内容超出显示元素的尺寸的时候不显示元素,此时类似添加了display:none的声明,未获得浏览器支持(在文章发表时,可查看demo)。 no-content:当内容超出元素尺寸时不显示元素,此时类似添加了visibility:

Oct 21, 2012

css3笔记——增强的background属性

css3中增强了background属性,其值为[,]*。css3中容许使用多个背景图像,之间用逗号分割,表示为一个背景图像层,每个背景图像层中都可包含 [background-image] | [background-color] | [background-origin] | [background-clip] | [background-repeat] | [background-size] | [background-position] | [background-attachment] 各自的意思为: background-image:定义背景图片。 background-color:定义背景颜色。 background-origin:定义背景的显示区域。 background-clip:指定背景的裁剪区域。 background-repeat:设置背景图像是否以及如何重复铺排。 background-size:设置背景图片的大小。 background-position:设置背景图片的位置。 background-attachment:设置背景图像的显示方式。 css3中新增的background子属性为background-origin,background-clip和background-size,

Sep 24, 2012

css3笔记——边框border

一,border-color css1中便有border-color属性,css3中增强了其功能,其值为,支持多个颜色设置,如果设置n个颜色值,且边框宽度为n像素,那么每个颜色占1个像素,依次显示在边框上。若边框宽度像素数量大于颜色个数,则除最后一个颜色外,其余颜色占1个像素的宽度,其余宽度被最后一个颜色占有。 border-color派生的子属性: border-top-color border-right-color border-bottom-color border-left-color 而对于边框的宽度不同情况如下图示 [![border](https://image.hicc.pro/wp-content/uploads/2012/09/border1.jpg "border1")](https:

Sep 3, 2012

css3笔记——弹性盒模型(Flexible Box Module)简介

css3在css2的基础上新增了盒模型的属性,提出了弹性盒模型的概念。 首先使用弹性和模型(Flexible Box Module),需要定义父容器display的属性,但因为Flexible经常变动具体的属性值有所不同(参考): 2009年以前display为box或者inline-box、box-{*}。 2011年,设置display为flexbox或者flex()函数。 2012-2013最新的则是display:flex; 或者flex-{*}。 注:弹性盒模型只有chrome和FF支持。 box-orient定义盒子的布局取向 box-orient定义了盒子内元素的流动布局方向,属性有 horizontal 从左到右在一条水平线上显示子元素。 vertical:从上到下在一条垂直线上显示子元素。 inline-axis:默认值,盒子元素沿着内联轴显示子元素。 block-axis:沿着块轴显示子元素。 注:inline-axis和block-axis是根据书写模式来决定。