●トップ > 勉強中 > HTML5+CSS3 > ６回目　CSS見出し

６回目　CSS見出し

2014-11-26
角丸

角丸でござる

--[ html ]-----------------------
<section>
<h1 class="midasi1">角丸でござる</h1>
</section>

--[ CSS ]------------------------
.midasi1{
    background: #ff3366;
    border-radius: 10px;
    color: #ffffff;
    font-size: 14px;
    margin-bottom: 30px;
    padding: 10px;
    width: 200px;
}
角丸とテキストに影

角丸とテキストに影でござる

--[ html ]-----------------------
<section>
<h1 class="midasi2">角丸とテキストに影でござる</h1>
</section>

--[ CSS ]------------------------
.midasi2{
    background: #ff3366;
    border-radius: 10px;
    color: #ffffff;
    font-size: 14px;
    margin-bottom: 30px;
    padding: 10px;
    width: 200px;
    box-shadow: 20px 20px 10px 0px black;
    text-shadow: 1px 1px 3px #000;
}
見出しを斜めに

見出しを斜めにでござる

--[ html ]-----------------------
<section>
<h1 class="midasi3">見出しを斜めにでござる</h1>
</section>

--[ CSS ]------------------------
.midasi3{
    background: #ff3366;
    border-radius: 10px;
    color: #ffffff;
    font-size: 14px;
    margin-bottom: 30px;
    padding: 10px;
    width: 200px;
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
}