CSS 생성기

지난 주에 우리는 CSS 감사 도구를 살펴보았고 이번 주에는 그라디언트에서 그림자, 베지어 곡선, 삼각형 및 유형 눈금에 이르기까지 모든 CSS에 유용한 생성기를 살펴보겠습니다. 가까운 곳에 보관할 수 있는 도구 벨트용 몇 가지 유용한 도구입니다.

CSS 그림자 생성기

정말 부드럽고 계층화된 상자 그림자 를 위한 CSS 코드를 자동으로 생성하는 도구를 찾고 계십니까? 글쎄, 당신은 SmoothShadow를 사랑하게 될 것입니다. Tobias Ahlin Bjerrome이 작성한 기사에서 영감을 받은 이 멋진 도구는 누구나 필요한 코드를 그 자리에서 생성할 수 있도록 도와줍니다.

한 번 사용하면 사용하지 않기가 어려울 것입니다. 이 작은 도구를 사용하면 계층화된 부드러운 상자 그림자를 시각적으로 디자인할 수 있을 뿐만 아니라 개별 이징 곡선으로 알파, 오프셋 및 흐림을 조정할 수도 있습니다. 그리고 더 나아졌습니다. 이 도구의 제작자인 Philipp Brumm도 SmoothShadow를 Figma 플러그인으로 출시하여 항상 원했던 것처럼 워크플로를 최적화할 수 있습니다.

CSS 테두리 반경 생성기

border-radius 에 대해 생각할 때 우리는 일반적으로 몇 가지 간단한 값(아마도 8px, 11px, 또는 16px)에 대해 생각합니다. 그러나 border-radius 는 매우 화려할 수 있으며 fancy-border-radius 생성기를 사용하면 쉽게 생성할 수 있습니다. 이 도구는 8개의 값을 결합하여 단순한 둥근 모양뿐만 아니라 유기적인 모양의 시각화를 제공합니다. 기본적으로 우리가 만들고 있는 것은 최종 모양을 만드는 겹치는 타원입니다. 이 도구는 CLI 도구로도 사용할 수 있으므로 로컬에서도 실행할 수 있습니다.

3차 베지어 곡선 생성기

때로는 애니메이션이 옳지 않다고 느껴지지 않습니까? 지속 시간이 꺼져 있거나 완화가 기발하고 이를 파악하는 데 상당한 시간이 걸릴 수 있습니다. Lea Verou의 큐빅 베지어를 사용하면 애니메이션을 미리 보고 비교할 수 있으며, 애니메이션 을 느리게 하고 시각적으로 조정할 수도 있습니다. 그런 다음 CSS 스니펫을 복사하여 붙여넣어 프로젝트에 바로 연결하세요.

기본 또는 복잡한 CSS @keyframe 애니메이션이 필요한 경우 Keyframes.app은 비디오 편집 소프트웨어와 유사한 시각적 타임라인 편집기 를 제공합니다. 단계를 추가하고, 크기 및 위치를 변경하고, 변형 및 색상 변경을 적용하고, CSS를 복사하여 붙여넣을 수도 있습니다. 아 그리고 디버깅을 위한 Chrome 및 Firefox의 애니메이션 패널도 잊지 마세요.

그라디언트 완화

그라디언트를 사용하면 한 색상에서 다른 색상으로 전환하는 선형 그라디언트에 의존하는 경우가 많습니다. 그러나 선형 그라디언트는 시작 또는 종료 위치에 단단한 가장자리가 있습니다. 이징 기능을 사용하여 그라디언트를 약간 더 좋게 만드는 방법이 있습니다. 그래서 Andreas Larsen은 CSS에서 easing 그라디언트를 만들고 미리 볼 수 있는 작은 편집기인 Easing Gradients Editor를 만들었습니다. 이 도구는 Sketch 플러그인 및 PostCSS 플러그인으로도 사용할 수 있습니다. 색상 선택기를 사용할 수 있지만 불행히도 실제 HEX 색상 값을 아직 추가할 수 없습니다.

