스프라이트 png. CSS 스프라이트 만들기

목록을 마무리하겠습니다. 이제 거의 같은 방식으로 링크를 만들어 보겠습니다.

A( 패딩:0 0 0 20px; 배경:url("sprites.png") 0 -42px 반복 없음; ) a( 패딩:0 0 0 20px; 배경:url("sprites..png") 0 -21px 반복 없음)

a 선택자는 무엇을 의미하나요? 분명히 이 선택기는 브라우저가 적용하도록 강제합니다. 이 스타일값이 http://site/ 줄로 시작하는 href 속성이 있는 모든 링크에 적용됩니다. 스프라이트 자체는 목록의 경우와 거의 같은 방식으로 사용됩니다. 나는 하나의 링크, 즉 내 블로그에 대한 링크만을 고려하겠습니다.

1. 우리는 href로 필요한 링크를 결정합니다. 원하는 링크에 클래스를 할당하거나 html 코드에서 직접 스타일 속성에 스타일을 추가할 수 있습니다. 또는 다른 방법을 사용하여 원하는 링크를 식별하십시오.
2. 특정 링크의 왼쪽 가장자리에서 20픽셀의 여백을 만듭니다.
3. 다음으로 지정 배경 이미지이미지 스프라이트.png
4. 내 블로그용으로 선택한 이미지는 위쪽 가장자리에서 21픽셀 떨어져 있습니다. 즉, 배경을 21픽셀 아래로 이동해야 합니다. CSS에서는 다음과 같이 썼습니다: "0 -21px"

숙제

그라데이션이 포함된 스프라이트

이제 두 번째 예를 살펴보겠습니다.


이 사진은 창문을 보여줍니다. 창에는 머리글, 본문, 바닥글이 있습니다. 이러한 각 요소에는 배경 그라데이션이 설정되어 있습니다. 자세히 살펴보세요. 즉시 보이지 않으면 창백한 색상에서 포화 색상으로 색상이 전환됩니다.

이 창의 그라데이션을 스프라이트로 만드는 방법을 보여 드리겠습니다. 창의 머리글과 바닥글은 고정 높이(30픽셀)입니다. 창 본문은 텍스트 길이에 따라 늘어납니다.

이제 창에 대한 HTML 코드를 작성해 보겠습니다.

스프라이트를 사용해 보겠습니다. 창 제목부터 시작해 보겠습니다.

#window-header( 높이:30px; 배경:#C0C0FF url("gradients.png") 0 0 반복-x; )

그래디언트.png 파일에는 먼저 헤더에 대한 그래디언트가 있고 그 다음에는 본문에 대한 그래디언트가 있고 그 다음에는 하단 라인에 대한 그래디언트가 있습니다. 즉, 제목의 그라데이션이 맨 위에서부터 시작됩니다. 따라서 파일 자체를 배경으로 설정하고 위치를 "0 0"으로 표시합니다. 즉, 아무데도 후퇴하지 않습니다. 그라데이션을 가로로 늘리려면 "repeat-x"를 입력하세요.

전체 그래디언트가 헤더에 들어가도록 하려면 높이를 30픽셀로 설정하세요.

머리글과 동일한 방식으로 바닥글에 대한 그라데이션을 설정해 보겠습니다.

#window-footer( 높이:30px; 배경: #C0FFC0 url("gradients.png") 0 -60px 반복-x; )

이번에는 이미지를 60픽셀 아래로 이동하겠습니다.

창 본체의 상황은 더 복잡합니다. 머리글과 바닥글과 달리 몸이 늘어납니다. 즉, 창 몸체에 하나의 div를 만들고 거기에 그라데이션을 넣으면 모든 그라데이션이 이 div에 한꺼번에 나타납니다. 또는 몸체에 대한 그라디언트를 수직으로 마지막에 배치할 수 있지만 늘어나는 블록에 대해 여러 그라디언트가 있으면 어떻게 될까요? 한 번에 모든 것을 마지막으로 할 수는 없습니다. 좀 더 스마트하게 해보겠습니다.

CSS 코드는 다음과 같습니다.

