现代 CSS

box-shadow

css3时钟

作者：结一 日期：2012-09-13 点击：1380
css3
animation
transform
box-shadow
提高篇
css3 clock
本实例纯css3打造，因为没有获取当前时间，所以初始化时间为12点，打开即开始走动。圆盘使用border-radius做成，然后一个:before生成中间的圆点，一个:after生成倒影。至于三个指针就是关键了，其高度及宽度不等，绝对定位于中间的同一圆点，然后以这点为坐标旋转，旋转使用动画一样，只是旋转一周的持续时间不一样，秒针为60s，分针为3600s，时钟为84600s。
阅读全文

CSS3制作3D立体分页导航

作者：大漠 日期：2012-09-13 点击：589
css3
box-shadow
pager
3D
Buttons/Icons
入门级
CSS3制作3D立体分页导航
收集了很多DEMO和相关的PSD,于是想能不能通过自己学的CSS3相关技巧，将有关PSD图效果转换成CSS3效果。灵光的冲动，让我开始做起了这件事情，今天开始我会开始制作一些CSS3的DEMO效果，而这些DEMO效果都是由对应的PSD转换过来的，换句话说，如果你不考虑兼容IE低版本的话，这些DEMO你都可以使用。那我们开始吧
阅读全文

纯css3列表切换动画

作者：结一 日期：2012-09-05 点击：2700
css3
transition
:checked
box-shadow
提高篇
纯css3列表切换动画
本实例的思路和之前说的用radio来控制手风琴效果有异曲同工之效。主要应用radio单选按钮来确认状态，然后对这个状态下的兄弟元素进行css控制。当然这里不比手风琴有几个radio就有几个内容，这里是一个内容，所以所有的radio应该和这个内容是兄弟元素，以便使用兄弟元素选择器~。然后对各个状态下的内容进行css控制，或显示或隐藏或浮动等。
阅读全文

css3选项卡标题样式设计3

作者：结一 日期：2012-09-02 点击：896
css3
Tabs
transform
:before&:after
box-shadow
提高篇
css3选项卡标题样式设计3
这是第三个tabs的标题设计了，这次应用的又跟上两个不是一样的技术。这里用了:after来生成了，然后对生成的内容水平方向上扭曲skewX来达到斜切的效果。当然li的margin距离要刚好等于生成a:after生成内容的宽度。然后就是注意box-shadow了。注意火狐14.0更新后，skew得写成skewX或skewY分别表示水平方向和竖直方向偏移，这里它的demo用的是skew，所以火狐下并没有斜切的效果，我们可以firebug手动添加。
阅读全文

css3选项卡标题样式设计2

作者：结一 日期：2012-09-02 点击：206
css3
Tabs
:before&:after
gradient
box-shadow
提高篇
css3选项卡标题样式设计2
本实例的tabs斜角效果跟border没有一毛钱关系了，呵呵也跟:before和:after没有关系，却是运用了渐变背景制作的。给了一个角度的渐变，由transparent到红色的220度渐变。然后设置了一个box-shadow的左右偏移为负，使右侧看起来颜色比较深。
阅读全文

CSS3 Full Background Slider

作者：大漠 日期：2012-09-01 点击：378
css3
slidershow
fullbackground
box-shadow
animation
提高篇
CSS3 Full Background Slider
今天在365psd上看到一个psd效果，很有意思，想着能不能转成web页面，这问题想得太SB了，然后接着想，转成带有css3的动画效果。那转成什么呢？思来想去做了一个全屏背景图的幻灯片效果。虽然是一个简单的demo，但里面集合了CSS3众多属性，从伪结构选择器，到圆角，阴影以及动画等。
阅读全文

纯css3手风琴效果2

作者：结一 日期：2012-08-29 点击：3637
css3
Accordion
:checked
gradient
box-shadow
提高篇
纯css3手风琴效果2
这三个案例实际上就是用了两种技术，一个是radio来控制，一个是checkbox来控制，用radio表示只有一个可以展开（radio的只有一个是选中状态），而checkbox则表示可以同时展开多个（checkbox可以多个选中）。其实道理都是一样的，对radio或者checkbox的选中状态进行判断，然后决定其下面的兄弟元素的高度。
阅读全文

css3加载动画2

作者：结一 日期：2012-08-27 点击：1529
css3
loading
animation
box-shadow
提高篇
css3加载动画2
其实分析每个css3的案例动画，首先做的应该是先把动画停下来，了解下初始是怎么样的。如这个我们一开始看到这么绚的动画加载效果，一般都认为比较难，但是先把animation这个属性通过firebug禁用后，发现原来原理并不是很复杂，只是运用了border，border-radius和box-shadow，然后给就是rotate的animation。第二个和第一个原理一样，只是设置的border-color四个值不一样罢了。而第三个则是使用不同的延迟时间引发scale的动画。至于暂停按钮则是通过js来添加stop这个class，stop则设置了animation-play-state:paused;
阅读全文

css3内部虚线框设计

作者：结一 日期：2012-08-23 点击：3122
css3
dashed
outline
box-shadow
:before&:after
入门级
css3内部虚线框设计
第一个使用的是border为虚线，再加上box-shadow来模拟外面的框；第二个使用的:before方法生成一个虚线框，这里注意的是生成的内容定位上下左右各为3px，确定了这个生成内容的大小,另外需要注意的是注意before内容的层级，小心覆盖了你里面的内容，你可以设置background为一个颜色，就知道层级了；第三个是使用的是border和outline方法。outline不支持单边设置，也不支持圆角，所以比起border来outline很是不足啊。
阅读全文

页面

返回顶部