데이터 시각화 색상표

때로는 매우 특정한 작업을 위해 매우 특정한 유형의 색상이 필요합니다. 예를 들어, 파이 차트, 그룹화된 막대 차트, 지도와 같은 데이터 시각화 프로젝트에서 작업하는 경우 시각적으로 동일한 거리 에 있는 일련의 색상이 필요할 수 있습니다. 이때 LearnUI Data Color Picker가 매우 유용해질 수 있습니다. 이러한 경우 사용자가 차이점을 더 빨리 식별할 수 있도록 다양한 색조 를 사용하는 것이 좋습니다. 파란색에서 파란색보다 주황색과 노란색 을 구별하는 것이 실제로 더 쉽습니다. 그러나 15% 더 가볍 습니다.

이 도구를 사용하여 필요한 색상 수와 밝은 배경색 또는 어두운 배경색이 필요한지 여부를 선택하고 기본 팔레트, 단일 색조 팔레트 또는 다양한 색상 스케일을 원하는지 여부를 선택합니다. 일단 가지고 있으면 16진수 값을 복사하고 SVG로 내보내서 Sketch, Figma 또는 Adobe XD에서 사용할 수 있습니다.

또한 LearnUI는 다양한 그라디언트 유형, 보간, 각도, 이징 및 원하는 그라디언트의 부드러운 정도가 포함된 액세스 가능한 색상 생성기와 매우 멋진 그라디언트 생성기를 제공합니다.

CSS 색상 음영에서 삼각형 및 가짜 데이터로

요소 및 유사 요소에 대한 CSS 삼각형 스타일을 찾아야 한다고 상상해 보십시오. 또는 주어진 색상의 색조와 음영 을 탐색하여 색상 팔레트를 약간 수정합니다. 또는 페이지 섹션에 대해 선형 및 방사형 CSS 그라디언트를 생성할 수 있습니다. 수동으로 모든 작업을 수행하거나 웹 전체에서 해당 CSS 스니펫을 찾으려고 할 필요가 없습니다. 항상 오마츠리에서 찾을 수 있습니다.

Omatsuri는 일본어로 축제 를 의미하며 이 사이트는 일상적인 사용을 위한 오픈 소스 브라우저 도구의 멋진 작은 축제입니다. 사이트에서 삼각형 생성기, 색상 음영 생성기, 그래디언트 생성기, 페이지 분할기, SVG 압축기, SVG → JSX 변환기 , 가짜 데이터 생성기, CSS 커서 및 키보드 이벤트 코드를 찾을 수 있습니다. Vitaly Rtishchev와 Vlad Shilov가 설계 및 제작했습니다. 사이트의 소스 코드도 사용할 수 있습니다.

고대비 생성기가 있는 CSS 오버레이

배경 이미지에 대해 텍스트를 더 잘 돋보이게 하려면 약간의 트릭이 있습니다. 이미지 위에 특정 불투명도가 있는 CSS linear-gradient 오버레이를 사용하여 색상 대비를 개선할 수 있습니다. 예를 들어 Spotify는 이 기술을 사용합니다.

이 모든 작업에는 한 줄의 코드만 있으면 되지만 여전히 답해야 할 질문이 하나 남아 있습니다. 오버레이에 사용할 불투명도를 결정하는 방법은 무엇입니까? Optimal Overlay Finder가 도움이 됩니다. 이미지를 업로드하고 텍스트를 입력하고 오버레이와 텍스트 색상을 선택하면 도구가 이미지에 오버레이가 어떻게 보이는지 미리 보기와 최적의 오버레이 불투명도를 보여줍니다. 먼 길을 가는 작은 디테일.

CSS 색상 팔레트 생성기

색상 팔레트를 생성할 수 있는 환상적인 도구가 많이 있지만 Coolors.co는 팔레트를 생성하고 색상의 다양한 음영을 탐색하기에 충분할 만큼만 수행하는 약간 멋진 도구입니다. 사진 또는 사진 콜라주에서 팔레트를 만들고 색맹을 테스트하고 색조, 채도, 밝기 및 온도를 빠르게 조정할 수 있습니다. 분명히, 그것은 또한 트렌드 컬러 팔레트를 특징으로 합니다.

