今回はCSSの「clip-path」を使用し文字を中央から切り取ったようなデザインを実装する方法について解説します。
クリップパスは要素の形を変える際によく使用されますが、今回はbefore,after疑似要素を使用し文字を切り取ってみました。
インパクトのあるタイトルを作る際などに参考になれば幸いです。
文字に黄色のぼかしを入れる
「text-shadow: 0 0 10px yellow;」で文字に黄色のぼかしを入れます。フレックスボックスで文字を上下左右中央揃えに。
<div class="container">
<h1 data-title="CSSで文字を中央から切断">
CSSで文字を中央から切断
</h1>
</div>
.container {
display: flex;
justify-content: center;
align-items: center;
background-image:url(...);
...
}
h1 {
position: relative;
text-shadow: 0 0 10px yellow;
font-size: 35px;
font-weight: bold;
}
文字を切り抜く
「content」のattr関数で「data-title」属性のテキストを表示。「clip-path」を指定し文字を中央から切り抜きます。（before疑似要素は上部（背景赤）、after疑似要素は下部（背景緑））
.container {...}
h1 {...}
h1::before, h1::after {
position: absolute;
top: 0;
left: 0;
color: white;
content: attr(data-title);
}
h1::before {
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}
h1::after {
clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
}
3Dエフェクトをかける
「transform」プロパティの「perspective」で奥行きを設定。「rotateX」で水平方向の軸を基準に回転。「translateY」で文字が切断されたように上下に50%移動させてます。
.container {...}
h1 {...}
h1::before, h1::after {...}
h1::before {
clip-path:...
transform: perspective(500px)
rotateX(40deg)
translateY(-50%);
}
h1::after {
clip-path:...
transform: perspective(500px)
rotateX(-40deg)
translateY(50%);
}
全てのコード
コードを表示
<div class="pic-container pic-background">
<h1 data-title="CSSで文字を中央から切断">CSSで文字を中央から切断</h1>
</div>.pic-background {
background-image: var(--pic-image-data, none);
background-size: cover;
background-position: center;
}
.pic-container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
background-color: #fefefe;
box-sizing: border-box;
z-index: 0;
}
.pic-container::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: inherit;
filter: brightness(60%);
content: '';
z-index: -1;
}
h1 {
position: relative;
text-shadow: 0 0 10px yellow;
font-size: 35px;
font-weight: bold;
}
h1::before,
h1::after {
position: absolute;
top: 0;
left: 0;
color: white;
content: attr(data-title);
}
h1::before {
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
transform: perspective(500px) rotateX(40deg) translateY(-50%);
}
h1::after {
clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
transform: perspective(500px) rotateX(-40deg) translateY(50%);
}
このWEBパーツを確認する
HTML・CSSのカスタマイズや動作確認ができます
