Имя:
Пароль:
Выслать пароль?  Регистрация
Google

Учимся работе с графическими редакторами:
Adobe Photoshop,
Adobe Illustrator,
QuarkXpress.

Уроки веб дизайна.

Шаблоны wordpress new

Это надо знать:
статьи по дизайну,
справочная литература.

Может пригодиться:
программы для работы с графикой,
словарь терминов Adobe Photoshop,
кисти для Фотошопа и Иллюстратора,
actions для Фотошопа,
клипарты.

Коммерческие объявления:
Последние статьи:


Знакомство с CSS спрайтами изображений

Вместо того, чтобы вдаваться глубоко в историю спрайтов изображений и того, как и почему нам следует их использовать, мы лучше сразу перейдем к практике, которую вы сможете незамедлительно применить в ваших проектах. Есть несколько ресурсов и уроков, которые уже дают понять, что такое спрайты изображений и как нам следует их использовать. Просто введите в Google “CSS Image Sprites” и вам выдадут более 2000 результатов. Мы пропустим этот урок истории и перейдем напрямую к использованию CSS спрайтов изображений прямо сегодня. Перейти к источнику

Знакомство с CSS спрайтами изображений

Вместо того, чтобы вдаваться глубоко в историю спрайтов изображений и того, как и почему нам следует их использовать, мы лучше сразу перейдем к практике, которую вы сможете незамедлительно применить в ваших проектах. Есть несколько ресурсов и уроков, которые уже дают понять, что такое спрайты изображений и как нам следует их использовать. Просто введите в Google “CSS Image Sprites” и вам выдадут более 2000 результатов. Мы пропустим этот урок истории и перейдем напрямую к использованию CSS спрайтов изображений прямо сегодня. Перейти к источнику

Ускоренный курс обучения

Как я и говорил, не повторяя по нескольку раз то, что уже было не раз сказано ранее, я собираюсь вкратце объяснить вам, что такое CSS спрайты изображений и как они работают.

Это метод использования CSS для оптимизации использования фоновых изображений на вебсайтах с целью не только уменьшить количество HTTP запросов, но также и размеров файлов. А это радует ваших пользователей, так как страница грузиться быстрее.

Нет, серьезно, что такое CSSспрайт?

По существу, вы берете несколько изображений и складываете их в одно (иногда его называют «главное изображение»). Затем вы можете использовать параметр CSS backgroundposition, чтобы указать браузеру, куда поместить изображение в поле просмотра (viewport) элемента ее содержащего.

Стойте, я ничего не понял про backgroundposition и поле просмотра!

Как вы, возможно, знаете, параметр background>position может содержать два типа значений: CSS единицы (пиксели, em, %, и т.д.) и ключевые слова. Поле просмотра элемента ссылается на область содержащего элемента, которую можно увидеть с экрана. Оно обычно зависит от нескольких параметров, таких как ширина, высота, заполнение и т.д. Посмотрите на изображение снизу.

Итак, у нас есть главное изображение шириной в 240 пикселей и высотой в 80 пикселей. Это изображение содержит 3 иконки, поэтому каждая иконка имеет 80 пикселей в ширину (240px ÷ 3 = 80px) и высоту также в 80 пикселей. Еще у нас есть элемент блока (в этом случае это div), который также имеет 80 пикселей и ширину и в высоту. Именно в этом div будет размещено фоновое изображение.
Теперь давайте оперативно создадим CSS и HTML код для отображения нашего примера.
Наши здесь действия достаточно просты. Мы задали ширину, а также и высоту элемента div в 80 пикселей. Положение фонового изображения мы задали на 0 и по оси Х и по оси У. Значение Х (первое) это горизонтальное положение, а значение У (второе) – вертикальное положение. Также мы поставили значение  background-repeat (повтор фона) на no repeat(не повторять). Вот что у нас получится из кода вверху. Как и следовало ожидать, фон отображает иконку в левом углу (часы) главного изображения. Это происходит потому, что установка позиции и по х и по у на 0 означает то же, что поставить положение по х на left(лево), а по у на top(вверх).

Как сделать, чтобы отображались остальные иконки?

Помните, что все ваши иконки равны по высоте (80 пикселей), поэтому нам не нужно устанавливать положение по у. Чтобы наш div мог отображать разные фоны, все, что нам нужно сделать, это поменять фоновую позицию по х на left. Что ж, если 0 итак означает крайне левое положение, как же нам это сделать? Хороший вопрос! Все просто, мы просто зададим ему отрицательное положение. Давайте посмотрим.

