yukeka
4/13/2020 - 6:05 AM

背景に合わせてテキストカラーを変える

背景に合わせてテキストカラーを変える

.markdown
content_copyfile_download
  • Rendered
  • Source

背景に合わせてテキストカラーを変える

A Pen by yukeka on CodePen.

License.

index.html
content_copyfile_download
<div>
  <h2 data-title="CORONA DIES">CORONA DIES</h2><br>
  <h2 data-title="マキシマム">マキシマム</h2>
</div>
style.css
content_copyfile_download
div {
   height: 600px;
   text-align: center;
   background: linear-gradient(90deg,#ffd700 50%,#fff 50%)
}

h2 {
   font-size: 64px;
   font-weight: bold;
   padding-top: 60px;
   display: inline-block;
   position: relative;
   color: #d30707;
}

h2::before {
   content: attr(data-title);
   position: absolute;
   top: 60px;
   left: 0;
   width: 50%;
   color: #111;
   white-space: nowrap;
   overflow: hidden;
}