[CSS] text-shadow 다양하게 적용하기

 

p.p1{
	text-shadow: 5px 5px #ccc; 
    /* 오른쪽 5px 아래 5px  #ccc로 그림자  */
    }

p.p2{
  text-shadow : 5px 5px 5px #ccc;  
  /* 오른쪽 5px 아래 5px 번짐 5px  #ccc로 그림자  */
  }
  
p.p3{
	text-shadow: 1px 1px #ccc, 2px 2px #ccc, 3px 3px #ccc,4px 4px #ccc,5px 5px #ccc;
	/* 오른쪽 1~5px 아래 1~5px  #ccc로 그림자 여러개 적용  */
    }
p.p4{
    text-shadow : 0 1px #ccc, 0 2px #ccc, 0 3px #ccc, 0 4px #ccc, 0 4px #ccc;
    /* 오른쪽 0 아래 1~4px  #ccc로 그림자 여러개 적용  */
    }
p.p5{
    text-shadow : -1px -1px #ccc, -2px -2px #ccc, -3px -3px #ccc,-4px -4px #ccc,-5px -5px #ccc;
    /* 왼쪽 1~5px 위쪽 1~5px  #ccc로 그림자 여러개 적용  */
    }
p.p6{
    text-shadow : -1px 1px #ccc, -2px 2px #ccc, -3px 3px #ccc,-4px 4px #ccc,-5px 5px #ccc;
    /* 왼쪽 1~5px 아래 1~5px  #ccc로 그림자 여러개 적용  */
    }

 

 

text-shadow : (음수는 왼쪽 양수는 오른쪽)px (음수는 위쪽 양수는 아래쪽)px (블러효과-생략가능) (그림자색상);

 

여러개의 그림자를 설정해서 그림자를 두껍게 만들어줄수도 있다 

 

 

아래에서 

떠있는듯한 그림자, 살짝 연하게 생긴 그림자, 두꺼운 그림자, 방향에 따른 그림자를 확인할 수 있다.