크리에이티브 링크
표준 파란색 밑줄 링크는 제 역할을 하지만 인상을 남기는 것을 잊어버립니다. 오늘날의 웹에서는 모든 상호 작용이 참여할 수 있는 기회입니다. 마스터 애드온 Creative Links Element 는 일반 텍스트 링크를 미니어처 예술 작품으로 바꿔줍니다. 22 개가 넘는 독특한 호버 효과 – 미묘한 밑줄 슬라이드부터 동적 3D 변환까지 – 랜딩 페이지의 어느 곳에나 적용할 수 있습니다. 효과의 모든 부분을 스타일링하고 아이콘을 제어하며 클릭이 신선하고 의도적인 느낌을 주는 마이크로 경험을 만들어 보세요.
호버 효과의 광범위한 라이브러리
이것이 요소의 핵심입니다. 단순한 색상 변경을 넘어서십시오. 호버링 시 트리거되는 정교한 효과의 선별된 목록에서 선택하십시오. 고전적인 하단 라인 슬라이드를 원하십니까? 장난기 많은 Three Dots 가 드러납니다? 극적인 3D 슬라이드 또는 텍스트 채우기 효과? 각 효과는 링크 텍스트와 그 의사 요소에 뚜렷한 CSS 애니메이션을 적용하여 우아한 상호 작용에서 대담한 상호 작용에 이르기까지 모든 것을 만들어냅니다. 이 라이브러리를 사용하면 한 줄의 코드도 작성하지 않고도 메뉴,목차 또는 기능 목록에 개성을 더하고 다듬을 수 있습니다.
- 22+ 사전 제작 효과: 보더 스위치, 스케일 다운, 서클, 크로스, 위로 이동과 같은 애니메이션을 즉시 적용합니다.
- 스타일의 범위: 미묘한 (하단 테두리 확대) 에서 굵게 (3D 효과, 두 번째 텍스트 및 테두리 공개 푸시 아웃).
- 간편한 적용: 드롭다운에서 효과를 선택합니다—시작하는 데 복잡한 구성이 필요하지 않습니다.
모든 링크 상태에 대한 스타일링
링크 효과의 각 구성 요소를 스타일링하여 픽셀 완벽한 디자인을 달성하십시오. 기본 타이포그래피,링크 패딩 및 전체 너비를 설정합니다. 그런 다음 상태 스타일링에 깊이 빠져들십시오. 일반 및 호버 모두에 대해 텍스트 색상 및 배경 색상을 정의합니다. 결정적으로 효과에 사용되는 색상 요소를 스타일링하십시오: 스팬 BG 색상,BG 색상 전,BG 색상 후. 이들은 슬라이딩 라인,채워진 배경 또는 원 확장과 같은 효과를 강화하는 애니메이션 의사 요소의 배경을 제어합니다. 보더 반경 및 상자 그림자를 추가하여 모양을 완성합니다.
- 이중 상태 디자인: 일반 상태와 호버 상태의 색상과 배경을 독립적으로 제어합니다.
- 효과 구성 요소 스타일링: 애니메이션 비주얼을 생성하는 Before, After 및 Span 배경을 직접 스타일링합니다.
- 전체 타이포그래피 제어: 링크 텍스트의 글꼴, 크기, 무게 및 간격을 선택합니다.
- 모양 및 깊이: 테두리 반경과 상자 그림자를 사용하여 링크의 컨테이너를 부드럽게 하거나 들어 올립니다.
크리에이티브 링크에 대해 자주 묻는 질문
"링크 텍스트" 와 "대체 링크 텍스트" 의 차이점은 무엇입니까?
링크 텍스트는 기본적으로 항상 표시되는 내용입니다 (예, “당사 서비스”). 대체 링크 텍스트는 호버 효과 중에 나타나거나 상호 작용하는 내용입니다. “텍스트 채우기” 또는 “경계 스위치”와 같은 효과에서는 이 대체 텍스트가 원본 텍스트와 함께 슬라이드 인,교체 또는 애니메이션되어 동적 변화를 만들 수 있습니다.
이러한 크리에이티브 링크를 웹 사이트의 주요 탐색으로 사용할 수 있습니까?
절대적으로! 그들은 헤더 메뉴에 적합하며,특히 탐색 자체가 시각적 기능이되기를 원하는 미니멀리스트 또는 창의적인 사이트 디자인에 적합합니다. 각 메뉴 항목을 Contents 리피터에서 별도의 “항목”으로 추가하면됩니다.
"Beg 색상 전"과 "BG 색상 후"는 무엇을 위한 것입니까?
이것들은 비밀 재료입니다. 대부분의 고급 CSS 호버 효과는 ::before 및 ::after 의사 요소를 사용하여 애니메이션 모양,선 또는 배경 채우기를 만듭니다. 이러한 색상 컨트롤을 사용하면 숨겨진 요소를 직접 스타일링 할 수 있으므로 효과의 색상을 브랜드에 맞출 수 있습니다. 예를 들어,하단선 슬라이드 효과에서 After BG Color 는 슬라이딩 밑줄의 색상을 제어 할 수 있습니다.
모바일 (터치스크린) 기기에서 효과가 작동하나요?
예,완전히 작동합니다. 터치 장치에서 호버 효과는 일반적으로 첫 번째 탭에서 트리거되고 (“호버” 상태), 링크는 두 번째 탭에서 따라갑니다. 이는 모바일에서 호버 효과에 대한 표준 동작 페이지가 변경되기 전에 애니메이션 피드백을 얻습니다.
올바른 효과를 어떻게 선택합니까?
사이트의 성격을 고려하십시오:
- 전문가/기업: 하단 라인 슬라이드 또는 테두리 번역과 같은 미묘한 효과를 사용하십시오.
- 크리에이티브/포트폴리오: 3D 슬라이드,서클 또는 텍스트 채우기 같은 더 대담한 효과를 위해 이동.
- 현대/미니멀리스트: 하단 경계 확대 또는 축소 작업을 아름답게 수행합니다.
몇 가지 미리보기 – 최고의 효과는 산만함을 느끼지 않고 링크를 향상시킵니다.
동일한 위젯의 다른 링크에 다른 효과를 적용할 수 있나요?
스크린샷은 하나의 전역 Effects 드롭다운을 보여주며,하나의 위젯 인스턴스에 있는 모든 링크가 동일한 선택된 효과를 공유함을 제안합니다. 다른 효과를 가지려면 (예를 들어,원 효과가 있는 링크 하나,슬라이드 효과가 있는 링크 하나) 여러 개의 별도 Creative Link 위젯을 배치해야 할 가능성이 높습니다.
트렌드 엘리먼트 위젯 및 확장
더 짧은 시간에 정교한 웹사이트를 구축하세요.
