오늘은 :first-letter , :last-of-type & :after 와 같은 CSS 의사 선택기로 작업하여 텍스트를 멋지게 꾸며줄 4가지 색상 테마로 멋진 작은 타이프그래픽 요소를 만들어 보겠습니다.

전체 기사를 읽거나 Youtube(TL, DW Speedrun)에서 내가 코딩하는 것을 시청하세요.

결과

가장 먼저 해야 할 일 - 색상

모든 색상을 쉽게 사용할 수 있도록 각 색상은 :root 범위 내에서 CSS 사용자 정의 속성(변수라고도 함)으로 정의됩니다. 약간의 테마 테마를 위해 변수 background-color 및 foreground-color가 정의되어 나중에 사용됩니다.

:root {
  --cc-p-1: #d4aee0;
  --cc-p-2: #8975b4;
  --cc-p-3: #64518a;
  --cc-p-4: #565190;
  --cc-b-1: #44abac;
  --cc-b-2: #2ca7d8;
  --cc-b-3: #1482ce;
  --cc-b-4: #05597c;
  --cc-g-1: #b2dd57;
  --cc-g-2: #57c443;
  --cc-g-3: #05b853;
  --cc-g-4: #19962e;
  --cc-y-1: #fdc82e;
  --cc-y-2: #fd9c2e;
  --cc-y-3: #d5385a;
  --cc-y-4: #911750;
  --cc-s-1: #d9d9d9;
  --cc-s-2: #9e9e9e;
  --cc-s-3: #666666;
  --cc-s-4: #2b2b2b;

  --foreground-color: white;
  --background-color: var(--cc-s-4);
}

색상 테마

타이포그래피 요소에는 자수정(보라색), 사파이어(파란색), 에메랄드(녹색) 및 호박색(노란색/주황색/빨간색)의 네 가지 색상 테마가 있습니다. 이러한 테마를 쉽게 사용할 수 있도록 하려면 <section> 요소에 아래에 제공된 4가지 클래스 중 하나가 있어야 하며, 각 클래스는 나중에 그라디언트에 사용되는 CSS 변수 집합을 정의합니다.

section {
  &.amethyst {
    --c-1: var(--cc-p-1);
    --c-2: var(--cc-p-2);
    --c-3: var(--cc-p-3);
    --c-4: var(--cc-p-4);
  }

  &.sapphire {
    --c-1: var(--cc-b-1);
    --c-2: var(--cc-b-2);
    --c-3: var(--cc-b-3);
    --c-4: var(--cc-b-4);
  }

  &.emerald {
    --c-1: var(--cc-g-1);
    --c-2: var(--cc-g-2);
    --c-3: var(--cc-g-3);
    --c-4: var(--cc-g-4);
  }

  &.amber {
    --c-1: var(--cc-y-1);
    --c-2: var(--cc-y-2);
    --c-3: var(--cc-y-3);
    --c-4: var(--cc-y-4);
  }
}

기초 원리

CSS를 사용하면 여러 개linear-gradients를 지정할 수 있으며 서로 멋지게 혼합됩니다. 운 좋게도 background-size 및 background-position는 여러 개의 쉼표로 구분된 값을 허용하므로 각 그래디언트의 크기와 위치를 개별적으로 조정할 수 있습니다. 그러나 이번에는 실제 그라디언트를 만드는 데 관심이 없고 각각 고유한 작은 모자이크 사각형이 있으므로 그라디언트가 동일한 색상의 두 배를 생성합니다. 따라서 4개의 정사각형이 포함된 배경을 생성하기 위해 background 속성은 2배 동일한 색상을 갖는 4개의 선형 그라디언트를 갖도록 설정됩니다. 또한 이것이 작동하려면 background-origin를 border-box로 설정해야 합니다.

<selector> {
  background:
    linear-gradient(
      var(--c-1),
      var(--c-1)
    ),
    linear-gradient(
      var(--c-2),
      var(--c-2)
    ),
    linear-gradient(
      var(--c-3),
      var(--c-3)
    ),
    linear-gradient(
      var(--c-4),
      var(--c-4)
    );
  background-origin: border-box;
  background-repeat: no-repeat;
}

이제 각 그래디언트는 background-position 속성에 4개의 x/y 쌍을 제공하여 달성되는 왼쪽 상단, 오른쪽 상단, 왼쪽 하단 및 오른쪽 하단 모서리에 배치됩니다.

<selector> {
  ... 

  background-position:
    0% 0%,
    100% 0%,
    0% 100%,
    100% 100%;
  background-size: 50% 50%;
}

재사용성을 위한 SASS 믹스인