#window-body( 위치:상대적; ) #window-body-gradient( 위치:절대; 왼쪽:0; 위쪽:0; 너비:100%; 높이:30px; 배경:url("gradients.png") 0 - 30px 반복-x; ) #window-body-text( 위치:상대적; )

이제 우리가 여기서 한 일을 더 자세히 말씀 드리겠습니다. 다음은 창 본문의 HTML 코드입니다.

보시다시피 몸에는 두 명의 디바가 더 내장되어 있습니다. 첫 번째 "window-body-gradient"가 그라디언트를 담당합니다. 두 번째 "window-body-text"는 텍스트용입니다. 또한 CSS 코드에서 알 수 있듯이 position:relative;를 적용했습니다. 전체 창 본체에 대해.

그래디언트 div의 경우 position:absolute를 지정합니다. 따라서 우리는 일반적인 흐름에서 그래디언트 div를 제거했습니다. 이제 이 div는 아무 영향도 미치지 않습니다. 전체 본문에 대해 position:relative를 지정했으므로 그래디언트 div는 부모보다 더 멀리 떠있지 않습니다. "left:0;"을 사용하여 창 본체의 왼쪽 및 위쪽 가장자리에 부착합니다. 상단:0;". 그래디언트 div의 높이를 30픽셀로 설정합니다. 즉, 여기서는 연결할 그래디언트의 높이를 나타냅니다. div의 높이가 그래디언트의 높이보다 크면 다른 스프라이트가 div에서 튀어나옵니다. 마지막으로,gradients.png 파일을 그래디언트 div에 첨부합니다. 평소와 같이 배경을 필요한 거리만큼 위로 이동합니다. 이 경우 배경을 30픽셀 위로 이동합니다.

이제 창 본문에 그라데이션이 생겼습니다. 그러나 그것은 텍스트를 모호하게 만듭니다. 텍스트가 가려지는 것을 방지하기 위해 전체 텍스트를 div로 감싸고 position:relative를 할당합니다. 할당되면 텍스트가 그라디언트 위에 표시됩니다.

기본적으로 그게 전부입니다. 이제 창에 모든 그라디언트를 배치했습니다. 헤더와 본체, 지하실에도 있습니다.

나는 모든 것이 완전히 명확해질 수 있도록 그렇게 긴 설명을 합니다. 그러나 실제로 레이아웃에 대해 조금 알고 있다면 예제 자체를 살펴보는 것만으로도 충분할 것입니다.

다시 한 번 링크를 복사했습니다.

실제로 스프라이트를 사용하는 예는 많이 있습니다. 저는 두 가지 예만 보여드렸지만 이 예만으로도 스프라이트의 작동 방식을 이해하기에 충분할 것입니다. 궁금한 점이 있으면 댓글로 물어보세요.

광고

스프라이트는 코카콜라가 만든 무색의 레몬과 라임 맛이 나는 카페인 없는 청량음료입니다. 1959년 서독에서 Fanta Clare Zitrone으로 개발되었으며 1961년 미국에서 Sprite로 출시되었습니다.

(콜라), 환타, 7 업, 미스트 트위스트. 스프라이트와 펩시 음료는 탄산음료/청량음료라는 클래스의 예입니다. 사람들은 다음과 같은 다양한 이유로 탄산음료를 마십니다. 달콤한 맛, 편리한 포장, 가용성 등 갈증을 해소하는 데 도움이 됩니다.

탄산음료 한 캔에는 설탕 10티스푼에 해당하는 양이 들어있습니다. 이 양의 설탕, 특히 액체 형태의 설탕은 혈당과 인슐린의 급격한 상승으로 인해 신체에서 반응을 일으킵니다. 시간이 지남에 따라 이는 체중 및 기타 건강 문제는 물론 당뇨병이나 인슐린 저항성을 유발할 수 있습니다.

광고

스프라이트의 성분은 무엇입니까?

탄산수, 고과당 옥수수 시럽, 구연산, 천연 향료, 구연산나트륨, 벤조산나트륨(맛 보호용).

Sprite PNG 이미지 투명 갤러리를 다운로드하세요.

해상도: 800×2352
크기: 1645KB
이미지 형식: .png

해상도: 409×1350
크기: 127KB
이미지 형식: .png


해상도: 825×825
크기: 283KB
이미지 형식: .png


