前回の動画を観ていない人は必ず前回の動画を観て下さい。
見出しデザインを実装する為のCSS超簡単入門
☞今日の動画の概要
今日は前回の講義『見出しデザイン実装の為のCSS超簡単入門レクチャー』の続編となります。
いよいよCSSで見出しデザインを自分のサイトデザインに合わせてカスタムしながら実装します。
前回の講義でCSSの基礎中の基礎を学んでいない人は前回の動画や記事を見る事をお勧めします。
今日は非常に長い動画ですが、見出しデザインの実装だけでなく、CSSに関して非常にスムーズな実践的入門となりますので頑張って学習しましょう。
📹動画を観る
🎁CSSコピペのみで実装！洗練された見出しデザイン45選
最初に設定しておくCSS
/* 洗練された見出しデザイン1 */
h2{
position:relative;
margin:0 -1px;
font:bold 30px/1.6 Arial, Helvetica, sans-serif;
text-align:center;
color:#333;
background:#87ffc9;
-webkit-transform: rotate(-3deg) skew(-3deg);
-moz-transform: rotate(-3deg) skew(-3deg);
-o-transform: rotate(-3deg) skew(-3deg);
-ms-transform: rotate(-3deg) skew(-3deg);
transform: rotate(-3deg) skew(-3deg);
text-shadow:1px 1px 0 rgb(141, 186, 44);
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2),
30px 0 0 0 #66ba94,
-30px 0 0 0 #66ba94;
}
最初に設定しておくCSS
/*洗練された見出しデザイン2*/
h2{
position: relative;
font-size: 2em;
font-weight: bold;
margin: 0 0 1.5em;
padding: 0.5em 0.5em 0.5em 2.0em;
border-bottom: 2px solid #bc0061;
}
h2:before{
content: "✜";
font-size: 130%;
position: absolute;
color: #bc0061;
top: 10px;
left: 9px;
}
最初に設定しておくCSS
/*洗練された見出しデザイン3*/
h2{
position: relative;
padding: 0.1em 0.5em;
background: -moz-linear-gradient(to right, rgb(91, 255, 197), transparent);
background: -webkit-linear-gradient(to right, rgb(91, 255, 197), transparent);
background: linear-gradient(to right, rgb(91, 255, 197), transparent);
color: #545355;
}
最初に設定しておくCSS
/* 洗練された見出しデザイン4 */
h2{
position:relative;
margin:0 10px;
padding:0 10px 0 55px;
font:b 22px/40px Arial, Helvetica, sans-serif;
color:#171717;
background:#ffffff;
z-index:1;
}
h2:before{
content:" ";
position:absolute;
top:0;
left:0;
width:40px;
height:40px;
border-right:#fff solid 2px;
background:#0df28e;
background-image: -webkit-gradient(linear, left top, left bottom,
from( rgba(255, 255, 255, 0.0)),
color-stop(0.20, rgba(255, 255, 255, 0.0)),
color-stop(0.20, rgba(255, 255, 255, 0.1)),
color-stop(0.40, rgba(255, 255, 255, 0.1)),
color-stop(0.40, rgba(255, 255, 255, 0.3)),
color-stop(0.60, rgba(255, 255, 255, 0.3)),
color-stop(0.60, rgba(255, 255, 255, 0.5)),
color-stop(0.80, rgba(255, 255, 255, 0.5)),
color-stop(0.80, rgba(255, 255, 255, 0.6)),
to( rgba(255, 255, 255, 0.6))
);
background-image: -webkit-linear-gradient(top,
transparent 20%,
rgba(255, 255, 255, 0.1) 20%,
rgba(255, 255, 255, 0.1) 40%,
rgba(255, 255, 255, 0.3) 40%,
rgba(255, 255, 255, 0.3) 60%,
rgba(255, 255, 255, 0.5) 60%,
rgba(255, 255, 255, 0.5) 80%,
rgba(255, 255, 255, 0.6) 80%,
rgba(255, 255, 255, 0.6) 100%
);
background-image: -moz-linear-gradient(top,
transparent 20%,
rgba(255, 255, 255, 0.1) 20%,
rgba(255, 255, 255, 0.1) 40%,
rgba(255, 255, 255, 0.3) 40%,
rgba(255, 255, 255, 0.3) 60%,
rgba(255, 255, 255, 0.5) 60%,
rgba(255, 255, 255, 0.5) 80%,
rgba(255, 255, 255, 0.6) 80%,
rgba(255, 255, 255, 0.6) 100%
);
background-image: -o-linear-gradient(top,
transparent 20%,
rgba(255, 255, 255, 0.1) 20%,
rgba(255, 255, 255, 0.1) 40%,
rgba(255, 255, 255, 0.3) 40%,
rgba(255, 255, 255, 0.3) 60%,
rgba(255, 255, 255, 0.5) 60%,
rgba(255, 255, 255, 0.5) 80%,
rgba(255, 255, 255, 0.6) 80%,
rgba(255, 255, 255, 0.6) 100%
);
background-image: linear-gradient(to bottom,
transparent 20%,
rgba(255, 255, 255, 0.1) 20%,
rgba(255, 255, 255, 0.1) 40%,
rgba(255, 255, 255, 0.3) 40%,
rgba(255, 255, 255, 0.3) 60%,
rgba(255, 255, 255, 0.5) 60%,
rgba(255, 255, 255, 0.5) 80%,
rgba(255, 255, 255, 0.6) 80%,
rgba(255, 255, 255, 0.6) 100%
);
z-index:-1;
}
h2:after{
content:" ";
position:absolute;
top:0;
left:0;
width:40px;
height:40px;
background-image: -webkit-gradient(linear, left top, right top,
from( rgba(255, 255, 255, 0.0)),
color-stop(0.20, rgba(255, 255, 255, 0.0)),
color-stop(0.20, rgba(255, 255, 255, 0.1)),
color-stop(0.40, rgba(255, 255, 255, 0.1)),
color-stop(0.40, rgba(255, 255, 255, 0.3)),
color-stop(0.60, rgba(255, 255, 255, 0.3)),
color-stop(0.60, rgba(255, 255, 255, 0.5)),
color-stop(0.80, rgba(255, 255, 255, 0.5)),
color-stop(0.80, rgba(255, 255, 255, 0.6)),
to( rgba(255, 255, 255, 0.6))
);
background-image: -webkit-linear-gradient(left,
transparent 20%,
rgba(255, 255, 255, 0.1) 20%,
rgba(255, 255, 255, 0.1) 40%,
rgba(255, 255, 255, 0.3) 40%,
rgba(255, 255, 255, 0.3) 60%,
rgba(255, 255, 255, 0.5) 60%,
rgba(255, 255, 255, 0.5) 80%,
rgba(255, 255, 255, 0.6) 80%,
rgba(255, 255, 255, 0.6) 100%
);
background-image: -moz-linear-gradient(left,
transparent 20%,
rgba(255, 255, 255, 0.1) 20%,
rgba(255, 255, 255, 0.1) 40%,
rgba(255, 255, 255, 0.3) 40%,
rgba(255, 255, 255, 0.3) 60%,
rgba(255, 255, 255, 0.5) 60%,
rgba(255, 255, 255, 0.5) 80%,
rgba(255, 255, 255, 0.6) 80%,
rgba(255, 255, 255, 0.6) 100%
);
background-image: -o-linear-gradient(left,
transparent 20%,
rgba(255, 255, 255, 0.1) 20%,
rgba(255, 255, 255, 0.1) 40%,
rgba(255, 255, 255, 0.3) 40%,
rgba(255, 255, 255, 0.3) 60%,
rgba(255, 255, 255, 0.5) 60%,
rgba(255, 255, 255, 0.5) 80%,
rgba(255, 255, 255, 0.6) 80%,
rgba(255, 255, 255, 0.6) 100%
);
background-image: linear-gradient(to right,
transparent 20%,
rgba(255, 255, 255, 0.1) 20%,
rgba(255, 255, 255, 0.1) 40%,
rgba(255, 255, 255, 0.3) 40%,
rgba(255, 255, 255, 0.3) 60%,
rgba(255, 255, 255, 0.5) 60%,
rgba(255, 255, 255, 0.5) 80%,
rgba(255, 255, 255, 0.6) 80%,
rgba(255, 255, 255, 0.6) 100%
);
z-index:-1;
}</pre>
</pre>
最初に設定しておくCSS
/*洗練された見出しデザイン5*/
h2 {
position: relative;
background: #a5ffcd;
padding: 2px 5px 2px 20px;
font-size: 20px;
color: #00226b;
border-radius: 0 10px 10px 0;
}
h2:before {
font-family: FontAwesome;
content: "\2663";
display: inline-block;
line-height: 60px;
position: absolute;
padding: 0em;
color: white;
background: #00bf56;
font-weight: normal;
width: 40px;
text-align: center;
height: 40px;
line-height: 40px;
left: -1.35em;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 50%;
box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.29);
border-bottom: solid 2px #008e40;
}
最初に設定しておくCSS
/*洗練された見出しデザイン6*/
h2 {
position: relative;
background: #d6dbff;
padding: 2px 5px 2px 20px;
font-size: 20px;
color: #000f75;
border-radius: 0 10px 10px 0;
}
h2:before {
font-family: FontAwesome;
content: "\2712 ";
display: inline-block;
line-height: 60px;
position: absolute;
padding: 0em;
color: white;
background: #000f75;
font-weight: normal;
width: 40px;
text-align: center;
height: 40px;
line-height: 40px;
left: -1.35em;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 50%;
box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.29);
border-bottom: solid 2px #000738;
}
最初に設定しておくCSS
/* 洗練された見出しデザイン７ */
h2{
color: #111;
font-size: 1.143em;
font-weight: bold;
margin: 0 0 1.5em;
border-bottom: 2px solid #690acc;
box-shadow: 0 1px 0 #aaaaaa;
-webkit-box-shadow: 0 1px 0 #aaaaaa;
-moz-box-shadow: 0 1px 0 #aaaaaa;
text-shadow: #999999 0px 1px 1px;
}
h2{
font-size:3.0em;
}
最初に設定しておくCSS
/*洗練された見出しデザイン.8*/
h2{
position: relative;
font-size: 1.143em;
font-weight: bold;
margin: 0 0 1.5em;
padding: 0.5em 0.5em 0.5em 2.0em;
border-bottom: 2px solid #00a873;
}
h2:before{
content: "□";
font-size: 170%;
position: absolute;
color: #35ffa0;
top: 0.1em;
left: 0.2em;
height: 10px;
width: 10px;
}
h2:after{
content: "□";
font-size: 170%;
position: absolute;
color: #35daff;
top: -0.3em;
left: -0.1em;
height: 12px;
width: 12px;
}
最初に設定しておくCSS
/*洗練された見出しデザイン.10*/
h2{
position: relative;
color: #002a80;
font-size: 1.143em;
font-weight: bold;
margin: 0 0 1.5em;
padding: 0.5em 0.5em 0.5em 1.7em;
border-bottom: 3px solid #0553ff;
}
h2:before{
content: "";
position: absolute;
background: #05ffb2;
top: 0;
left: 0.4em;
height: 8px;
width: 20px;
transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
h2:after{
content: "";
position: absolute;
background:#05ff07;
top: 1.0em;
left: 0;
height: 7px;
width: 15px;
transform: rotate(15deg);
-moz-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
-o-transform: rotate(15deg);
-ms-transform: rotate(15deg);
}
最初に設定しておくCSS
/*洗練された見出しデザイン.11*/
h2{
margin: 0 0 1.5em;
padding: 0.8em;
border-top: 3px double #145729;
border-bottom: 3px double #145729;
font-size: 1.143em;
font-weight: bold;
}
最初に設定しておくCSS
/*洗練された見出しデザイン.12*/
h2{
margin: 0 0 1.5em;
padding: 0.8em;
border-left: 7px solid #3100c2;
border-bottom: 1px solid #3100c2;
font-size: 1.143em;
font-weight: bold;
}
最初に設定しておくCSS
/*洗練された見出しデザイン14/*
h2 {
position: relative;
padding: 8px 15px;
margin-left: 40px;
background: #c6ff1a;
border-radius: 20px;
}
h2:before{font-family: FontAwesome;
content: "\f111";
position: absolute;
font-size: 15px;
left: -40px;
bottom: 0;
color: #c6ff1a;
}
h2:after{
font-family: FontAwesome;
content: "\f111";
position: absolute;
font-size: 23px;
left: -23px;
bottom: 0;
color: #c6ff1a;
}
最初に設定しておくCSS
/*洗練された見出しデザイン15*/
h2 {
background: #b0dcfa;
padding: 0.5em;
color: white;
border-radius: 0.5em;
}
最初に設定しておくCSS
/*洗練された見出しデザイン16*/
h2{
position:relative;
padding-left:30px;
border-bottom:2px solid #ccc;
font-weight: bold;
font-size: 22px;
line-height: 38px;
}
h2:before{
content:'';
height:40px;
width:5px;
display:block;
background:#999999;
box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
-webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
-moz-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
position:absolute;
top:-5px;
left:8px;
}
h2:after{
content:'';
height:3px;
width:17px;
display:block;
background:#999999;
box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
-webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
-moz-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
position:absolute;
top:5px;
left:2px;
}
最初に設定しておくCSS
h2{
position:relative;
padding-left:30px;
border-bottom:2px solid #f5005e;
font-weight: bold;
font-size: 22px;
line-height: 38px;
}
h2:before{
content:'';
height:0;
width:0;
display:block;
border:10px transparent solid;
border-right-width:0;
border-left-color:#f5005e;
position:absolute;
top:11px;
left:12px;
}
h2:after{
content:'';
height:7px;
width:15px;
display:block;
background:#f5005e;
position:absolute;
top:17px;
left:0px;
}
最初に設定しておくCSS
/*洗練された見出しデザイン18*/
h2 {
position: relative;
background: #eff4ff;
padding: 2px 5px 2px 20px;
font-size: 20px;
color: #00226b;
border-radius: 0 10px 10px 0;
}
h2:before {
font-family: FontAwesome;
content: "\f041";
display: inline-block;
line-height: 60px;
position: absolute;
padding: 0em;
color: white;
background: #0039b3;
font-weight: normal;
width: 40px;
text-align: center;
height: 40px;
line-height: 40px;
left: -1.35em;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 50%;
box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.29);
border-bottom: solid 2px #4967b4;
}
最初に設定しておくCSS
/*洗練された見出しデザイン19*/
h2 {
position: relative;
background: #ffe224;
padding: 2px 5px 2px 25px;
font-size: 20px;
color: #474747;
border-radius: 0 10px 10px 0;
}
h2:before {
font-family: FontAwesome;
content: "\f135";
display: inline-block;
line-height: 40px;
position: absolute;
padding: 0em;
color: white;
background: #ff244f;
font-weight: normal;
width: 40px;
text-align: center;
height: 40px;
line-height: 40px;
left: -1.35em;
top: 30%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border: solid 3px white;
border-radius: 50%;
}
最初に設定しておくCSS
/*洗練された見出しデザイン20*/
h2{
position: relative;
padding-left: 50px;
}
h2:before{
position: absolute;
font-family: FontAwesome;
content: "\f0eb";
background: #f0e800;
color: white;
font-weight: normal;
font-size: 25px;
border-radius: 50%;
left: 0;
width: 35px;
height: 35px;
line-height: 25px;
text-align: center;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
h2:after {/*吹き出しのちょこんと出た部分*/
content: '';
display: block;
position: absolute;
left: 25px;
height: 0;
width: 0;
border-top: 5px solid transparent;
border-bottom: 7px solid transparent;
border-left: 25px solid #f0e800;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
最初に設定しておくCSS
/*洗練された見出しデザイン21*/
h2 {
position: relative;
background: #ffffff;
padding: 0.25em 0.5em;
border-left: solid 2em #f3f0ff;
}
h2:before {
font-family: FontAwesome;
content: "\f040";
position: absolute;
padding: 0em;
color: #270297;
font-weight: normal;
left: -1.35em;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
最初に設定しておくCSS
/*洗練された見出しデザイン22*/
h2{
position: relative;
border-top: solid 2px #1fd19b;
border-bottom: solid 2px #1fd19b;
background: #e5fff8;
line-height: 1.4;
padding: 0.4em 0.5em;
margin: 2em 0 0.5em;
}
h2:after {/*タブ*/
position: absolute;
font-family: FontAwesome,'Quicksand','Avenir','Arial',sans-serif;
content: '\f0a7\ POINT';
background: #1fd19b;
color: #fff;
left: 0px;
bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 5px 7px 3px;
font-size: 0.7em;
line-height: 1;
letter-spacing: 0.05em;
}
最初に設定しておくCSS
/*洗練された見出しデザイン23*/
h2 {
position: relative;
padding: 0.5em 0.5em 0.5em 1.5em;
line-height: 1.4;
color: #ff6a6a;
border-top: dotted 1px gray;
border-bottom: dotted 1px gray;
background: #f0fffa;
}
h2:before{ font-family: FontAwesome;
content: "\f138";
position: absolute;
font-size: 1em;
left: 0.25em;
top: 0.5em;
color: #ff6a7a;
}
最初に設定しておくCSS
/*洗練された見出しデザイン24*/
h2 {
position: relative;
padding-left: 1.2em;
line-height: 1.4;
}
h2:before{ font-family: FontAwesome;
content: "\f00c";
position: absolute;
font-size: 1em;
left: 0;
top: 0;
color: #ff4d8a;
}
最初に設定しておくCSS
/*洗練された見出しデザイン25*/
h2{
position: relative;
padding: 0.1em 0.5em;
background: -moz-linear-gradient(to right, rgb(255, 186, 115), transparent);
background: -webkit-linear-gradient(to right, rgb(255, 186, 115), transparent);
background: linear-gradient(to right, rgb(255, 186, 115), transparent);
color: #545355;
}
最初に設定しておくCSS
/*洗練された見出しデザイン26*/
h2:first-letter {
color: #ff5647;
}
h2{
position: relative;
padding: 0.25em 0;
}
h2:after {
content: "";
display: block;
height: 4px;
background: -moz-linear-gradient(to right, rgb(255, 186, 115), #ff5647);
background: -webkit-linear-gradient(to right, rgb(255, 186, 115), #ffb2b2);
background: linear-gradient(to left, rgb(255, 186, 115), #ff5647);
}
最初に設定しておくCSS
/*洗練された見出しデザイン27*/
h2{
position: relative;
padding: 0.25em 0;
}
h2:after {
content: "";
display: block;
height: 4px;
background: -moz-linear-gradient(to right, rgb(230, 90, 90), transparent);
background: -webkit-linear-gradient(to right, rgb(230, 90, 90), transparent);
background: linear-gradient(to right, rgb(230, 90, 90), transparent);
}
最初に設定しておくCSS
/*洗練された見出しデザイン28*/
h2:first-letter {
font-size: 2em;
color: #ff3d70;
}
最初に設定しておくCSS
/*洗練された見出しデザイン29*/
h2 {
position: relative;
color: #474747;
font-size: 20px;
padding: 10px 0;
text-align: center;
margin: 1.5em 0;
}
h2:before {
content: "";
position: absolute;
top: -8px;
left: 50%;
width: 150px;
height: 58px;
border-radius: 50%;
border: 5px solid #fca06e;
border-left-color: transparent;
border-right-color: transparent;
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
最初に設定しておくCSS
/*洗練された見出しデザイン30*/
h2{
position: relative;
padding: 0.25em 1em;
border: solid 2px black;
border-radius: 3px 0 3px 0;
}
h2:before,h2:after
{
content: '';
position: absolute;
width:10px;
height: 10px;
border: solid 2px black;
border-radius: 50%;
}
h2:after {top:-12px;left:-12px;}
h2:before {bottom:-12px;right:-12px;}
最初に設定しておくCSS
/*洗練された見出しデザイン31*/
h2{
position: relative;
padding: 0.25em 1em;
border-top: solid 2px black;
border-bottom: solid 2px black;
}
h2:before, h2:after{
content: '';
position: absolute;
top: -7px;
width: 2px;
height: -webkit-calc(100% + 14px);
height: calc(100% + 14px);
background-color: black;
}
h2:before {left: 7px;}
h2:after {right: 7px;}
最初に設定しておくCSS
/*洗練された見出しデザイン32*/
h2{
position: relative;
display: inline-block;
padding: 0 55px;
}
h2:before, h2:after{
content: '';
position: absolute;
top: 50%;
display: inline-block;
width: 45px;
height: 1px;
background-color: black;
}
h2:before {left:0;}
h2:after {right: 0;}
最初に設定しておくCSS
/*洗練された見出しデザイン33*/
h2 {
position: relative;
}
h2:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 6px;
background: -webkit-repeating-linear-gradient(-45deg, #e799ff, #e799ff 2px, #fff 2px, #fff 4px);
background: repeating-linear-gradient(-45deg, #e799ff, #e799ff 2px, #fff 2px, #fff 4px);
}
最初に設定しておくCSS
/*洗練された見出しデザイン34*/
h2 {
color: #010079;
text-shadow: 0 0 5px white;
padding: 0.3em 0.5em;
background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}
最初に設定しておくCSS
/*洗練された見出しデザイン35*/
h2 {
position: relative;
padding-left: 25px;
}
h2:before {
position: absolute;
content: '';
bottom: -3px;
left: 0;
width: 0;
height: 0;
border: none;
border-left: solid 15px transparent;
border-bottom: solid 20px rgb(176,255,97);
}
h2:after {
position: absolute;
content: '';
bottom: -3px;
left: 10px;
width: 100%;
border-bottom: solid 3px rgb(176,255,97);
}
最初に設定しておくCSS
/*洗練された見出しデザイン36*/
h2 {
border-bottom: solid 3px #ade5ff;
position: relative;
}
h2:after {
position: absolute;
content: " ";
display: block;
border-bottom: solid 3px #2ebbff;
bottom: -3px;
width: 20%;
}
最初に設定しておくCSS
/*洗練された見出しデザイン37*/
h2 {
background: linear-gradient(transparent 70%, #e2ff85 70%);
}
最初に設定しておくCSS
/*洗練された見出しデザイン38*/
h2{
position: relative;
padding: 0.5em;
background: #a6d3c8;
color: white;
}
h2::before {
position: absolute;
content: '';
top: 100%;
left: 0;
border: none;
border-bottom: solid 15px transparent;
border-right: solid 20px rgb(149, 158, 155);
}
最初に設定しておくCSS
/*洗練された見出しデザイン39*/
h2{
position: relative;
background: #dfefff;
box-shadow: 0px 0px 0px 5px #dfefff;
border: dashed 2px white;
padding: 0.2em 0.5em;
color: #454545;
}
h2:after{
position: absolute;
content: '';
left: -7px;
top: -7px;
border-width: 0 0 15px 15px;
border-style: solid;
border-color: #fff #fff #a8d4ff;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}
最初に設定しておくCSS
/*洗練された見出しデザイン40*/
h2{
color: #ffffff;
padding: 0.5em;
display: inline-block;
line-height: 1.3;
background: #ffbb9e;
vertical-align: middle;
border-radius: 25px 0px 0px 25px;
}
h2:before {
content: '●';
color: white;
margin-right: 8px;
}
最初に設定しておくCSS
/*洗練された見出しデザイン41*/
h2 {
padding: 0.25em 0.5em;
color: #494949;
background: transparent;
border-left: solid 5px #ac6bff;
}
最初に設定しておくCSS
/*洗練された見出しデザイン42*/
h2 {
color: #6d6972;
border-bottom: dashed 5px #ac6bff;
}
最初に設定しておくCSS
/*洗練された見出しデザイン43*/
h2 {
padding: 0.5em;
background: aliceblue;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.23);
}
最初に設定しておくCSS
/*洗練された見出しデザイン44*/
h2{
border-top:1px dotted #ccc;
border-right:1px dotted #ccc;
border-left:7px double #15c696;
border-bottom:1px dotted #ccc;
padding:.8em .9em
}
最初に設定しておくCSS
/*洗練された見出しデザイン45*/
h2{
position:relative;
padding-left:30px;
border-bottom:2px solid #ccc;
font-weight: bold;
font-size: 22px;
line-height: 38px;
}
h2:before{
content:'';
border-radius:30px;
-webkit-border-radius:30px;
-moz-border-radius:30px;
height:17px;
width:17px;
display:block;
position:absolute;
top:15px;
left:10px;
background-color:#5cffae;
box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset;
filter:alpha(opacity=50);
-moz-opacity:0.50;
-khtml-opacity: 0.50;
opacity:0.50;
z-index: 1;
}
h2:after{
content:'';
border-radius:30px;
-webkit-border-radius:30px;
-moz-border-radius:30px;
height:25px;
width:25px;
display:block;
position:absolute;
top:1px;
left:0px;
background-color:#389bff;
box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset
}
参考：squeeze,webnonotes,saruwakakun.
合わせて読みたい
☥IBORCを応援して下さい。
