見出しいろいろ

heading00 ブログなどの見出し


h2.heading00 {
	position: relative;
	padding-left: .5em;
	}
h2.heading00::before {
	content: '';
	position: absolute;
	z-index:-2;
	left: -.1em;
	bottom: 1rem;
	width: 100%;
	height: 1.5rem;
	}

.heading00.violet::before {
	background: repeating-linear-gradient(-45deg, rgba(218,112,214,.4), rgba(218,112,214,.4) 2px, #fff 2px, #fff 4px);
	}
.heading00.green::before {
	background: repeating-linear-gradient(-45deg, rgba(43,146,15,.3), rgba(43,146,15,.3) 2px, #fff 2px, #fff 4px);
	}
.heading00.blue::before {
	background: repeating-linear-gradient(-45deg, rgba(52,170,220,.6), rgba(52,170,220,.6) 2px, #fff 2px, #fff 4px);
	}

heading01 ブログなどの見出し


h2.heading01 {
	position: relative;
	padding: 0.5em;
	background: #a6d3c8;
	color: white;
	}
h2.heading01::before {
	position: absolute;
	content: '';
	top: 100%;
	left: 0;
	border: none;
	border-bottom: solid 15px transparent;
	border-right: solid 20px rgb(149, 158, 155);
	}

heading02 ブログなどの見出し


h2.heading02 {
	position: relative;
	padding-left: 25px;
	}
h2.heading02:before {
	position: absolute;
	content: '';
	bottom: -3px;
	left: 0;
	width: 0;
	height: 0;
	border: none;
	border-left: solid 15px transparent;
	border-bottom: solid 15px rgb(119, 195, 223);
	}
h2.heading02:after {
	position: absolute;
	content: '';
	bottom: -3px;
	left: 10px;
	width: 100%;
	border-bottom: solid 3px rgb(119, 195, 223);
	}

heading03 ブログなどの見出し


h2.heading03 {
	position: relative;
	color: #158b2b;
	font-size: 20px;
	padding: 10px 0;
	text-align: center;
	margin: 1.5em 0;
	}
h2.heading03:before {
	content: "";
	position: absolute;
	top: -8px;
	left: 50%;
	width: 150px;
	height: 58px;
	border-radius: 50%;
	border: 5px solid #a6ddb0;
	border-left-color: transparent;
	border-right-color: transparent;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	}

heading04 ブログなどの見出し

※ Firefox で非対応


h2.heading04 {
	position: relative;
	color: #6eb0f9;
	line-height: 1.4;
	-webkit-box-reflect: below -10px -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0) 10%,rgba(0, 0, 0, 0.6));
	}

heading05 ブログなどの見出し


h2.heading05 {
	position: relative;
	padding: 0.6em;
	background: #e0edff;
	border-radius: 5px;
	}
h2.heading05:after {
	position: absolute;
	content: '';
	top: 100%;
	left: 30px;
	border: 15px solid transparent;
	border-top: 15px solid #e0edff;
	width: 0;
	height: 0;
	}

heading06 ブログなどの見出し


h2.heading06 {
	position: relative;
	background: #dfefff;
	box-shadow: 0px 0px 0px 5px #dfefff;
	border: dashed 2px white;
	padding: 0.2em 0.5em;
	color: #454545;
	}
h2.heading06:after {
	position: absolute;
	content: '';
	left: -7px;
	top: -7px;
	border-width: 0 0 15px 15px;
	border-style: solid;
	border-color: #fff #fff #a8d4ff; /*#fffの部分はページの地色にする*/
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
	}

heading07 ブログなどの見出し


h2.heading07 {
	position: relative;
	padding: .5em 0 .5em 2em;
	background: #fff0d9;
	color: #2d2d2d;
	margin-left: -33px;
	line-height: 1.3;
	border-bottom: solid 1px orange;
	z-index:-2;
	}
h2.heading07:before {
	position: absolute;
	content: '';
	left: -2px;
	top: -1px;
	width: 0;
	height: 0;
	border: none;
	border-left: solid 49px white;
	border-bottom: solid 150px transparent;
	z-index: -1;
	}
h2.heading07:after {
	position: absolute;
	content: '';
	right: -3px;
	top: -7px;
	width: 0;
	height: 0;
	border: none;
	border-left: solid 40px transparent;
	border-bottom: solid 73px white;
	z-index: -1;
	}

TOP