あなたのキモチ つなげるカタチ

TOP > CSS > 【CSS】文字の中で色が変わり、リキッド対応したテキストの実装方法

【CSS】文字の中で色が変わり、リキッド対応したテキストの実装方法

スポンサーリンク

実装内容

文字の中で色が変わり、リキッドにも対応したテキストの実装方法です。cssだけで実装できるアナログな仕組みですが、キービジュアル内などで存在感をだせるのではないでしょうか。

実装所要時間:15分程度

実装方法

実装に必要なのはCSSのみです

body {
background: #cacaca;
}

.wrap {
  width: 768px;
  height: 500px;
  margin: 200px auto 0;
}

.main {
  position: relative;
  width: 100%;
  height: 100%
}
.inner {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: calc(100% - 5%);
  font-size: 47px;
}
.main .trim-title {
  position: absolute;
  top: 50px;
  width: calc(90% - 5%);
  right: 0;
  height: 4em;
  line-height: 84px;
}
.trim-title span {
  position: absolute;
  display: block;
  left: -12%;
  max-width: 1000px;
}
.main .trim-title span {
  height: 100%;
  top: 0;
  color: #000;
}
.trim-front {
  z-index: 3;
}
.trim-back {
  z-index: 1;
}
.trim-title.front span {
  position: absolute;
  color: #ffffff;
}
.trim-title.front {
  overflow: hidden;
}

【簡単な解説】
完全にCSSのみで実装が可能です。
仕組みとしては、同じ内容のテキストを2つ用意してposition:absolute;で重ねます。
前面側の要素にoverflow:hidden;とleftでテキストの一部分を非表示にします。

スポンサーリンク