IEのサポートも終了し、IE非対応のCSSが使えるようになり、表現できるデザインが広がってきています。
今回は「mix-blend-mode」と「transform」プロパティを使い、文字を回転し背景と重ね合わせたテキストエフェクトの作り方を紹介します。
背景を指定する
「background-image」で背景を指定し、「overflow:hidden;」ではみ出た部分を隠すよう設定します。
<div class="container"></div>
.container {
position: relative;
width: 100vw;
height: 100vh;
background-image: url(...);
background-size: cover;
background-position: center;
overflow:hidden;
}文字を変形させる
「position: absolute;」で文字位置を調整。「transform」「perspective」で文字に奥行きを与えて、「rotateX,Z」で文字を回転させます。
<div class="container">
<h1>3Dエフェクトをかける</h1>
</div>
h1 {
position: absolute;
top: 20%;
left: 50%;
width: 100%;
padding: 50px;
transform:
translateX(-50%) perspective(200px)
rotateX(20deg) rotateZ(90deg);
background-color: rgba(0, 0, 0, .6);
color: white;
font-size: 26px;
font-weight: bold;
}
背景画像とブレンドさせる
「mix-blend-mode: overlay;」を指定し背景の画像と文字をブレンドさせてます。
<div class="container">
<h1>3Dエフェクトをかける</h1>
</div>
h1 {
position: absolute;
...
mix-blend-mode: overlay;
}
全てのソース
コードを表示
<div class="pic-container pic-background">
<h1>3Dエフェクトをかける</h1>
</div>
.pic-container {
position: relative;
width: 100vw;
height: 100vh;
background: #bae52d;
text-align: center;
overflow: hidden;
}
h1 {
position: absolute;
top: 20%;
left: 50%;
width: 100%;
padding: 50px;
transform: translateX(-50%) perspective(200px) rotateX(20deg) rotateZ(90deg);
background-color: rgba(0, 0, 0, .6);
color: white;
font-size: 26px;
font-weight: bold;
mix-blend-mode: overlay;
}HTML・CSSのカスタマイズや動作確認ができます
