Графика или чистый css

Пятница, 04 Июнь 2010

Современные сайты довольно часто пестрят всевозможными яркими цветами и причудливыми дизайнами, зачастую перегружены графическими элементами и могут раздражать пользователя. Проблемы здесь может возникнуть сразу две (а порой и больше):

1)Скорость загрузки страницы при большом количестве графики, особенно если элементы графики не объединены в общий графический файл, очень низкая.

2)Слишком яркий и пестрый дизайн отвлекает внимание пользователя от основной цели, напрягает зрение и восприятие содержимого страницы.

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

Посмотреть Demo

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

Таким образом вы убиваете двух зайцев:

Первый заяц - ваш блок становится "резиновым", то-есть его высота и ширина изменяются в зависимости от объема содержащихся в нем элементов. Второй заяц - раскроив одно большое изображение на несколько более мелких и затем объединив их в один графический файл, вы уменьшаете размер (объем, количество в килобайтах) графики, тем самым ускоряя

загрузку страницы в броузер пользователя и уменьшая количество запросов к серверу. Осуществить это довольно просто.

Как и говорилось выше, необходимо разрезать исходное изображение (макет) с помощью графического редактора Photoshop, на четыре части (четыре уголка, в случае данного конкретного примера). Этих частей может быть и больше, все зависит от сложности исходного изображения (макета дизайна), которое применяется в качестве фона для контейнера.

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

Продолжаем объединение изображений - после разбивки на мелкие составляющие, объединяем их в один единый графический файл, для этого создаем в графическом редакторе Photoshop изображение с прозрачным фоном, и размещаем в нем все отдельные части (из макета), при этом оставляя между ними зазоры в десять пикселей. Зазоры нужны для того что бы случайно не захватить лишнюю часть соседнего элемента.

После этого сохраняем файл в формате PNG и переходим к работе с CSS.

В CSS нам нужно указать фоновые изображения для всех четырех углов контейнера (в действительности же отдельно для каждого вложенного контейнера-обвертки по углу). Для этого используя например такую HTML конструкцию:

 
<div id="hill">
  <p class="title">Lorem ipsum</p>
  <ul>
  <li><a href="">Lorem Ipsum is simply </a><span>Many desktop publishing packages and web</span></li>
  <li><a href="">Lorem Ipsum is simply </a><span>Many desktop publishing packages and web</span></li>
  <li><a href="">Lorem Ipsum is simply </a><span>Many desktop publishing packages and web</span></li>
  <li><a href="">Lorem Ipsum is simply </a><span>Many desktop publishing packages and web</span></li>
  <li><a href="">Lorem Ipsum is simply </a><span>Many desktop publishing packages and web</span></li>
  <li><a href="">Lorem Ipsum is simply </a><span>Many desktop publishing packages and web</span></li>
  </ul>
  <div class="top-left"></div>
  <div class="top-right"></div>
  <div class="bottom-left"></div>
  <div class="bottom-right"></div>
</div>

В CSS необходимо поступить следующим образом:

 
#hill{
  background:#fff;
  margin:50px auto !important;
  padding:10px !important;
  position:relative;
  text-align:left;
  width:317px;
  height:1%;
}
#hill div{height:10px !important;width:10px !important; position:absolute; z-index:99; margin:0 !important; padding:0 !important;}
#hill .top-left{
  top:0;
  left:0;
  background: url(graphicks.png) scroll 0% 0% no-repeat;
}
#hill .top-right{
  top:0;
  right:0;
  background: url(graphicks.png) scroll 100% 0% no-repeat;
}
#hill .bottom-left{
  bottom:0;
  left:0;
  background: url(graphicks.png) scroll 0% 100% no-repeat;
}
#hill .bottom-right{
  bottom:0;
  right:0;
  background: url(graphicks.png) scroll 100% 100% no-repeat;
}

Таким образом с помощью параметра scroll свойства background, мы выбираем нужный участок из общего графического файла, смещаясь по осям X и Y.

Использование графики в элементах интерфейса, парой не всегда оправданно.

Например при создании строгих деловых дизайнов в стиле "минимализма", которые отличаются своей простотой и легкостью зрительного восприятия, и самое главное минимальным количеством графики.

В данном случае можно воспользоваться стандартными свойствами CSS которые это позволяют - еще их называют "CSS трюки".

В качестве примера для демонстрации будут использоваться те же блоки DIV (оформление контейнеров), но в этот раз у контейнеров не предусматривается закругление углов, а на против - прямоугольные ровные линии и формы, являются "фишкой" или "изюминкой" строгого делового дизайна. Вот внешний вид исходного примера.

Посмотреть Demo

Как видно из превью, блок имеет прямоугольную форму и рамку, а также тень.

На на самом же деле это не тень, а все го лишь ее имитация с помощью CSS. Такой внешний вид создается за счет наслоения контейнеров (DIV) с разными цветами фона (background) и внешней рамки (border).

Получить такой эффект совсем не сложно, здесь мы как-бы имитируем градиент за счет различных цветов фона (background) и рамок (border), создавая плавный переход - тень.

Как и в примере со скругленными углами используем похожую модель разметки HTML:

<div id="hill">
  <div>
    <div>...</div>
  </div>
</div>

За одним лишь исключением - здесь контейнеры DIV выступают в качестве "обвертки" и иная структура.

А это код CSS:

#shadow{
  background-color:#DDDDD5;
  margin:50px auto;
  padding:0;
  position:relative;
  text-align:left;
  width:317px;
}
#shadow div{
  background-color:#B9B8B3;
  border:1px solid #CECDC8;
  bottom:1px;
  padding:0;
  right:1px;
}
#shadow div div{
  background-color:#FFFFFF;
  border-color:#CBC8C2 #9D9C97 #9D9C97 #CBC8C2;
  border-style:solid;
  border-width:1px;
  padding:5px;
  height:1%;
}
#shadow .title{
  background:url("title.png") left top no-repeat;
  color:#FFFFFF;
  font-family:Georgia,serif;
  font-size:13px;
  font-style:italic;
  height:13px;
  left:-2px;
  padding:5px 17px 15px 17px;
  position:absolute;
  top:12px;
}

Я думаю тем кто знает основы CSS это понятно, если нет то задавайте вопросы в комментариях.

Используя такой подход на основе CSS, одним выстрелом убиваются сразу три зайца!

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

Второй заяц - сократился объем кода - меньше на одну контейнер-обвертку DIV. Третий заяц - Ну и блок так же является "резиновым" и изменят свои размеры в зависимости от количества содержащихся в нем элементов.

Download

PS. И не забудьте подписаться на ленту новостей RSS

Метки:

Графика или чистый css

Похожие статьи:

Комментарии

Добавить комментарий