ちょっと洒落たCSSを使った見出し

投稿のタイトル見出しを変えてみました。

青バックにしてページカール風のシャドウを左側だけに入れてあります。

オリジナルは、こちらのサイトにあります。

headding05の名前をh1、h2といったものに変えて使います。

.headding05 {
margin:0 0 30px 0;
padding:12px 10px;
background: #1d8ade; /* Old browsers */
background: -moz-linear-gradient(left, #1d8ade 0%, #53a2e2 50%, #1d8ade 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1d8ade),
 color-stop(50%,#53a2e2), color-stop(100%,#1d8ade)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #1d8ade 0%,#53a2e2 50%,#1d8ade 100%); 
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #1d8ade 0%,#53a2e2 50%,#1d8ade 100%); /* Opera11.10+ */
background: -ms-linear-gradient(left, #1d8ade 0%,#53a2e2 50%,#1d8ade 100%); /* IE10+ */
background: linear-gradient(left, #1d8ade 0%,#53a2e2 50%,#1d8ade 100%); /* W3C */
color:#FFF;
text-shadow:1px 1px 2px #333;
box-shadow:0 2px 3px rgba(0, 0, 0, 0.4) , inset 0 0 50px rgba(0, 0, 0, 0.1) ;
position:relative;
	}
.headding05:before,
.headding05:after{
	content: ' ';
	position: absolute;
	z-index: -1;
	width: 40%;
	height: 20px;
	left: 4px;
	bottom:7px;
	-webkit-box-shadow: 0 8px 15px rgba(0,0,0, 0.7);
	-moz-box-shadow: 0 8px 15px rgba(0, 0, 0, 0.7);
	box-shadow: 0 8px 15px rgba(0, 0, 0, 0.7);
	background-color: #F00;
	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	transform: rotate(-3deg);
}
.headding05:after{
	  -webkit-transform: rotate(3deg);
	  -moz-transform: rotate(3deg);
	  -o-transform: rotate(3deg);
	  -ms-transform: rotate(3deg);
	  transform: rotate(3deg);
	  right: 10px;
	  left: auto;}