웹솔루션개발 22년 노하우! 해피CGI의 모든것

[해피CGI][cgimall] CSS로 입체적인 텍스트 그림자 효과 넣기 본문

웹프로그램밍 자료실/HTML 자료

[해피CGI][cgimall] CSS로 입체적인 텍스트 그림자 효과 넣기

해피CGI윤실장 2018. 1. 25. 09:05

CSS3에는 요소(박스형태)에 그림자를 부여하는 box-shadow와 글자에
그림자를 부여하는 text-shadow가 있습니다. 

글자에 그림자를 부여하는 경우는 한글 폰트의 희박성으로 효과가 미미하나
박스형태의 그림자 부여는 얼마든지 사용할 수 있습니다.


CSS





결과





위와 같은 방법으로 텍스트를 디자인할 수 있습니다. 
그외에도 방향과 값에 따라서 다양한 디자인 효과를 연출해낼 수 있습니다. 


CSS





결과




그 외 더욱 다양한 효과를 보고싶다면 
아래의 링크로 활용해보시기 바랍니다. 

더욱 다양한 효과 활용하기
Comments