| | at : |


Archive

[CODING] HTML/CSS 글자 테두리 적용하기(Apply text border) / text-shadow 하훌 rwxr-xr-x 0 11/10/2015



[CODING] HTML/CSS 글자 테두리 적용하기(Apply text border) / text-shadow

Permission rw-r--r--
Author 하훌
Date and Time 11/10/2015
Label
License 크리에이티브 커먼즈 라이선스


웹에서 간단하게 글자에 테두리를 넣는 방법입니다.
CSS에서 text-shadow 를 통해 그림자를 넣고, 그림자 색상을 지정하여 테두리처럼 보이도록 꾸밀 수 있습니다.



font.css

text-shadow: -1px 0 #F2F1F6, 0 1px #F2F1F6, 1px 0 #F2F1F6, 0 -1px #F2F1F6;
-moz-text-shadow: -1px 0 #F2F1F6, 0 1px #F2F1F6, 1px 0 #F2F1F6, 0 -1px #F2F1F6;
-webkit-text-shadow: -1px 0 #F2F1F6, 0 1px #F2F1F6, 1px 0 #F2F1F6, 0 -1px #F2F1F6;

위와 같은 방법으로 text-shadow, -moz-text-shadow, -webkit-text-shadow 를 적용하여 글자 테두리를 만들 수 있습니다.
CSS를 사용하지 않고 style 태그로도 동일하게 나타낼 수 있습니다.

<html>
<body bgcolor=black>
<style>
.test_text {
 text-shadow: -1px 0 #F2F1F6, 0 1px #F2F1F6, 1px 0 #F2F1F6, 0 -1px #F2F1F6;
 -moz-text-shadow: -1px 0 #F2F1F6, 0 1px #F2F1F6, 1px 0 #F2F1F6, 0 -1px #F2F1F6;
 -webkit-text-shadow: -1px 0 #F2F1F6, 0 1px #F2F1F6, 1px 0 #F2F1F6, 0 -1px #F2F1F6;
}
</style>
<div class="test_text">이 부분에 해당하는 글씨는 테두리 처리가 됩니다.</div>
</body></html>





Share







HAHWUL
HACKING | PENETRATION-TEST | CODING
HACKERONE : GIT : 0DAY-TODAY : EXPLOIT-DB : PACKETSTORM
GOOGLE+ | HAHWUL@GMAIL.COM | TWITTER
WWW.HAHWUL.COM






Recent Post

0 개의 댓글:

댓글 쓰기