Нека приключим със списъка. Сега е приблизително същата сила:

A( padding:0 0 0 20px; background:url("sprites.png") 0 -42px без повторение; ) a( padding:0 0 0 20px; без повторение;

Какво означават селектори? Очевидно този селектор бърка в браузъра Датски стилпреди всички съобщения, как да зададете атрибута href, чието значение се определя от поръчката http: // site /. Самият спрайт zastosovitsya приблизително така, както в случая със списъка. Ще разгледам само един постинг - публикуване в моя блог.

1. Ще ви покажем нуждата от помощ чрез href. Abo іdentifіkuvati possibne possilannya be-yakim іnshim начин.
2. Robimo vіdsup vіd lіvі vіvі vіlі vіlа sіlа sіlannya 20 pіkselіv
3. Изглежда че фоново изображение sprites.png
4. Картината, както съм избрал за моя блог, е широка 21 пиксела в горния край, което означава, че фонът е виновен за падането с 21 пиксела надолу. В css го написах така "0 -21px"

Домашна работа

Спрайт с градиенти

Сега да разгледаме друго дупе.


На тази снимка е показано в края. Викната има заглавие, тяло и долен колонтитул. На фона на елемента на кожата беше вмъкнат градиент. Изненада, сякаш не се вижда от окото, има преход на цвета от блед към пълен.

Ще ви покажа как могат да се правят градиенти със спрайтове. Заглавието и долната част на екрана ще бъдат с фиксирана височина - 30 пиксела. Tіlo vіkna trivatime stale vіd dozhini text.

Сега нека напишем html кода на прозореца:

Нека спрем спрайта. Нека да разгледаме заглавието на шоуто:

#window-header( височина:30px; background:#C0C0FF url("gradients.png") 0 0 repeat-x; )

Файлът gradients.png има градиент първо за заглавката, след това за тялото и след това за долния ред. Така че градиентът за заглавието започва от самия връх. Следователно ние просто поставяме самия файл като мъртъв и позицията е посочена като „0 0“, така че не отива никъде. За да накарате градиента да се разшири хоризонтално, напишете "repeat-x".

Градиентът Sob ще се побере точно в заглавката, т.е. височината е 30 пиксела.

И така, точно като заглавието, ние поставяме градиент за долния колонтитул:

#window-footer( височина:30px; фон: #C0FFC0 url("gradients.png") 0 -60px repeat-x; )

Само веднъж изпратихме картината надолу с 60 пиксела.

От тялото в крайна сметка ситуацията се сгъва. Тялото ще реве с нас, на vіdmіnu vіd заглавие i vіdvalu. Така че, тъй като просто трябва да добавим един div за тялото на прозореца и да поставим градиент там, тогава всички градиенти ще се появят в този div. Като опция можете да поставите градиент за тялото вляво вертикално, но ако имаме няколко градиента за блокове, как да разтягаме? Няма да можете да спрете всичко веднъж. Mi zrobimo trohi хитър.

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 код на Axis tila vіkna okremo:

Като бахит в тялото сме вложили още две самодиви. Първият "градиент на тялото на прозореца" ще бъде разпознат като градиент. За текста е необходим още един текст на прозореца. Освен това, както разбрах от CSS кода, залепихме position:relative; за цялото тяло vikna povnistyu.

За градиент div, позиция:абсолют е подходяща. По този начин победим градиент на самодиви от дивия поток. Сега тази дива не плюе върху нищо. Тъй като за цялото тяло сме подредили позиция: относителна, тогава градиентният div не е далеч за бащата. Прикрепете го към левия и горния ръб на тялото на воала за помощ „вляво: 0; отгоре:0;". Посочването на височината на градиента div е 30 пиксела. Така че тук посочваме височината на градиента, който ще прикачим, ако височината на дивата ще бъде по-голяма от височината на градиента, тогава в дивата ще изтрием повече пръски. І, nareshti, прикачихме нашия gradients.png файл към div gradient. Как да звучи фона за необходимостта да се види, в този случай фонът е висок 30 пиксела.

Сега при tіlі vіkna mi може да има градиент. Ale vin замъглява текста. За да не се закрива текстът, ние увиваме целия текст в divs и го добавяме към position:relative. Ако текстът е присвоен, той ще бъде върху градиента.

Axis zagal и всичко останало. Сега сме поставили всички градиенти в нашия прозорец. І в заглавието, і в тялото, і до дъното.

Ще се опитам да обясня това дълго време, така че всичко да се разбере. Но ако е вярно, че знаете малко на работната маса, тогава ще пеете песен достатъчно, за да се чудите на собствените си дупета:

В котре, нарекъл силата.

Всъщност можете да познаете много приложения от различни спрайтове. Показах само две дупета, но те могат да се използват за разбиране на принципите на роботизирани спрайтове. Ако сте загубили храната си, пишете я в коментарите.

В днешните сайтове можете да видите страхотно число nayrіznomanіtnіshої na kshtalt grafiki: изображения на стоки, аватари на koristuvachіv, снимки, оформяне на дизайна на страни, бутони, икони, лога и др. И колкото по-голям е проектът, толкова повече графични файлове има за спечелване. Когато отворите okremoy страна на сайта в браузъра, виждате привличането на нейни елементи. Ето защо, ако има твърде много графики, поставени върху него, скоростта на интереса, като правило, е значително намалена. Така че, по моя ред, заплашвам с безразсъдство за развитието на вашия проект.

CSS спрайтове

На страна на главатае поставена формата за качване на графични файлове (скин файл - само бутон). На гърба има по-малко от три бутона за завантаж. Ако имате нужда от повече, кликнете върху „Необходими са повече“.

След като изберете файловете за предстоящия CSS спрайт, натиснете бутона "Опции". Пред вас има малък панел с връзки. Тук можете да зададете стъпките между елементите в пиксели, да добавите рамка за изображението, да видите всички снимки в готовия спрайт в левия или горния край, да зададете цвета на фона в RGB формат.

Когато щракнете върху бутона "Генериране", CSS спрайтът ще бъде създаден без средата. Също така, моля, предоставете малка инструкция за вашето уики и самия CSS код, който ще трябва да поставите на вашия сайт. Є Navit дупе в HTML. Razіbratisya, предполагам, не е проблем.

Visually Dan's Tools CSS Sprite Generator – попълнете хубав CSS генератор на спрайтове с много персонализации. Например, можете да изберете вертикален или хоризонтален тип вмъкване на икони в горното изображение.

CSS спрайтове

В услугата CSS Sprites всичко е също толкова просто, колкото в дизайна, така и по отношение на персонализирането. Изберете получения формат на изображението: PNG, JPEG, GIF. Отстрани има връзка към адаптивната версия на генерирането на Responsive CSS Sprites (въпреки че не съм я пробвал).

Заедно. По принцип са разгледани всички нюанси как се създават CSS спрайтове и техните обрати. Генераторите ще ви помогнат да ускорите процеса на създаване на елементи или можете да използвате Photoshop. Каква ще бъде храната, пишете в коментарите.

Подходящо:
27

Неуспешно: 4

Недостъпен ежедневен превод.

спрайт

предиили след"преди""след""след"

ядосана птица ядосан.png. index.html

UTF-8 index.html windows-1251 style.css ядосана птица

http://spritecow.com

angry.png,

ядосана птицафайл за стил style.css imgs/.получих го така:

Недостъпен ежедневен превод.

CSS спрайт - всички графики за вашия уебсайт, комбинирани в едно графичен файл. „Защо един файл?“ - Попитайте В. Вдясно, във факта, че такъв pidhid за запазване на изображението ви позволява да увеличите производителността на уеб сайтовете, както и да запазите графични изображениянай-организиран. Нека да разгледаме някои от най-добрите практики за засаждане на спрайтове. Самото име на спрайта може да ви разкаже за спрайтовете на играта, ретро игралната конзола и браузърните игри, които са толкова популярни днес:

Отже, застосовно към уеб дизайна, спрайт- повече от един страхотен файл, за да запазите копие на изображението за вашия сайт, което ще запази часа на интерес и ще прехвърли във файла, ако е необходимо. Ако спрайт, например, може да запази 20-30 изображения, тогава може да улесни достигането до сървъра, фрагментите, изображенията yakbi tsі са запазени добре - сървърът ще трябва да работи 20-30 пъти на ден да се направи такъв образ върху кожата. Zavdyaki спрайт на сървъра, има само една HTTP заявка - за заснемане на едно-единствено изображение. Sprite визуално може да не изглежда „четливо“ за окото, парчетата от основната задача – просто вземете заедно различните „неща“ от вашия дизайн. Например, спрайт може да изглежда така:

Спрайт замести повечето от настоящите сайтове и всички изгледи на VKontakte - без обвинения. Например, по този начин можете да запазите "неща" от интерфейса в един файл - и вие сами знаете иконите:

Истинският момент на използване на CSS спрайтове е тези, при които сървърът трябва да редактира само един графичен файл, за да отмъсти за вашето изображение, а не само безлично изображение - и чрез CSS можете да изобразите малък сегмент от този графичен файл като фон за елемента . Някои хора смятат, че снимките ще бъдат по-заплетени, но не е така. При заснемане на един графичен файл без снимки, ние принуждаваме само една заявка към сървъра, а при заснемане на голям брой снимки налагаме повече заявки към сървъра. Комбинирането на изображения в един файл ви позволява не само да намалите значително броя на HTTP заявките, нои променете общия размер на файла с изображение.

Ще донеса още едно дупе на спрайта. И така, подбирайки графичните елементи на един уебсайт, препратки към дизайна:

Може ли да попитате - дали е по-добре да приготвите спрайт? За когото това са две различни времена.

Rіznі pіdkhodi - ще създадем спрайт преди това след създаването на сайта

Є две по-широки прилягания при сгъване на спрайта на чаршафа - работна йогапредиили следсъздаване на вашия сайт. Можете да поставите всички изображения в спрайт лист, преди да създадете сайта. Tse тези, които наричаме pidkhid"преди". Освен това можете да създавате всички изображения в полезрението на редица файлове, така че ще ви простим повече за редактирането им. Веднага след като сайтът бъде подканен и всички изображения са подготвени, можете бързо и лесно да създадете спрайт лист, ръчно или с помощта на един от инструментите за стикери. Tse mi nazivatimemo pіdhіd"след". Ако списъците със спрайтове са нови за вас или сте нов в уеб дизайна, тогава имате нужда от повече помощ"след". Използва анонимни помощни програми, услуги и програми, за да помогне при създаването на спрайтове, повечето от които са разширени и достъпни безплатно.

Raztashovuemo снимки в спрайт организирани

Когато създавате спрайт на Photoshop, след като всички изображения са поставени, те се организират в едни и същи песни, избраната от вас последователност, така че да можем да работим с тях лесно и просто. Винаги се опитвайте да закръглите пространството под скин изображението на спрайта до най-близките 10 пиксела, в противен случай ще оставите повече място около тях, дори ако вонята е същата. Ако отдясно стигнете до писане в CSS стил, няма да ви се случи да запишете координатите и по-малко ще можете да забравите числата с координатите на изображенията, от които се нуждаете. Оста на задника на далечно разположение на различни изображения в един спрайт:

От теория към практика! Създаваме анимирана птица от Angry Birds, за да помогнем на спрайта

И така, опознахме разбирането за спрайта в уеб дизайна, но теория без практика е нищо. Ето защо ние създаваме нашия първи спрайт за вас точно сега и се научаваме как да работите с проста анимация от страна на HTML. Нашето дупе ще бъде базирано на героите от Angry Birds Gris - това е забавна червена птица. За първи път ще създадем спрайт изображение във формат .PNG, което ще покрие 4-те фази на анимацията на птицата:

Нека създадем каталог на диск ядосана птица- там използваме файловете на дупето си. Изберете спрайт с птици от цялата директория и наименувайте файла ядосан.png.Нека стъпим на плетене на една кука - създаваме в същата директория, на която е наименуван файлът index.html- Tse ще бъде нашата тестова страница с анимация. Дайте този файл на редактора и след това добавете следващия код:

Веднага ще обясня доста лошо какво бяхме измамени. Първо, ние дадохме кодиране на нашия HTML документ UTF-8, което означава, че е наша отговорност да спасим нашите index.htmlкойто има кодирането. Можете да поставите th іnsha, например, windows-1251- Нашата задача не е принципна. Добавихме стилов файл към документа style.css(Його все още не съществува в нашия каталог ядосана птица, йога създаваме трохи с година). Също така поискахме извикване на оригиналния скрипт и добавихме библиотеката jQuery - с помощта на jQuery ще можем динамично да променяме снимките на нашата птица и да променяме „фазата“ на спрайта. Подготвихме и вътрешен JavaScript блок, където дадохме кода, който ще създаде анимацията на птицата. Е, сигурен съм, - основната част на документа трябва да е с единично хиперинтервал, в средата е като DIV-блок, а новият идентификатор на задачата е като birdImage, а класът зад ключалката е спящ за птици. Tse означава, че нашата птица, когато видите страничното „пространство“ – tse показва лявото долно изображение в средата на спрайта – де има сплескани очи. Сега е моментът да "наризираме" нашия дух, tobto. вижте от новата рамка на изображението.

Narizaemo спрайт, використична услуга SpriteCow.Com

Задачата на „начертаването“ на спрайт е да го направи трудоемък – това означава уважение, така че нямате милост към координатите, които означават изображението на кожата на спрайта. За щастие, за днешните услуги познавам все повече и повече ръководителя на дизайнера и дизайнера на оформление. Препоръчвам використката услуга http://spritecow.com за разказване. Същността на услугата е проста и лесна за разбиране – можем да видим изображението на кожата на птицата за мишката, а SpriteCow ни вижда подготвения CSS код с координатите. Всичко, което трябва да направим, е да зададем 4 стила за фазата на кожата на птицата! Посещавайки сайта, има 2 бутона - "Отвори изображение" и "Покажи пример". Нуждаем се от първия бутон, релефен върху него:

В диалоговия прозорец какво видяхте - избираме нашия файл към спрайта angry.png,след какво bachimo, как нашият спрайт се заинтересува от сайта. Те ни дадоха необходимостта да зададем цвят на фона, за който можем да щампираме в лентата с инструменти "Избор на фон" и да посочим върху бялата област на нашия спрайт - за да можем правилно да визуализираме фазата на кожата на птицата :

Виждаме първото изображение, което се снима автоматично за новия CSS код:

Сега е време да създадем за нашия каталог ядосана птицафайл за стил style.css. Там последователно вмъкваме 4 генерирани CSS кода, само за да заменим стандартния class.sprite, който ни беше представен от SpriteCow, наричаме нашите стилове по-разбираеми. И така, парчетата от изображението на спрайта се записват точно в корена на каталога, очевидно от авторитета на фона, несъществен елемент от маршрута - imgs/.получих го така:

/* "Призрачна" птица. Ляво горно изображение в спрайт */ .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; ширина: 97px; височина: 94px; ) /* "Angry" bird. Долно дясно изображение в спрайт */ .bird-angry ( background: url("angry.png") no-repeat -118px -120px; ширина: 97px; височина: 94px; )