Как видте, мы можем с легкостью менять положение по х, используя любой из юнитов CSS (px, %, em, и т.д.) или ключевые слова (left, center, right, top, bottom).
Итак давайте попробуем. Добавьте следующие стили сразу после вашего стиля div.
div.two {
  background-image: url(images/three-icons.gif);
  background-position: -80px 0;
  background-repeat: no-repeat;
  width: 80px;
  height: 80px;
}
 
div.three {
  background-image: url(images/three-icons.gif);
  background-position: -160px 0;
  background-repeat: no-repeat;
  width: 80px;
  height: 80px;
}
Теперь, добавьте еще два diva в тело документа и у вас должно получиться что-то вроде такого:
Первое, что некоторые из вас могут заметить это то, что CSS код слегка тучноват и его не мешало бы подчистить, чтобы сделать его более компактным; мы к этому вернемся через минуту. Также я установил 10 пикселевую границу снизу каждой иконки, чтобы дать им больше пространства. Давайте посмотрим, что у нас получилось.
Похоже на волшебство! Выглядит так, словно мы использовали CSS, чтобы разрезать изображение на три разных картинки. Если вы используете Firefox, можете кликнуть правой кнопкой по каждой из них и выбрать View Background Image.
Прежде чем мы перейдем к практике, я хочу рассказать немного о том, что я называю перестановкой CSS кода. Как я и говорил раньше, наш код CSS можно немного укоротить. Путем группирования селекторов CSS и использования свойств условных обозначений CSS, мы можем ощутимо сжать на код.
Все наши три diva по сути имеют одинаковые параметры. Единственное отличие это свойства положения фона. Поэтому мы можем сгруппировать три селектора div и соответствующим образом перенести свойства положения фона.
div.one, div.two, div.three {
  background-image: url(images/three-icons.gif);
  background-position: 0 0;
  background-repeat: no-repeat;
  width: 80px;
  height: 80px;
  margin-bottom: 10px;
}
 
div.two {
  background-position: -80px 0;
}
 
div.three {
  background-position: -160px 0;
}
Вот теперь намного короче! Давайте еще больше укоротим его, скомбинировав свойства фона в свойства условных обозначений.
background: url(images/three-icons.gif) no-repeat 0 0;

Спрайты и ничего лишнего

Вот и все! Вот как работают CSS спрайты изображений. Теперь, давайте приступим к практическому использованию всего этого!

Введение

Теперь, когда у вас уже есть достаточно полное представление о том, что такое CSS спрайты и как они работают, давайте продвинемся немного дальше, это нам очень пригодится.
В cтатье, мы использовали одно главное изображение и помещали в него  3 иконки. В этом примере мы детально поработаем над этим и вместим 8 иконок в одно изображение.

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

Шаги

Прежде чес мы начнем, вам нужно будет скачать набор иконок.

Настройка структуры папок

В этом уроке я буду использовать стандартное расположение папок. Во избежание путаницы, я посоветую вам поступить так же.

    • Создайте новую директорию/папку и назовите ее iconsprites
    • Создайте внутри папки iconspritesновую папку и назовите ее css
    • Создайте внутри папки iconsprites новую папку и назовите ее images

Возможно, вы думаете, «зачем нам нужны все эти директории, если каждая папка будет содержать всего 1 файл?», и я понимаю, что это может показаться немного лишним, но это полезно иметь такую привычку настраивать ваши директории. Если у вас большой сайт, настройка директорий в интуитивно понятный и удобный для управления вид становится обязательной.

Создание главного изображения

Давайте запустим Photoshop и приступим к делу! Если вы не используете, вам все равно легко будет проследить за шагами этого урока с любым другим графическим редактором, что вы используете.
Теперь, как я уже говорил в начале, нам понадобиться 8 иконок для этого урока. Выберите любые 8 понравившихся вам иконок из набора иконок Simplistica. Я буду использовать 32 пикселевые иконки.
Каждая иконка размером 32х32 пикселя, поэтому нам надо решить каким образом выровнять их наиболее подходящим способом. Можно выровнять иконки горизонтально и затем подгонять по оси х, или же мы можем выровнять их вертикально и соответственно подгонять по оси у. Хотите, верьте, хотите, нет – но это важное решение.
Если вы помните, в экспресс-курсе мы использовали главное изображение шириной в 240 пикселей, содержащее 3 иконки шириной в 80 пикселей каждое, и мы помещали их в div с заданно шириной также в 80 пикселей. В данной конкретной ситуации, это не имело большого значения – были ли иконки выровнены горизонтально или вертикально – потому что содержащий элемент имел заданную ширину и высоту в 80 пикселей. В ситуации, когда ширина или высота элемента могут меняться, могут происходит странные вещи. Давайте посмотрим на наш предыдущий пример, но без заданных размеров.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple CSS Background Image Sprite</title>
<style type="text/css">
div.one, div.two, div.three {
  background: url(images/three-icons.gif) no-repeat 0 0;
  margin-bottom: 10px;
}
 
