WordPress.com のテーマ「Twenty Eleven」の見出しを装飾するためのCSS

titlecss02

rect3015

titlecss01

WordPress.com のテーマ「Twenty Eleven 」に以下のCSSを追加すると、見出しがいい感じで装飾されます。

.entry-header .entry-format {
top: -20px;
}

#content h1.entry-title a,#content h1.entry-title {
color: #F9F9F9;
font-weight:normal;
}

#content h1.entry-title a:hover {
color: #ccc;
}

h1.entry-title {
margin:0 50px 30px -15px;
padding:12px 15px;
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;
}

h1.entry-title:before,
h1.entry-title: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);
}
h1.entry-title:after{
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}

.singular #content h1.entry-title, .page #content h1.entry-title {
margin:0 0 30px -15px;
}

.page.page-template-showcase-php #content h1.entry-title {
margin:0 50px 30px -15px;
}

参照した記事:コピペで出来るCSS3で見出しスタイリング | 3streamer blog

#2012