През останалото време - пишем jQuery код, който създава анимация.

Сега, ако успешно нарисувахме спрайта, поставихме 4 стила за изображението на кожата в нашия файл style.css, трябва да напишем код в jQuery, който ще добави анимация при задържане на курсора на мишката над нашата хиперсила и при натискане на силата. Напомняме, за заданията на класа за спящи птици, tobto. нашата червена птица е "пространство", когато документът се отвори :)

Цялата анимация ще бъде на 3-ти jQuery методи:

• hover - инструмент за задържане на курсора над цел и "гледане" на курсора над целта. Ако задържите курсора на мишката, птицата се "плъзга" - tobto. клас става птица-нормална
• mousedown - копие на натискането на левия бутон на мишката. Имат tsomu птица stavatime "щастлив" - tobto. На блока DIV е присвоен класът за щастливи птици.
• mouseup – пример за пускане на левия бутон на мишката. Когато птичките бъдат пуснати, ще станете „ядосани“ – tobto. На блока DIV е присвоен класът bird-angly.

Също така вмъкваме следващия код на мястото, както подготвихме във вътрешния блок на 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() ( $ (това) ).removeClass("bird-normal"); $(this).removeClass("птица-ядосана"); $(this).removeClass("bird-happy"); "); )); $( "#birdImage").mousedown(function() ( $(this).removeClass("bird-sleeping"); $(this).removeClass("bird-normal"); $( this).removeClass("bird- ядосан"); $(this).addClass("bird-happy"); )).mouseup(function() ( $(this).removeClass("bird-sleeping"); $(this).removeClass("bird -normal"); $(this).removeClass("птица-щастлива"); $(това).addClass("птица-ядосана"); )); ));

