주간 공짜 : 12 개의 무료 CSS 스프라이트 생성기

/2018-10-12 02:33:48/
Lyvia
/사업/

CSS 이미지 스프라이트를 사용하면 사이트의 많은 이미지 또는 모든 이미지를 단일 파일로 결합하여 사이트의 HTTP 요청 수를 크게 줄일 수 있습니다. 그런 다음이 파일을 CSS 배경 위치 지정과 함께 사용하여 개별 이미지를 구현할 수 있습니다.

이 기술의 단점은 이미지를 수동으로 결합하고 CSS와 바이올린을 결합하여 각 이미지가 올바르게 표시되도록하는 과정이 복잡하고 어렵다는 것입니다. 다행히도이 프로세스를 완전히 자동화하는 무료 온라인 도구가 많이 있습니다. 오늘날 우리는 스프라이트 생성 프로세스에 대한 고유 한 테이크가있는 12 가지 툴 모음을 보유하고 있습니다. 이미지 폴더에서 스프라이트를 만들거나 기존 사이트를 변환하든 관계없이 작업을 몇 초 만에 완료하는 데 도움이되는 도구가 있습니다.

CSS 스프라이트 생성기 : Project Fondue

많은 옵션을 가진 좋은 발전기. 스프라이트로 변환하려는 모든 이미지의 .ZIP를 업로드하고 나머지를 처리합니다. 이미지와 필요한 다양한 "배경 위치"값을 모두 추출합니다.

CSS 스프라이트 생성기

추악하고 버그가 많은이 스프라이트 생성기는 모든 이미지를 개별적으로 업로드하도록합니다. 당신이 생각하지만 정직하게, 이 목록에 더 나은 대안이 있는지 알아보십시오.

CSS 스프라이트 – 온라인 CSS 스프라이트 빌더 / 생성기

이것은 꽤 좋습니다. 한 번에 여러 이미지를 쉽게 업로드하고 출력 파일 형식을 선택하며 결과적으로 Sass 및 CSS 코드를 가져올 수도 있습니다. 불포화 및 반전과 같은 호버 효과를 자동으로 생성하는 몇 가지 깔끔한 옵션도 있습니다. 전반적으로 상당히 인상적입니다. 확인하십시오.

Spritebox – Sprite 이미지에서 CSS 만들기

이것은 약간 덜 자동화 된 다른 경로를 사용합니다. 스프라이트 이미지를 생성하는 대신 이미 생성 된 스프라이트를 업로드하고 특정 영역을 정의하여 결과 CSS를 생성 할 수 있습니다. Photoshop에서 스프라이트를 작성하고 코드에 대한 도움말을 원할 경우 유용한 도구입니다.

캔버스 : CSS 스프라이트 생성기

이 이미지를 업로드하는 경우 한 번에 하나씩 이미지를 업로드해야합니다. 링크가있는 경우 해당 클래스 이름으로 목록을 붙여 넣을 수 있습니다. 패딩 및 배경색 옵션이 있습니다. 그것은 내 테스트에서 잘 작동했으며 분명히 볼만한 가치가 있습니다.

스티치 – HTML5 스프라이트 시트 생성기

이 이미지를 사용하면 이미지를 드래그 할 수 있습니다. 이는 다른 개발자가 생각해 낸 모든 어색한 언 로더를 사용한 후에 훌륭합니다. 그런 다음 한 버튼을 클릭하여 이미지를 얻고 다른 버튼을 클릭하여 CSS를 가져올 수 있습니다. 사실상 옵션이 없으며 Chrome 및 Firefox에서만 작동하지만 빠르고 간단한 솔루션을 원한다면 완벽합니다.

스프라이트 매퍼

이것은 슈퍼 머 저드 전용이며 명령 줄에서 실행하는 다운로드 가능한 스프라이트 생성기입니다. 구현은 정말 매끄 럽습니다. 기존 CSS 파일을 가리키면 나머지 작업을 수행합니다. 따라서 원본 CSS와 이미지 파일에 매달아 변경 사항이있을 때 다시 처리 할 수 있으므로 장기 스프라이트 관리 문제가 해결 될 수 있습니다.

스프라이트

SpriteMe는 일반적인 개발 프로세스를 완벽하게 유지할 수있는 멋진 도구입니다. 일반적으로 개별 이미지를 사용하는 것처럼 페이지를 작성하십시오. 그런 다음 브라우저에서 페이지를 열고 SpriteMe 책갈피를 누르십시오. 페이지의 모든 이미지를 잡고 스프라이트를 만들고 CSS를 생성합니다. 기존 사이트를 전환 할 때 특히 유용합니다.