【CSS】文字装飾のサンプル集 30選

<H3>
    <div class="style01 fontStyle01">
        文字装飾
        <span>文字装飾</span>
        <span>文字装飾</span>
        <span>文字装飾</span>
        <span>文字装飾</span>
        <span>文字装飾</span>
    </div>
</H3>

.fontStyle01{
    font-family: serif;
    font-size: 30px;
    color: rgba(0,0,0,0);
}

文字を
<div class="style01 fontStyle01">
    装飾
    <span>装飾</span>
    <span>装飾</span>
    <span>装飾</span>
    <span>装飾</span>
    <span>装飾</span>
</div>
します。

.fontStyle01{
    font-family: serif;
    font-size: 20px;
    color: rgba(0,0,0,0);
}

.style01 {
    display: inline-block;
    position: relative;
    color: rgba(0,0,0,0); /* 透明 */
    top:0;
    left: 0;
}
.style01 span:nth-of-type(1){
    position: absolute;
    color: #999; /* グレー */
    top: 0;
    left: 0;
    -webkit-text-stroke-width: 8px;
    z-index: 10;
}
.style01 span:nth-of-type(2){
    position: absolute;
    color: #333; /* 黒 */
    top: 0;
    left: 0;
    -webkit-text-stroke-width: 6px;
    z-index: 20;
}
.style01 span:nth-of-type(3){
    position: absolute;
    color: #FFF; /* 白 */
    top: 0;
    left: 0;
    -webkit-text-stroke-width: 4px;
    z-index: 30;
}
.style01 span:nth-of-type(4){
    position: absolute;
    color: #F00; /* 赤 */
    top: 0;
    left: 0;
    -webkit-text-stroke-width: 1px;
    z-index: 40;
}
.style01 span:nth-of-type(5){
    position: absolute;
    color: #F00; /* 赤 */
    margin: 0;
    -webkit-background-clip: text;
    -webkit-text-stroke: 0px ;
    top: 0;
    left: 0;
    z-index: 50;
}

<div class="style01 google_font01">
    例文
    <span>例文</span>
    <span>例文</span>
    <span>例文</span>
    <span>例文</span>
    <span>例文</span>
</div>

.google_font01{
    font-family: 'Kaisei Opti', serif;
    font-weight: 400;
    font-style: normal;
    font-size: 50px; /* 文字サイズ */
}

<div class="parent01">
    <div class="child01">
        <div class="style01 fontStyle01">
            夜景
            <span>夜景</span>
            <span>夜景</span>
            <span>夜景</span>
            <span>夜景</span>
            <span>夜景</span>
        </div>
    </div>
</div>

.parent01 {
    position:relative;
    background-image: url(./tokyo.jpg);
    background-repeat:no-repeat;
    background-position:left top;
    background-size:contain;
    height:150px;
}
.child01 {
    display: inline-block;
    position: relative;
    top: 10px;
    left: 10px;
}

<div class="parent02">
    <div class="child02">
        <div class="style01 fontStyle01">
            夜景
            <span>夜景</span>
            <span>夜景</span>
            <span>夜景</span>
            <span>夜景</span>
            <span>夜景</span>
        </div>
    </div>
</div>

.parent02 {
    position:relative;
    background-image:url(./tokyo.jpg);
    background-repeat:  no-repeat;
    background-position:center top;
    text-align: center;
    background-size:contain;
    height:150px;
}
.child02 {
    display: inline-block;
    position: relative;
    top:10px;
}