Готов! Тестване на анимация

Е, това е всичко! Нашата птица е готова и оживява своята анимация! :) Можете да погледнете демото. Вземете архиви с дупе - в долната част на статията.

Реклами

Sprite е безцветна, лимонена и лайм с вкус, безкофеинови безалкохолни напитки, творения за Coca-Cola. Въведена в Западна Германия през 1959 г. като Fanta Klare Zitrone и представена в САЩ като Sprite през 1961 г.

(Кока-Кола), Fanta, 7 Up, Mist Twst. Напитките Sprite и Pepsi са примери за клас, наречен газирани/безалкохолни напитки. Хората пият сода по различни причини, включително; сладък вкус, удобна опаковка, наличност и още за утоляване на жаждата.

Един може да бъде в 10 чаени лъжички захар. Tse suma cukru, особено в течна форма, рязко повишаване на кръвната захар и инсулинова кауза реакция в организма. Преди всичко може да се доведе до диабет или инсулинова резистентност, да не говорим за тегло и други здравословни проблеми.

Реклами

Какви са съставките в спрайт?

Газирана вода, уиски фруктозен царевичен сироп, лимонена киселина, натурални аромати, натриев цитрат, натриев бензоат (за защита на вкуса).

Изтеглете прозрачна галерия с изображения на Sprite PNG.

Резолюция: 800×2352
Размер: 1645 KB
Формат на изображението: .png

Резолюция: 409×1350
Размер: 127 KB
Формат на изображението: .png


Резолюция: 825×825
Размер: 283 KB
Формат на изображението: .png


Резолюция: 444×853
Размер: 97 KB
Формат на изображението: .png


Резолюция: 512×512
Размер: 186 KB
Формат на изображението: .png

Резолюция: 256×256
Размер: 41 KB
Формат на изображението: .png



Резолюция: 1600×1200
Размер: 625 KB
Формат на изображението: .png

Резолюция: 985×3524
Размер: 1072 KB
Формат на изображението: .png


Резолюция: 901×810
Размер: 711 KB
Формат на изображението: .png