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

TOP > CSS > 【CSS】ページの背景に英語のテキストを傾けて固定表示するテクニック

【CSS】ページの背景に英語のテキストを傾けて固定表示するテクニック

スポンサーリンク

コーディングテクニックの実装内容

ページの背景に英語のテキストを傾けて固定表示するテクニックを紹介します。手軽に実装できる割にはインパクトのあるページに見えます。デモページではGoogle Fontsを使用しています。

実装所要時間:10分程度

CSS,JavaScriptの記述内容

body {
  min-height: 1500px;
}

.wrap {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index:-1;
  user-select: none;
  pointer-events: none;
}

.title {
  font-size: 60vw;
  color: #03262f;
  font-family: 'Playfair Display';
  font-weight: 700;
  transform: rotate(-6deg) translateX(-10vw);
  letter-spacing: -45px;
}

@media screen and (max-width:640px){
  .title {
    font-size: 450px;
    letter-spacing: -15px;
    transform: rotate(-7deg) translateX(-120px) translateY(calc(100% - 99px));
  }
}

実装のポイント

現在制作中

スポンサーリンク