해상도: 444×853
크기: 97KB
이미지 형식: .png


해상도: 512×512
크기: 186KB
이미지 형식: .png

해상도: 256×256
크기: 41KB
이미지 형식: .png



해상도: 1600×1200
크기: 625KB
이미지 형식: .png

해상도: 985×3524
크기: 1072KB
이미지 형식: .png


해상도: 901×810
크기: 711KB
이미지 형식: .png

최신 웹사이트에서는 제품 이미지, 사용자 아바타, 페이지 디자인을 구성하는 사진, 버튼, 아이콘, 로고 등 다양한 유형의 그래픽을 많이 찾을 수 있습니다. 그리고 프로젝트가 클수록 더 많은 그래픽 파일이 사용됩니다. 브라우저에서 사이트의 별도 페이지를 열면 모든 요소가 로드됩니다. 따라서 그래픽이 너무 많으면 로딩 속도가 크게 느려지는 경향이 있습니다. 결과적으로 프로젝트 방문자에게는 불편이 따릅니다.

CSS 스프라이트

~에 홈페이지그래픽 파일을 업로드하는 양식이 있습니다(각 파일마다 별도의 버튼이 있음). 처음에는 3개의 다운로드 버튼만 표시됩니다. 더 필요하시면 "추가 필요"를 클릭하세요.

향후 CSS 스프라이트에 대한 모든 파일을 선택한 후 "옵션" 버튼을 클릭하세요. 설정이 포함된 작은 패널이 눈앞에 열립니다. 여기서 요소 사이의 여백을 픽셀 단위로 설정하고, 이미지 프레임을 추가하고, 완성된 Sprite의 모든 이미지를 왼쪽 또는 위쪽 가장자리에 정렬하고, 배경색을 RGB 형식으로 설정할 수 있습니다.

"생성" 버튼을 클릭하면 CSS 스프라이트가 직접 생성됩니다. 또한 이를 사용하기 위한 간단한 지침, 즉 웹 사이트에 배치해야 하는 CSS 코드도 볼 수 있습니다. HTML에도 예제가 있습니다. 그걸 알아내는 게 문제가 아닌 것 같아요.

시각적으로 Dan의 도구 CSS 스프라이트 생성기는 다양한 설정을 갖춘 매우 훌륭한 CSS 스프라이트 생성기입니다. 예를 들어, 전체 이미지에 아이콘을 수직 또는 수평으로 삽입하도록 선택할 수 있습니다.

CSS 스프라이트

CSS Sprites 서비스에서는 디자인과 설정 모두가 매우 간단합니다. 결과 이미지 형식(PNG, JPEG, GIF)을 선택할 수 있습니다. 페이지에는 스프라이트 생성의 적응형 버전인 반응형 CSS 스프라이트(시도하지는 않았지만)에 대한 링크가 있습니다.

총. 원칙적으로 우리는 CSS 스프라이트를 만들고 사용하는 방법의 모든 뉘앙스를 고려했습니다. 생성기는 요소 생성 프로세스의 속도를 높이는 데 도움이 되지만 Photoshop을 사용하면 가능합니다. 질문이 있으시면 댓글에 적어주세요.

좋아요:
27

싫어함: 4

번역이 없습니다.

요정

에게또는 ~ 후에"에게""후에""후에"

화난 새 화가.png. index.html

UTF-8 index.html windows-1251 스타일.css 화난 새

http://spritecow.com

화난.png,

화난 새스타일 파일 스타일.css imgs/.나는 이것을 다음과 같이 얻었습니다 :

번역이 없습니다.

CSS 스프라이트는 하나로 결합된 웹 사이트의 그래픽입니다. 그래픽 파일. "왜 파일이 ​​하나야?" - 당신이 물어보세요. 사실 이미지 저장에 대한 이러한 접근 방식을 사용하면 웹 페이지의 성능을 향상시킬 수 있을 뿐만 아니라 그래픽 이미지더 조직적입니다. 다음 중 일부를 살펴보겠습니다. 모범 사례스프라이트를 사용합니다. 스프라이트의 이름 자체가 게임 스프라이트, 복고풍 게임 콘솔, 심지어 오늘날 매우 인기 있는 브라우저 게임을 생각나게 할 수 있습니다.

