CSS를 사용한 기본 3D 텍스트 만들기

3D 텍스트를 만드는데 필수적인 텍스트에 그림자를 달아주는 속성의 text-shadow에 대해서 소개하겠습니다.

텍스트에 그림자를 넣으려면 Photoshop과 같은 이미지 편집 소프트웨어로 가공해서 3D 효과를 연출하지만, 이미지를 사용하지 않고 CSS만으로 간단하게 여러 가지 효과를 낼 수 있습니다.

text-shadow 선언 구문

기본적인 선언 구문은 아래와 같습니다. 쉼표(,)로 구분하여 여러 그림자를 붙일 수 있습니다.

  <style>
  
     h2 {text-shadow: offset-x offset-y blur-radius color;}
     
  </style>

offset-x

필수 항목입니다. 가로 그림자의 어긋남의 길이(거리)를 지정합니다.

offset-y

필수항목입니다. 수직 방향의 어긋남의 길이를 지정합니다.

음수이면 텍스트에 그림자를 배치합니다. 두 값이 0이면 그림자가 텍스트 뒤에 배치됩니다

스폰서 링크

blur-radius

흐림 강도의 길이(반경)을 지정합니다. 지정되지 않으면 0입니다. 이 값이 클수록 흐려짐도 커지고 그림자는 넓고 얇아집니다.

color

그림자의 색상을 지정합니다. 기본값은 글자 색과 같은 색입니다.

  <style>
     h2 {text-shadow: 1px 1px 0px block;}  
     h2 {text-shadow: 1px 1px 0px #ffffff, 3px 3px 2px #663333;}
     h2 {text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;}
     h2 {text-shadow:-1px -1px 1px #000;}
     h2 {text-shadow:-1px -1px 1px #111, 1px 1px 1px #000;}
     
  </style>

TEXT SHADOW

3D TEXT

Y 축에 양수를 점점 더하면서 그림자의 색상도 서서히 어두워지며, 아래와 같은 3D 교환 연출 나와있었습니다.

 <style>
  text-shadow: {
		color:#FFF;
		0 1px 1px #bbb,
		0 2px 0 #999, 
		0 3px 0 #888, 
		0 4px 0 #777, 
		0 5px 0 #666, 
		0 6px 0 #555, 
		0 7px 0 #444, 
		0 8px 0 #333, 
		0 9px 7px #302314;}
 </style>

네온 효과(NEON Effect)

텍스트 색상 : 흰색, 색상은 라이트 핑크 다크 핑크로 설정, blur-radius 반경도 점차 넓혀가고 있습니다.

 <style>
  text-shadow: {
		color:#FFF;
		0 0 10px #fff,
		0 0 20px #fff,
		0 0 30px #fff,
		0 0 40px #f766e4,
		0 0 70px #f658e2,
		0 0 80px #f54bdf,
		0 0 100px #f33ddc,
		0 0 120px #f22ed9,
		0 0 150px #ef16d3;
}
 </style>

3D TEXT Sample

<head>
 <style>
 .backshadow{text-align:center;
	 background-color:#0d6d91;
	 line-height:10em;border-radius:5px;}
 h1.text-amazing{
	text-shadow:
    0 1px 0 #ffffff,
    0 1.5px 0 #d3d5d6,
    0 2px 0 #7c98a1,
    0 2.5px 0 #4e727e,
    2px 3px 4px rgba(0,0,0,0.1),
    2px 3px 4px rgba(0,0,0,0.3);
    color: #dfe1e2;
	font-size:3.5em;}
 </style>
</head>

<body>
    <div class="backshadow">
        <h1 class="text-amazing">3D Text Amazing!!</h1>
    </div>
</body>

화이트 3D TEXT

<head>
 <style>
#amazingtext{
    text-align:center;
    border:1px solid #666;
    border-radius:5px;}
#amazingtext h1{
    color: #fff;
    font-size:3.5em;
    text-shadow:
      0 1px 1px #c0c0c0,
      0 2px 0 #a8a7a6,
      0 3px 0 #8b8a89,
      0 4px 0px #7d7b7a,
      0 5px 0px #686766,
      0 6px 3px #5f5e5d;
}
 </style>
</head>

<body>
    <div id="amazingtext">
      <h1>3d text Amazing!!</h1>
    </div>
</body>

3D TEXT 링크

링크가 걸린 텍스트 위에 마우스를 올리면 3D로 텍스트로 바뀝니다.

<head>
 <style>
 #amazinglink a:link, 
 #amazinglink a:visited {
	color: #303030; 
	line-height:3em;
	font-size:3.5em;
	text-decoration:none;
 }
 #amazinglink a:hover, 
 #amazinglink a:active {
	text-shadow:			   
	0 1px 1px #c0c0c0,
	0 2px 0 #a8a7a6, 
	0 3px 0 #8b8a89, 
	0 4px 0 #7d7b7a,
	0 5px 0 #686766,
	0 6px 3px #5f5e5d;
 }
 </style>
</head>

<body>
  <div id="amazinglink">
  <a href="#">3d text shadow </a>
  </div>
</body>

스폰서 링크