두 색상 사이에 그라디언트 팔레트를 생성하고 자신의 그라디언트를 CSS로 만들고 내보낼 수도 있습니다. 이 도구는 iOS 앱, Adobe 추가 기능 및 Chrome 확장 프로그램으로 사용할 수 있습니다.

그리고 도구 상자의 그라디언트에 대해 약간 더 정교한 것이 필요한 경우 CSSGradient.io는 선형 또는 방사형 그라디언트, 색상 음영 또는 그라디언트 배경과 같은 모든 그라디언트 요구 사항을 위한 또 다른 도구입니다.

또한 그라디언트 생성기는 선택한 두 가지 색상에서 1~40개의 계단식 그라디언트를 생성합니다. 각 그래디언트는 자동으로 HEX, HSL 및 RGB 형식으로 표시됩니다. 값을 클릭하기만 하면 바로 클립보드에 복사됩니다.

CSS 색상 그라디언트 생성기

색상 그라데이션을 만들기 위해 손으로 색상을 선택하려면 디자인 경험과 색상 조화에 대한 충분한 이해가 필요합니다. 배경이나 UI 요소에 대한 그라디언트가 필요하지만 작업을 직접 처리할 만큼 자신감이 없는 경우(또는 급한 경우) My Brand New Logo의 사람들이 만든 색상 그라디언트 생성기가 있습니다. 당신의 뒤를 얻었다.

색상 그라디언트 알고리즘으로 구동되는 생성기는 선택한 색상을 기반으로 균형 잡힌 그라디언트를 생성합니다. 4가지 다른 스타일의 그라디언트가 미묘함에서 자개 효과와 강렬하고 깊은 색상 그라디언트에 이르기까지 있습니다. 슬라이더로 그라디언트를 조정할 수 있고 결과가 만족스러우면 생성된 CSS 코드를 복사하여 붙여넣어 프로젝트에서 사용할 수 있습니다.

CSS 유형 스케일 생성기

모바일과 데스크톱 모두에서 잘 작동하는 안정적인 타이포그래피 시스템을 만들고 싶다면 어떻게 해야 할까요? 일반적으로 단락에서 캡션 및 머리글에 이르기까지 모든 항목에 대한 인쇄 체계 계층을 제공하는 기존 활자체 척도에 의존할 것입니다. Jeremy Church의 Type-Scale은 타이포그래피 스케일을 만들고 CSS로 내보내는 데 도움이 되는 환상적인 작은 도구입니다. 작은 크기는 일반적으로 모바일 보기에 적합하고 중간 크기는 데스크톱 보기에 적합하며 큰 크기는 마케팅 사이트에 적합합니다.

이 도구는 장조 3도에서 완전 5도까지 8개의 사전 정의된 조화로운 유형 스케일을 제공하고(사용자 정의도 정의할 수 있음) 특정 기하학적 증분 비율로 일련의 글꼴 크기를 생성합니다. line-height 및 체중과 같은 설정을 조정하고 미리보기 텍스트를 수정하고 생성된 CSS를 얻거나 CodePen에서 유형 견본으로 편집할 수 있습니다. 또는 Tim Brown의 좋은 ol' ModularScale.com도 확인할 수 있습니다.

또 다른 멋진 도구는 Jean-Lou Desire의 Typographic Scale Calculator로 Tim과 Jeremy의 도구와 달리 뮤지컬 스케일. 그 결과 더 많은 값을 구성할 수 있는 몇 가지 옵션이 추가되어 설계자에게 더 부드러운 크기 조정이 제공됩니다.

라인 높이 계산기

기준선 격자를 기반으로 문자 눈금을 작성하는 경우 대답해야 할 까다로운 질문이 있습니다. 눈금의 모든 텍스트 크기에 적합한 줄 높이는 얼마입니까? Fran Perez의 Good Line-Height 계산기가 수학을 대신해 줍니다.

