css

A collection of 25 posts

Apr 5, 2014

[译]WTF,HTML&CSS?

绝非是标题党,下面的东西至少让你少踩几次坑,翻译完才发现这篇文章已经有人翻译过了,但是经过对比,还是自以为翻译的要用心点:(。 译自:http://wtfhtmlcss.com/。 —————译文————— 一些HTML和CSS的组合也许会让你忍不住爆粗口,下面是整理出的列表 声明文档模型 如果遗漏文档模型会导致,浏览器使用怪异模式渲染页面,表格,输入框等会显得畸形。 盒模型的计算方式 元素设置了padding,border-width之后width值就会变大,如果要改变这种计算的方式,可以使用box-sizing:border-box来重置。 移动端Safari下的rem单位 移动端Safari支持rem单位,但它在使用其作为媒体查询时候会变得很糟糕,页面中的文字会在不同大小间不停闪烁。 对于现在,解决的方案便是,使用em代替rem。 html { font-size: 16px;

Aug 21, 2013

【译】html&CSS教程

之前做过译文预告,立下宏愿要完全翻译完,现实非常骨感,至今才翻译到第六篇,忍不住了先放到这里做个目录。 术语、语法和介绍 元素和语义化 盒模型和定位 排版 背景和渐变 无序列表,有序列表和定义列表 图片、音频和视频 创建表单 使用表格来组织数据 貌似github page的速度十分不佳,还经常性抽风,好吧,择个黄道吉日换个地方,farbox.com或者自己搭建个…… 最后再插一句,个人认为这个教程和网上流行的其他教程都不一样,由浅入深,适时点缀点高级经验,文字、代码、示例混排,同涉及了常用的HTML5和CSS3部分,可以说这个更像一个教程。

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而折磨自己了。 在我尝试将所有的雪碧图和图片从我的代码仓库中移除的时候,

Mar 30, 2013

译文预告——html,css新手教程

译前碎语——自从之前的css3笔记的系列之后,博客的更新频率便慢了许多,人也浮躁了很多,恰好看到这个教程,共有10篇,一口气读下来感觉很是不错,和网上相思教程的最大不同便是这个先导涉及了html5的部分知识,同时也顺带了很多作者的实践心得,很是值得通读,可谓是老少皆宜:) 译文共有10章,如果时间上不容许也可以读读本博之前的文章html和css简介。 ————-3.29————- 原本计划还是写在这个博客,结果发现有诸多不便,于是便放在了github page上面,绑了域名learn.hicc.me. 抽空简单设计了下样式,还未应用上去,等到译文完成,再做打算把。 [![gitbub pages 样式](https://image.hicc.

Dec 21, 2012

css基线之道

译者注:网页设计布局中一直比较流行网格对齐,但只是针对水平的对齐,很少或者没有涉及垂直对齐,这篇文章很详细的讲解了垂直网格,乃至基线对其的相关,而css3中的多列布局的也使其显得更为重要,因此还是很有必要去了解学习,至少也是一种思路。 ——————————译文——————————- 这或许是因为缺少基线网格的理解和欣赏,更或者是因为基线网格是出了名的难以实现, 迄今为止还没有人拿着蓝图让它成功实现。 有些人甚至认为基线在网络上是多余的,基线作为一种排版术语和网络上的行为,在网络上遵循的规则有别于用于印刷的,line-height和真正的行距之间令人沮丧的差异就是最明显的例子。 目前,无论怎样,让我们先假设基线至少在某种程度上对于来说网页设计师是一种有用的工具。但是它到底是什么样的一种工具,在我们手上有什么可以自由使用的工具来实现它,并且最重要的是,这到底值不值得。 垂直网格和模式识别在数学计算和为实现基线对齐而进行将在的轻移之前,不妨来了解其根本的本质:垂直网格。在了解为什么的同时,也就有了很好的准备和更大的动力来着手解决怎样去实现基线对齐,这个有时让人沉闷而又着迷的问题。 垂直网格,可以简单的理解为涉及到结构高度和垂直排列元素之间的间距,

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 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笔记——resize、nav-index、content属性

一.resize属性 该属性设置浏览器提供哪种尺寸调节机制来允许用户自由缩放浏览器中元素的大小,其支持的属性有: none:不能缩放元素,默认只。 both:允许用户调节元素的宽度和高度。 horizontal:允许用户调节元素的宽度。 vertiacl:允许用户调节元素高度。 inherit:默认继承。 resize属性是css3中一个非常实用的属性,比借助于JavaScript模拟来的轻量,但是进过测试使用resize,若是元素定了高度或者宽度,则缩放不能小于所定的宽度或者高度,而且在视觉上没有明确的指示,也没有鼠标手势,只能从一个角度缩放元素。 二.nav-index属性,定义导航序列号 导航的序列号可以改变页面中元素通过键盘操作获得焦点的顺序。nav-index的值有: auto:浏览器默认的顺序。 :必须为正整数,数字越小越先被导航,若不同元素的数值一样,

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;