一半设计一半前端

animation动画与transition过渡动画有两个明显的区别：1、transition过渡动画只能执行一个时间段的动画，从初始到结束。而且必须有事件触发，比如hover事件，或者添加了新的class属性等。2、animation动画可以分时间段执行，比如第一个时间段执行一段动画，第二个时间段...

用过ps的童鞋几乎都知道ctrl+T自由变换工具，我觉得CSS3 transform就汲取了ps变形的精华，好好地继承了这三板斧精神。 一、transform变形 实现对元素的缩放、移动、旋转、倾斜，分别对应以下几个方法。 注意：变形...

在十年前，我用flash做动画的时候，总结了一下flash的运动规律，主要有形状、大小、位置、角度、颜色、透明度、加减速等变化。没想到移动端异军突起，似乎一夜之间，flash就没落了。想起自己曾经每天必逛的闪吧，在2012年也停止更新，虽然现在网站还在， 但也只是一个象征了，偶尔回去悼念一下，怀念过...

repeating-radial-gradient重复性放射渐变和radial-gradient放射渐变的参数都是一样的，差别在于是否利用渐变单元扩展至整个容器。可以先看看这篇详细介绍放射性渐变的文章↓CSS3教程：background-image之放射性渐变（radial-gradient）详解一...

很早以前写过一篇线性渐变的文章，如果还没有掌握CSS3中的线性渐变，建议先看一下。CSS3教程：background-image之线性渐变（linear-gradient）最in版！时隔一年半，再把它的姐妹篇——重复线性渐变搞定，才算是真正完结了吧。忍不住感叹，How time flies!这个属性...

关于CSS3的边框、圆角、阴影等新特性，在以前的CSS3教程里面已经详细介绍过，在这个系列里面就不再啰嗦，有兴趣的可以直接查看CSS3教程系列。 这篇文章详细讲解一下CSS3多重背景这个新特性，真的是很强大。 一、多重背景的用法 ba...

每次听一些web前端开发大神讲公开课或者看录制的视频，很多时候脱离了UI设计稿，大神们自己做案例的时候，都是用RGB三原色来搭配，或者直接red/blue/yellow/gray等颜色值，看得我眼睛火辣辣的痛，强烈建议web前端们也要把自己的审美，特别是色彩审美提高一下。审美教育必须从娃娃抓起！1、...

很早以前，大家都习惯用像素(px)这个单位来控制大小，但是随着响应式布局和跨平台跨设备的web应用的兴起，很多具有百分比性质的单位其实更灵活。浏览器都允许用户重新设置文字的大小，如图：但是很多网页在body的样式上直接写死了文字大小，比如为14px或者16px，这样用户修改浏览器的字号是没法改变网页...

讲完了伪类选择器，还有一个兄弟叫伪元素的选择器也把它搞定吧。它们都有一个伪字，说明都是不存在的，但是它们也有区别：伪类是一种状态，伪对象是不真正存在于HTML文档中的标签对象，但是它是以html对象的方式虚拟出现，并且可以通过css控制的对象。在最新的CSS3标准中，把伪对象的格式改成了双冒号，即:...

拖了好久的教程终于等到授课结束了，便开始马不停蹄的准备更新~~~今年自学了很多关于UI类的内容，在审美上又有了一些提高，以后做的案例更美美哒！一、CSS3新增伪类选择器在CSS1版本的时候，几乎都是:hover的天下，在CSS2版本的时候，增加了:focus这个常用的，CSS3版本就增加了:nth-...

几年前为了重置样式，或者说为了让元素的浏览器默认样式不影响到页面的效果，我一般使用CSS Reset直接全部重置，当然，我是反对通配符*{margin:0;padding:0}这种写法的，但是CSS Reset全部归零了所有样式，后面有些样式又要自己贱兮兮的重新写回来，感觉也是做了无用功。直到发现了...

在CSS2时代，组合选择器中用的最多的是后代选择器，比如#nav li a等。因为这是CSS1版本就有的，IE6都毫无压力地支持。可是，在CSS2中新增的子元素选择器等，IE6就支持不友好了。不过，现在新版本的浏览器几乎都支持这些选择器了。一、组合选择器选择器举例含义版本element e...

CSS2系列的教程已经更新完毕很久了，今天终于开始了CSS3系列教程的更新，貌似又是一个漫长的过程！还没有看完CSS2系列教程的童鞋麻烦先学习一遍哦，知识都是有体系的，基础没有打好，后面的内容会更吃力。既然是系列教程，那还是要按照体系来，先把最基础的选择器讲完。CSS3新增了很多很棒的选择器，其中属...

以前固定宽度布局的时候，几乎都是固定像素，宽度固定，间距固定，文字大小更是固定像素。可在流布局和响应式布局的催化下，固定宽度，固定大小的布局已经不能满足我们多元化的显示设备，pc端，平板端，手机端，各种尺寸的设备，如果都要重新做一个网页的话，我觉得那不是我们前端人的工作态度，毕竟学会如何偷懒是人的共...

 写完了linear-gradient线性渐变的初级教程后，看到了Lea Veron博客上那个用渐变做的图案集，我瞬间就觉得自己的想象力弱爆了。容我躺躺，再站起来继续战斗！缓过来了，开讲放射性渐变吧。一、放射性渐变原理别人都用ps解释，我却在渐变上独喜欢flash的渐变变形工具。别人都说径...

 long long  ago，我很不喜欢用CSS3的渐变，宁愿一切纯色扁平，因为那时候的渐变TMD太复杂了，版本太多了，真的很想死！今天百度linear-gradient的关键词，翻出的文章几乎都是2011年——2013年的，版本太out了，难道不知道webkit和moz已经手...

很多人拿border-radius就是做点圆角效果，或者弄一个圆形的头像（说的就是以前的自己^_^），但，这些都是没有真正发掘border-radius的价值的！先看看一些别人的效果↓css3的border-radius各种参数设置下的圆角效果CSS3 border-radius圆角各个属性值作用演...

最近忙着暑期补课，在招生路线上，搞得很紧张啊，我的痘痘都多冒了好几颗。关键是一个星期补六天课，还包括三个晚上，觉得日子怎么过得那么慢呢！忙里偷闲，还是继续CSS3的学习之旅吧。讲完了text-shadow，今天我们来八一八box-shadow这个看起来很相似的属性。在之前，也写了一篇box-shad...

在web的早期战场，要实现文字或者图片或者盒的阴影效果，必须启用图片，导致html代码和css代码量都要增加很多，而现在，利用css3新增的text-shadow和box-shadow可以轻松完成阴影的添加，而且效果自然，不逊于ps制作出的效果，唯一的问题就是多层阴影的时候可能渲染要多耗费一点性能。...

在CSS第八课讲解了如何制作水平和纵向导航，然后拖到了第十八课才讲解下拉菜单，为什么呢？因为下拉菜单必须要在明白了相对和绝对定位后才能讲解。如果你没有搞定CSS十六课和CSS十七课，建议你出门左拐下两层楼，先看完相对定位和绝对定位再来学习下拉菜单吧。下拉菜单作为导航目录较多的网站的必备武器，的确可以...