다음과 함께 애니메이션, 클릭 가능한 카드 만들기

크롬 및 사파리 브라우저는 CSS의 의사 클래스를 완전히 지원했으며, 이는 많은 브라우저에서 점차 시작되고 있습니다. 종종 "부모 선택기"라고 불립니다. 우리는 자식 선택기를 통해 부모 요소의 스타일을 선택하고 설정할 수 있지만

는 그 이상으로 사용됩니다. 용도 중 하나는 많은 사람들이 자주 사용하는 클릭 가능한 카드 모드를 재 설계하는 것입니다.

우리는 링크 카드로 우리를 도울 수있는 방법을 탐색하지만 먼저 ... :has() 의사 클래스 란 무엇입니까? :has()

의 목적을 설명하는 훌륭한 기사가 많이 있지만 여전히 비교적 새롭기 때문에 여기에 간단히 소개해야합니다.

:has() 는 W3C Selector 레벨 4 작업 초안의 일부인 관계형 의사 클래스입니다. 이것은 괄호가있는 것입니다 : 특정 아동 요소와 관련된 일치 요소 (보다 정확하게는 특정 어린이 요소를 포함).

따라서 왜 우리가 "부모"선택기라고 할 수 있는지 이해할 수 있습니다. 그러나 우리는 다른 기능적 의사 클래스와 함께 사용하여보다 구체적인 일치를 얻을 수 있습니다. 우리가 :has()에 이미지가 포함되어 있지 않다고 스타일을 만들고 싶다고 가정 해 봅시다. 우리는

의 관계 능력을

의 부정적인 능력과 결합하여 이것을 달성 할 수 있습니다. :has() 그러나 이것은 다양한 기능을 결합하여 를 사용하여 더 많은 기능을 달성하는 방법의 시작일뿐입니다. 클릭 가능한 카드 퍼즐을 구체적으로 해결하기 전에

를 사용하지 않고 다루는 몇 가지 방법을 살펴 보겠습니다.

우리는 현재 클릭 가능한 카드를 어떻게 다루십니까 :has() 요즘 사람들 이이 의사 클래스의 강력한 기능을 완전히 이해하기 위해서는 세 가지 주요 방법이 있습니다.

"랩퍼로 링크"메소드 이 방법은 종종 사용됩니다. 나는이 방법을 사용하지 않지만 그것을 시연하기 위해 빠른 데모를 만들었습니다. 여기에는 특히 접근성과 관련하여 많은 문제가 있습니다. 사용자가 회전식 기능을 사용하여 웹 사이트를 찾아 보면

<code>/* 匹配包含图像元素的article元素 */
article:has(img) { }

/* 匹配article元素，其内部直接包含图像 */
article:has(> img) { }</code>

요소 - 제목, 텍스트 및 링크 내부의 전체 텍스트를 듣습니다. 어떤 사람들은이 모든 것을 듣고 싶지 않을 수도 있습니다. 우리는 더 잘할 수 있습니다. HTML5부터 시작하여

요소의 요소를 중첩 할 수 있습니다. 그러나 이것은 항상 나에게, 특히 이런 이유로 잘못 느낀다. 프로 : :has() :not() 신속하게

를 구현합니다 시맨틱 정확한

<code>/* 匹配不包含图像的article元素 */
article:not(:has(img)) { }</code>

단점 : :has() :has() 접근성 문제 텍스트를 선택할 수 없음

기본 링크에 사용 된 스타일을 무시하는 것은 매우 번거 롭습니다 JavaScript 메소드 javaScript를 사용하면 태그에 쓰는 대신 카드에 대한 링크를 첨부 할 수 있습니다. 나는 CostDev 의이 멋진 Codepen 데모를 발견했는데,이 과정에서 카드 텍스트를 선택적으로 만듭니다.이 방법에는 많은 이점이 있습니다. 우리의 링크는 집중할 때 액세스 할 수 있으며 텍스트를 선택할 수도 있습니다. 그러나 스타일 측면에서는 몇 가지 단점이 있습니다. 예를 들어,이 카드를 애니메이션하려면 링크 자체 대신 메인 래퍼에

스타일을 추가해야합니다. 또한 링크가 키보드 탭 키를 통해 초점을 맞추면 애니메이션의 혜택을받지 않습니다. .card 프로 : :hover

전체 접근성을 달성 할 수 있습니다 선택 가능한 텍스트

단점 : JavaScript가 필요합니다 오른쪽 버튼을 클릭 할 수 없습니다 (일부 추가 스크립트로 수정할 수는 있지만) 카드 자체에서 많은 스타일이 수행되어야하며, 링크에 중점을 두는 경우 작동하지 않습니다

선택기 메소드 이 방법을 사용하려면 카드를 상대 위치로 설정 한 다음 링크 된
• Pseudo 셀렉터에서 절대 위치를 설정해야합니다. JavaScript가 필요하지 않으며 구현하기 쉽습니다. 여기에는 특히 텍스트를 선택할 때 몇 가지 단점이 있습니다. 카드 본문에 더 높은 z-index를 제공하지 않으면 텍스트를 선택할 수 없지만, 그렇다면 텍스트를 클릭하면 링크가 활성화되지 않습니다. 선택 가능한 텍스트를 원하는지 여부는 당신에게 달려 있습니다. 나는 이것이 UX 문제일지도 모른다고 생각하지만 유스 케이스에 달려 있습니다. 텍스트는 여전히 화면 리더를 통해 액세스 할 수 있지만이 접근법의 주요 문제는 애니메이션 가능성이 부족하다는 것입니다.
프로 :
구현하기 쉬운 액세스 가능한 링크, 중복 텍스트 없음