그래서 웹디자인에 적용해보면, 요정사이트에 대한 여러 이미지가 포함된 하나의 큰 파일이므로 네트워크를 통해 파일을 다운로드하고 전송하는 시간을 절약할 수 있습니다. 예를 들어, 스프라이트에 20~30개의 이미지가 포함되어 있으면 서버의 로드가 크게 줄어들 수 있습니다. 왜냐하면 이러한 이미지가 별도로 저장된 경우 서버는 각 이미지를 얻기 위해 20~30개의 별도 요청을 해야 하기 때문입니다. 스프라이트 덕분에 단일 이미지를 수신하기 위해 단 하나의 HTTP 요청만 서버로 전송됩니다. 스프라이트의 주요 작업은 디자인의 다양한 "조각"을 함께 조립하는 것이므로 시각적으로 눈으로 "읽을" 수 없을 수도 있습니다. 예를 들어 스프라이트는 다음과 같습니다.

스프라이트는 대부분의 최신 사이트에서 사용되며 잘 알려진 VKontakte도 예외는 아닙니다. 예를 들어, 다음은 인터페이스의 "부분"을 하나의 파일, 즉 친숙한 아이콘에 저장하는 방법입니다.

CSS 스프라이트를 사용할 때의 가장 큰 장점은 많은 개별 이미지가 아닌 모든 이미지가 포함된 하나의 그래픽 파일만 서버에 보내면 되며 CSS를 통해 해당 그래픽 파일의 작은 부분을 요소의 배경으로 표시할 수 있다는 것입니다. 어떤 사람들은 개별 이미지가 더 빨리 로드된다고 생각하지만 이는 사실이 아닙니다. 많은 그림이 포함된 하나의 그래픽 파일을 로드할 때 서버에 하나의 요청만 보내고 로드할 때 대량사진 - 서버에 더 많은 요청을 보냅니다. 이미지를 하나의 파일로 결합하면 HTTP 요청 수가 크게 줄어들 뿐만 아니라전체 이미지 파일 크기를 줄입니다.

스프라이트의 또 다른 예를 들어보겠습니다. 이것은 그래픽 요소를 디자인하는 데 전념하는 잘 알려진 서양 웹사이트 중 하나입니다:

스프라이트를 준비하기에 가장 좋은 시간은 언제입니까? 이에 대한 두 가지 접근 방식이 있습니다.

다양한 접근 방식 - 사이트 생성 전후에 스프라이트 생성

스프라이트 시트를 만들 때 두 가지 일반적인 접근 방식이 있습니다.에게또는 ~ 후에귀하의 웹사이트를 만드는 것입니다. 사이트를 만들기 전에 모든 이미지를 스프라이트 시트에 배치할 수 있습니다. 이것이 우리가 접근 방식이라고 부르는 것입니다."에게". 또한 모든 이미지를 다음과 같이 생성할 수 있습니다. 별도의 파일를 사용하면 편집이 더 쉬워집니다. 사이트가 구축되고 모든 이미지가 준비되면 수동으로 또는 여러 도구 중 하나를 사용하여 빠르고 쉽게 스프라이트 시트를 만들 수 있습니다. 우리는 이것을 접근 방식이라고 부를 것입니다"후에". 스프라이트 시트가 처음이거나 웹 디자인이 처음이라면 접근 방식이 더 적합할 것입니다."후에". 스프라이트를 만드는 데 도움이 되는 많은 유틸리티, 서비스 및 프로그램이 있으며, 대부분은 무료로 배포 및 사용할 수 있습니다.

스프라이트의 그림을 체계적으로 배열하기

Photoshop에서 스프라이트를 만들 때 모든 이미지를 조직적인 방식과 선택한 특정 순서로 즉시 배치하는 것이 좋습니다. 그러면 나중에 작업하기가 쉽고 간단해집니다. 항상 각 스프라이트 이미지의 공간을 가장 가까운 10픽셀로 반올림하거나 크기가 모두 같은 경우 주변에 더 많은 공간을 두십시오. CSS 스타일을 작성할 때 좌표 측정값을 적을 필요가 없으며 원하는 이미지의 좌표 번호를 잊어버릴 가능성이 줄어듭니다. 다음은 하나의 스프라이트에 다양한 이미지를 성공적으로 배치한 예입니다.