결과를 계산하려면 글꼴 크기, 승수 및 그리드 행 높이의 세 가지 매개변수만 입력하면 됩니다. 글꼴 크기는 텍스트가 기준선 격자에 잘 놓이도록 하는 핵심입니다. 텍스트 크기에 관계없이 승수를 사용하면 줄 사이의 거리를 제어할 수 있으며 격자 행 높이는 기준선 격자의 각 행 높이를 정의합니다.

유체 방향 생성기

clamp() 덕분에 뷰포트와 함께 커지는 글꼴 크기를 설정할 수 있지만 정의한 최소 및 최대 글꼴 크기보다 작거나 크지 않습니다. Fluid Heading에 대한 완벽한 CSS 값을 찾고 다양한 뷰포트에서 확장되는 방식을 제어하는 ​​데 도움을 주기 위해 Erik Andre Jakobsen은 Fluid Typography 도구를 만들었습니다.

최소 및 최대 글꼴 크기와 최소 및 최대 표시 영역 너비를 입력하면 도구가 자동으로 clamp() 규칙을 계산할 뿐만 아니라 실제 제목에 적용될 때 사양이 어떻게 보이는지 데모도 보여줍니다.

프로젝트에 대한 clamp() 규칙을 파악하는 데 도움이 되는 또 다른 유용한 생성기는 Maxime Roudier에서 제공합니다. Erik의 도구와 유사하게 작동하지만 구체적인 최소값과 최대값을 입력하는 대신 슬라이더로 조정하는 글꼴 모음과 범위를 선택할 수도 있습니다.

CSS Capsize 생성기

로드하는 동안 방향 감각 상실과 비용이 많이 드는 레이아웃 변경을 최소화하려면 웹 글꼴과 대체 글꼴을 일치시켜야 합니다. Monica Dinculescu의 font-style-matcher를 사용하면 대체 글꼴과 의도한 웹 글꼴의 x-높이 및 너비를 일치시켜 이상한 변화를 최소화할 수 있으며 f-mod를 사용하여 새로운 CSS 속성으로 동일한 작업을 수행할 수 있습니다.

기본적으로 많은 글꼴에는 여백과 행간이 미리 정의되어 있으므로 대체 글꼴과 웹 글꼴이 다른 경우 전체 레이아웃이 크게 변경됩니다. Capsize는 대문자 높이가 그리드의 배수가 되도록 글꼴 크기를 조정합니다. 대문자 위와 기준선 아래의 공백을 트리밍하여 수행합니다. 따라서 대체 글꼴과 웹 글꼴에서 동일한 줄 높이를 유지함으로써 이 도구는 전환이 끊김 없는지 확인하기 위해 "매직 넘버"를 생성합니다.

CSS 복합 선택기 생성기

항목 테이블을 만들어야 한다고 상상해 보십시오. 3개 이하의 항목이 있는 경우 동일한 행에 유지하되 6개 및 8개 항목에 대해 두 개의 전체 줄에 걸쳐 있고 10개 이상의 항목이 있는 카드 목록일 수 있습니다. 어떻게 구축하시겠습니까? 이러한 상황의 대부분은 CSS Grid 및 Flexbox로 수정할 수 있지만 때로는 매우 복잡한 CSS 선택기가 필요한 매우 복잡한 상황으로 끝날 수 있습니다.

이를 위해 Drew Minns는 Quantity Selectors용 생성기를 만들었습니다. 즉, 형제 수를 기반으로 요소에 스타일을 적용할 수 있는 복잡한 CSS 선택기입니다. 예를 들어, 최소 5개의 항목과 형제가 있거나 최대 10개 또는 3~5개의 항목이 있을 때 모든 요소에 스타일을 적용하려는 경우입니다.

최종 선택기는 이해하기 쉽지 않을 수 있으므로 대상 대상에 대한 코드에서 적절한 설명을 제공해야 합니다.

