Awesome CSS3 Feature

@media.css

/**
 * @media媒体侦测
 * 
 * 在针对不同平台或者屏幕尺寸时启用不同的css样式做到响应式布局
 * 下例先设置了一套主要的css样式，随后在宽度小于900px的设备上覆盖了另一套样式
 **/

/* Style the main content and the sidebar */

.container{
	width:900px;
	margin: 0 auto;
	overflow:hidden;
}

.main-section{
	background-color:#CDEBC4;
	color:#6D8B64;
	width:520px;
	float:left;
	height:500px;
}

.sidebar{
	background-color:#ccc;
	width:350px;
	float:right;
	height:400px;
}

.container p{
	padding-top:100px;
	text-align:center;
}

.note{
	text-align:center;
	padding-top:60px;
	font-style:italic;
}

/* This simple media query makes the column layout
   linear on smaller screens */

@media (max-width:900px){

	.container{
		width:100%;
	}

	.main-section, .sidebar{
		width:auto;
		margin-bottom:20px;
		float:none;
	}

}

calc.css

/**
 * calc()
 *
 * Calculate the width 
 **/
.container{
	width: calc(100% - 40px);
}

colums.css

/**
 * columns:num
 * 使得文本字段的分栏显示
 * 下例使得段落p的文字分成了3栏
 **/
.container{
	width: 500px;
	margin: 0 auto;
}

/* Creating columns is as simple as this: */

.container p{
	-moz-columns:3;
	-webkit-columns:3;
	columns:3;
}

counter.css

/**
 * counter
 *  -counter-reset:name 创建计数器名字并初始化为0，下例中为cnt      
 *  -counter-increment:name 指定计数器，每次累加1，下例中指定先前创建的cnt
 * 配合after和before伪类选择器可以实现多个子集的指定~下面的例子通过计数器
 *  灵活指定了每个span内的文字
 **/
.container{

	/* 创建一个计数器命名为cnt并初始化为0 */
	counter-reset: cnt;

	position:relative;
	text-align:center;
	padding:20px 0;
	width:420px;
	height: 160px;
	margin: 0 auto;
}

/* You can style pseudo elements and give them content,
   as if they were real elements on the page */

.container::before{
	display: block;
	content:'Hover over these items:';
	font-size:18px;
	font-weight:bold;
	text-align:center;
	padding:15px;
}

.container span{
	display:inline-block;
	padding:2px 6px;
	background-color:#78CCD2;
	color:#186C72;
	border-radius:4px;
	margin:3px;
	cursor:default;
}

/* Create a counter with a pseudo element */

.container span::after{

	/* Every time this rule is executed, the 
	   counter value is increased by 1 */
	counter-increment: cnt;

	/* Add the counter value as part of the content */
	content:" #" counter(cnt);

	display:inline-block;
	padding:4px;
}

/* Pseudo elements can even access attributes of their parent element */

.container span::before{
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	content:attr(data-title);
	color:#666;

	opacity:0;

	/* Animate the transitions */
	-webkit-transition:opacity 0.4s;
	transition:opacity 0.4s;
}

.container span:hover::before{
	opacity:1;
}

Gradients.css

/**
 * -linear-gradient 线性渐变
 * -radial-gradient 径向渐变
 * -repeating-linear-gradient 重复线性渐变（可以实现条纹效果）
 * -repeating-radial-gradient 重复径向渐变（同上）
 *
 **/
 
.container{
	text-align:center;
	padding:20px 0;
	width:450px;
	margin: 0 auto;
}

.container div{
	width:100px;
	height:100px;
	display:inline-block;
	margin:2px;

	box-shadow: 0 0 1px rgba(0, 0, 0, 0.5) inset, 0 1px 1px #DDD;
	border-radius:2px;

	color:#666;
	vertical-align: top;
	line-height: 230px;
	font-size: 12px;
}

#el1{
	background:linear-gradient(to bottom, #8dd2d9 , #58c0c7);
}

#el2{
	background:radial-gradient(#77d19e,#46c17b);
}

#el3{
	background:repeating-linear-gradient(-45deg, #de9dd4, #de9dd4 5px, white 5px, white 10px);
}

#el4{
	background:repeating-radial-gradient(#b8e7bf, #b8e7bf 5px, white 5px, white 10px);
}

multiBackground.css

/**
 * 在background属性后通过','将多张背景图区隔开来
 * 下例展示了纯css的方式实现鼠标mouseOver后火箭启动的效果
 **/

.space{

	/* Pass a comma separated list of backgrounds: */
	background:url('http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/rocket_big.png') no-repeat center 70px, url('http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/space.jpg') no-repeat bottom center;

	width:200px;
	height:200px;
	margin: 0 auto;

	border-radius:3px;

	/* Animate the positions of both of the backgrounds */
	transition:background-position 1s;
}

.space:hover{
	/* The same goes for properties like background-position and repeat */
	background-position:35% 20px, top right;
}