목록을 마치겠습니다. 이제 동일한 링크를 수행해 보겠습니다.

A( padding:0 0 0 20px; background:url("sprites.png") 0 -42px no-repeat; ) a( padding:0 0 0 20px; background:url("sprites..png") 0 -21px 반복 금지; )

선택자는 무엇을 의미합니까? 분명히 이 선택기는 브라우저가 적용되도록 합니다. 주어진 스타일값이 http://website/ 문자열로 시작하는 href 속성이 있는 모든 링크. 스프라이트 자체는 목록의 경우와 거의 동일한 방식으로 적용됩니다. 내 블로그에 대한 링크인 하나의 링크만 고려할 것입니다.

1. 우리는 정의 원하는 링크 by href.. 원하는 링크에 클래스를 할당하거나 html 코드에서 직접 style 속성에 스타일을 작성할 수 있습니다. 또는 다른 방법으로 원하는 링크를 식별합니다.
2. 특정 링크의 왼쪽 가장자리에서 20픽셀로 들여쓰기를 합니다.
3. 다음으로 지정 배경 이미지 sprites.png 이미지
4. 내 블로그를 위해 선택한 이미지는 상단에서 21픽셀이며, 이는 배경을 21픽셀 아래로 이동해야 함을 의미합니다. CSS에서는 "0 -21px"와 같이 작성했습니다.

숙제

그라디언트가 있는 스프라이트

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


이 그림은 창을 보여줍니다. 창에는 제목, 본문 및 바닥글이 있습니다. 이러한 각 요소에는 배경 그라디언트 세트가 있습니다. 이것이 즉시 보이지 않으면 자세히 살펴보십시오. 창백한 색에서 포화 된 색으로 색상 전환이 있습니다.

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

이제 창의 html 코드를 작성해 보겠습니다.

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

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

gradients.png 파일에는 먼저 제목에 대한 그라디언트가 있고 그 다음에는 본문에 대한 그라디언트가 있고 그 다음에는 그라디언트가 있습니다. 결론. 즉, 제목의 그라데이션이 맨 위에서 시작됩니다. 따라서 우리는 단순히 파일 자체를 배경으로 설정하고 위치를 "0 0"으로 표시합니다. 즉, 아무데도 후퇴하지 않습니다. 그래디언트를 수평으로 늘리려면 "repeat-x"를 작성하십시오.

그라디언트가 제목에 완전히 맞도록 높이를 30픽셀로 지정합니다.

머리글과 마찬가지로 바닥글의 그래디언트를 설정해 보겠습니다.

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

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

창의 몸체를 사용하면 상황이 더 복잡해집니다. 머리글과 바닥글과 달리 몸체가 늘어납니다. 즉, 창 본문에 대해 하나의 div를 만들고 거기에 그라디언트를 넣으면 모든 그라디언트가 이 div에 한 번에 나타납니다. 또는 몸체에 대한 그라디언트를 세로로 마지막에 배치할 수 있지만 늘어나는 블록에 대한 그라디언트가 여러 개라면 어떻게 될까요? 한 번에 모든 것을 할 수는 없습니다. 우리는 조금 더 교묘하게 할 것입니다.

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

#window-body( position:relative; ) #window-body-gradient( position:absolute; left:0; top:0; width:100%; height:30px; background:url("gradients.png") 0 - 30px repeat-x; ) #window-body-text( position:relative; )

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

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

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

이제 창 본문에 그라디언트가 있습니다. 그러나 그것은 텍스트를 흐리게 합니다. 텍스트가 가려지지 않도록 전체 텍스트를 div로 감싸고 position: relative를 할당합니다. 할당되면 텍스트가 그라디언트 위에 표시됩니다.

일반적으로 그게 전부입니다. 이제 모든 그라디언트를 창에 배치했습니다. 그리고 머리글과 몸과 지하실에서.

나는 모든 것이 완전히 명확하도록 그렇게 긴 설명을합니다. 그러나 실제로 레이아웃에 약간 정통한 경우 예제 자체를 보는 것으로 충분할 것입니다.

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

실제로 스프라이트를 사용하는 많은 예를 생각해낼 수 있습니다. 나는 두 가지 예만 보여주었지만 이 예는 스프라이트가 어떻게 작동하는지 이해하기에 충분할 것입니다. 질문이 있으면 의견에 질문하십시오.

좋아요:
27

싫어함: 4

번역이 없습니다.

스프라이트

~ 전에또는 ~ 후에"전에""후에""후에"

앵그리 버드 화났어.png. index.html

UTF-8 index.html 윈도우-1251 스타일.css 앵그리 버드

http://spritecow.com

화난.png,

앵그리 버드스타일 파일 스타일.css 이미지/.나는 다음과 같이 얻었다.

번역이 없습니다.