div.two {
  background-position: -80px 0;
}
 

div.three {
  background-position: -160px 0;
}
 





</style>
</head>
 
<div class="one">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="three">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</body>
</html>

  
Также в каждый div я поместил немного текста для наглядного примера того, что может случиться. Посмотрите, что происходит, когда мы убираем размеры с нашего содержащего divа. Значит ли это, что мы обязаны задавать ширину и высоту каждого элемента, на котором мы планируем использовать спрайт изображения? Не обязательно, просто вы должны иметь это в виду, когда решаете, как вы будете размещать изображения в вашем спрайте.
В нашем шаблоне из 8 иконок мы создадим неупорядоченный список, где каждый пункт будет содержать заголовок и немного текста. Давайте взглянем, что мы собираемся сделать.

Нам необходимо решить, какой элемент будет содержать наши фоновые изображения. Наши иконки имеют 32 пикселя в ширину и также 32 пикселя в высоту. Если мы установим фоновые изображения на элементы списка (теги li), тогда нам придется разбираться с растущей шириной и высотой всего элемента li. Так как наш элемент li содержит теги h2 и p, он будет увеличиваться всегда, когда эти теги будут увеличиваться. А это будет сложно постоянно поправлять. Поэтому остается либо элемент h2 либо элемент p. Исходя из шаблона дизайна, элемент h2 наилучшим образом подходит для содержания нашего спрайта.
Давайте запустим Photoshop и подготовим наше главное изображение. Мы определил, что элемент h2 будет содержать спрайт изображения. Так как наш элемент h2 увеличится больше вширь, нежели в высоту, мы выровняем наши иконки вертикально.

Подготовка главного изображения

    • Создайте новый документ photoshop шириной в 32 пикселя и высотой в 512 пикселей.
    • Залейте фон цветом #efefef.
    • Установите следующие горизонтальные ориентиры (всегоl 7):
      • 64px
      • 128px
      • 192px
      • 256px
      • 320px
      • 384px
      • 448px
    • Подставьте иконки под каждый ориентир, что вы установили (лучше использовать инструменты выравнивания в Photoshop, а также включить опцию "Snap to Guide" в разделе View).

    • Сохраните ваше изображение как gif или png в папке iconsprites/images.

Что мы создали

Возможно, вы спросите, почему мы создали изображение высотой в 512 пикселей, когда наши 8 иконок вместе занимают лишь 256 пикселей в высоту. Причина, по которой мы так сделали, это потому, что мы хотим оставить дополнительное место между иконками из-за несовместимости браузеров или из-за того, что содержащий элемент может неожиданно увеличиться – а это вызовет те же проблемы, что в первом примере.

Написание HTML

