アゴ乗せ日記

適当なポジティブ日記

スポンサーリンク

手書きレター風な囲みをCSSだけで作るやり方

はろー はろー

今日作るもの

これですね(下は画面キャプチャ

f:id:agonosetaro:20200415085608p:plain

まあささっとやってこ

CSS

デザインCSSに以下を追加

// 手書きフォント
@font-face {
    font-family: 'HuiFontP109';
    src: url("/fonts/public/HuiFont/HuiFontP109.eot");
    src: url("/fonts/public/HuiFont/HuiFontP109.eot?#iefix") format("embedded-opentype"), url("/fonts/public/HuiFont/HuiFontP109.woff") format("woff"), url("/fonts/public/HuiFont/HuiFontP109.ttf") format("truetype"), url("/fonts/public/HuiFont/HuiFontP109.svg#HuiFontP109") format("svg");
    font-weight: normal;
    font-style: normal;
}
// 囲み
.letter-kakomi {
    margin: 4em 0;
    padding: 20px 10px;
    color: #555;
    text-align: center;
    border: solid 1px;
    border-bottom: solid 2px;
    position: relative;
    font-family: 'HuiFontP109', sans-serif;
    font-size: 1.2rem;
}
.letter-kakomi::before {
    position: absolute;
    width: 100%;
    height: 8px;
    top: -8px;
    left: 0;
    background: repeating-linear-gradient(45deg, #3788A3, #3788A3 5px, white 5px, white 10px, #DA8C96 10px, #DA8C96 15px, white 15px, white 20px);
    background-color: black;
    border-radius: 5px;
    content: '';
}

OK

・@font-faceで手書きフォントを使えるようにする
・font-family で手書きフォントを指定する
・background: repeating-linear-gradient でカラフルにする

使い方

<div class="letter-kakomi">
いつもありがとねん♪
</div>
いつもありがとねん♪

自分のやつとはちょっと色違うのにしてみた

おわり

これからもよろしくねん♪

以上!!

\ いつもスターやコメント、ブックマークありがとうございます! /
スポンサーリンク