【HTML＆CSS】ルーズリーフ風のデザイン

今回は、簡単なCSSのサンプルです。

ルーズリーフ風のデザインをCSSのみで描いてしまうものですね。

まずは、どんなデザインになるか、画像で。

▼とりあえず、コードはこんな感じです。

旧式を進化版をご紹介いたします。

【HTML】

<div class="looseleaf_box">
    <h2>ルーズリーフ風のCSS（旧式）</h2>
    <p>あいうえお</p>
    <p>あいうえおあいうえおあいうえおあいうえお</p>
    <p>あいうえおあいうえおあいうえお</p>
</div>

<div class="looseleaf_box2">
    <h2>ルーズリーフ風のCSS（進化版）</h2>
    <p>あいうえお</p>
    <p>あいうえおあいうえお<br>あいうえおあいうえお<br>あいうえおあいうえおあいうえ
お<br>あいうえおあいうえお</p>
    <p>あいうえおあいうえおあいうえお</p>
</div>

【CSS】

/* ■■■■■ ルーズリーフ風のCSS ■■■■■ */
.looseleaf_box {
    box-sizing: border-box;
    padding: 30px 20px 20px;
    margin: 20px 0;
    border-left: 20px dotted #fff;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    background-color: #f2f2f2;
    background: linear-gradient(to bottom, #f2f2f2 29px, #bbb 30px);
    background-size: auto 30px;
    line-height: 30px;
}
.looseleaf_box2 {
    box-sizing: border-box;
    padding: 30px 20px 20px 50px;
    margin: 20px 0;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    background-image:
        repeating-linear-gradient(to bottom, transparent, transparent 29px, #bbb 30px),
        radial-gradient(circle at 20px 25px, transparent 10px, #f2f2f2 11px),
        radial-gradient(circle at 21px 26px, transparent 10px, #ccc 11px);
    background-size:
        calc(100% - 65px) 30px, 100% 40px, 100% 40px;
    background-repeat: repeat-y;
    background-position: 40px top, top left, top left;
    line-height: 30px;
}
.looseleaf_box p,
.looseleaf_box2 p {
    margin: 30px 0;
    line-height: 30px;
}
.looseleaf_box h2,
.looseleaf_box2 h2 {
    margin: 2px 0 10px;
    line-height: 30px;
}

【解説】

.looseleaf_box　が旧式、

.looseleaf_box2　が改良版です。

.looseleaf_box が border-left: 20px dotted #fff; で穴を描いているのに対して、

.looseleaf_box2 は radial-gradient で穴を表現させてます。

サンプルCSSはお好きなように改良して使ってください。

このCSSの優秀なところは、左側のパンチ穴の箇所が transparent で本当に透過しているところです。

なので、どんな背景でも使用可能です。

場合によっては、position:absolute; で画像の上などに持ってきても普通に透過できるので、そんな使い方も可能ですよ(^▽^)

box-shadow で影をつけることもできますが、その場合はパンチ穴の方に影が適用されません。 影をつけたい場合は、

filter: drop-shadow( rgba(0,0,0,0.3) 1px 1px 2px );

とかでつけた方が、パンチ穴にも影が適用されるのでオススメです。

(｀･ω･´)ゞ