멋진 애니메이션 밑줄 텍스트 효과를 만들기 위한 10가지 CSS 스니펫
게시 됨: 2021-03-08기본 CSS 밑줄이 잘 작동합니다. 누가 그것을 싫어할 수 있겠습니까?
하지만 항상 개선할 여지가 있습니다. 밑줄로 할 수 있는 일이 많지 않다고 생각할 수도 있지만 CSS 애니메이션을 자세히 살펴보면 실제로 얼마나 많은 일을 할 수 있는지 깨닫게 될 것입니다!
나는 수많은 CSS 밑줄 스타일을 분류하고 웹에서 최고의 사용자 지정 밑줄을 위한 최고의 선택을 선택했습니다. 이들 중 하나라도 눈에 띈다면 자유롭게 뛰어들어 소스 코드를 만지작거려 보십시오.
1. 교대로 밑줄
이 링크 사이에서 커서를 움직이면 재미있는 것을 발견할 수 있습니다. 탐색 메뉴의 밑줄 효과는 실제로 링크 사이의 스타일을 변경합니다 .
뿐만 아니라 탐색을 가로질러 동적으로 이동하여 하나의 단일 블록이라는 환상을 줍니다. 꽤 멋지죠?
HTML 요소에 밑줄이 그어진 블록을 추가하여 약간의 CSS로 이 모든 작업을 직접 수행할 수 있습니다. 얼마나 적은 코드가 필요한지 고려하면 놀랍도록 간단합니다(약 60줄의 CSS).
2. 여러 줄에 걸쳐
CSS 줄 바꿈 스타일은 까다롭고 해결하기 쉽지 않습니다. 그러나 독창적인 개발자인 Will King은 버그 없이 여러 줄에 걸쳐 표시할 수 있는 동적 밑줄 효과를 만드는 이 펜을 만들었습니다.
이것은 라인을 그대로 유지하기 위해 약간의 JavaScript에 의존합니다. 그러나 페이지의 모든 링크와 함께 작동할 만큼 충분히 동적이므로 텍스트 서식을 지정하는 방법은 중요하지 않습니다.
게다가 이 모든 것은 아주 멋진 배경을 위해 커스텀 CSS3 그라디언트를 사용합니다.
3. 슬라이딩 밑줄
개발자 Ryan Morse는 CSS에만 의존하는 매우 간단한 슬라이딩 밑줄 효과를 만들었습니다. 추가 HTML 항목이 필요하지 않다는 점을 고려하면 매우 우아한 솔루션입니다.
다른 사이트와 마찬가지로 탐색 메뉴를 디자인하고 이 CSS 효과를 사용하여 동적 슬라이딩 애니메이션을 만들 수 있습니다. 또한 모든 결과는 여유 및 총 지속 시간을 포함하는 CSS 코드에서 변경할 수 있습니다.
4. 더 나은 텍스트 밑줄
언뜻 보면 이 밑줄과 다른 점을 눈치채지 못할 수도 있습니다. 그러나 페이지 하단의 "기본" 데모와 비교하면 이것이 실제로 훨씬 더 좋아 보인다는 것을 알 수 있습니다.
Lukas Horak의 더 나은 텍스트 밑줄에서 텍스트 아래의 막대가 내림차순 요소에 더 잘 맞는 것을 알 수 있습니다. 이것은 줄이 일반적인 줄 높이 아래로 떨어지는 'g' 및 'p'와 같은 문자 형식을 고려합니다.
또한 밑줄 자체가 텍스트 아래로 아주 약간 아래로 눌러져 브라우저 기본값과 비교하여 새로운 모양을 취합니다.
5. 애니메이션 스타일
이 독특한 펜은 개발자 Matthew Scott이 순수 CSS로 만든 몇 가지 사용자 정의 밑줄 효과를 자랑합니다.
몇 가지 일반적인 CSS 전환을 기반으로 하는 4가지 매우 구체적인 밑줄 스타일을 자랑합니다.
- 오른쪽에서 왼쪽으로
- 왼쪽에서 오른쪽으로
- 바깥쪽으로 애니메이션
- 안쪽으로 애니메이션
이것은 링크를 가리키고 있는 동안과 링크에서 커서를 이동하는 동안 모두 작동하는 일반적인 CSS3 전환에서 작동한다는 것을 알 수 있습니다.
확실히 몇 가지 멋진 효과가 있으며 모두 자신의 프로젝트에 쉽게 이식할 수 있습니다.
6. 더 많은 애니메이션 스타일
여기 dev Kseso가 만든 또 다른 맞춤형 밑줄 애니메이션 팩이 있습니다.
이것들은 빛나는 효과를 위해 CSS3 그림자를 밀어내는 밑줄 스타일로 조금 더 극단적입니다. 시간이 있다면(또는 그냥 Star Wars를 좋아한다면) 이것을 템플릿으로 사용하여 멋진 Star Wars 광선검 디자인을 만들 수 있습니다.
7. 그냥 들르기
나는 몇몇 웹사이트에서 이 효과를 보았고 아마도 내가 가장 좋아하는 것 중 하나일 것입니다. 드롭다운 밑줄은 순수 CSS를 사용하며 전환 효과로 보기에 선을 애니메이션으로 표시합니다.
이 애니메이션을 사용하면 각 밑줄 "테두리"가 각 링크에 연결되는 느낌을 받을 수 있습니다. 이 효과가 더 빠르고 직접적으로 느껴지기 때문에 링크 사이를 미끄러지는 선보다 더 좋아합니다.
밑줄 효과에 대한 진정한 미니멀리즘 접근 방식을 원한다면 이 코드로 작업을 시도해야 합니다.
8. 애니메이션 확장
확장되는 밑줄 스타일은 앞서 언급한 밑줄 팩에서 찾을 수 있습니다. 그러나 이 특정 밑줄은 사용자 지정 애니메이션 타이밍을 사용하기 때문에 약간 다릅니다.
마우스오버 시 고유한 애니메이션을 생성하기 위해 cube-bezier() 함수를 사용하고 있음을 주목하십시오.
이것은 기본 "선형" 전환보다 조금 더 빠르게 실행되므로 완전히 다른 효과를 제공합니다. 또한 베지어 애니메이션을 직접 사용자 정의하여 고유한 밑줄 스타일을 만들 수도 있습니다.
9. 사용자 정의 CSS 밑줄
모든 웹사이트에서 실제로 작동할 수 있는 또 다른 스타일이 있습니다. 개발자 Tristan Wilson은 텍스트 아래 몇 픽셀 아래 선을 가장자리로 만드는 간단한 밑줄을 만들었습니다.
그것은 알아차릴 만큼 미묘하지만 확실히 사용성에 큰 차이를 만들지는 않을 것입니다. 이 효과는 실제로 추가 사용성보다 미학 에 관한 것입니다.
모든 무리에서 밑줄이 정말 돋보이게 하려면 이 세트를 시작하는 것이 좋습니다.
10. 디센더 사이의 피팅
앞에서 디센더 유형에 맞게 밑줄 스타일을 사용자 지정하는 것에 대해 언급했습니다. Jonathan Neal의 이 펜은 바로 그 기능을 수행하며 HTML5와 CSS3만 사용합니다.
전체 효과는 몇 가지 CSS3 속성(정확히 말하면 box-shadow 및 text-shadow )에 달려 있습니다.
이것은 디센더 요소의 측면에 공간이 있다는 환상을 만들고 밑줄이 더 고급스러운 느낌을 줍니다.
모든 웹 사이트에 대한 확실한 선택이며 밑줄 색상을 대체하는 좋은 방법입니다.
11. 커스텀 그라디언트
정말로 한계를 뛰어 넘으려는 경우 사용자 정의 밑줄 그라디언트 스타일로 이 펜을 다시 작업해 보십시오.
그라디언트는 CSS3를 통해 실행되므로 원하는 색상으로 변경할 수 있습니다. 그리고 당신이 그것을 믿을 수 있다면 이것은 작동하는 데 추가 HTML이 필요하지 않습니다 . 원하는 앵커 링크를 대상으로 지정하고 CSS 코드를 복사/붙여넣기하여 고유한 그라데이션 밑줄을 얻으십시오.
이 모든 디자인 중에서 이 컬렉션에서 한 가지 멋진 효과를 얻을 수 있기를 바랍니다.
디자이너는 항상 밑줄 효과에 대해 생각하지 않지만 타이포그래피로 할 수 있는 일이 많습니다. CSS에 대해 알고 있다면 정말 한계가 있습니다.