18 CSS3 텍스트 효과 및 웹 타이포그래피 자습서

CSS3는 지금까지 웹 개발에서 이미 좋은 시간을 보냈습니다. 널리 채택되고 있습니다. 채택의 이유는 테이블에 제공하는 개발 기능입니다. CSS3는 이제 사실상 보드에 무엇이든 그릴 수 있습니다. 유일한 요구 사항은 기능을 최대한 활용하는 숙련된 디자이너입니다.

오늘 저는 CSS3 텍스트 효과 및 웹 타이포그래피 튜토리얼을 살펴볼 기회가 있습니다.

같은 물건을 찾고 계신가요? 그런 다음 웹에서 최고의 CSS3 텍스트 효과 자습서를 살펴보는 동안 올바른 위치에 도착했습니다.

시작하자.

3D 텍스트 생성

저는 3D 텍스트를 좋아합니다. 그것은 독자들에게 깊은 깊이를 제공하고 제작자에게 성취감을 제공합니다. CSS3를 사용하여 3D 텍스트를 만드는 것은 케이크 조각입니다.

웹사이트의 코드를 사용하여 3D 텍스트를 만들 수 있습니다. 매개변수를 사용자 정의하고 실험하여 작동 방식을 이해하고 요구 사항에 맞게 수정할 수도 있습니다.

