가끔 멋드러진 홈페이지를 보면 빵꾸 뚫린 글자를 볼 수 있다.
어떻게 하는지 찾아봤더니...
- HTML
<!-- text-shadow ver. -->
<h2 class="shadow">산타와 토미</h2>
<!-- stroke ver. -->
<h2 class="stroke">토미와 산타</h2>
- CSS
/* reset */
h2 {
color: #fff;
}
/* text-shadow ver. */
h2.shadow {
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
}
/* stroke ver. */
h2.stroke {
-webkit-text-stroke: 1px #000;
}text-shadow의 경우 좌, 상, 우, 하로 돌려서 그림자를 주는 것이다.
stroke의 경우 webkit 지원이므로 지원되지 않는 브라우저도 있다.
text-shadow ver.
산타와 토미
stroke ver.