728x90
CSS로 폰트 그림자 넣기 (text-shadow)
퍼블리싱을 할때 입력한 텍스트에 가독성을 올리고, 입체감을 주기 위해서 텍스트 폰트에 그림자 넣는 방법을 알아보겠습니다.
css에 text-shadow을 활용하는 것인데요! text-shadow 세부 옵션값들을 잘~~ 조절하면 포토샵에서 폰트에 drop shadow를 넣어주듯이 표현이 가능합니다.
{text-shadow: 가로거리 세로거리 번지는정도 색상값;}
<style>
.shadow {
font-size:20px;
font-weight:bold;
color:red;
text-shadow:3px 3px 3px rgb(0,0,0);}
</style>
<body>
<p class="shadow">폰트에 그림자 넣기</p>
</body>위 옵션 중 가로거리의 옵션값이 "+"면 그림자가 오른쪽으로 생성되고, "-"면 왼쪽으로 생성됩니다.
세로거리의 옵션값이 "+" 일 때 아래쪽으로 생기고, "-" 일 때는 위쪽으로 그림자가 생성됩니다.
번지는 정도는 옵션값의 숫자가 커질수록 많이 번지구요~
색상값은 rgba로 알파값 설정해주면 그림자 투명도 설정할 수도 있으니 아래 소스로 한번 테스트 해보세요.
반응형
'공부 > html, css' 카테고리의 다른 글
| audio 태그로 웹에 음악 넣기 (0) | 2023.01.07 |
|---|---|
| ul 스타일 주기 (li 불릿 교체 및 삭제, 들여쓰기 없애기) (0) | 2023.01.07 |
| 웹폰트 적용하기 (0) | 2023.01.07 |
| 개체 변형, 회전 시키기 (transform) (0) | 2023.01.07 |
| css3 Animations 속성 (animation, keyframes) (0) | 2023.01.07 |
