<h1 class="cp_h1title">見出しテキスト</h1>
.cp_h1title {
padding: .3em;
border: solid 2px #90CAF9;
box-shadow: 0px 0px 0px 5px #2196F3;
}
<h1 class="cp_h1title">見出しテキスト</h1>
.cp_h1title {
padding: .3em;
background: #E65100;
color: #ffffff;
}
<h1 class="cp_h1title">見出しテキスト</h1>
.cp_h1title {
padding: .3em;
background: #03A9F4;
border-radius: 6px;
color: #ffffff;
}
<h1 class="cp_h1title">見出しテキスト</h1>
.cp_h1title {
padding: .3em;
background: #FF8A65;
border: 2px solid #BF360C;
border-radius: 6px;
color: #ffffff;
}
<h1 class="cp_h1title">見出しテキスト</h1>
.cp_h1title {
padding: .3em;
border: dashed 1px #ffffff;
background: #80DEEA;
box-shadow: 0px 0px 0px 5px #80DEEA;
color: #ffffff;
}
<h1 class="cp_h1title">見出しテキスト</h1>
.cp_h1title {
padding: .3em;
border: 2px solid #ffffff;
background: #f1c6c6;
box-shadow:0px 0px 0px 6px #da3c41;
}
<h1 class="cp_h1title">見出しテキスト</h1>
.cp_h1title {
padding: .3em;
background: linear-gradient(180deg, #da3c41 0%, #f1c6c6 100%);
color:#ffffff;
}
<h1 class="cp_h1title">見出しテキスト</h1>
.cp_h1title {
position: relative;
padding: 4px 20px 4px 40px;
background: #FFB74D;
border-top: 2px solid #E65100;
border-bottom: 2px solid #E65100;
z-index:1;
color:#ffffff;
}
.cp_h1title:before {
position: absolute;
content: '';
left: 0px;
top: -3px;/*ボーダーサイズ分マイナス*/
width: 0;
height: 0;
border: none;
border-left: solid 40px #fafcfc;/*bodyのカラーと同じ色に*/
border-bottom: solid 55px transparent;
z-index: 2;
}
.cp_h1title:after {
position: absolute;
content: '';
right: 0px;
top: -3px;/*ボーダーサイズ分マイナス*/
width: 0;
height: 0;
border: none;
border-left: solid 40px transparent;/*bodyのカラーと同じ色に*/
border-bottom: solid 55px white;
z-index: 2;
}
<h1 class="cp_h1title">見出しテキスト</h1>
.cp_h1title {
padding: .3em;
background: repeating-linear-gradient(-45deg, #3949AB, #3949AB 5px,#5C6BC0 5px, #5C6BC0 10px);
color: #ffffff;
text-shadow: 1px 1px 0px rgba(0,0,0,0.3);/*文字を読みやすくするために影を追加*/
}
<h1 class="cp_h1title">見出しテキスト</h1>
.cp_h1title {
position: relative;
padding: .3em;
background: #00ACC1;
border-radius: 8px;
color: #ffffff;
}
.cp_h1title:after {
position: absolute;
content: '';
top: 100%;
left: 20px;
border: 10px solid transparent;
border-top: 10px solid #00ACC1;
width: 0;
height: 0;
}
<h1 class="cp_h1title">見出しテキスト</h1>
.cp_h1title {
position: relative;
padding: 4px 34px 3px 34px;
background: #EC407A;
border-radius: 1em;
color:#fff;
}
.cp_h1title:before,
.cp_h1title:after {
font-size: 0.5em;
top: calc(50% - 0.6em);
}
.cp_h1title:before {
position: absolute;
content: '●';
color: #fff;
left:10px;
}
.cp_h1title:after {
position: absolute;
content: '●';
color: #fff;
right:10px;
}
<h1 class="cp_h1title">見出しテキスト</h1>
.cp_h1title {
position: relative;
padding: .3em;
background-color: #00897B;
color: #ffffff;
}
.cp_h1title::after {
position: absolute;
top: 0;
right: 0;
content: '';
width: 0;
border-width: 0 16px 16px 0;
border-style: solid;
border-color: #fafcfc #fafcfc #B2DFDB #B2DFDB;
box-shadow: -1px 1px 2px rgba(0, 0, 0, .1);
}
<h1 class="cp_h1title">見出しテキスト</h1>
.cp_h1title {
padding: .3em;
background-color: #455A64;
box-shadow: 0px 5px 3px -3px rgba(0,0,0,0.4);
color: #ffffff;
}
<h1 class="cp_h1title">見出しテキスト</h1>
.cp_h1title {
padding: .3em;
background: #FFA000;
box-shadow: 0 0 7px 3px rgba(215, 73, 23,0.5) inset;
color:#ffffff;
}
<h1 class="cp_h1title">見出しテキスト</h1>
.cp_h1title {
padding: .3em;
border: 2px solid #283593;
border-radius: 1em .6em 2em .6em/.6em 2em .6em 1em;
color: #283593;
}
<h1 class="cp_h1title">見出しテキスト</h1>
.cp_h1title {
position: relative;
padding: .3em;
zoom: 1;
background: #F8BBD0;
box-shadow:0 1px 3px rgba(0,0,0,0.4);
color: #D81B60;
}
.cp_h1title:before,
.cp_h1title:after {
content: "";
position: absolute;
top: 100%;
height: 0;
width: 0;
border: 8px solid transparent;
border-top: 8px solid #EC407A;
}
.cp_h1title:before {
right: 0;
border-left: 8px solid #EC407A;
}
.cp_h1title:after {
left: 0;
border-right: 8px solid #EC407A;
}
<h1 class="cp_h1title">見出しテキスト</h1>
.cp_h1title {
position: relative;
padding: .3em;
background-color: #B2EBF2;
color: #0097A7;
}
.cp_h1title::before,.cp_h1title::after {
content: '';
position: absolute;
border-style: solid;
border-color: transparent;
}
.cp_h1title::before {
top: 100%;
left: 0;
border-width: 0 15px 15px 0;
border-right-color: #0097A7;
}
.cp_h1title::after {
top: -15px;
right: 0;
border-style: solid;
border-width: 0 15px 15px 0;
border-bottom-color: #0097A7;
}
<h1 class="cp_h1title">見出しテキスト</h1>
.cp_h1title {
position: relative;
padding: .3em;
background-color: #F9A825;
color: #E65100;
}
.cp_h1title::before,.cp_h1title::after {
content: '';
position: absolute;
border-style: solid;
border-color: transparent;
}
.cp_h1title::before {
top: 100%;
left: 0;
border-width: 0 15px 15px 0;
border-right-color: #F57F17;
}
.cp_h1title::after {
top: -15px;
right: 0;
border-style: solid;
border-width: 0 15px 15px 0;
border-bottom-color: #da3c3c;
}
<h1 class="cp_h1title">見出しテキスト</h1>
.cp_h1title {
position: relative;
padding: .6em .3em .3em .3em;
border: 1px solid #0097A7;
}
.cp_h1title::after{
content: "check!";
position: absolute;
top: -8px;
left: 10px;
background: #fafcfc;
font-size: 14px;
color: #0097A7;
padding: 0 10px;
}
<h1 class="cp_h1title">見出しテキスト</h1>
.cp_h1title {
background-color: #4CAF50;
color: #fff;
padding: .3em;
position: relative;
overflow: hidden;
text-shadow: 1px 1px 0px rgba(0,0,0,0.3);/*文字を読みやすくするために影を追加*/
}
.cp_h1title:before{
background-color: #fff;
border-radius: 100px 100px 100px 100px;
content: '';
display: block;
opacity: 0.5;
position: absolute;
bottom: 9px;
left: 0px;
width: 100px;
height: 100px;
}
.cp_h1title:after{
background-color: #fff;
border-radius: 50px 50px 50px 50px;
content: '';
opacity: 0.6;
position: absolute;
bottom: -8px;
left: 70px;
display: block;
width: 50px;
height: 50px;
}
<h1 class="cp_h1title">見出しテキスト</h1>
.cp_h1title {
background-color: #F8BBD0;
background-image: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0);
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
padding: .3em;
color: #D81B60;
text-shadow: 1px 1px 0px rgba(0,0,0,0.3);/*文字を読みやすくするために影を追加*/
}
<h1 class="cp_h1title">見出しテキスト</h1>
.cp_h1title {
padding: .3em;
background-color: rgba(255,255,255,0);
border-left: 2px dotted rgba(0,0,0,0.1);
border-right: 2px dotted rgba(0,0,0,0.1);
box-shadow: 0 0 4px rgba(0,0,0,0.2);
}
<h1 class="cp_h1title">見出しテキスト</h1>
.cp_h1title {
position: relative;
background-color: #da3c3c;
color: #fff;
overflow: hidden;
padding: .3em;
}
.cp_h1title:before{
background-color: rgba(27, 37, 56, 1);
content: '';
display: block;
transform: rotate(-30deg);
position: absolute;
bottom: -30px;
right: -100px;
width: 200px;
height: 200px;
}
<h1 class="cp_h1title">見出しテキスト</h1>
.cp_h1title {
position: relative;
padding: .3em .7em;
border-top: solid 1px #da3c41;
border-bottom: solid 1px #da3c41;
}
.cp_h1title::before,
.cp_h1title::after{
content: '';
position: absolute;
top: -10px;
width: 1px;
height: calc(100% + 20px);
background-color: #da3c41;
}
.cp_h1title::before{
left: 10px;
}
.cp_h1title::after{
right: 10px;
}
<h1 class="cp_h1title">見出しテキスト</h1>
.cp_h1title {
position: relative;
padding: .3em;
border: solid 2px #2196F3;
border-radius: 3px 0 3px 0;
}
.cp_h1title:before,.cp_h1title:after {
content: '';
position: absolute;
width:10px;
height: 10px;
border: solid 2px #2196F3;
border-radius: 50%;
}
.cp_h1title:after {
bottom: 100%;
right: 100%;
}
.cp_h1title:before {
top: 100%;
left: 100%;
}