Уроки по CSS/CSS3. Часть 11. Спрайты

[vahrammer]

Польза спрайтов еще в одном моменте проявляется.
Если у элемента в обычном состоянии в качестве фона стоит одно изображение, а с hover селектором - другое. То второе изображение будет загружено только в момент ховер-эффекта.
В этом случае, в течение загрузки фоновое изображение вообще будет отсутствовать.

[artsorax]

да все там элементарно, ставишь плагин, заходишь в настройки, назначаешь хоткеи на нужные функции. А вообще используй лучше Sublime Text

[StarBoyOlolo]

2.43 секунда ALT и стрелка вверх увеличить)) перед этим выделить)

[Normand]

Что-то я не очень понял....Что такое спрайты?Часто ли используется?Где качать?Что луче спрайты или блоками делать менюшки ?Все предыдущие видео хорошо обьяснял а тут совсем вел себя так, словно вся аудитория зрителей профессионалы, а не новички как я.

[bpu]

Толково, кратко, структурировано, - благодарствую ! )
Один вопрос чуть не по теме урока: что за расширение для хрома, где редактировалось css для пристрелки по размерам? Думал сначала web developer, но нет, выглядит иначе... 

[romanchernyshov]

Можно облегчить HTML код и использовать дочерние селекторы:


HTML:
<ul>
<li></li>
<li></li>
<li></li>
</ul>


CSS:
ul{
list-style:none;
margin:0;
padding:0;
}
ul li{

display:inline-block;
width:123px;
height:32px;
cursor:pointer;
}
ul li:first-child:hover{
background-position:0 -32px;/
}
ul li:first-child:active{
background-position:0 -64px;
}
ul li:nth-child(2){
background-position:-132px 0;
}
ul li:nth-child(2):hover{
background-position:-132px -32px;
}
ul li:nth-child(2):active{
background-position:-132px -64px;
}
ul li:last-child{
background-position:0 -102;
}
ul li:last-child:hover{
background-position:0 -134px;
}
ul li:last-child:active{
background-position:0 -165px;
}

[TeddySteadyGo]

Очень удобно, быстро, основательно, спасибо!)

[ВикторПопов-ки]

Спасибо, содержательно. Только вопрос, как с параметром inline-block, убрать расстояние по горизонтали между <li>. Заранее спс.

[michaelc]

Есть спрайт размерами 2px * 30px;
1-й пиксель в спрайте по вертикали - линия кнопки для обычного состояния
2-й пиксель в спрайте по вертикали - линия нажатого состояния
Расположение картинок слева направо. Т.е. к первому состоянию в спрайте прилеплено слева второе состояние спрайта.
Подскажите, как указать координаты для первой линии в 1px и чтобы отображался именно 1-й пиксель при обычном состоянии?
Как закодить так чтобы задать координаты для второй линии при repeat -x?

[dongug]

а почему для позиционирования фона нужно прописать селектор как .buttons .button1 а не просто взять выставить .button1?

[volodymyrstupachenko]

Он скачал обычную картинку в формате png. можно и в паите сохоанить с таким форматом...
Работа со спрайтами в css
Каждый сайт состоит из множества иконок, кнопок, и небольших картинок. Все они хранятся в 100-ях отдельных файлов. При загрузки сайта, браузер делает множество http запросов к этим картинкам, создавая дополнительную нагрузку на сервер, и большие трудности для вебмастеров, т.к. нужно постоянно искать эти картинки. Особенно это чувствуется при разработке крупных интернет магазинов, когда количество графических элементов намного выше, чем при разработке обычных сайтов.

При помощи css спрайтов мы можем объединить все иконки и кнопки в одном файле. Тем самым будет грузиться только одна картинка, а из нее уже при помощи css будут браться отдельные элементы.

При помощи спрайтов в css решается еще одна проблема. Например, при наведении на иконку, нам нужно изменить ее на ту же иконку, но другого цвета. Если картинки будут храниться в разных файлах, то подгрузка новой картинки будет происходить с мерцанием, что будет создавать неудобство у ваших посетителей. Конечно можно принудительно подгрузить все картинки при помощи JavaScript, но это то же не очень удобно.

[kayros]

Пытался настроить Zen Coding для Komodo? но ничего не получилось. Может сделаете отдельный урок по этой теме? Уверен, что не только я вам буду благодарен.
Спасибо.

[arzievsultan]

Объясните пожалуйста, почему для кнопок используют *ul* + *li*, ведь их предназначение не для этого. Есть специальный элемент/компонент *button*.

[fuhec]

Не могу разобраться.
Еслия я хочу для всех кнопок при :hover и при :active сделать одинаковые цвета, могу ли я так сделать не расписывая каждую по отдельности кнопку, а написать для всех трех? Если да, то как?

[zadable]

кстати можно довольно прикольные анимации делать на чистом css

[questionsanswer]

Разве overflow у картинки стоит hidden? Почему не выводятся целые картинки а только их часть? Они должны вылезать за пределы блока.

[VitiaMironenko]

тоже закрываешь li. а вот жаль в IE не работают hover и active

[простотак-ий]

А если всю эту конструкцию нужно отправить в центр экрана ? Хотя бы выровнять по горизонтали.

[muslimmuslim]

эти уроки не будут понятны до конца для тех кто не читал теорию. начните с htmlbook.ru хотя бы. без этого уроки трудными покажутся. а автор молодец. все четко

[justcore]

спрайт - это спрайт, а одно изображение с кучей отдельных картинок - это спрайтлист