아름답고 매력적인 웹 디자인이 이보다 더 가치 있었던 적은 없었습니다. 매력적으로 보일 수 있는 웹사이트가 많이 있습니다. 여전히 관객들에게 좋은 영향을 미치지는 못했습니다. 방문자가 웹사이트에 도착하면 가장 먼저 눈에 띄는 것은 사이트의 모습입니다. 타이포그래피는 쓰여진 텍스트를 시각적으로 표현한 것입니다. 커닝, 문자 디자인 등의 요소가 포함됩니다.
웹사이트 디자인에서 글꼴은 단순한 문자 그 이상입니다. 글꼴 색상을 변경하는 것처럼 웹사이트의 모양도 변경됩니다. 텍스트 분할과 같은 다양한 효과를 만들면 청중에게 엄청난 시각적 효과를 줄 수 있습니다.
CSS는 애니메이션, 호버 효과, 네온 효과 등 HTML 요소에 다양한 기능과 전환을 제공합니다. 따라서 이러한 속성을 사용하여 텍스트 분할 효과를 만들어 보겠습니다. 이번 글에서는 CSS를 사용하여 텍스트 분할 효과를 만드는 방법에 대해 설명합니다.
텍스트 위로 커서를 가져가면 텍스트를 분할하는 것을 분할 효과라고 합니다. 텍스트를 가로로 분할하는 작업은 :before 및 :after 의사 선택기와 호버 선택기를 사용하여 수행됩니다.
":before" 의사 선택기 - 요소의 콘텐츠 앞에 무엇인가를 삽입하는 데 사용됩니다.
":after" 의사 선택기 - 요소의 콘텐츠 뒤에 콘텐츠를 삽입하는 데 사용됩니다. content 속성은 선택한 요소 뒤 또는 앞에 작성될 콘텐츠를 지정합니다
"z-index" 속성 - 겹치는 요소가 있으면 스택에 나타납니다. 따라서 스택 상단에 어떤 요소가 나타날지 결정하기 위해 더 큰 Z-인덱스를 제공합니다.
값은 1, 2, 3…이 될 수 있습니다. 요소를 다른 요소 아래에 유지하려는 경우 해당 값은 음수일 수 있습니다. 따라서 더 낮은 Z-색인 값을 할당하면 됩니다
텍스트를 작성하고 중앙에 배치하고 스타일을 지정하세요.
텍스트의 전반부(상단 절반)를 회색으로 설정하려면 :before 선택기를 사용하세요.
회색 내용을 가리려면 :after 선택기를 사용하세요.
이벤트가 순차적으로 정렬되도록 각 선택기에 Z-색인을 부여하세요.
텍스트 위로 마우스를 가져가서 가로 분할 효과를 만들어 콘텐츠를 찾아보세요.
이제 수직 텍스트 분할 효과를 만드는 방법에 대해 논의해 보겠습니다.
class="container"로 섹션 요소를 만듭니다. 이에 따라 컨테이너의 스타일을 지정하십시오.
섹션 요소 안에 div 요소를 만듭니다. 그 안에 두 개의 p 요소를 만듭니다. 원하는 위치와 스타일을 선택하세요. 이러한 p 요소에는 분할할 텍스트가 포함되어 있습니다. 텍스트는 p 요소당 한 번 작성됩니다.
clip-path 속성을 사용하여 텍스트에 모양을 지정하세요. 그런 다음 변환 속성을 사용하여 마우스 오버 시 텍스트를 번역합니다.
CSS의 clip-path 속성은 웹 페이지에 표시될 요소의 부분을 결정하는 데 사용되는 클리핑 영역을 만드는 데 사용됩니다. 영역 내부의 부분은 표시되고 영역 외부의 부분은 숨겨집니다.
Clipping Path Polygon () 값은 기본 기하학에서 사용할 수 있는 모양 중 하나입니다. 이를 통해 여러 다른 x축 및 y축 값 세트(모든 단위)에 대해 작업을 수행할 수 있습니다.
다음 예를 통해 이 속성을 이해할 수 있습니다.
웹 디자인에서 사용성에서 가장 중요한 요소 중 하나는 가독성입니다. 사용자는 자료를 쉽게 읽고 이해할 수 있어야 합니다. 웹사이트의 텍스트 콘텐츠가 독특하다면 해당 웹사이트가 인기를 끌 가능성이 높습니다. 이는 텍스트가 가장 일반적인 요소 중 하나이며 대부분의 웹사이트에서 단조롭게 보이기 때문입니다. 따라서 사용자의 관심을 끌기 위해 개발자는 다양하고 독특한 텍스트 작성 스타일을 시도할 수 있습니다. 그 중 하나는 분할 텍스트 효과입니다.
이 기사에서는 웹 페이지의 텍스트에 분할 효과를 만드는 다양한 방법에 대해 논의했습니다. 수평 분할을 생성하려면 :before 및 :after 의사 선택기를 사용합니다. 다양한 모양의 분할을 만들기 위해 CSS의 clip-path Polygon () 속성을 사용했습니다.
위 내용은 CSS를 사용하여 텍스트 분할 효과를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
