轩枫阁

前言

形象生动的动画展示box-shadow用法。

简介

box-shadow 属性向框添加一个或多个阴影。这个CSS3的属性很常用，盒阴影、按钮状态等各种地方都有用到，但是你了解并记住各个参数的作用及用法吗？

展示

源码：http://codepen.io/yisi/pen/sDBwC

语法：http://www.w3cplus.com/content/css3-box-shadow

动图：

使用技巧

查看全文

前言

不知大家有没有注意本站的文章页，底部有个白色半圆文章小工具。如果觉得有兴趣学习制作方案，可以继续往下看。

在这个教程中，我会教你使用CSS变形制作圆形导航。 我会带你一步步地创建样式，讲解背后的数学知识和简单的逻辑，让你对这技术有清晰的认识。

正如我提到的，使用CSS变形创建样式，会用到相关的基础数学知识。但是不必担心， 用到的数学非常简单，我会带你一步步地客克服它。

我要指出原技术属于Ana Tudor。我把它修改成我想要效果，这也是我希望你的在教程结束时去做的：对这技术有深入而且清晰的认识，开始查阅资料并且构建自己的样式。

效果

demo：http://tympanus.net/Tutorials/CircularNavigation/

download：http://tympanus.net/Tutorials/CircularNavigation/CircularNavigation.zip 查看全文

前言

这是一个可以使得元素拥有像纸张一样的展开特效来显示更多内容的高度实验性jQuery插件。其中展开方向的步骤和数量都可以用参数指定。

简介

PFold是一个可以使得元素像纸张一样展开效果的高度实验性插件。一个元素使用3D效果来展开展示更多其他内容。这个效果的实现原理是，一个元素有许多层次的折叠，其中每展开一次。元素的高宽都成倍增加，所以可以模仿一张已折叠的纸张的展开效果。

有很多参数提供选择，如每个展开/折叠步骤的方向和步数。

对于不支持CSS 3D transforms 、 transitions的浏览器，这里会提供一个回调的方法，也就是直接显示大页面，没有过渡的效果。

Demo及源码

社招页效果

预览：http://xuanfengge.com/demo/201404/Pfold/

源码：https://github.com/xuanfeng/Pfold

浏览不同配置下的3个demos

• 演示1：以左的方向，底部和右侧三个折叠步骤
• 演示2：根据网格位置与折叠的两个不同方向的折叠步骤
• 演示3：同演示2，项目将在其原始位置居中

查看全文

通过一个用CSS3绘制的叮当猫页面的展示，辨别你正在使用的浏览器，仅供娱乐~

demo

demo1：http://xuanfengge.com/demo/201403/ie/css3-ie.html

demo2：http://xuanfengge.com/demo/201403/ie/ie.html

英文原版：http://purecss3.net/doraemon/doraemon_css3.html（需翻墙）

本页面用于测试各个浏览器对CSS3 的解释效果，最大的叮当猫并非图片，而是纯CSS 。目前各个浏览器对CSS3 的支持效果不一样，其中IE系的浏览器支持效果最差。 查看全文

前言

HTML5新增了很多语义化的标签，赋予网页更好的意义和结构。一个网站要做到一套代码多种终端设备都美观的展现，就需要使用CSS3多媒体查询Media Query做成响应式的。

HTML5标签兼容方案

使用HTML5标记的优势

HTML5提供了一些新的元素和属性，例如<nav>（网站导航块）和<footer>。这种标签将有利于搜索引擎的索引整理，同时更好的帮助小屏幕装置和视障人士使用。让你在拥有更简洁的代码的同时，也有利于SEO。

关于HTML5结构

文章一：http://imsole.net/html5/ele.html

文章二：http://www.xuanfengge.com/html5-structure.html

兼容解决

HTML5是在低版本的浏览器（IE8-）的兼容是有限的，类似很多结构性的标签<header>、<section>、<footer>等在IE8以下不会被识别。有什么方法能实现兼容呢？在高级浏览器能使用上这些标签，增强语义化；而在低级浏览器（包括IE6）上表现不会出错。那就需要引入html5.js这个文件。 查看全文