Делаем красивые картинки


Итак, в прошлые дни я писал про CSS - как улучшить внешний вид страниц и т.д. Сегодня я хочу написать про улучшение картинок на сайте.

Содержание статьи:

Итак, в прошлые дни я писал про CSS - как улучшить внешний вид страниц и т.д. Сегодня я хочу написать про улучшение картинок на сайте.

Опять же улучшать картинки мы будем с помощью CSS. Всё что нам понадобится - это тэг <span> и добавление фоновой картинки для создания эффекта перекрытия. Это очень простой, но эффективный способ улучшить оформление картинок. Посмотрите на demo на сайте webdesignerwall.com. В нем представлено 20 различных стилей - от простых иконок на картинках до эффектов закругленных углов и наложения дополнительных слоев на картинки.

Так в чем радость от картинок при обработке с помощью CSS?

  • Уменьшение времени на обработку картинок - вам не нужно больше создавать индивидуальный шаблон для каждой картинки и потом через фотошоп экспортировать каждую картинку с оформлением.
  • Сохранение исходной картинки - вам не нужно думать в следующий раз, когда вы захотите сменить дизайн, о том, что надо переделывать все картинки заново.
  • Очень гибкий подход - можно полностью поменять внешний вид оформления, поменяв всего пару строк в CSS 
  • Работает на всех сайтах - приведенные ниже фишки работают на любом типе сайта с любым размером картинки.
  • Кроссбраузерность - код, приведенный ниже, прошел проверку на большинстве популярных браузеров (Firefox, Safari, Opera, IE)

demo)">Базовый набор (смотрите демо)

Вам необходимо вставить дополнительный тэг <span> внутри тэга <div>. При этом <div> у нас будет использоваться для создания эффекта наложения картинок, а <span> поможет вывести всякую ерунду :)

Улучшаем картинки - базовый уровень

Теперь в CSS (об этом надо обязательно помнить!) указываем для элемента div свойство position:relative, для элемента span указываем position: absolute. Теперь элемент span можно расположить как угодно, используя свойство top и left.

Маленький хак для IE

Так как IE6 не умеет показывать прозрачность в png картинках, то я рекомендую использовать фикс http://www.twinhelix.com/css/iepngfix/. Скачайте себе копию данного фикса (iepngfix.htc) и вставьте следующий код между тэгами <head>:

<!--[if lt IE 7]>  <style type="text/css">      .photo span { behavior: url(iepngfix.htc); }    </style>  <![endif]-->  

Меняем внешний вид

 Чтобы поменять внешний вид оформления картинок, теперь достаточно чуть чуть поправить CSS (а именно значения для <span> и <div>). На демо показаны 15 различных стилей, которые вы можете взять на вооружение.

Демонстрация различных стилей

Маленькая помощь со стороны jQuery

Возможно, вам не очень нравится вставлять в свои шаблоны пустые тэги <span>. Поэтому ниже приведем код на jQuery, который поможет решить этот маленький конфликт. Вставьте код, написанный ниже, где-нибудь между тэгами <head> и он автоматически добавит пустой <span> ко всем картинкам:

<script type="text/javascript" src="jquery.js"></script>  <script type="text/javascript">  $(document).ready(function(){    //prepend span tag    $(".photo a").prepend("<span></span>");  });  </script>

demo)"> #1 - Пример галлереи (демо)

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

Простейшая галлерея на css

demo)">#1а - Мини-иконки (демо)

Этот пример показывает как расположить различные иконки на картинках (для каждой иконки используется свой имя и класс в CSS)

Размещение иконок на картинках

demo)">#2 - Фотография с текстом (демо)

Этот пример показывает как создать галлерею с подписями к картинкам (используется тэг <em>)

Добавляем надписи на картинки

demo)">#2а - Всплывающий текст (демо)

Всплывающие подписи к картинкам

demo)">#3 - Скрепка на фотографии (демо)

Размещаем скрепку на картинке

demo)">#4 - Пример "приклеивания" картинки с помощью скотча (демо)

Приклеиваем картинку скотчем

Демо с sIFR (Flash Text Replacement)

Этот пример использует sIFR для замены содержимого тэга <em> на рукописный шрифт (в этой деме, тэг <span> добавляется с помощью jQuery)

Замена текста с помощью sIRF

demo)"> #4а - Добавляем текст на скотч (демо)

Добавляем подпись на скотч

demo)">#5 - Посетим выставку? Добавим рамку для картин (демо)

Добавляем рамку на картинку

demo)">#5а - другой пример рамки. (демо)

Добавляем рамку из золота

demo)">#6 - Акварель (демо)

Фон в виде акварели

demo)">sIRF версия акварели (демо)

Акварель + sIFR

demo)">#7 - Добавим гламура (демо)

Гламурные картинки

demo)">#8 - Деревянная панель (демо)

Этот пример показывает как можно добавить общий фон для всех элементов, чтобы создать галлерею на деревяной панели. Используются тэги <il>, <li> и <em>

Общий фон для картинок

 


Так же советую почитать:


CSS : фреймворк Scaffold

До этого мы рассматривали базовые элементы CSS для создания симпатичных сайтов. А теперь пришло время рассмотреть один фреймворк (framework), который позволит несколько облегчить работу с CSS. Название этому фреймворку Scaffold.