CSSの「text-shadow」を利用し文字をずらした装飾3選

@ハクト 2023-06-30 11:07:24に投稿

タイトルデザインなどで文字をずらした装飾をよく見かけることがありますよね。

CSSで実装するには「text-shadow」プロパティを利用すると簡単にずらし文字を実装することができます。

今回は3種類の文字をずらしたあしらいを紹介します。

文字に縁を入れてずらす

 「-webkit-text-stroke」で文字に縁を入れて「text-shadow」でピンクカラーをずらしてます。フォントはGoogleフォント「Dela Gothic One」を使用

<h1>CSSで文字をずらす</h1>

 

h1 {
    padding: 4rem 1rem;
    background-color: rgba(255, 255, 255, .9);
    border: 5px double #333;
    -webkit-text-stroke: 2px #333;
    text-shadow: 3px 3px #F1AECA;
    color: transparent;
    font-family: 'Dela Gothic One';
    font-size: 28px;
}

 

全てのコード

コードを表示 

<div class="pic-container pic-background">
    <h1>CSSで文字をずらす</h1>
</div>
@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap');

.pic-background {
    background-image: var(--pic-image-data, none);
    background-size: cover;
    background-position: center;
}

.pic-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 600px;
    height: 338px;
    background-color: #fefefe;
    box-sizing: border-box;
}

h1 {
    padding: 4rem 1rem;
    background-color: rgba(255, 255, 255, .9);
    border: 5px double #333;
    -webkit-text-stroke: 2px #333;
    text-shadow: 3px 3px #F1AECA;
    color: transparent;
    font-family: 'Dela Gothic One';
    font-size: 28px;
}
このWEBパーツを確認する

HTML・CSSのカスタマイズや動作確認ができます

文字を下側にずらし、ぼかしてホラー風に

 「-webkit-text-stroke」で文字に赤い縁を入れて、「text-shadow」で赤いぼかしを徐々大きくしながら下側にずらしていくとホラー風に。

<h1>CSSでぼかしてずらす</h1>

 

h1 {
    padding: 5rem 1rem;
    -webkit-text-stroke: 2px #E93F33;
    text-shadow: 0px 0px 5px #E93F33, 
                 0px 0px 8px #E93F33, 
                 0px 0px 10px #E93F33, 
                 0px 15px 10px #E93F33, 
                 0px 30px 15px #E93F33;
    color: white;
    font-size: 35px;
}

全てのコード

コードを表示 

<div class="pic-container pic-background">
    <h1>CSSでぼかしてずらす</h1>
</div>
.pic-background {
    background-image: var(--pic-image-data, none);
    background-size: cover;
    background-position: center;
}

.pic-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 600px;
    height: 338px;
    background-color: #fefefe;
    box-sizing: border-box;
}

h1 {
    padding: 5rem 1rem;
    -webkit-text-stroke: 2px #E93F33;
    text-shadow: 0px 0px 5px #E93F33, 0px 0px 8px #E93F33, 0px 0px 10px #E93F33, 0px 15px 10px red, 0px 30px 15px red;
    color: white;
    font-size: 35px;
}
このWEBパーツを確認する

HTML・CSSのカスタマイズや動作確認ができます

文字をずらしてノイズが入ったようにする

「text-shadow」で赤、青系の影を作り左上、右下にずらしグリッチノイズ風のエフェクトをつけています。

<h1>CSSでぼかしてずらす</h1>

 

h1 {
    padding: 5rem 1rem;
    color: white;
    text-shadow: 
      5px 0.5px 0.5px rgba(255, 0, 255,　.8), 
     -5px -0.5px 0.5px rgba(0, 255, 255,　.8);
    font-size: 32px;
    font-weight: bold;
}

全てのコード

コードを表示 

<div class="pic-container pic-background">
    <h1>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: 600px;
    height: 338px;
    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: blur(5px) brightness(30%);
    content: '';
    z-index: -1;
}

h1 {
    padding: 5rem 1rem;
    color: white;
    text-shadow: 5px 0.5px 0.5px rgba(255, 0, 255, .8), -5px -0.5px 0.5px rgba(0, 255, 255, .8);
    font-size: 32px;
    font-weight: bold;
}
このWEBパーツを確認する

HTML・CSSのカスタマイズや動作確認ができます

PR

動画編集入門プラン（2ヶ月）用LP
フリーランスエンジニアに安心保証
css text-shadow ずらし 影
B!

@ハクト

サービス作り・デザイン好き。70年代生まれのWEBエンジニア。WEBパーツをCSSでカスタマイズしてコピペできるサービスを運営中「Pa-tu」。実装したWEBパーツやツールを利用してWEB情報やライフハックを発信してます。

Twitter