CSS 스프라이트는 하나의 그래픽 파일로 결합된 웹 사이트용 그래픽입니다. "왜 하나의 파일입니까?" - 물어. 사실 이미지를 저장하는 이 접근 방식을 사용하면 웹 페이지의 성능을 높이고 그래픽 이미지더 조직화되었습니다. 스프라이트 사용에 대한 몇 가지 모범 사례를 살펴보겠습니다. 스프라이트의 이름만으로도 게임 스프라이트, 복고풍 게임 콘솔오늘날 매우 인기 있는 브라우저 게임도 있습니다.

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

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

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

스프라이트의 또 다른 예를 보여드리겠습니다. 디자인 전문으로 잘 알려진 한 서부 사이트에서 그래픽 요소를 저장하는 방법은 다음과 같습니다.

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

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

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

조직적인 방식으로 스프라이트에 사진 정렬

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

이론부터 실전까지! 스프라이트를 사용하여 애니메이션 Angry Birds Bird를 만드는 방법

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

디스크의 어딘가에 디렉토리를 생성합시다. 앵그리 버드- 거기에 우리 예제의 파일을 배치합니다. 이 디렉토리에 새가 있는 스프라이트를 저장하고 파일 이름을 지정합니다. 화났어.png.다음 단계는 같은 디렉토리에 이름을 가진 파일을 만드는 것입니다. index.html- 이것은 애니메이션이 있는 테스트 페이지가 될 것입니다. 그런 다음 편집기에서 이 파일을 열고 다음 코드를 거기에 넣습니다.

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

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

스프라이트를 "슬라이싱"하는 작업은 매우 힘든 작업입니다. 스프라이트의 각 이미지를 정의하는 좌표를 실수하지 않도록 주의해야 합니다. 다행히 오늘날에는 디자이너와 레이아웃 디자이너의 이러한 골칫거리를 완전히 제거하는 서비스가 있습니다. 나는 슬라이싱을 위해 http://spritecow.com을 사용하고 추천합니다. 서비스의 본질은 간단하고 매우 편리합니다. 마우스로 각 새 이미지를 선택하고 SpriteCow는 좌표가 있는 기성품 CSS 코드를 제공합니다. 새의 각 단계에 대해 4가지 스타일을 설정하기만 하면 됩니다! 사이트에 들어가면 "이미지 열기"와 "예제 표시"라는 2개의 버튼이 표시됩니다. 첫 번째 버튼이 필요합니다. 클릭하십시오.

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

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

이제 카탈로그에서 생성할 시간입니다. 앵그리 버드스타일 파일 스타일.css. 생성된 4개의 CSS 코드를 거기에 순차적으로 삽입하지만 SpriteCow에서 제공하는 표준 .sprite 클래스 대신 스타일을 더 이해하기 쉽게 합시다. 또한 스프라이트 이미지는 디렉토리의 루트에 직접 저장되기 때문에 background 속성에서 불필요한 경로 요소를 제거합니다. 이미지/.나는 다음과 같이 얻었다.

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

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

이제 성공적으로 스프라이트를 슬라이스하고 파일의 각 이미지에 대해 4개의 스타일을 배치했습니다. 스타일.css, 하이퍼링크 위로 마우스를 가져갈 때와 링크를 클릭할 때 애니메이션을 추가할 jQuery 코드를 작성하기만 하면 됩니다. 우리가 기억하는 바와 같이, 기본적으로 우리는 bird-sleeping 클래스 세트를 가지고 있습니다. 우리의 빨간 새는 문서를 열 때 "잠자기"합니다 :)

모든 애니메이션은 3을 기반으로 합니다. jQuery 메서드:

• hover - 링크 위로 마우스를 가져가서 링크에서 커서를 "떠나는" 핸들러입니다. 커서를 움직이면 새가 "깨어납니다". 클래스는 버드 노멀이 될 것입니다
• mousedown - 링크에서 왼쪽 마우스 버튼을 클릭하기 위한 핸들러. 이 경우 새는 "행복"해질 것입니다. DIV 블록에는 classbird-happy가 부여됩니다.
• mouseup - 왼쪽 마우스 버튼을 놓는 핸들러. 풀려나면 새는 "화나게" 됩니다. DIV 블록은 버드 앵그리 클래스를 받습니다.

따라서 페이지에 배치된 내부 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"); $(this).addClass("새- 자" "); )); $("#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") ; $(이).removeClass("새-정상"); $(이).removeClass("새-행복"); $(이).addClass("새-앵그리"); )); ));

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

좋아 이제 끝났어! 새가 준비되었으며 애니메이션으로 페이지에 생명을 불어넣었습니다! :) 데모를 볼 수 있습니다. 기사 하단에서 예제와 함께 아카이브를 다운로드하십시오.

광고

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

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

탄산음료 한 캔에는 설탕 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