이론부터 실습까지! 스프라이트를 사용하여 Angry Birds에서 애니메이션 새 만들기

그래서 우리는 웹 디자인에서 스프라이트의 개념을 알게 되었지만 실천이 없는 이론은 아무것도 아닙니다. 그러므로 이제 당신과 나는 첫 번째 스프라이트를 만들고 만드는 방법을 배우겠습니다. 간단한 애니메이션 HTML 페이지에서. 우리의 예는 게임의 캐릭터를 기반으로 합니다. 앵그리버드- 이것은 재미있는 빨간 새입니다. 먼저 새 애니메이션의 4단계가 포함된 .PNG 형식의 스프라이트 이미지를 준비하겠습니다.

디스크 어딘가에 디렉토리를 생성해 봅시다 화난 새- 여기에 예제 파일을 배치하겠습니다. 이 디렉토리에 새가 포함된 스프라이트를 저장하고 파일을 호출합니다. 화가.png.다음 단계는 동일한 디렉터리에 다음 이름의 파일을 만드는 것입니다. index.html- 이것은 애니메이션이 포함된 테스트 페이지가 될 것입니다. 그런 다음 편집기에서 이 파일을 열고 여기에 다음 코드를 배치합니다.

지금 우리가 한 일을 조금 설명하겠습니다. 먼저 인코딩을 HTML 문서로 설정합니다. UTF-8이는 우리가 우리의 index.html이 인코딩에서는. 예를 들어, 다른 것을 지정할 수도 있습니다. windows-1251, - 우리 작업에서는 이것이 중요하지 않습니다. 다음으로 스타일 파일을 문서에 연결했습니다. 스타일.css(아직 카탈로그에 없습니다. 화난 새, 조금 나중에 만들겠습니다). 또한 외부 스크립트에 대한 링크를 설정하고 jQuery 라이브러리를 포함했습니다. jQuery를 사용하여새의 그림을 동적으로 변경하고 스프라이트의 "단계"를 변경하겠습니다. 또한 새에 애니메이션을 적용하는 코드를 배치할 내부 JavaScript 블록도 준비했습니다. 마지막으로 문서의 본문에는 단일 하이퍼링크가 포함되어 있으며 내부에는 DIV 블록이 있고 해당 ID는 BirdImage 로 설정되어 있으며 기본 클래스는 Bird-sleeping 입니다. 이는 페이지를 열 때 새가 "잠자고" 있다는 것을 의미합니다. 이는 스프라이트 내부의 왼쪽 하단 이미지에 해당하며 눈을 감고 있습니다. 이제 스프라이트를 "자르기"할 시간입니다. 그것에서 개별 이미지를 선택하십시오.

SpriteCow.Com 서비스를 사용하여 스프라이트 자르기

스프라이트를 "슬라이싱"하는 작업은 상당히 노동집약적입니다. 즉, 스프라이트의 각 이미지를 정의하는 좌표에서 실수하지 않도록 주의가 필요합니다. 다행스럽게도 오늘날에는 디자이너와 레이아웃 디자이너의 이러한 골치 아픈 일을 완전히 없애주는 서비스가 있습니다. 슬라이싱은 http://spritecow.com 서비스를 이용하고 추천해드리고 있습니다. 서비스의 본질은 간단하고 매우 편리합니다. 마우스로 각 새 사진을 선택하면 SpriteCow는 좌표가 포함된 기성 CSS 코드를 제공합니다. 우리가 해야 할 일은 새의 각 단계에 대해 4가지 스타일을 설정하는 것뿐입니다! 사이트에 들어가면 "이미지 열기"와 "예제 표시"라는 두 개의 버튼이 표시됩니다. 첫 번째 버튼이 필요합니다. 클릭하세요.

열리는 대화 상자에서 스프라이트 파일을 선택하십시오. 화난.png,그런 다음 스프라이트가 사이트에 어떻게 로드되었는지 확인합니다. 다음으로 배경색을 결정해야 합니다. 이를 위해 "배경 선택" 도구 모음을 클릭하고 스프라이트의 흰색 영역을 가리킵니다. 이렇게 하면 새의 각 단계를 올바르게 잘라낼 수 있습니다.

