【CSS】比較表タイトル装飾

2020年6月10日 CSS

<div class="kuchikomi_tbl_ttl">
  <div class="ribbon">
    <p class="ribbon_wrap"><span class="ribbon_sub"><script>document.write(updated_Year());</script>年<br>最新口コミ</span><b class="ribbon_main">徹底調査</b></p>
  </div>
  <h2 class="kuchi_text">口コミ効果で選んだ<br /><span class="kuchi_text_main">シミ・くすみ化粧品人気ランキング</span></h2>
  <div class="kuchikomi_crown"><img src="./common/img/kuchikomi_crown.png" alt=""></div>
</div>

年
最新口コミ徹底調査

口コミ効果で選んだ
シミ・くすみ化粧品人気ランキング

.kuchikomi_tbl_ttl{
}
.kuchikomi_tbl_ttl h2.kuchi_text{
  color: #fff;
  font-weight: bold;
  font-size: 1.5em;
  line-height: 1.5em;
  text-align: center;
  width: 80%;
}

.kuchikomi_tbl_ttl h2.kuchi_text .kuchi_text_main{
  color: #fbdf8e;
  font-size: 1.2em;
}

.kuchikomi_tbl_ttl{
  position: relative;
  background: -webkit-linear-gradient(#07add2, #3f50af 50%, #275a8f);
  background: -o-linear-gradient(#07add2, #3f50af 50%, #275a8f);
  background: linear-gradient(#07add2, #3f50af 50%, #275a8f);
  overflow: visible;
  margin: 2em auto 0;
  padding: 0.5em 0em 0.5em 10em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.ribbon {
	position: absolute;
	top: -6.1px;
  left: 10px;
}
.ribbon:after {
    position: absolute;
    width: 0;
    height: 0;
    content: '';
    bottom: -7px;
    border-left: 53px solid #fdd100;
    border-right: 53px solid #fdd100;
    border-bottom: 20px solid transparent;
}
.ribbon .ribbon_wrap {
	font-size: 1em;
  font-weight: bold;
	line-height: 1.2;
	position: relative;
	display: block;
	width: 90px;
	padding: 12px 8px 5px;
	text-align: center;
	color: #ffffff;
	border-top-right-radius: 8px;
  background: -webkit-linear-gradient(#ffec47, #FFEB3B 50%, #fdd100);
  background: -o-linear-gradient(#ffec47, #FFEB3B 50%, #fdd100);
  background: linear-gradient(#ffec47, #FFEB3B 50%, #fdd100);
}
.ribbon .ribbon_wrap:before, .ribbon .ribbon_wrap:after {
	position: absolute;
	content: '';
}
.ribbon .ribbon_wrap:before {
	top: 0;
	left: -6px;
	width: 6px;
	height: 7px;
	background: #fdd100;
}
.ribbon .ribbon_wrap:after {
	top: 0;
	left: -8px;
	width: 8px;
	height: 6px;
	border-radius: 8px 8px 0 0;
	background: #e8c104;
}
.ribbon_main {
  display: block;
  font-size: 20px;
  color: #333;
  text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff;
}
.ribbon_sub  {
  font-size: 16px;
  text-shadow:0 0 3px #333;
}
.kuchikomi_crown {
  width: 15%;
  text-align: center;
  padding-right: 5%;
}
.kuchikomi_crown img{
  width: 100%;
}

.kuchikomi_tbl_ttl{

}

.kuchikomi_tbl_ttl h2.kuchi_text{

color: #fff;

font-weight: bold;

font-size: 1.5em;

line-height: 1.5em;

text-align: center;

width: 80%;

}

.kuchikomi_tbl_ttl h2.kuchi_text .kuchi_text_main{

color: #fbdf8e;

font-size: 1.2em;

}

.kuchikomi_tbl_ttl{

position: relative;

background: -webkit-linear-gradient(#07add2, #3f50af 50%, #275a8f);

background: -o-linear-gradient(#07add2, #3f50af 50%, #275a8f);

background: linear-gradient(#07add2, #3f50af 50%, #275a8f);

overflow: visible;

margin: 2em auto 0;

padding: 0.5em 0em 0.5em 10em;

display: flex;

flex-wrap: wrap;

align-items: center;

}

.ribbon {

position: absolute;

top: -6.1px;

left: 10px;

}

.ribbon:after {

position: absolute;

width: 0;

height: 0;

content: '';

bottom: -7px;

border-left: 53px solid #fdd100;

border-right: 53px solid #fdd100;

border-bottom: 20px solid transparent;

}

.ribbon .ribbon_wrap {

font-size: 1em;

font-weight: bold;

line-height: 1.2;

position: relative;

display: block;

width: 90px;

padding: 12px 8px 5px;

text-align: center;

color: #ffffff;

border-top-right-radius: 8px;

background: -webkit-linear-gradient(#ffec47, #FFEB3B 50%, #fdd100);

background: -o-linear-gradient(#ffec47, #FFEB3B 50%, #fdd100);

background: linear-gradient(#ffec47, #FFEB3B 50%, #fdd100);

}

.ribbon .ribbon_wrap:before, .ribbon .ribbon_wrap:after {

position: absolute;

content: '';

}

.ribbon .ribbon_wrap:before {

top: 0;

left: -6px;

width: 6px;

height: 7px;

background: #fdd100;

}

.ribbon .ribbon_wrap:after {

top: 0;

left: -8px;

width: 8px;

height: 6px;

border-radius: 8px 8px 0 0;

background: #e8c104;

}

.ribbon_main {

display: block;

font-size: 20px;

color: #333;

text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff;

}

.ribbon_sub {

font-size: 16px;

text-shadow:0 0 3px #333;

}

.kuchikomi_crown {

width: 15%;

text-align: center;

padding-right: 5%;

}

.kuchikomi_crown img{

width: 100%;

}

function updated_Year() {
        var date = new Date();
        var y = date.getFullYear();
        return y ;
}

function updated_Year() {

var date = new Date();

var y = date.getFullYear();

return y ;

}

【CSS】比較表タイトル装飾

口コミ効果で選んだ
シミ・くすみ化粧品人気ランキング

LEAVE A COMMENT コメントをキャンセル

最近の投稿

最近のコメント

口コミ効果で選んだシミ・くすみ化粧品人気ランキング

LEAVE A COMMENT コメントをキャンセル

最近の投稿

最近のコメント

口コミ効果で選んだ
シミ・くすみ化粧品人気ランキング