おしゃれな見出し【CSS】

たくさん入れすぎるとごちゃごちゃしてしまうけど、いつか使いたいもののストック。

ホバーで縦に割れるテキスト

縦割DEMO

縦割のHTML

　
<div class="word">
  <span class="mask">
    <span>test</span>
  </span>
  <span class="mask">
    <span>test</span>
  </span>
</div>

縦割のCSS

　
.word {
  width: 100%;
  height: 86px;
  font-size: 3em;
}
.word .mask {
  position: relative;
  display: block;
  width: 100%;
  height: 50%;
  color: #fff;
  transition: all .3s;
  overflow: hidden;
}
.word .mask span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
}
.word .mask:last-child span {
  transform: translateY(-50%);
}
.word:hover .mask:first-child {
  transform: translateY(-5px);
}
.word:hover .mask:last-child {
  transform: translateY(5px);
  color: #007db9;
}

テキストグラデーション

グラデDEMO

グラデHTML

　
<div class="text">グラデーションのテキスト</div>

グラデCSS

.text{
  color: #ACB6E5;
  background: -webkit-linear-gradient(0deg, #ACB6E5, #86FDE8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

二層グラデーション

二層DEMO

二層HTML

　
<div class="text">二層テキスト</div>

二層CSS

　
.text{
  color: #FF7C00;
  background: -webkit-linear-gradient(top, #FFB76B 0%, #FFA73D 50%, #FF7C00 51%, #FF7F04 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

反射テキスト

反射DEMO

反射HTML

 
<div class="text">GOLDEN TEXT</div>

反射CSS

　
.text {
  position: relative;
  color:#755d41;
  text-shadow:0 2px 0 #755d41,0 2px 1px rgba(0,0,0,0.8);
}
.text:before {
  position: absolute;
  content:'GOLDEN METAL';
  color:#b6a57a;
  -webkit-mask-image:-webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,1) 40%, rgba(0,0,0,0) 90%, rgba(0,0,0,0));
}
.text:after {
  content:'GOLDEN METAL';
  color:#fff;
  -webkit-mask-image:-webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0) 20%, rgba(0,0,0,0.2) 36%, rgba(0,0,0,0.5) 40%, rgba(0,0,0,0.2) 44%, rgba(0,0,0,0) 60%, rgba(0,0,0,0));
  position: absolute;
  left: 0;
}
.text, .text:before {
  -webkit-box-reflect: below -20px -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0) 30%,rgba(0,0,0,0.8));
  display: block;
}