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

css이용하여 이미지의 단순한 그림자가 아닌 이미지가 반사된듯한 그림자 효과입니다. 해당 사이트에서 전체 소스를 확인 할 수 있습니다. ​ ​ ​

ext-shadow css를 이용하여 텍스트에 그림자 효과를 줄수 있습니다. text-shadow: x축값, y축값, 번짐정도, 색상값; 예시) text-shadow: 2px 2px 5px red; ​ text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF; 위 예시와 같이 그림자를 출력할 수 있으며, 두개 이상의 그림자도 생성 가능합니다. 두개 이상의 값을 적용하면 아래와 같이 겹쳐보이는 글자를 만들어볼 수 있습니다. * 첨부된 사이트를 참고하시면 자세한 소스를 확인하실 수 있습니다. text-shadow: 5px 5px 0px #eb452b, 10px 10px 0px #efa032, 15px 15px 0px #46b59b, 20px 20px 0px #017e7f, 25px ..

css를 이용하여 컨텐츠가 있는 박스의 그림자 효과를 넣을수 있습니다. 기본적인 박스 디자인에 아래와 같은 스타일로 다양한 그림자 효과를 적용할 수 있습니다. 응용하여 마우스 오버시 박스에 그림자 효과를 주어 컨텐츠에 포커스 되게 할 수 있습니다.

디자인작업시, 그림자 효과를 내고 싶을때 기존에는 shadow느낌의 gif나 JPG를 반복패턴으로 영역 내에 배경이미지로 넣었습니다. 하지만 CSS로 간편하게 삽입이 가능합니다. #example2 { box-shadow: 5px 10px #888888; } 위와같이 box-shadow 기능을 이용하면 쉽게 가능합니다. 참고로 그림자를 넣게되면, 별도의 영역을 차지 하지 않으면서 그림자효과를 낼 수 있어, 가로와 세로너비에 신경쓰지 않아도 되 편리합니다. 속성을 보면, 그림자의 우측, 하단의 사이즈와 컬러를 지정한다는것을 알 수 있습니다. 활용예시 :

CSS3에는 요소(박스형태)에 그림자를 부여하는 box-shadow와 글자에 그림자를 부여하는 text-shadow가 있습니다. 글자에 그림자를 부여하는 경우는 한글 폰트의 희박성으로 효과가 미미하나 박스형태의 그림자 부여는 얼마든지 사용할 수 있습니다. CSS 결과 위와 같은 방법으로 텍스트를 디자인할 수 있습니다. 그외에도 방향과 값에 따라서 다양한 디자인 효과를 연출해낼 수 있습니다. CSS 결과 그 외 더욱 다양한 효과를 보고싶다면 아래의 링크로 활용해보시기 바랍니다. 더욱 다양한 효과 활용하기