첫 번째 이미지를 선택하고 자동으로 CSS 코드를 가져옵니다.

이제 카탈로그를 생성할 차례입니다. 화난 새스타일 파일 스타일.css. 거기에 생성된 CSS 코드 4개 조각을 순차적으로 삽입합니다. 하지만 SpriteCow에서 제공하는 표준 .sprite 클래스 대신 스타일을 더 명확하게 호출하겠습니다. 또한 스프라이트 이미지를 디렉토리 루트에 직접 저장하므로 배경 속성에서 불필요한 경로 요소를 제거합니다. imgs/.나는 이것을 다음과 같이 얻었습니다 :

/* "보통" 새. 스프라이트의 왼쪽 상단 이미지 */ .bird-normal ( background: url("angry.png") no-repeat -12px -16px; width: 97px; height: 94px; ) /* "행복한" 새. 스프라이트의 오른쪽 상단 이미지 */ .bird-happy ( background: url("angry.png") no-repeat -118px -17px; width: 97px; height: 94px; ) /* "잠자는" 새. 스프라이트의 왼쪽 하단 이미지 */ .bird-sleeping ( background: url("angry.png") no-repeat -12px -120px; width: 97px; height: 94px; ) /* "Angry" Bird. 스프라이트의 오른쪽 하단 이미지 */ .bird-angry ( background: url("angry.png") no-repeat -118px -120px; 너비: 97px; 높이: 94px; )

마지막 단계는 애니메이션을 생성하는 jQuery 코드를 작성하는 것입니다.

이제 스프라이트를 성공적으로 분할하고 파일의 각 이미지에 대해 4가지 스타일을 배치했습니다. 스타일.css, 우리가 해야 할 일은 하이퍼링크 위로 마우스를 가져갈 때와 링크를 클릭할 때 애니메이션을 추가하는 jQuery 코드를 작성하는 것뿐입니다. 우리가 기억하는 것처럼 기본적으로 Bird-sleeping 클래스가 있습니다. 우리의 빨간 새는 문서를 열 때 "잠자기" 상태가 됩니다 :)

모든 애니메이션은 3가지 jQuery 메서드를 기반으로 합니다.

• hover - 링크 위로 커서를 이동하고 커서를 링크에서 멀리 이동시키는 핸들러입니다. 커서를 가리키면 새가 "깨어납니다". 수업은 새처럼 평범해질 것입니다
• mousedown - 링크에서 마우스 왼쪽 버튼을 클릭하기 위한 핸들러입니다. 이 경우 새는 "행복"해집니다. DIV 블록에는 Bird-happy 클래스가 할당됩니다.
• mouseup - 왼쪽 마우스 버튼 해제 핸들러. 풀려나면 새는 "화나게" 될 것입니다. DIV 블록에는 Bird-Angry 클래스가 할당됩니다.

그럼 아까 준비한 곳에 다음 코드를 붙여넣으세요. 실내기페이지에 배치된 JavaScript:

$(document).ready(function() ( // 애니메이션을 생성하는 jQuery 코드는 다음과 같습니다. $("#birdImage").hover(function() ( $(this).removeClass("bird-sleeping"); $ (this).removeClass("bird-angry"); $(this).removeClass("bird-happy") $(this).addClass("bird-normal"), function() ( $(this) ).removeClass("bird-normal"); $(this).removeClass("bird-angry") $(this).removeClass("bird-happy"); " "); )); $("#birdImage").mousedown(function() ( $(this).removeClass("bird-sleeping"); $(this).removeClass("bird-normal"); $ ( this).removeClass("bird-angry"); $(this).addClass("bird-happy"); mouseup(function() ( $(this).removeClass("bird-sleeping"); $ (this) ).removeClass("bird-normal"); $(this).removeClass("bird-happy") $(this).addClass("bird-angry" ));

준비가 된! 애니메이션 테스트

글쎄, 그게 다야! 우리 새가 준비되었으며 애니메이션으로 페이지에 생기를 불어넣었습니다! :) 데모를 보실 수 있습니다. 기사 하단에 예제가 포함된 아카이브를 다운로드하세요.