CSS clip-path 생성기

clip-path 속성 덕분에 간단한 원, 멋진 다각형 또는 SVG 소스와 같은 기본 모양으로 요소를 잘라 CSS에서 복잡한 모양을 만들 수 있습니다. CSS clip-path 작성기 Clippy는 브라우저에서 바로 클립 경로를 만들고 사용자 정의 하는 데 도움이 되는 시각적 도구입니다.

시작하려면 Clippy의 메뉴에서 모양과 데모 배경을 선택합니다. 그런 다음 모양의 점을 끌어 원하는 모양을 만들 수 있습니다. 색상으로 구분된 CSS는 변경 사항을 즉시 반영할 뿐만 아니라 강조 표시하여 선택 사항이 코드에 미치는 영향을 이해하는 데 도움이 됩니다.

전체 clip-path 가 여전히 약간 추상적으로 느껴지거나 실제 프로젝트에서 사용하는 방법의 멋진 예를 찾고 있다면 Mikael Ainalem이 clip-path 으로 만든 팝업 효과를 확인하십시오. clip-path .

CSS 그리드 레이아웃 생성기

CSS 그리드 레이아웃은 매우 간단할 수 있지만 때로는 레이아웃에 올바른 동작이 무엇인지 파악하기 위해 그리드 속성을 사용하고 싶을 수도 있습니다. 시작하기 위해 Sarah Drsner의 CSS 그리드 생성기, Drew Minns의 Griddy, Ali Alaa의 CSS 그리드 치트 시트 생성기 및 LenioLabs의 LayoutIt을 사용할 수 있습니다. 모두 그리드의 그리드와 컨테이너는 물론 간격을 정의할 수 있게 해줍니다. CSS를 즉시 생성합니다. Flexbox에 대해 더 많은 지침이 필요한 경우 Flexbox Patterns에 많은 예제가 포함되어 있습니다.

또는 한 줄의 CSS 솔루션을 사용할 수 있습니다. Una Kravets는 10개의 최신 CSS 레이아웃 및 크기 조정 기술 모음인 1-Line 레이아웃을 구축했습니다. 가장 큰 미스터리(센터링)부터 시작하여 고전적인 성배 레이아웃 과 "분해된 팬케이크"부터 clamp() 적용 및 가로 세로 비율 존중에 이르기까지 모든 것을 다루는 Una의 컬렉션은 당신의 삶을 풍요롭게 해줄 소소한 정보들로 가득합니다. 개발자로서 더 쉽게.

각 기술에는 데모, 수정할 CodePen 및 브라우저 지원에 대한 정보가 함께 제공됩니다. Una는 또한 한 줄짜리 불가사의를 더 자세히 설명하는 비디오 를 녹화했습니다. 초보자이든 전문가이든 관계없이 이 리소스는 확실히 유용할 것입니다.

CSS 복합 그리드 생성기

복합 그리드는 엄청난 유연성과 창의성을 위한 많은 공간을 제공합니다. 한 페이지에 모든 유형(기둥, 모듈식, 대칭 및 비대칭)의 두 개 이상의 그리드로 구성되어 별도의 영역을 차지하거나 겹칠 수 있습니다.

복합 그리드를 생성하고 무한한 변형을 그리는 시간을 절약하는 데 도움이 되는 작은 도구는 이제 Michelle Barker: 복합 그리드 생성기에서 제공됩니다. 각 그리드의 열 수를 입력하기만 하면 복합 그리드로 병합됩니다. 디지털 도구 상자에 추가할 수 있습니다. 또한 인쇄 프로젝트를 위해 모듈식 격자, 다중 열 격자 또는 원고 격자를 생성해야 하는 경우, Modular Grid Calculator는 InDesign에서 이를 달성하는 방법에 대한 철저한 설명을 제공합니다.

CSS 필터 및 혼합 모드 생성기

