CSS 생성기

21: 삼각형, 화살표, 모양, 클립 경로 및 테두리 반경 생성기; 리본, 도구 설명 및 로더 구성 요소 빌더 그라디언트, 상자 그림자, 텍스트 그림자, Glassmorphism, Neumorphism, 필터, 변환, 애니메이션 및 원근감 효과 편집기; Grid Builder, Flexbox Playground, Grid Playground 및 CSS 변수 생성기가 모두 하나의 인터페이스에 포함되어 있습니다.

예. 출력은 스타일시트나 구성 요소에 직접 붙여넣을 수 있는 깔끔하고 표준을 준수하는 CSS입니다. 중요한 경우(클립 경로, 필터) 공급업체에서 접두사가 붙은 대체 항목이 포함되며 애니메이션 도구는 전체 @keyframes 블록을 출력합니다.

삼각형 생성기를 열고 방향(위, 아래, 왼쪽, 오른쪽)을 선택하고 슬라이더로 크기와 색상을 설정한 다음 테두리 기반 CSS를 복사합니다. 모든 브라우저에서 작동하는 고전적인 너비/높이 0 테두리 트릭을 사용합니다.

예. 애니메이션 빌더는 지속 시간, 지연, 타이밍 기능 및 반복 횟수에 대한 제어 기능이 있는 사전 설정(바운스, 페이드, 슬라이드인, 회전, 흔들기, 팝)을 제공합니다. 완전한 애니메이션 속기와 @keyframes 규칙을 생성합니다.

예. 방향, 내용 정렬, 항목 정렬, 줄 바꿈, 간격 및 항목 수를 시각적으로 조정하면 도구가 컨테이너에 대한 정확한 CSS를 출력합니다. 각 속성이 레이아웃에 어떤 영향을 미치는지 알아보고 작업 시작점을 파악하는 데 이상적입니다.

아니요. 모든 것이 브라우저에서 로컬로 실행되고, 미리보기가 클라이언트 측에서 렌더링되고, CSS가 장치에 생성됩니다. 아무것도 업로드되지 않으므로 도구는 빠르고 완전히 비공개입니다.

시각적 컨트롤을 조정하고 생성된 CSS를 복사합니다. 상자 그림자의 경우 오프셋, 흐림, 확산 및 색상을 설정합니다. 그라디언트의 경우 색상과 방향을 선택하고 실시간 미리보기를 통해 복사하기 전에 정확한 모양을 얻을 수 있습니다.

예. 생성기는 실시간 미리 보기를 통해 그라디언트, 그림자, 유리/뉴모픽 스타일과 같은 현대적인 효과를 생성하므로 값을 직접 조정하지 않고도 제작 가능한 CSS를 복사할 수 있습니다.

예. 모든 변경 사항은 실시간 미리보기를 즉시 업데이트하고 복사 가능한 CSS도 함께 업데이트되므로 붙여넣은 내용이 바로 표시됩니다.