前言
形象生动的动画展示box-shadow用法。
简介
box-shadow 属性向框添加一个或多个阴影。这个CSS3的属性很常用,盒阴影、按钮状态等各种地方都有用到,但是你了解并记住各个参数的作用及用法吗?
展示
源码:http://codepen.io/yisi/pen/sDBwC
语法:http://www.w3cplus.com/content/css3-box-shadow
动图:
形象生动的动画展示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的浏览器,这里会提供一个回调的方法,也就是直接显示大页面,没有过渡的效果。
预览:http://xuanfengge.com/demo/201404/Pfold/
源码:https://github.com/xuanfeng/Pfold
通过一个用CSS3绘制的叮当猫页面的展示,辨别你正在使用的浏览器,仅供娱乐~
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提供了一些新的元素和属性,例如<nav>(网站导航块)和<footer>。这种标签将有利于搜索引擎的索引整理,同时更好的帮助小屏幕装置和视障人士使用。让你在拥有更简洁的代码的同时,也有利于SEO。
文章一:http://imsole.net/html5/ele.html
文章二:http://www.xuanfengge.com/html5-structure.html
HTML5是在低版本的浏览器(IE8-)的兼容是有限的,类似很多结构性的标签<header>、<section>、<footer>等在IE8以下不会被识别。有什么方法能实现兼容呢?在高级浏览器能使用上这些标签,增强语义化;而在低级浏览器(包括IE6)上表现不会出错。那就需要引入html5.js这个文件。 查看全文