Спрайты,Формы и Контрформы

[Flanidub]

Здраствуйте, недавно сегодня познакомился с такими понятиями , как спрайты,формы и контрформы,но есть одна проблема во всём этом я не понимаю как ими пользоваться при помощи background-position,ну в том смысле что применить не могу,да и с оспрайтами тоже как то не очень ,может помочь кто нибудЬ? и объяснить всю подноготную) заранее спасибо огромное)

[npofopr]

Читайте еще.

Есть более сложные темы.

А что такое контрформы? о_О

И причем тут backgroun-position и формы?

[Flanidub]

ну в моём понятии формы и контрформы это когда дорисовываешь элементы с помощью css,то есть есть например есть спрайт рамки нижняя и верхняя часть, мне надо используя background-position расставить их нижнию в низ блока верхнюю в верх надеюсь я более менее понятно сказал! если сможете помочь я буду рад)

Если я всё же как то не так изъесняюсь(а я в этмо уверен) то посоветуйте вы ты что можно прочитать для понятия данной темы о с прайтах ,их создании и их использовании)

[spdif]

faq">faq на htmlbоok.ru

[Flanidub]

Спасибо конешно) но конкретно по теме спрайтов это мне не как не поможет,а для backrground-position спасибо почитаю)

[spdif]

что не так со спрайтами, в чем проблема?

[Flanidub]

в том чт оя не понимаю как их использовать на практике) то есть как их двигать,от чего зависят )

вобщем просто само использование спрайтов

[spdif]

изображение

пример его использования jsfiddle.net/spdif/K8nMj/4/

Edited October 28, 2013 by spdif

[Flanidub]

подскажите пожалуйста spdif что надо прочитать по данной теме для понятия этой темы скиньте статью или видеоурок какой буду очень признателен

[spdif]

почитайте про background-position на htmlbоok.ru

[Flanidub]

дак это я знаю)) вы мне конкретно по теме со спрайтами подскажите чего нибудь))

я сам принцип не понимаю)

[spdif]

спросите Google

[hypnocolor]

Да чего там понимать? Все иконки, например, засовываются в один файл-спрайт, этот файл задаётся в качестве фона какому-нибудь слою, меняете позицию фона — меняете иконку. Пример набросал здесь: http://jsfiddle.net/hypnocolor/6aQvy/. По клику на кнопку рандомно меняется позиция бэкграунда, при наведении курсора на слой можно увидеть, как переместилась фоновая картинка.

[Flanidub]

Спасибо но все равно по тому как из располагать сам принцип не понимаю

ну двигать от чего ? как? куда?...

точнее я понял вы хорошо объяснили но тяжело почему то мне)

[klierik]

http://habrahabr.ru/post/159027/

http://webo.in/articles/habrahabr/08-all-about-css-sprites/

[Николя223]

Ты помнишь что такое диафильмы? проектор, в котором меняются слайды (на пленке). спрайты - похоже. есть видимая область(экран), в проектор мы вставляем диафильм(в элемент мы фоном вставляем картинку с множеством изображений ), быстро тянем диафильм в нужную сторону(используем при наведении background-position, положительный и отрицательный). смысл в том что при быстром смене положения, глаз видит другое изображение, но носитель один, только его положение изменилось. А видите вы только тот, кусок, который попадает в видимую область... я понятно объясняю))

[Flanidub]

ясно а как убрать остальные ну в том смысле если ставишь фоном там разве не вся картинка со всеми картинками(ну и белеберда) фоном становится? как скрывать остальные картинки фона?

[by chris]

width, height.

[Flanidub]

Ясно всё всем огромнейшее спасибо)Все помогли пошёл учиться делать)

[Flanidub]

Не хотел я возвращаться к этому вопросу,но хоть убей совершенно не получается работать с этими спрайтами я видео уже сколько пересмотрел вроде бы всё понятно а начинаешь делать ничего не получается, в общем я уже не знаю как дальше быть скажите как ими пользоваться с помощью размеров(width,height) и с помощью background:position но у меня всё равно ничего не получается,помогите! буду благодарен

и не кидайте плиз что то типо погугли и тому подобное облазил нимеренное количество сайтов ничего не помогает

[ryter]

http://jsfiddle.net/ryter/EL6Ju/ попробуй поменять background-position,  посмотри что происходит

[CoDy]

Спасибо но все равно по тому как из располагать сам принцип не понимаю

ну двигать от чего ? как? куда?...

точнее я понял вы хорошо объяснили но тяжело почему то мне)

Чтоб понять сам принцип возьми 2 листика(можно а4). На одном нарисуй/распечатай несколько небольших изображений, например

 

изображение 

На втором листике вырежь квадрат, например размером 1х1 см. Положи лист с "дыркой" поверх листа с картинками и двигай его так чтоб в дырку попадал один из рисунков.

 

Смысл в спрайтах следующий: на одну картинку помещают чаще всего несколько изображений и потом задают данное "составное" изображение в качестве НЕПОВТОРЯЮЩЕГОСЯ ФОНА, подбирают размер элемента(css: width и height) под размер изображения которое нужно показать, так чтоб, не "засветить" ничего лишнего и через background-position "двигают" фон так чтоб, была видна только нужная часть составной картинки. При этом имеем экономию на серверных вызовах: запрашиваем 1 составное изображение а не несколько "простых". Это обычно практикуют при оформлении управляющих элементов, пиктограмм, где, обычно, изображений довольно много и они маленькие. И при всем этом, если захочется немного поменять стиль, достаточно переделать одно это составное изображение.

Вот например спрайт от google.com:

Практически вся графика загружается 2 файлами.

Edited November 8, 2013 by CoDy