CSS3のサンプル

gistfile1.css

@import url(http://fonts.googleapis.com/css?family=Russo+One);

#wrapper {
	background: hsla(30, 20%, 95%, .25)
		-webkit-linear-gradient(45deg, hsla(0, 0%, 0%, 0) 0px,
		hsla(0, 0%, 0%, 0) 1px, hsla(0, 0%, 0%, .1) 2px, hsla(0, 0%, 0%, .1)
		3px );
	text-align: center;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-box;
	display: -o-box;
	display: box;
	-webkit-box-align: center;
	-moz-box-align: center;
	-ms-box-align: center;
	-o-box-align: center;
	box-align: center;
	font-family: 'Russo One', sans-serif;
	background: url(../img/background.jpg) no-repeat center center;
	position: relative;
	z-index: 0;
	text-align: center;
	font-weight: bold;
	margin: 0px;
	background-size: cover;
}

#wrapper:focus {
	outline: none;
}

#wrapper p {
	line-height: 1.4em; font-size : 72px;
	margin: 0;
	padding: 100px;
	color: #fff;
	letter-spacing: 5px;
	color: hsla(0, 0%, 0%, 0);
	-webkit-transform: rotate(6.5deg) rotateX(28deg) skewX(-4deg);
	-moz-transform: rotate(6.5deg) rotateX(28deg) skewX(-4deg);
	-ms-transform: rotate(6.5deg) rotateX(28deg) skewX(-4deg);
	-o-transform: rotate(6.5deg) rotateX(28deg) skewX(-4deg);
	transform: rotate(6.5deg) rotateX(28deg) skewX(-4deg);
	-webkit-transition: -webkit-transform .1s ease-out;
	text-shadow: #fff 0 0 10px, #fff 0 4px 3px, #666 0 9px 3px, #999 0 12px
		1px, rgba(0, 0, 0, 0.2) 0 14px 5px, rgba(0, 0, 0, 0.1) 0 20px 10px,
		rgba(0, 0, 100, 0.2) 0 15px 80px;
	text-indent: 0.3em;
	font-size: 72px;
}

ul li a {
	text-decoration: underline;
}