CSS3로 3D 텍스트를 만드는 방법

이 자습서는 CSS3의 속성 만 사용하여 이미지, 플러그인 또는 캔버스를 피하는 3D 텍스트 효과를 생성하는 것을 보여줍니다. 깊이의 환상은 미묘한 색상과 오프셋 변형으로 여러 텍스트 그림자를 레이어링하여 달성됩니다.

text-shadow 이 이미지는 레이어링 기술을 보여줍니다. 여러 텍스트 그림자, 각각의 텍스트 그림자는 각각 이전의 것보다 약간 오프셋되어 3D 효과를 만듭니다. 실제 구현에서 색상 차이는 최소화됩니다 (약 1px 간격).

추가 현실주의에는 몇 가지 흐릿한 그림자가 추가됩니다. 전체 CSS 코드는 다음과 같습니다 전체 예제 및 소스 코드를 사용할 수 있습니다 (예제 페이지 링크). 이 효과는 시각적으로 매력적이지만 상당한 양의 CSS 코드는 더 간단한 솔루션의 필요성을 강조합니다. 미래의 발전은 이것을 다룰 것입니다.

CSS3 3D Text

에 대한 질문이 자주 묻는 질문입니다 이 섹션은 CSS3로 3D 텍스트 효과 생성 및 사용자 정의에 대한 일반적인 질문에 답변합니다.

Q : CSS3를 사용하여 3D 텍스트 효과를 어떻게 만들 수 있습니까? a : 위의 예제는 를 사용하는 반면, 실제 3D 효과는 일반적으로 ,

, , ) 및 를 사용하여 만들어집니다. 더 넓은 브라우저 호환성을 위해서는 공급 업체 접두사가 필요할 수 있습니다

Q : 속성의 역할은 무엇입니까?

a :

p.threeD {
  text-shadow:
    -1px 1px 0 #ddd,
    -2px 2px 0 #c8c8c8,
    -3px 3px 0 #ccc,
    -4px 4px 0 #b8b8b8,
    -4px 4px 0 #bbb,
    0px 1px 1px rgba(0,0,0,.4),
    0px 2px 2px rgba(0,0,0,.3),
    -1px 3px 3px rgba(0,0,0,.2),
    -1px 5px 5px rgba(0,0,0,.1),
    -2px 8px 8px rgba(0,0,0,.1),
    -2px 13px 13px rgba(0,0,0,.1);
}

는 뷰어와 z = 0 평면 사이의 거리를 정의하여 3D 효과의 깊이에 영향을 미칩니다. 낮은 값은보다 두드러진 관점을 만듭니다 Q : CSS3로 3D 텍스트를 애니메이션 할 수 있습니까?

A : 예,

및 애니메이션 속성을 사용합니다. 애니메이션 스테이지 정의, 애니메이션 속성은 전체 애니메이션을 제어합니다. Q : 3d 텍스트에 그림자를 추가하려면 어떻게합니까? a : 전체 요소의 그림자에

속성 (위 그림과 같이) 또는

를 사용하십시오.

Q : 모든 브라우저에서 내 3D 텍스트가 올바르게 표시되지 않는 이유는 무엇입니까?

A : 이전 브라우저에는 3D 변환 지원이 부족할 수 있습니다. 공급 업체 접두사 (, 등)를 사용하거나 구형 브라우저에 대한 폴백을 제공합니다. Q : 3D 텍스트를 어떻게 반응 하는가?

A : 화면 크기와 장치를 기반으로 스타일을 조정하기 위해 CSS 미디어 쿼리를 사용하십시오.

Q : 그라디언트 색상을 사용할 수 있습니까? text-shadow a : 예, 또는 transform 기능이 있습니다 rotateX Q : 반사를 추가 할 수있는 방법은 무엇입니까? rotateY a :

와 같은 기술은 반사 효과를 생성 할 수 있습니다 box-reflect Q : 사용자 정의 글꼴을 사용할 수 있습니까?

a : 예, 규칙을 사용합니다. Q : 호버 효과를 추가하려면 어떻게해야합니까?

a : 사용자가 텍스트를 가리킬 때 @font-face pseudo 클래스를 사용하여 스타일을 적용합니다.

위 내용은 CSS3로 3D 텍스트를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!