h1 {
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

CSS 텍스트 그림자를 사용한 활자 효과

활자 인쇄는 산업 인쇄 방법에서 사용되는 대중적인 텍스트 효과입니다. 효과를 만들기 위해 Photoshop이나 다른 종류의 도구를 사용할 필요가 없습니다.

아름다운 CSS3 타이포그래피 만들기

타이포그래피는 사용자 경험의 핵심 요소 중 하나입니다. 이 튜토리얼을 통해 멋진 CSS3 타이포그래피를 만들 수 있습니다. 튜토리얼은 단계로 나누어져 있으며 사용하기 쉽습니다.

Lettering.js 및 CSS3를 사용한 웹 타이포그래피

CSS3는 강력한 지지자입니다. JS 라이브러리와 함께 사용하면 더욱 유용합니다. 이 튜토리얼에서는 강력한 웹 타이포그래피를 만들기 위해 CSS3와 Lettering.js(흥미로운 웹 타이포그래피를 구축하기 위한 jQuery 기반 플러그인)의 힘을 사용합니다.

CSS3를 사용한 인세트 타이포그래피

인셋 타이포그래피가 상당히 멋집니다. 이 튜토리얼에서 저자 Andrew Roberts는 CSS3 튜토리얼의 도움으로 인셋 타이포그래피를 만드는 방법을 설명합니다. CSS3를 사용하여 타이포그래피 기술을 향상시키려는 모든 사람에게 유용한 튜토리얼입니다.

CSS3 Text Stroke 속성을 사용하여 텍스트 개요

이 자습서에서는 텍스트 주위에 텍스트 획을 만드는 방법을 이해합니다. 이 튜토리얼에서는 CSS3 text-stroke 속성을 사용하여 윤곽선이 있는 텍스트를 쉽게 만들 수 있습니다. 획 투명 기능을 사용하여 텍스트의 투명도를 선택할 수도 있습니다.

CSS를 사용하여 애너글리프 텍스트 효과 만들기

이 튜토리얼에서는 CSS를 사용하여 Anaglyphic 텍스트 효과를 만드는 방법을 배울 수 있습니다. Anaglyphs는 빨강, 녹색 및 파랑 채널 사이를 수정하여 3D 이미지를 만드는 놀라운 방법입니다. 텍스트는 3D 유리를 사용하여 볼 수 있으므로 사용 후 가치가 뛰어납니다.

3D CSS 섀도우 텍스트 튜토리얼

텍스트 그림자는 텍스트의 중요한 측면 중 하나입니다. 이 튜토리얼을 사용하면 'ZOOM'으로 3D CSS 텍스트를 만들고 튜토리얼에 표시된 것처럼 더 많은 트릭을 수행할 수 있습니다.

이 튜토리얼은 3D CSS 섀도우 텍스트를 만들기 위한 훌륭한 세부 정보를 제공합니다.

기본 텍스트 선택 색상 변경

텍스트 선택은 텍스트의 색상을 변경하여 표시됩니다. 색상을 사용자 정의할 수 있다는 것을 몰랐다면 이제 알 수 있습니다. 튜토리얼의 도움으로 블로그의 텍스트 선택 색상을 쉽게 변경할 수 있습니다.

색상은 모든 브랜드에 중요합니다. 기본 색상을 텍스트 선택 색상으로 사용하여 충성도가 높은 고객이 해당 색상을 보면 귀하를 생각하도록 프로그래밍하는 것입니다. 이것은 마케팅 자료의 강력한 방법이며 귀하의 비즈니스와 클라이언트의 비즈니스에 사용하기를 바랍니다.

CSS3 Text-Shadow를 사용한 멋진 텍스트 효과

CSS Text-Shadow는 상당히 놀라운 패키지입니다. 이 튜토리얼에서는 CSS3 Text-Shadow 패키지를 사용하여 멋진 텍스트 효과를 만드는 방법을 살펴봅니다. Alfonse Surigao가 튜토리얼을 작성합니다.

CSS를 사용한 텍스트 회전

회전하는 텍스트는 보는 것이 재미있습니다. 웹 개발자 Jonathan Snook이 작성한 이 간단한 자습서를 따르면 그렇게 할 수도 있습니다.

CSS3 요리책

개발자이자 디자이너로서 요리책을 곁에 두는 것은 항상 편리합니다. CSS3 요리책: 복사 및 붙여넣기가 매우 쉬운 7가지 CSS 레시피는 복사하여 사용할 수 있는 멋진 요리법을 제공합니다. 나중에 사용할 수 있도록 북마크에 추가할 수 있는 훌륭한 페이지입니다.

웹 텍스트에 획 추가하기

이 튜토리얼을 사용하면 의도한 대로 텍스트를 쉽게 스트로크할 수 있습니다. 튜토리얼은 간단하며 주제에 대해 자세히 설명합니다. 또한 웹 텍스트를 쓰다듬는 경계를 설명합니다.

CSS 텍스트 그라디언트 적용

4분의 짧은 비디오에서 텍스트 그라디언트를 적용하는 방법을 배웁니다. 영상은 짧지만 매우 유용합니다. 그러니 이번 기회를 놓치지 마세요.

나는 블러를 사랑한다

여기에는 멋진 것이 없지만 I Love Blur 텍스트에 흐림 효과를 보여주는 작은 트릭이 있습니다. 이를 사용하여 다른 컨텍스트에서 다른 메시지를 보낼 수 있으므로 트릭을 배우는 것이 좋습니다.

이미지가 없는 CSS 포스터

작가가 이미지를 사용하지 않고 포스터를 만들려고 하는 실험적인 게시물입니다. 그는 border-radius, box-shadow, transform, @font-face, text-shadow, box-sizing 및 RGBa와 같은 멋진 비트를 사용하여 이를 달성합니다. 이것을 믿으려면 웹 사이트에서 사용할 수 있는 코드를 살펴봐야 합니다.

Rem을 사용한 글꼴 크기 조정

Jonathan Snook의 또 다른 간단한 기사는 REM의 도움으로 글꼴 크기 조정에 대해 설명합니다. 이 기사는 매우 상세하며 저자가 기사에 얼마나 많은 사랑을 쏟았는지 좋아할 것입니다. 향후 참조를 위해 북마크할 가치가 있는 또 다른 훌륭한 튜토리얼입니다.

마무리

배움은 계속되는 길입니다. 끝이 없습니다. 그래서 CSS3 텍스트 효과 및 웹 타이포그래피 자습서의 놀라운 목록을 가져왔습니다. 많은 자습서는 매우 심도 있고 시간을 할애할 가치가 있습니다. 다른 것들은 약간의 조명 효과를 거치며 장기간 사용을 위해 배우기에 좋습니다.

나는 당신이 기사를 좋아하기를 바랍니다. 그렇다면 친구들과 공유하는 것을 잊지 마십시오. 또한 인터넷에서 마음에 들었던 최고의 튜토리얼 아래에 댓글을 달아주세요. 우리는 당신에게서 배우기를 열망합니다.

*최종 업데이트 2019년 3월 2일