CSS3 shadows 그림자효과

CSS3를 사용하여 텍스트와 요소에 그림자를 줄 수 있습니다.

사용할 수 있는 CSS는 텍스트와 박스 쉐도우 두가지가 있습니다

text-shadow

box-shadow

text-shadow는 텍스트에 그림자를 적용할 수 있습니다.

수평 2px과 수직 2px로 가장 쉽게 적용해 보겠습니다.

SHADOW EFFECT

text-shadow: 2px 2px;

수직과 수평의 쉐도우는 아시겠죠?

SHADOW EFFECT

text-shadow: 2px 2px blue; 

쉐도우의 컬러는 수직수평 뒤에 적어주면 됩니다.

SHADOW EFFECT

text-shadow: 2px 2px 5px blue; 

수직 수평뒤에 쉐도우에 흐림 효과를 추가해줍니다.

SHADOW EFFECT

text-shadow: 0px 0px 5px #0874c6; 

수직수평에 0을 주고 텍스트 주위에만 쉐도우를 줍니다. 보통 이게 자연스럽습니다.

SHADOW EFFECT

text-shadow: 0px 0px 2px #0874c6, 0px 0px 5px #c60850; 

두가지 쉐도우를 동시에 넣을 수 있습니다. 콤마로 구분해주면 됩니다.

box-shadow는 그림자를 요소에 넣습니다. 텍스트는 text-shadow를 쓰구요!

<div>요소

box-shadow: 10px 10px;

text-shadow와 똑같이 수직과 수평으로 지정합니다.

<div>요소

box-shadow: 10px 10px grey;

수직 수평 뒤에 컬러를 적어주면 됩니다.

<div>요소

box-shadow: 10px 10px 5px grey;

수직수평쉐도우 뒤에 흐림효과정도를 적어줍니다.

쉐도우 효과는 구 브라우저 익스플로어9 이하 버전에선 지원 하지 않는 속성들입니다. 적절히 잘 사용하면 예쁘게 포토샵에서 이미지 작업 할 필요 없이 css만으로 쉐도우를 줄 수 있는 아주 좋은 속성들입니다. 하지만 너무 많이 쓰게되면 브라우저 속도 또는 컴퓨터가 느려질 수 있으니 주의해 주시구요.

2017/08/15 - [웹(IT) 정보/css] - css navigation bar 네비게이션 메뉴 바 만들기

2017/08/13 - [웹(IT) 정보/css] - CSS before&after 컨텐츠 앞뒤 삽입