枠をずらしたCSS見出しデザイン

@ハクト 2022-01-18 11:20:47に投稿

CSSで背景の枠をずらした見出しデザインを作成しました。

あえて要素をずらすことで新鮮で抜け感のあるデザインになります。

可愛いらしい雰囲気だったり雑記ブログなどあまり堅苦しくないテンプレートの見出しや記事のアイキャッチ画像にご活用ください。

枠をずらした見出し

枠をずらした見出し

「box-shadow」プロパティを使用し、右下に文字と同色の赤色の枠をずらして表示しています

CSS表示


h2 {
    margin-bottom: 0.2rem;
    padding: 1rem;
    box-shadow: 5px 5px 0 #ea5b69;
    background-color: black;
    color: #ea5b69;
    font-weight: bold;
    font-size: 26px;
    text-align:center;
}

境界線を入れて枠をずらした見出し

中抜きにして枠をずらした見出し

「border」プロパティで境界線を入れ影の色を同色にしたデザインです

CSS表示


h2 {
    margin-bottom: 0.2rem;
    padding: 1rem;
    box-shadow: 10px 10px 0 #50b2c5;
    border: 2px solid #50b2c5;
    color: #353535;
    font-weight: bold;
    font-size: 26px;
    text-align: center;
}

左上にずらした見出し

中抜きにして枠をずらした見出し

背景を指定せず左上に影をつけました。

CSS表示


h2 {
    margin-bottom: 0.2rem;
    padding: 1rem;
    box-shadow: -10px -10px 0px;
    font-weight: bold;
    font-size: 26px;
    text-align:center;
}

破線をずらした見出し

破線をずらした見出し

before疑似要素で破線にしてずらしてます。

CSS表示

下側に影を入れた見出し

下側に影を入れた見出し

「box-shadow」で影を入れてます

CSS表示

右下に影を入れた見出し

右下に影を入れた見出し

「border-radius」で角丸にし「box-shadow」で影を入れたシンプルな見出し

CSS表示

h2 {
    position: relative;
    padding: 1rem 2rem;
    box-shadow: 5px 5px #212121;
    border: 3px solid #212121;
    border-radius: 10px;
    background-color: #F2B1AF;
    color: #212121;
    font-size: 26px;
    font-weight: bold;
}

影を境界線にした見出し

影を境界線にした見出し

「box-shadow」で影を入れ、「outline」で白くした線を影の上に重ねて境界線を作ってます

CSS表示

h2 {
    position: relative;
    padding: 1rem 2rem;
    box-shadow: 6px 6px #212121;
    outline: 3px solid #fff;
    border: 3px solid #212121;
    background-color: #efe9ae;
    color: #212121;
    font-size: 26px;
    font-weight: bold;
}

背景をずらした見出し

背景をずらした見出し

「border」を指定したボックスを作成。「before」疑似要素で背景をずらしました。 

CSS表示

枠を変形させてずらした見出し

枠をずらして背景を変形させた見出し

「border-radius」で枠と背景を変形。「before」疑似要素で背景を透過させて「top」「left」でずらしています。

CSS表示

h2 {
    position: relative;
    margin-bottom: 0.2rem;
    padding: 1rem;
    background-color: #f1f1f1;
    color: #434343;
    border-radius: 2em .6em 3em .4em/.3em 4em .6em 2em;
    background-color: #f1a6a7;
    font-size: 26px;
    font-weight: bold;
    text-align: center;
}

h2:before {
    position: absolute;
    top: 3px;
    left: 3px;
    transform: rotate(1deg);
    width: 100%;
    height: 100%;
    border: 2px solid;
    border-radius: 2em .6em 3em .4em/.3em 4em .6em 2em;
    content: '';
}

枠線を傾斜させてずらした見出し

枠線と変形させてずらしたCSS見出しデザイン

before、after疑似要素に「transform: skew」を指定し背景を枠線にくぐらせたようにしています

CSS表示

h2 {
    position: relative;
    padding: 1rem;
    border-left: 5px solid #E9DD2D;
    border-right: 5px solid #E9DD2D;
    background-color: #E9DD2D;
    color: #563e26;
    font-size: 26px;
    font-weight: bold;
    text-align: center;
}

h2::before,
h2::after {
    position: absolute;
    top: -8px;
    left: 0;
    width: 100%;
    height: 110%;
    border-top: 3px solid;
    border-bottom: 3px solid;
    transform: skew(15deg);
    content: '';
}

h2::before {
    border-left: 2px solid;
    z-index: -1;
}

h2::after {
    border-right: 2px solid;
}

枠を回転させてはみ出た部分を隠す

枠をずらした見出し

「before」疑似要素で境界線付きの枠をつくる。「transform:rotate」で少し回転。h2セレクタにoverflow:hiddenを指定しはみ出て部分を隠してます。

CSS表示


                
h2 {
    position: relative;
    padding: 1.5rem 1rem;
    margin-bottom: 0.2rem;
    overflow: hidden;
    background-color: black;
    color: white;
    font-weight: bold;
    font-size: 26px;
}

h2:before {
    position: absolute;
    top: -4px;
    right: -4px;
    bottom: -4px;
    left: -4px;
    border: 5px solid #fffb30;
    transform: rotate(2deg);
    content: '';
}

上下に斜め線を入れた見出し

上下に斜め線を入れた見出し

「before」疑似要素で上下に境界線が入った枠をつくる。「transform:rotate」で少し回転。h2セレクタにoverflow:hiddenを指定しはみ出て部分を隠してます。

CSS表示


h2 {
    position: relative;
    padding: 1.5rem 1rem;
    overflow: hidden;
    background-color: #212121;
    color: white;
    font-weight: bold;
    font-size: 26px;
}

h2:before {
    position: absolute;
    top: -1rem;
    right: 0;
    bottom: -1rem;
    left: 0;
    border-top: 1rem solid #e94361;
    border-bottom: 1rem solid #e94361;
    transform: rotate(-1deg);
    content: '';
}

ストライプをずらした見出し

ストライプをずらしたCSS見出しデザイン

「outline」で実践を引き、「background-position」でストライプをずらしてます

コードを表示

<h2>CSSでつくる見出しデザイン</h2>
h2 {
    position: relative;
    padding: 1rem;
    outline: 2px solid #333;
    outline-offset: -5px;
    background-image:
        repeating-linear-gradient(45deg, #E2DED3 0 7px, transparent 7px 12px);
    background-repeat: no-repeat;
    background-position: 10px 10px;
    color: #333;
    font-size: 26px;
    font-weight: bold;
    text-align: center;
}

 

 

以上が枠をずらした見出しとなります。「box-shadow」や「before疑似要素」で「border」等を指定するとズレを作ることができるので、ぜひ試してみてください。

以下からCSSを編集してずらした見出しをカスタマイズできます ずらした見出し一覧

@ハクト

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

Twitter