Для нашего примера мы будет использовать очень простую, семантическую разметку. В этом случае мы используем неупорядоченный список с фиксированной шириной элементов li. Таким образом, это позволит нам выравнивать элементы li, облегчая процесс создания стилей. Пожалуйста, не забывайте, что в этом примере мы предполагаем, что содержимое элемента li не увеличится. К примеру, если текст в теге h2 перенести на новую строку, это вызовет смешные изменения в шаблоне. Я еще вернусь к этому, в конце этого урока.
Вот наш HTML код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Background Image Sprites: A Beginner's Guide</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<ul id="content-list">
      <li>
          <h2 id="home">Sed Perspiciatis Unde</h2>
            <p>Donec blandit massa sed nisl. Suspendisse sollicitudin, eros nec adipiscing placerat, dui risus mattis augue, vitae euismod enim lorem sed risus.</p>
        </li>
        <li>
          <h2 id="calendar">Proin Elementum Lacinia</h2>
            <p>Fusce eleifend. Sed tempus, turpis vitae ornare sollicitudin, metus risus volutpat purus, ac commodo arcu odio a nisi.</p>
        </li>
        <li>
          <h2 id="info">Phasellus Dolor Nulla</h2>
            <p>Vestibulum iaculis nulla viverra enim. Nam vehicula. Phasellus volutpat felis vitae tortor. Nulla interdum leo vestibulum mauris.</p>
        </li>
        <li>
          <h2 id="user">Cras Feugiat Ipsum</h2>
            <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae.</p>
        </li>
        <li>
          <h2 id="monitor">Morbi Volutpat Lacinia</h2>
            <p>Praesent aliquam, nunc quis ornare feugiat, sapien urna tempus mi, eget facilisis orci diam quis lacus. Sed dui. Curabitur sed augue id arcu.</p>
        </li>
        <li>
          <h2 id="rss">Aliquam Neque Iaculis</h2>
            <p>Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores.</p>
        </li>
        <li>
          <h2 id="comment">Donec Dignissim Lectus</h2>
            <p>Fusce sed arcu a sapien sodales molestie. Morbi quis massa ut ipsum ultrices accumsan. Fusce pretium eu mi. Proin at nisi at dolor egestas mollis.</p>
        </li>
        <li>
          <h2 id="mail">Magna Lacus Tincidunt</h2>
            <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat assumenda est.</p>
        </li>
    </ul>
</body>
.</html>
Сохраните файл под именем index.html в папке iconsprites.
Как я и говорил, понятная, несложная верстка. Если бы вы взглянули на нее через браузер прямо сейчас, она бы выглядела тускло и неинтересно, но это мы сейчас поправим!

Украшение

Мы начнем с применения кое-каких основных стилей, чтобы наша страница стала готова для размещения контента. Создайте новый файл CSS и поместите следующие стили в начало файла.
* {
  margin: 0;
  padding: 0;
}
 
body {
  background-color: #efefef;
  font: 12px Arial, Helvetica, sans-serif;
  color: #646579;
}
Начнем мы с общего сброса стилей. Я обычно не рекомендую этот метод использования сброса CSS, тем не менее, это хорошая практика использования сброса для устранения целого ряда несовместимостей в браузерах. Использование универсального селектора и обнуления всех границ и отступов по умолчанию будет достаточно в качестве демонстрации. После сброса мы объявим некоторые основные стили тела документа, чтобы определить свойства шрифта и цвета.
Теперь давайте перейдем к созданию главных вещей. Начнем с нашего неупорядоченного списка и его основных свойств. Поместите эти стили после стилей тела документа.
ul#content-list {
  list-style: none;
  width: 720px;
  margin: 100px auto;
}
 
ul#content-list li{
  width: 325px;
  float: left;
  margin: 0 35px 15px 0;
}
Мы установили стиль нашего неупорядоченного списка на none (без галочек). Его ширину мы установили равной 720 пикселей, верхнюю и нижнюю границы равными по 100 пикселей, а левую и правую границы установили на auto, чтобы они центрировались в браузере.
Ширину наших элементов li установим равной 325 пикселей и выровняем их слева (to float: left). Теперь, так как мы установили ширину в 720 пикселей на их родительском элементе (ul#content-list) – только 2 элемента Li поместятся в ряд, а третий уже упадет в следующий ряд снизу. Я люблю называть эту мою технику «псевдо колонки». Это очень эффективный и полезный способ выравнивать элементы, тем не менее, у него есть свои недостатки; конкретно в этом примере он работает превосходно. Посмотрите, как теперь выглядит наша разметка.
Давайте зададим стили h2 и посмотрим, что у нас получится. Добавьте этот код после стилей, что мы только что создали:
ul#content-list li h2{
 color: #264772;
 font-size: 20px;
 background: url(../images/icons-bg.png) no-repeat;
 padding: 12px 0 0 42px;
}
Очень важный параметр здесь этоpadding. Прежде всего, мы задали верхний отступ равным 12 пикселей, чтобы сделать минимальную высоту элементов h2 равной высоте наших иконок (32 пикселя). Установив размер шрифта на 20 пикселей и верхний отступ на 12, мы как раз получили минимум в 32 пикселя. Также мы установим отступ слева на 42 пикселя. Это подтолкнет текст за 32 пикселя, необходимые для показа иконки, а также еще 10 просто для свободного пространства. Если вам не понятно как работают отступы, просто поэкспериментируйте немного с цифрами и посмотрите, что получится.
У вас должно получиться что-то похожее на это:

