CSS 문자 장식만

CSS만으로 그릴 수 있는 것이 추가돼 그래픽 소프트웨어를 사용하지 않아도 어느 정도 장식이 가능하다.
저번 상자 요소를 시도했고 이번에는 교재를 장식해 보았다.
텍스트에 CSS 그래디언트 드로잉의 배경을 적용합니다-webkit-background-clip: text;.
장식을 위해 라벨을 끼워 넣거나 빈 라벨을 사용하는 것을 좋아하지 않기 때문에 기본적으로span 라벨을 사용합니다.
그러나 span의 위조요소:before,:after를 이용했다.
※ 현대 브라우저만 검증했습니다.

코드

HTML

<p><span class="decorated sample-1">LOLLIPOP</span></p>
<p><span class="decorated sample-2">ROCK YOU</span></p>
<p style="background-color: #222;"><span class="decorated sample-3">NEON</span></p>
<p><span class="decorated sample-4">Shadow</span></p>

<script>
// 疑似要素のcontentを親要素（span）と同じ文字列にするスクリプト
// .decorated というclass名の要素を対象に
// data-text属性を追加しspanのテキストと同じ文字列を値に設定
deco = document.querySelectorAll('.decorated');
deco.forEach(function(element) {
    element.setAttribute('data-text', element.textContent);
});
</script>

JavaScript를 사용하지 않으려면

<p><span class="decorated sample-1" data-text="LOLLIPOP">LOLLIPOP</span></p>

위에서 설명한 대로 data-text 속성에 대해 동일한 텍스트를 설정하면 OK입니다.

기본 CSS

/* Googleフォント */
@import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Alfa+Slab+One|Audiowide|Bevan|Coiny|Poiret+One|Squada+One');

body {
    font-size: 100px;
}

p {
    margin: 30px 0;
}

/* base */
.decorated {
    display: inline-block;
    position: relative;
    z-index: 1;
    margin: 0;
}

.decorated:before {
    content: attr(data-text);
    position: absolute;
    z-index: 2;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.decorated:after {
    content: attr(data-text);
    position: absolute;
    z-index: 3;
    -webkit-text-fill-color: transparent;
}

샘플 1

/* sample : LOLLIPOP */
.sample-1 {
    color: #FEBA61;
    font-family: 'Coiny', cursive;
}

.sample-1:before {
    top: 0;
    left: 0;
    background:
        radial-gradient(white 25%, transparent 0),
        radial-gradient(circle farthest-side, #FD9BE2, #FEBA61);
    background-size: 20px 20px, 100% auto;
    -webkit-background-clip: text;
}

.sample-1:after {
    top: -6px;
    left: -6px;
    -webkit-text-stroke: 5px #F32B93;
}

샘플 2

/* sample : ROCK YOU */
.sample-2 {
    font-family: 'Squada One';
    font-size: 1.2em;
    letter-spacing: .05em;
    background: linear-gradient(to right, #AA201B 50%, #841A16 0);
    background-size: 6px 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter:
        drop-shadow(1px 1px 0 #222)
        drop-shadow(1px 1px 0 #222)
        drop-shadow(2px 2px 0 #222)
        drop-shadow(2px 2px 0 #222)
}

.sample-2:before {
    -webkit-text-stroke: 4px #AA201B;
    filter: drop-shadow(1px 1px 0 #222);
}

.sample-2:after {
    display: none;
}

샘플 3

/* sample : NEON */
.sample-3 {
    font-family: 'Audiowide';
    font-weight: bold;
    filter:
        drop-shadow(10px 10px 5px rgba(255, 255, 255, .1))
        drop-shadow(10px 10px 10px rgba(255, 255, 255, .05));
}

.sample-3:before {
    left: 0;
    top: 0;
    background: linear-gradient(to right, #bfe5ff 0%,#87ffdb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: blur(10px);
    opacity: .6;
}

.sample-3:after {
    left: 0;
    top: 0;
    background: linear-gradient(to right, #bfe5ff 0%,#87ffdb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 2px rgba(255, 255, 255, .2);
}

샘플

/* sample : Shadow */
.sample-4 {
    left: 8px;
    top: 8px;
    background: linear-gradient(-45deg, #CDC6FF 25%, #fff 25.1%, #fff 50%, #CDC6FF 50.1%, #CDC6FF 75%, #fff 75.1%, #fff 0);
    background-size: 4px 4px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Abril Fatface';
}

.sample-4:before {
    left: -8px;
    top: -8px;
    -webkit-text-fill-color: #CDC6FF;
    -webkit-text-stroke: 1px #B4AFE2;
}

CodePen

이번 코드는 CodePen에 요약되어 있다.
See the Pen Pure CSS Text Decoration by noqua ( @noqua ) on CodePen .

---

이상입니다.

background와 text-shadow를 병용하면 당연히 text-shadow를 background 위에 그려야 하기 때문에 위조 요소와 z-index 조정이 필요하다고 생각합니다.br/>
이미지도 없고 태그 하나로 표현할 수 있다니 대단하군br/>-webkit-background-clip: text; 지원되지 않는 브라우저를 고려한 경우support로 스타일을 나누고, 가득 바른+섀도우로 바꾸면 최소한의 대응이 아닌가p>
참고가 되었으면 좋겠습니다