CSS drop-shadow 필터는 뛰어난 지원을 제공하지만 오히려 과소 평가됩니다. box-shadow 를 사용하여 해킹하는 데 많은 시간을 절약할 수 있다는 사실을 감안할 때 정말 부끄럽습니다.

Michelle Barker가 블로그 게시물에서 설명했듯이 drop-shadow 를 사용하면 더 눈에 띄는 형제 box-shadow 와 마찬가지로 x-오프셋, y-오프셋, 흐림 반경 및 색상에 대한 값을 사용할 수 있습니다. 그러나 한 가지 큰 이점이 있습니다. 그림자는 요소의 경계 상자( box-shadow 를 사용할 때 해킹이 시작되는 경우가 많음)가 아니라 이미지의 불투명한 부분에 해당합니다. 예를 들어 투명한 PNG 또는 SVG 로고 또는 잘린 모양에 그림자를 적용하려는 경우에 적합합니다.

많은 CSS 필터가 있으므로 프로젝트에 적합한 필터 세트를 찾아야 하는 경우 Mads에서 제공한 일부 선물과 함께 지원되는 모든 필터 를 테스트하기 위한 Mads Stoumann의 CSS 필터 편집기가 있습니다. 분명히 CSS도 즉석에서 생성됩니다.

필터 외에도 CSS 혼합 모드에 대한 많은 옵션이 있습니다. 일부 시각 효과가 어떻게 함께 작동하는지 미리 보려면 Rick Metzger의 CSS Duotone Generator를 사용할 수 있습니다. 이 도구에는 확대/축소, 간격, 흐림 및 이미지 불투명도에 대한 옵션이 포함되어 있지만 전경 및 배경 이미지에 대한 모든 혼합 모드도 있습니다. 물론 이 도구는 HTML과 CSS도 생성합니다.

흐릿한 이미지 자리 표시자 생성기

이미지 자리 표시자는 이미지가 로드될 때 사이트의 인지 성능을 향상시키는 효율적인 방법입니다. Joe Bell은 웹에서 가장 빠르고 보기 좋은 이미지 위치 지정자를 찾기 위해 스스로 솔루션을 찾기로 결정했습니다. 결과: 자리 표시자.

Node.js 도우미 모음으로 구동되는 Plaiceholder는 이미지를 가볍고 흐릿한 자리 표시자 이미지로 바꿉니다. CSS(권장), SVG, Base 64, Blurhash 및 실험적인 Blurhash에서 CSS로의 여러 접근 방식 중에서 선택할 수 있습니다.

영웅 생성기

같은 영웅을 반복해서 구현하는 것이 지겹습니까? 사라 드라스너의 영웅 생성기가 도와드리겠습니다. 기본 설정에 따라 몇 번의 클릭으로 반응형 영웅을 생성할 수 있습니다.

영웅 이미지, 그라디언트 감소 및 제목 간격에 적용할 그라디언트 종류를 결정합니다. 버튼을 포함하고 싶다면 버튼의 색상(호버링 및 그라디언트 색상 포함)과 버튼 반경을 사용자 정의할 수 있는 옵션이 생성기에 포함되어 있습니다. 결과에 만족하면 코드를 복사하여 붙여넣고 프로젝트에서 즉시 사용할 수 있습니다. 진정한 시간 절약!

이미지 맵 생성기

이미지 맵을 사용하면 이미지에서 클릭 가능한 영역을 만들 수 있습니다. 이미지 맵을 만들고 싶지만 클릭 가능한 영역을 정의하기 위해 좌표를 조작하고 싶지 않다면 imagemaps.net이 도움이 될 것입니다.

이 사이트는 프로세스를 보다 간단하게 만드는 그래픽 사용자 인터페이스를 제공합니다. 이미지를 업로드한 후에는 펜, 직사각형 및 다각형 도구를 사용하여 클릭 가능한 영역을 그릴 수 있습니다. 사용자 정의하고 가장 중요한 기능을 제공하려면 각 영역의 이름을 지정하고 해당 영역에 링크를 할당하고 색상, 높이 및 너비를 조정할 수 있습니다. "내보내기" 버튼을 클릭하면 프로젝트에 복사하여 붙여넣을 수 있는 HTML 맵과 React 코드가 제공됩니다.