Мы уже почти закончили, но не совсем. Очевидно, что нам также необходимо разметить фон соответственно позиции наших иконок. Если вы помните, когда мы создали наше главное изображение, мы также установили 7 горизонтальных ориентиров на изображении. Эти ориентиры не только помогли нам выровнять иконки на главном изображении, они также сыграют роль в нашем CSS.
    • 64px
    • 128px
    • 192px
    • 256px
    • 320px
    • 384px
    • 448px

Эти цифры нам уже знакомы, добавим их в таблицу стилей.

/*Each of our icons in the master image are 64px below the icon above it. We just need to increment the y position -64px for each icon */
 
ul#content-list li h2#home{
  background-position: 0 0; /* Icon is at the top of our master image */
}
 
ul#content-list li h2#calendar{
  background-position: 0 -64px;
}
 
ul#content-list li h2#info{
  background-position: 0 -128px;
}
 
ul#content-list li h2#user{
  background-position: 0 -192px;
}
 
ul#content-list li h2#monitor{
  background-position: 0 -256px;
}
 
ul#content-list li h2#rss{
  background-position: 0 -320px;
}
 
ul#content-list li h2#comment{
  background-position: 0 -384px;
}
 
ul#content-list li h2#mail{
  background-position: 0 -448px;
}
Помните, второе значение  параметра background position представляет положение по оси у, которое изменяет вертикальное расположение нашего фонового изображения. Нам просто нужно использовать те же числа, что мы использовали для главного изображения, когда мы создавали горизонтальные ориентиры.
Почти закончили! Если вы взглянете, что мы имеем на данный момент, вы увидите, что осталось лишь подправить немного текст в каждом заголовке.
ul#content-list li p{
  margin-left: 42px;
}
Теперь готово! Посмотрите, что у нас получилось теперь.

Последние штрихи

Это была очень наглядная демонстрация того, чего можно достичь, используя CSS спрайты изображений. Есть некоторые очень креативные техники, используемые настоящими CSS фанатами по всей сети. Некоторые из самых известных веб-приложений используют главное изображение с более чем 100 различных изображений включенных в него.
Давайте посмотрим на несколько наиболее знаменитых веб-приложений, использующих сегодня CSS спрайты изображений.
Amazon

Yahoo

Apple

Это лишь мизерная часть миллионов сайтов, использующих CSS спрайты изображений сегодня. Целью этого урока было дать вам глубокое представление о CSS спрайтах изображений и на практике показать, как вы можете их использовать в ваших проектах уже сегодня. Теперь, когда у вас уже есть общее понимание CSS спрайтов изображений и как использовать свойство background-position, вы готовы исследовать дальше все их возможности.

Некоторые особенности нашего демо

В этом конкретном уроке, мы использовали то, что я называю «псевдо колонками» путем выравнивания элементов li фиксированной ширины. Конечно, эта техника всегда пригодится, но у нее есть свои особенности. Если бы ваши заголовки были длинными и переносились на следующую строку, это бы толкало ваш контент вниз и заставило бы ваши элементы li также сдвинуться. Это схоже с тем, как ведут себя колонки и строки в HTML таблице. В нашем примере контент статичен и не меняется в размерах. Для такой разметки этот способ работает, однако, если вы планируете использовать такой способ в вашем проекте и есть вероятность, что контента прибавится, вам лучше будет использовать двухколонную разметку. Также, если ваши элементы h2 вырастут в высоту на достаточное количество, они станут заползать на иконки. Чтобы избежать этого, сделайте больший отступ между иконками на главном изображении.

До свидания

Я надеюсь, вам понравилось читать мою статью. Если у вас возникли какие-либо вопросы, непонимания или предложения – прошу написать в комментариях. Так мы сможем поделиться ими с другими людьми, у кого может быть та же проблема. Спасибо за внимание!

Источник статьи: www.noobcube.com. Перевод: Портал для дизайнеров «Балбесов НЕТ»


Оцените, пожалуйста, эту статью:

  • Currently 3.00/5

Рейтинг: 3.0/5 (голосов: 1)

  Опубликовано: 28 октября 2009 | Просмотров: 44920 | Страница для печати  

Читать комментарии [26] на форуме.

Оставить комментарий
Ваше имя:

Проверка на человечность:

Если Вы человек, то Вам не составит труда набрать буковки и циферки в поле под картинкой, которая ниже.


  О нас Советы Уроки Карта уроков по Фотошоп Уроки по Adobe Illustrator Клипарты Форум Блог админа Реклама на сайте