위의 그래디언트 설정을 여러 번 사용할 것이므로 쉽게 재사용할 수 있도록 두 개의 믹스인으로 그룹화합니다.

@mixin mosaic-base() {
  background:
    linear-gradient(
      var(--c-1),
      var(--c-1)
    ),
    linear-gradient(
      var(--c-2),
      var(--c-2)
    ),
    linear-gradient(
      var(--c-3),
      var(--c-3)
    ),
    linear-gradient(
      var(--c-4),
      var(--c-4)
    );
  background-origin: border-box;
  background-repeat: no-repeat;
}

@mixin mosaic() {
  @include mosaic-base;

  background-position:
    0% 0%,
    100% 0%,
    0% 100%,
    100% 100%;
  background-size: 50% 50%;
}

표제

헤드라인에는 4개의 부분 행이 차례로 위치하는 자체 아래에 막대가 있습니다.

<section>
  <h2>Mosaic Typographic Elements</h2>
</section>

모자이크 그라디언트는 단순히 ::after 의사 클래스에 적용되므로 추가 마크업이 필요하지 않습니다. h2 스타일이 section 선택기 내에 중첩되어 있으므로 거기에 정의된 색상 테마에 대한 변수를 완벽하게 사용할 수 있습니다.

section {
  h2 {
    display: block;
    font-weight: 300;
    text-align: center;
    font-size: 2rem;

    position: relative;

    &::after {
      --width: 8rem;
      --height: 2px;

      content: "";

      display: inline-block;
      width: var(--width);
      height: var(--height);

      position: absolute;
      left: 50%;
      bottom: -1rem;
      transform: translate(-50%, -50%);

      @include mosaic-base;
      background-position:
        0% 0%,
        33% 0%,
        67% 0%,
        100% 0%;
      background-size:
        25% 100%,
        26% 100%,
        25% 100%,
        25% 100%;
    }
  }
}

첫 글자 스타일링

제목 뒤에 나타나는 각 첫 글자의 스타일을 지정하기 위해 소위 인접 형제 선택기를 사용하여 제목<p> 바로 뒤에 오는 텍스트<h2>의 각 단락을 식별해 보겠습니다. :first-letter 의사 클래스를 사용하면 이름이 강력하게 나타내는 것처럼 단락의 맨 처음 문자에 스타일을 매우 선택적으로 적용할 수 있습니다. 글자 주위에 텍스트가 잘 흐르게 하려면 설정float: right;이 필요합니다. 나머지는 단순히 글꼴 크기와 간격을 조정하여 보기 좋게 만드는 것입니다.

section {
  h2 + p:first-letter {
    font-weight: 900;
    font-size: 1.6em;
    float: left;
    margin-right: 0.1em;
    margin-top: 0.2em;
    padding: 0em 0.1em;

    color:
      var(--background-color);


    @include mosaic;
  }
}

눈금자 스타일링

HTML<hr> 요소를 사용하면 분할을 위해 가로 눈금자를 넣을 수 있습니다. 단락 또는 서로 다른 요소.

<hr>

따라서 여기에서 <hr> 요소의 스타일을 재정의하여 중앙에 모자이크가 45도 기울어지도록 합니다. 다시 말하지만 ::after 의사 클래스를 사용하여 추가 마크업 없이 모자이크에 필요한 요소를 생성합니다.

section {
  hr {
    --size: 1rem;

    width: 60%;
    height: 1px;
    border: none;
    background: var(--cc-s-2);

    &::after {
      content: '';
      display: inline-block;
      width: var(--size);
      height: var(--size);

      position: absolute;
      left: 50%;
      transform:
        translate(-50%, -50%)
        rotate(45deg);

      border: 4px solid var(--background-color);

      @include mosaic;
    }
  }
}

묘비 (당신은 그것을 올바르게 읽었습니다)

소위 삭제 표시가 예를 들어 끝에 나타납니다. 끝이 났다는 것을 독자에게 알리는 기사. :last-of-type 의사 클래스는 주어진 유형의 마지막 요소를 식별하는 데 도움이 됩니다. 섹션에 있는 텍스트의 마지막 단락, 정확히 우리가 필요로 하는 것입니다. 이제 우리가 해야 할 일은 모자이크 그라디언트를 포함하고 오른쪽에 떠 있는 다른 의사 클래스::after를 추가하는 것입니다. 그리고 완료! 😎

section {
  p:last-of-type::after {
    --size: 0.5em;
    content: '';

    float: right;
    width: var(--size);
    height: var(--size);
    position: relative;
    top: 0.5em;

    @include mosaic;
  }
}