CSS 애니메이션 생성기

약간 어긋난 것처럼 보이는 애니메이션과 잘 만들어진 애니메이션을 구별하는 것은 매우 쉽습니다. 그러나 키프레임 애니메이션이나 전환을 수동으로 조정하는 것은 상당한 시간이 소요될 수 있습니다. Animista는 즉시 사용할 수 있는 애니메이션 및 전환 라이브러리를 제공합니다. 입구와 출구, 텍스트 하이라이트, 버튼 동작 및 배경 효과에 대한 사전 설정이 많이 있습니다. 애니메이션을 정의한 후에는 Autoprefixer에서 생성된 코드와 함께 애니메이션의 CSS 스니펫을 복사하여 붙여넣을 수 있습니다.

CSS Wand는 호버 및 로딩 애니메이션 을 제공하지만 Ladda 애니메이션(내장 로딩 표시기가 있는 버튼) 및 Eric Spinners(Vue.js 통합 포함)를 사용할 수도 있습니다. 그리고 아마도 Boop! — 유사 요소로 크기를 조정하고 모션 감소를 선택한 사용자의 모션 기본 설정을 존중한다는 점을 염두에 두십시오.

3D CSS 직육면체 생성기

Jhey Tompkins는 재미있는 3D CSS 창작물로 유명합니다. 마우스를 움직이면 마술처럼 움직이는 그의 헬리콥터를 이미 본 적이 있습니까? 헬리콥터 및 이와 같은 기타 실험의 기초는 범위가 지정된 CSS 사용자 정의 속성으로 제어할 수 있는 반응형 CSS 직육면체입니다.

이제 3D 아이디어를 실현하고 싶다면 Jhey의 3D CSS Cuboid Generator가 도움이 될 것입니다. 슬라이더를 조정하여 직육면체의 높이, 너비, 깊이 및 색조를 결정하면 롤링, 비틀림, 슬라이딩 또는 기타 계획 중인 모든 작업을 수행하는 데 필요한 코드가 이미 있습니다. 즐거운 시간 보내세요!

CSS 기념일 로고 생성기

CSS를 사용하여 가장 정교한 레이아웃에 생명을 불어넣을 수 있지만 재미있는 아트워크와 기념일 로고도 생성할 수 있습니다. Yuan Chuan이 구축한 , CSS로 패턴을 그리기 위한 웹 구성 요소. 구성 요소에는 사용할 수 있는 유틸리티 기능과 약식 속성이 많이 포함되어 있습니다. 결과적으로 구성 요소는 일반 CSS와 함께 div 그리드를 생성합니다. 소스 코드는 GitHub에서도 사용할 수 있습니다.

유용한 작은 웹 개발자 도우미

인생에서 몇 가지 도구가 더 필요하다면 운 좋게도 Tiny Helpers라는 이름 의 한 곳에 자신이 좋아하는 유용한 도구를 모은 훌륭한 웹 개발자가 많이 있습니다. Stefan Judis가 유지 관리하는 API, 접근성 및 색상에서 글꼴, 성능, 정규식, SVG 및 유니코드에 이르기까지 모든 종류의 도구를 찾을 수 있습니다.

물론 Josh W. Comeau와 Stefan Judis 자신이 작성한 매우 유용한 Twitter 스레드와 같이 다른 플랫폼에서 더 많은 공유 기능이 있습니다. 작업을 더 잘하고 더 빨리 수행하는 데 도움이 될 것이라고 열망하는 것이 무엇이든 그곳에서 찾을 수 밖에 없습니다!

마무리

말 그대로 수백 가지 리소스가 있으며 여기에 나열된 리소스 중 일부가 일상 업무에 유용하고 가장 중요한 것은 시간이 많이 소요되는 일상적인 작업을 피하는 데 도움이 되기를 바랍니다. 즐거운 생성!