Статичные картинки

Статичные картинки

Кроме динамических эффектов CSS Sprites широко используется и для объединения статических изображений. Давайте рассмотрим различные плюсы и минусы этого подхода.

Основной опасностью склеивания большого количества иконок в одном месте являются артефакты при увеличении шрифта: посторонняя часть фонового изображения проявляется совершенно не в том месте, где его ожидали, и у пользователя возникает ощущение, что страница «разваливается». Блок становится выше или длиннее, запаса полей данного изображения уже не хватает, в результате у одного элемента отображается сразу несколько иконок. Непорядок. Как с ним бороться, будет рассказано немного ниже в общих советах по созданию ресурсных картинок для CSS Sprites.

В общем случае нужно жестко ограничивать размеры контейнера, у которого заданы определенные фоновые картинки, чтобы даже при увеличенном тексте картинка не «ломалась» (однако текст может стать нечитаемым из-за обрезания по границе блока). Как бороться с последней напастью, также будет рассказано в конце раздела.

В некоторых случаях возможно также объединение всех фоновых изображений на странице в одно-единственное. Такой подход значительно сокращает число запросов к серверу, однако влечет за собой и технологические сложности. Как пример можно привести следующее изображение:

Рис. 4.4. Пример фонового изображения «все-в-одном». Источник: webo.in

Поделитесь на страничке

Следующая глава >

Похожие главы из других книг:

Прозрачность и эффективность картинки

Из книги автора

Прозрачность и эффективность картинки Я создал иконки полностью белыми PNG-изображениями, зная, что затем применю свойство opacity, чтобы отрегулировать прозрачность на уровне CSS. Такой подход изменил то, как я в некоторых ситуациях думаю о графических объектах


Google Картинки

Из книги автора

Google Картинки Google Картинки – один из основных сервисов Google, ориентированный на поиск изображений, находящийся в постоянном развитии. В последнее время он заметно изменился и усовершенствовался, продолжая оставаться одним из самых популярных и мощных средств поиска


Яндекс.Картинки

Из книги автора

Яндекс.Картинки Развитие системы поиска изображений одного из крупнейших российских интернет-поисковиков также не стоит на месте. В настоящее время система использует собственную индексную базу, а также задействует базу системы Picsearch. В системе Яндекс.Картинки


Рейд в «Картинки»

Из книги автора

Рейд в «Картинки» Сегодня благодаря развитию Web 2.0 существует возможность размещать не только текстовую, но и визуальную информацию в Интернете на бесплатных, отлично индексируемых площадках.Речь идет о двух разных направлениях работы с изображениями.Прежде всего это


Вставляем картинки

Из книги автора

Вставляем картинки Чтобы вставить на страничку картинку, нужно применить тег <IMG>. Этот тег имеет свой атрибут src, который указывает путь к картинке. Если наша картинка под названием, например, foto.jpg лежит в той же папке, что и HTML-файл, можно написать просто: <img src="foto.jpg">.


Картинки

Из книги автора

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


От f(x,y)=sin(x+y) до 2D картинки

Из книги автора

От f(x,y)=sin(x+y) до 2D картинки Жизнь всегда была сложнее, чем хотелось бы программисту. Например, все было бы гораздо проще, если бы существовала некая функция ХочуЧтобыНарисовалсяГрафикФункции(). Но во-первых, по-русски функции называть нельзя, во-вторых, такой функции просто


Видео/Картинки

Из книги автора

Видео/Картинки Запустите программу Nero Express. Пункт Видео/Картинки меню Что вы хотите записать? содержит три команды.• Video CD – записать на компакт-диск графические и видеофайлы, расположенные на жестком диске. Такой компакт-диск можно воспроизвести на компьютере, VCD– и


6.1. Картинки

Из книги автора

6.1. Картинки Стоит напомнить, что изображения хранятся в графических файлах. Как правило, эти файлы имеют расширения JPG, GIF, PNG. Чтобы работать с ними профессионально, созданы специальные программные пакеты, но мы ведь не профессионалы, правда? Поэтому нам достаточно


Картинки

Из книги автора

Картинки Современный сайт сложно представить без изображений. Не будем рассуждать об их необходимости, а сразу скажем, что для вставки картинки на веб-страницу используется тег <img src="URL">, где вместо букв URL пишется реальный адрес рисунка в Интернете. Тег вставки


Глава 8 Картинки для Интернета

Из книги автора

Глава 8 Картинки для Интернета • Анимация• Разбиение изображения на пластиныПринято считать, что Photoshop для веб-мастера такой же незаменимый инструмент, как топор для дровосека. Ни в одной другой программе нельзя так быстро нарисовать кнопки, стрелки, баннеры и прочие


Картинки

Из книги автора

Картинки Возможность графического оформления текста – одна из основных особенностей, отличающих простой текстовый редактор от мощной издательской системы. И в этом смысле Word выглядит весьма достойно, имея в своем распоряжении довольно мощные инструменты для работы с


Статичные отчеты

Из книги автора

Статичные отчеты Статичные отчеты выводят текущее состояние (мгновенный снимок) таблицы блокировок. Допустимы любые переключатели, за исключением -i, вы можете "затолкать" в него множество переключателей. Например, для вывода "ожидающего" графа плюс группы истории


Вывод картинки на экран

Из книги автора

Вывод картинки на экран При запуске программа загружает из ресурсов картинку. Теперь надо вывести изображение на экран. Для этого нужно воспользоваться событием Paint, как показано в листинге 11.3.Листинг 11.3private void Form1_Paint(object sender, PaintEventArgs e) { e.Graphics.DrawImage(cheeseImage, 0, 0);}После


Вкладка Картинки

Из книги автора

Вкладка Картинки В некоторых случаях в фильмах необходимо использовать фотоматериалы. Pinnacle Studio поддерживает набор функций, позволяющих не только помещать их в фильм, но и применять к ним некоторые эффекты. Вкладка Картинки (рис. 3.21) как раз и предназначена для просмотра и