다음은 최고의 무료 온라인 CSS 모양 생성기 웹사이트 목록입니다 . CSS 모양 생성기는 사용자 정의 모양을 만들 수 있는 도구입니다. CSS(Cascading Style Sheets)를 사용하면 다양한 모양을 만들 수 있지만 모양 생성 도구를 사용하면 작업을 더 쉽고 빠르게 만들 수 있습니다. 코드가 아닌 모양에 집중할 수 있는 사용자 친화적인 인터페이스를 제공합니다.
이 게시물에서는 온라인으로 CSS 모양을 생성할 수 있는 8개의 무료 웹사이트를 다룹니다. 이러한 도구에는 다양한 모양을 다루는 컬렉션이 함께 제공됩니다. 사용하려는 모양을 선택할 수 있습니다. 그런 다음 해당 점을 드래그하여 간단히 크기를 조정할 수 있습니다. 배경 이미지가 포함된 모양을 미리 보려면 그렇게 할 수도 있습니다. 이렇게 하면 필요에 따라 모양을 구성할 수 있습니다. 이러한 도구 중 일부를 사용하면 사용자 정의 다각형을 만들 수 있습니다. 이는 제공되는 컬렉션 외에 원하는 모양을 만들기 위해 포인트를 추가하거나 제거할 수 있음을 의미합니다. 그렇다면 게시물을 통해 이러한 도구를 자세히 확인해 보겠습니다.
내가 가장 좋아하는 온라인 CSS 모양 생성기
이 목록에서 온라인으로 CSS 모양을 생성하기 위해 제가 가장 좋아하는 웹사이트는 Codepen.io 입니다 . 이 도구에는 37개의 모양 모음이 있으므로 필요에 맞는 모양을 쉽게 찾을 수 있습니다. 그렇지 않은 경우 사용자 정의 모양을 만들고 해당 모양에 대한 SVG 경로를 얻을 수 있습니다. 사용자 정의/즐겨찾는 모양을 모양 사전 설정에 추가하고 나중에 사용할 수 있도록 사전 설정을 코드로 저장할 수 있습니다.
개요 테이블:
| 웹사이트 | 모양 컬렉션 | 배경 | 암호 |
|---|---|---|---|
| Codepen.io | 37 | 영상 | CSS, 프리셋 |
| CSSPortal.com | 27 | 맞춤 이미지 | CSS, 웹킷 |
| 10015.io | 23 | 맞춤 이미지 | CSS |
| BennettFeely.com | 27 | 맞춤 이미지 | CSS |
| WebDevPuneet.com | 27 | 이미지/색상 | CSS |
| 미사용-CSS.com | 17 | 이미지/색상 | CSS |
| UpLabs.com | 4 | 영상 | CSS |
| Alextade.me | 해당 없음 | 맞춤 이미지 | CSS |
Codepen.io
Codepen.io무료 코드 조각 호스팅 웹사이트입니다. 이 웹사이트에는 무료 CSS 클립 경로 편집기가 있습니다. 이 도구에는 기본적으로 37개의 모양이 있습니다. 상단에는 일련의 지침이 있습니다. 지침에는 도형에 점을 추가/제거하는 방법이 나와 있습니다. 즉, 모양의 크기를 조정할 수 있을 뿐만 아니라 원하는 만큼 많은 점을 추가하고 제거할 수도 있습니다. 따라서 이 도구를 사용하여 사용자 정의 모양을 만드는 것이 가능해졌습니다. 또한 새 모양을 모양 컬렉션을 확장하는 사전 설정에 저장할 수도 있습니다. 점을 변경하지 않고 원래 모양을 변경하면 비포 애프터 애니메이션도 재생됩니다. 코드를 보면 이 도구는 CSS 클립 경로와 함께 모양의 SVG 코드를 제공합니다. 또한 사용자 정의/즐겨찾는 모양을 쉽게 복사 및 저장하고 필요할 때마다 다시 로드할 수 있도록 사전 설정된 코드도 표시됩니다.
하이라이트:
- 도형의 수 : 37개 이상의 도형 모음.
- 사용자 정의 다각형 : 가능합니다.
- 모양 배경 : 이미지 업로드/가져오기 옵션이 있는 이미지입니다.
- 추가 기능 : 사용자 정의 모양의 사전 설정을 만듭니다.
- CSS 코드 : 클립 경로 코드, SVG 코드 및 모양 사전 설정 코드입니다.
CSSPortal.com
CSSPortal.com은 CSS 도구 및 기타 리소스를 제공하는 무료 웹사이트입니다. 무료 온라인 CSS 모양 생성 도구가 있습니다. 이 도구에는 사용자 정의 다각형이 포함된 27개의 모양 세트가 있습니다. 화면 오른쪽의 그리드에 모양이 표시됩니다. 도형을 선택하면 배경 이미지와 함께 화면에 해당 도형의 대화형 미리보기가 표시됩니다. 모양에 따라 모양의 모서리 수와 동일한 수의 조정 가능한 점을 얻게 됩니다. 해당 점의 위치를 변경하여 모양을 사용자 정의할 수 있습니다. 완벽한 컷아웃을 위해 어떤 이미지든 배경으로 업로드할 수도 있습니다. 마지막으로 모양 크기를 설정하고 이에 대한 CSS 클립 경로 코드를 얻을 수 있습니다.
하이라이트:
- 도형 수 : 27개 도형 모음입니다.
- 사용자 정의 다각형 : 가능합니다.
- 모양 배경 : 이미지 업로드/가져오기 옵션이 있는 이미지입니다.
- CSS 코드 : 클립 경로 코드 및 WebKit 호환 코드.
10015.io
10015.io 에는 무료 온라인 CSS 모양 생성 도구가 있습니다. 이 도구에는 사용자 정의 다각형을 포함하는 23가지 다양한 유형의 모양 모음이 있습니다. 모양을 선택하고 원하는 대로 사용자 정의할 수 있습니다. 도형의 너비와 높이를 픽셀 단위로 설정할 수도 있습니다. 도형 배경에 샘플 이미지가 표시됩니다. URL을 추가하여 자신만의 이미지를 추가할 수도 있습니다. 이렇게 하면 사용하려는 이미지에 가장 잘 맞도록 모양을 조정할 수 있습니다. 모양 아래에는 모양에 대한 CSS 클립 경로 코드가 표시됩니다. 거기에서 복사하여 사용하려는 곳에 사용할 수 있습니다.
하이라이트:
- 도형 수 : 23개 도형 모음입니다.
- 사용자 정의 다각형 : 가능합니다.
- 모양 배경 : URL을 통해 이미지를 가져오는 옵션이 있는 이미지입니다.
- CSS 코드 : 클립 경로 코드.
BennettFeely.com
BennettFeely.com에는 온라인으로 CSS 모양을 생성할 수 있는 무료 도구도 있습니다. 이 도구에는 오른쪽에 모양 모음이 있는 큰 캔버스 영역이 있습니다. 사용자 정의 다각형을 포함하여 총 27개의 도형을 포함합니다. 모양을 선택하여 캔버스에서 볼 수 있으며, 모서리와 상호 작용하여 그에 따라 크기를 조정할 수 있습니다. 백그라운드에 샘플 이미지가 있지만 URL을 사용하여 원하는 이미지를 가져올 수 있습니다. 이 도구를 사용하면 데모 크기도 변경할 수 있습니다. 이는 미세한 디테일, 해상도 또는 픽셀화에 매우 주의해야 할 때 유용할 수 있습니다. 이 도구는 복사하여 사용할 수 있는 클립 경로 CSS 코드를 제공합니다.
하이라이트:
- 도형 수 : 27개 도형 모음입니다.
- 사용자 정의 다각형 : 가능합니다.
- 모양 배경 : URL을 통해 가져올 수 있는 옵션이 있는 이미지입니다.
- CSS 코드 : 클립 경로 코드.
WebDevPuneet.com
WebDevPuneet.com 은 온라인으로 CSS 모양을 생성할 수 있는 또 다른 무료 웹사이트입니다. 이 웹사이트의 도구는 상단에 27개 모양의 스크롤 가능한 목록을 제공합니다. 여기에는 자신만의 모양을 만드는 데 사용할 수 있는 사용자 정의 다각형 모양도 포함됩니다. 모양에 맡기면 사용자 정의 배경 이미지를 가져올 수 있는 옵션이 제공됩니다. 간단히 URL을 추가하고 이미지를 가져올 수 있습니다. 이를 통해 화면의 모양 크기를 조정할 수 있습니다. 완료되면 거기에서 클립 경로 코드를 선택하고 복사할 수 있습니다.
하이라이트:
- 도형 수 : 27개 도형 모음입니다.
- 사용자 정의 다각형 : 가능합니다.
- 모양 배경 : 이미지 업로드/가져오기 옵션이 있는 이미지입니다.
- CSS 코드 : 클립 경로 코드 및 WebKit 호환 코드.
미사용-CSS.com
Unused-CSS.com은 온라인 CSS 모양 생성기를 갖춘 또 다른 무료 웹사이트입니다. 이 도구는 17개의 다양한 모양에 대한 클립 경로를 생성하는 데 도움이 됩니다. 스크롤 가능한 수평 목록에 아래 모양이 나열됩니다. 여기에서 모양을 선택하여 캔버스로 가져올 수 있습니다. 모양이 단색으로 로드됩니다. 원하는대로 색상을 변경할 수 있으며 배경으로 이미지 파일을 업로드할 수도 있습니다. 이를 통해 도형의 점 수를 사용하여 도형의 크기를 조정할 수 있습니다. 도형에서 점을 삭제할 수도 있지만 새 점을 추가할 수는 없습니다. 이를 통해 사용자 정의 모양을 생성하는 것이 어느 정도 가능해졌습니다. 그에 따라 모양을 구성한 다음 해당 CSS 코드를 얻을 수 있습니다.
하이라이트:
- 도형 수 : 17개 도형 모음입니다.
- 사용자 정의 다각형 : 부분적으로 가능합니다.
- 모양 배경 : 이미지 업로드 옵션이 있는 단색입니다.
- CSS 코드 : 클립 경로 코드 및 WebKit 호환 코드.
UpLabs.com
UpLabs.com 에는 온라인으로 CSS 모양을 생성하는 데 사용할 수 있는 무료 도구가 있습니다. 처음에는 총 4가지 도형을 지원하는 간단한 도구입니다. 하지만 해당 모양에서 더 많은 노드를 추가할 수 있습니다. 이를 통해 가능한 다각형 모양을 만들 수 있습니다. 도형 외에는 교체가 불가능한 데모 이미지를 배경으로 사용합니다. 이 도구는 모양을 변경할 때 화면에 CSS 클립 경로 코드를 표시합니다. 모양이 마음에 들면 거기에서 코드를 복사하면 됩니다.
하이라이트:
- 도형 수 : 4개의 도형을 모아 놓은 것입니다.
- 사용자 정의 다각형 : 가능합니다.
- 모양 배경 : 데모 이미지.
- CSS 코드 : 클립 경로 코드.
Alextade.me
Alextade.me 는 무료 온라인 CSS 모양 생성기를 갖춘 또 다른 웹사이트입니다. 이 도구는 CSS 모양을 생성하는 데 가장 긴 프로세스를 사용합니다. 포인트를 이동하는 대신 각 포인트에 대한 상자가 표시됩니다. 해당 상자를 사용하여 해당 지점의 위치를 변경할 수 있습니다. 상자를 추가하고 제거하여 원하는 모양을 만들 수 있습니다. 이 접근 방식을 사용하면 어떤 다각형 모양이라도 만들 수 있지만 훨씬 더 많은 시간이 걸립니다. 그러나 클립 경로를 실험하고 학습하는 데 사용할 수 있는 훌륭한 도구입니다.
하이라이트:
- 도형 수 : 없음.
- 사용자 정의 다각형 : 가능합니다.
- 모양 배경 : 이미지 업로드/가져오기 옵션입니다.
- CSS 코드 : 클립 경로 코드.