CSS練習

CSSの練習

h1. だけ。

影使ったもの

h1 {
    padding: .5em .75em;
    background-color: #f6f6f6;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

番号付き

body {
    counter-reset: secno
}
section {
    counter-increment: secno;
}
h1 {
    position: relative;
    padding: 0 0 .5em 2em;
    border-bottom: 1px solid #ccc;
}
h1::before {
    content: counter(secno);
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 100%;
    font-size: .10em;
    text-align: center;
    background-color: #ccc;
    color: #fff;
}

影その二

h1 {
    padding: .5em .75em;
    background: #f4f4f4;
    border-top: 1px dashed #ccc;
    border-bottom: 1px dashed #ccc;
    box-shadow: 0 7px 10px -5px rgba(0, 0, 0, .1) inset;
}

影と番号

body {
    counter-reset: secno;
}
section {
    counter-increment: secno;
}
h1 {
    padding: 0 0 .5em 2em;
    background: #f4f4f4;
    border-top: 1px dashed #ccc;
    border-bottom: 1px dashed #ccc;
    box-shadow: 0 7px 10px -5px rgba(0, 0, 0, .1) inset;
}

h1::before {
    position: absolute;
    top: 0;
    left: 0;
    content: counter(secno);
    width: 30px;
    height: 30px;
    line-height: 30px;
    background-color: #ccc;
    border-radius: 100%;
    color: #fff;
    font-size: .10em;
    text-align: center;
}

参考

https://nelog.jp/wordpress-h1-h6