a battle with myself

[css] text shadow 본문

html + css

[css] text shadow

열공_중 2016. 6. 14. 08:57

text-shadow 효과... 그림자 효과..

 

기본.... 

 

text-shadow: h-shadow v-shadow blur-radius color;

text-shadow: 오른쪽 아래쪽 그림자길이 색상;

 

오른쪽 아래쪽  0으로 적용시  전체에 효과가 생긴다.

 

 

 

	

	

		text-shadow 효과보기..

 

 

 

 

shadow 효과 적용  -  미적용

 

---------------------------------------------------------------------------------------------------------------------------------------------------------

 

아래쪽으로 3px 그림자길이를 3px 이번엔 잘보이게 빨간색으로...

 

text-shadow: 0 2px 3px #f00;
-moz-text-shadow: 0 2px 3px #f00;
-webkit-text-shadow: 0 2px 3px #f00; 
-o-text-shadow: 0 2px 3px #f00;

 

	
	
	

	

		text-shadow 효과보기..
	




 

 

 

 

---------------------------------------------------------------------------------------------------------------------------------------------------------

 

오른쪽으로 3px 그림자길이를 3px 이번엔 녹색으로...

 

text-shadow: 2px 0 3px #0f0;

-moz-text-shadow: 2px 0 3px #0f0;
-webkit-text-shadow: 2px 0 3px #0f0; 
-o-text-shadow: 2px 0 3px #0f0;

 

 

	
	
	

	

		text-shadow 효과보기..

 

 

 

 

'html + css' 카테고리의 다른 글

[css] 이미지 확대 / transform:scale / transition:transform  (2) 2016.07.04
[css] position(static/relative/absolute/fixed)  (2) 2016.06.29
[css] box-sizing:border-box  (0) 2016.05.29
'html + css' Related Articles more