CSS 로고: 확장 가능한 Apple Photos 로고

오랜만에 CSS Logos 시리즈에 글을 올렸는데, 드디어 새로운 영감을 찾았습니다.

오늘의 기사에서는 사과 사진 로고를 다시 만들고 확장 가능하게 만들 것입니다!

CSS 디자인이 처음이라 문제 없습니다. 전체 프로세스를 진행하므로 이 자습서를 따라갈 수 있습니다.

Note: Throughout this article, I will use SCSS because it makes loops and variables easier!

로고 분석

먼저 로고가 어떻게 보이는지 살펴보고 필요한 것이 무엇인지 살펴보겠습니다.



로고는 흐름처럼 보이는 꽃잎으로 구성되어 있으며 중앙에 위치하며 각각의 색상과 회전량이 있습니다.

이것을 알고 내부에 컨테이너와 8개의 꽃잎 요소가 필요하므로 HTML을 설정해 보겠습니다.

<div class="container">
  <span class="petal"></span>
  <span class="petal"></span>
  <span class="petal"></span>
  <span class="petal"></span>
  <div class="petal"></div>
  <span class="petal"></span>
  <span class="petal"></span>
  <span class="petal"></span>
</div>

이제 필요한 변수를 추가해 보겠습니다.
언급한 대로 루트 시작 크기CSS variable를 정의할 수 있도록 로고를 확장할 수 있습니다.

:root {
  --size: 15rem;
}

그런 다음 기본 HTML의 경우 모든 것을 중앙에 설정하고 더 멋진 글꼴을 선택했습니다.

html {
  font-family: Roboto, 'Helvetica Neue', Arial, sans-serif;
  display: grid;
  place-items: center;
  min-height: 100vh;
}

그리고 컨테이너 div는 이 초기 크기와 몇 가지 추가 스타일을 받습니다.

.container {
  width: var(--size);
  height: var(--size);
  background: #fff;
  border-radius: 16.667%;
  display: grid;
  place-items: center;
  position: relative;
  box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.2);
  transition: all 0.5s ease-in-out;
}

이제 꽃잎 작업을 시작할 때입니다. 기본 너비와 높이를 설정합니다. 나중에 확장 가능하도록 백분율을 사용합시다.

.petal {
  height: 37.5%;
  width: 22.5%;
  border-radius: 50% / 30%;
  position: absolute;
  top: 10%;
}

이제 모든 꽃잎이 서로 위에 놓여 있습니다.
우리는 먼저 transform-origin을 다루기를 원합니다. 중심에서 바깥쪽으로 변환하기를 원하기 때문입니다.

.petal {
  transform-origin: center 105%;
}

위에서 수행한 계산에 대한 약간의 참고 사항입니다.

2x37.5%(높이)를 계산하여 75%로 내려간 다음 중앙에 105%를 추가하여 5%를 한 번 더할 수 있습니다.
이렇게 하면 상단과 하단에 20%가 남게 되므로 상단을 10%로 설정하여 완벽하게 정렬된 요소를 갖게 됩니다.

그런 다음 각 꽃잎에 대한 몇 가지 변수를 설정하는 루프를 만들고 싶습니다.
이를 위해 SCSS 루프를 사용하겠습니다.

$bg: #faaa31, #f6e422, #b9d753, #6cbeb0, #79addc, #a48dc1, #d388b1, #f37a5d;

@for $i from 1 through 8 {
  .petal:nth-child(#{$i}) {
    --n: #{$i};
    --bg: #{nth($bg, $i)};
  }
}

이 코드를 사용하여 가능한 모든 배경이 있는 변수를 정의한 다음 8회 반복(각 꽃잎)하고 루프 번호로 n번째 자식을 지정합니다.

그런 다음 숫자와 배경 변수를 설정합니다.#{} 구문을 발견했을 수 있습니다. 이는 보간을 의미하며 SCSS에 변수 계산을 사용하도록 지시합니다.

이제 여덟 개의 꽃잎 모두에 숫자와 배경색이 지정됩니다.

꽃잎에 배경과 회전을 추가합시다.

.petal {
  transform: rotate(calc((var(--n) - 1) * 45deg));
  background: var(--bg);
}

회전에는 꽃잎 수에 45도를 곱한 CSS 계산을 사용합니다.

이 시점에서 꽃잎은 꽤 좋아 보이지만 단색이어야 합니다.



원래 로고에서 색상이 투명하다는 것을 알 수 있으며 CSS 한 줄로 이를 달성할 수 있습니다.

.petal {
  mix-blend-mode: multiply;
}

그리고 이 라인으로 우리의 마법은 완성됩니다. 우리는 우리의 기본 로고를 가지고 있습니다!

확장 가능한 로고 만들기

이 기사의 시작 부분에서 언급했듯이 아이콘을 확장 가능하게 만들 것입니다.

운 좋게도 우리는 이것을 매우 쉽게 만드는 방식으로 설정했습니다.

설정한 크기 변수:root만 변경하면 됩니다.

먼저 HTML 부분에 슬라이더를 소개하겠습니다.

<div class="form-group">
  <label
    >Size
    <input type="range" id="slider" min="5" max="20" value="15" />
  </label>
</div>

보시다시피 크기를 5와 20 사이에서 전환할 수 있기를 원합니다. 기본값은 15이며 처음에 값을 설정했습니다.

그런 다음 이 요소에 이벤트 리스너를 추가하려면 몇 줄의 JavaScript가 필요합니다.

const slider = document.getElementById('slider');

slider.addEventListener('input', (e) => {
  // Do something
});

이 루트 변수를 어떻게 변경할 수 있는지 궁금할 것입니다.
답은 의외로 간단합니다.

문서 요소를 선택하고 setProperty 메서드로 변수를 설정할 수 있습니다.

const slider = document.getElementById('slider');
const root = document.documentElement;

slider.addEventListener('input', (e) => {
  root.style.setProperty('--size', `${e.target.value}rem`);
});

그래, 그게 다야!
나를 믿지 않습니까? 이 CodePen에서 사용해 보십시오.

좀 더 부드럽게 움직이기 위해 컨테이너 클래스에 다음 클래스를 추가했습니다.

.container {
  transition: all 0.5s ease-in-out;
}

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나