외계인 신호

Frontend Challenge v24.09.04, Glam Up My Markup: Space

에 대한 제출물입니다.

하지만 역시 Frontend Challenge v24.09.04, CSS Art: Space에 대한 제출물입니다.

내가 만든 것

우주에 있는 외계인 신호처럼 보이는 제공된 마크업을 읽을 수 없는 버전으로 만들었습니다. 이것이 이중 제출인 이유입니다. CSS 아트 챌린지에도 적용됩니다.

여행

디자인을 망치는 재미있는 방법은 다음을 사용하는 것입니다.

* { display: contents }

이렇게 하면 "상위 항목이 제거"되므로 노드의 모든 하위 항목에 추가하면 기본적으로 태그는 없고 원시 콘텐츠만 있게 됩니다.

가기 전에 신체에 몇 가지 기본 스타일을 추가해 보겠습니다.

body {
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle at center,
    #1d2a30 40%,
    #0B1215 75%,
    #111);
  container-type: inline-size;
  display: grid;
  margin: 0;
  width: 100vw;

방사형 배경의 정사각형(종횡비)을 그리드로 설정했습니다.

다음으로 하위 요소를 설정합니다.

:is(footer, header, section) {
  * { display: contents; }
  font-size: 3cqi;
  grid-area: 1 / 1;
  height: 25cqi;
  overflow: hidden;
  place-content: center;
  place-self: center;
  text-align: center;
  width: 80cqi;
}

우리는 "그리드 스택" 기술을 사용하여 모든 어린이를 동일한 그리드 셀에 배치합니다.

이는 다음을 제공합니다.

정말 엉망이네요! 이제 회전과 색상을 추가해 보겠습니다.

footer { rotate: 300deg; color: #FFFD; }
header { color: #FFFA; }
section {
  &:nth-of-type(1) { rotate: 60deg; color: #FFF4; }
  &:nth-of-type(2) { rotate: 120deg; color: #FFF9; }
  &:nth-of-type(3) { rotate: 180deg; color: #FFFE; }
  &:nth-of-type(4) { rotate: 240deg; color: #FFF7; }
}

이제 다음 내용을 얻을 수 있습니다.

거의 다 왔어요! 우리가 해야 할 일은 이상한 글꼴과 흔들리는 애니메이션을 추가하는 것뿐입니다.

@import url('https://fonts.googleapis.com/css2?
family=Redacted+Script&display=swap');

@keyframes shake {
  0% { transform: skewY(-15deg); }
  1% { transform: skewY(15deg); }
  2% { transform: skewY(-15deg); }
  3% { transform: skewY(15deg); }
  4%, 100% { transform: skewY(0deg); translate: 0; }
  5% { translate: -100vw -50vw; }
  6% { translate: 100vw 50vw; }
  7% { translate: 0; }
}

데모

위 내용은 외계인 신호의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!