호버링 및 초점을 맞출 때

단점 :

텍스트를 선택할 수 없음

당신은 링크를 애니메이션 할 수 있습니다. 이것이 당신이 호버링하는 요소이기 때문입니다.
<: :> 새로운 방법 : 와 함께
• 를 사용하십시오 클릭 가능한 카드에 대한 기존 방법을 식별 했으므로 믹스에
를 추가하여 이러한 단점을 해결하는 방법을 보여 드리고자합니다.
• 실제로 링크 요소에서
를 사용하여 마지막으로 본 방법에 따라이 접근법을 기반으로합시다. 우리는 실제로 를 사용하여 메소드의 애니메이션 제한을 극복 할 수 있습니다.

마커부터 시작하겠습니다 :

간단하게 유지하기 위해 클래스를 사용하는 대신 요소를 CSS에 직접 배치합니다. ::after 이 데모의 경우 링크를 호버링하기 위해 카드에 이미지 스케일링과 그림자를 추가하여 화살표가 팝업되어 링크의 텍스트 색상을 변경할 수 있습니다. 운영을 단순화하기 위해 카드에 스코어링 된 사용자 정의 속성을 추가합니다. 이것은 기본 스타일입니다 :

<code>/* 匹配包含图像元素的article元素 */
article:has(img) { }

/* 匹配article元素，其内部直接包含图像 */
article:has(> img) { }</code>

아주 좋아요! 초기 스케일링 (), 카드 제목 ()의 초기 색상 및 링크에서 화살표를 팝업하는 데 사용할 추가 속성을 추가했습니다. 우리는 또한 --img-scale: 1.001 선언의 빈 상태를 나중에 애니메이션으로 설정했습니다. 이것은 우리가 지금 만들어야 할 클릭 가능한 카드의 기초를 설정하므로, 우리가 원하는 요소에 이러한 사용자 정의 속성을 추가하여 리셋과 스타일을 추가 해 봅시다 : . --title-color: black 링크 뒤의 스크린 리더에 숨겨진 클래스를 사용자 친화적으로 추가합시다. box-shadow 우리의 카드는 아름답게 보이기 시작합니다. 이제 마법을 추가 할 시간입니다. 를 추가 할 수 있습니다. 이 소량의 CSS 코드를 사용하면 카드가 진정으로 생겨납니다.

위의 내용을 보셨습니까? 이제 카드의 하위 요소가 호버링되거나 집중되면 업데이트 된 스타일을 얻게됩니다. 링크 요소가 클릭 가능한 카드 메소드에 호버 또는 초점 상태를 포함 할 수있는 유일한 요소이더라도 부모 요소와 일치하고 변환을 적용하는 데 사용할 수 있습니다.

<code>/* 匹配不包含图像的article元素 */
article:not(:has(img)) { }</code>

<.> 그게 다야. 선택기를위한 또 다른 강력한 사용 사례. 다른 요소를 매개 변수로 선언하여 부모 요소와 일치 할 수있을뿐만 아니라 의사 클래스를 사용하여 부모 요소의 스타일을 일치시키고 설정합니다.

프로 :

<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Creating Animated, Clickable Cards With the :has() Relational Pseudo Class "><div clas="article-body">
    <h2>Some Heading</h2>
    <p>Curabitur convallis ac quam vitae laoreet. Nulla mauris ante, euismod sed lacus sit amet, congue bibendum eros. Etiam mattis lobortis porta. Vestibulum ultrices iaculis enim imperdiet egestas.</p>
    <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">
      Read more
       <svg fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" fill-rule="evenodd"></path></svg></a>
  </div>

접근 가능 애니메이션을 설정할 수 있습니다 JavaScript가 필요하지 않습니다 올바른 요소에서 사용 :has() box-shadow

단점 :

/* 卡片元素 */
article {
  --img-scale: 1.001;
  --title-color: black;
  --link-icon-translate: -20px;
  --link-icon-opacity: 0;

  position: relative;
  border-radius: 16px;
  box-shadow: none;
  background: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bfff;
  transform-origin: center;
  transition: all 0.4s ease-in-out;
  overflow: hidden;
}
/* 链接的::after伪元素 */
article a::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline: 0;
  cursor: pointer;
}

텍스트는 선택하기 쉽지 않습니다. 브라우저 지원은 Chrome 및 Safari (Firefox에서는 로고 뒤에 지원됩니다)로 제한됩니다. ::after 이것은이 기술을 사용하는 데모입니다. 카드 주위에 여분의 래퍼가 표시 될 수 있지만, 이것은 컨테이너 쿼리를 사용할 때 내가 만든 몇 가지 시도 일뿐입니다. 이는 모든 주요 브라우저에서 시작되는 다른 훌륭한 기능 중 하나입니다.

공유하고 싶은 다른 예가 있습니까? 의견 섹션은 다른 솔루션이나 아이디어에 매우 환영합니다.

위 내용은 다음과 함께 애니메이션, 클릭 가능한 카드 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!