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

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

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

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

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

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

Вам необходимо вставить дополнительный тэг <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>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Демо с sIFR (Flash Text Replacement)

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

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

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

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

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

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

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

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

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

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

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

Акварель + sIFR

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

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

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

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

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

Тэги: css, картинки

16.03.2010

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

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

Данный фреймворк написан на PHP и несколько расширяет возможности стандартных CSS - так, например, Вы получаете:

Возможность использования констант
Наследуемые селекторы
Использование выражений
Кэширование и автоматическое сжатие css
Расширяемость за счет подключаемых модулей

Для начала работы с Scaffold достаточно скачать дистрибутив, распаковать его в корень папки, где у Вас хранятся CSS файлы (в состав будет входить файл .htaccess и сама папка с Scaffold). Данный .htaccess файл позволит автоматически перенаправлять все запросы сервера к css файлам на обработку через Scaffold. После проделывания данной процедуры, Вы сразу получаете следующие возможности:

Импортирование других файлов

Для этого достаточно в CSS написать

@include 'filename.css';

Наследование классов

Если теперь в CSS файле мы напишем что-то вроде:

body {
  color : #fefefe;
  font: 12px Helvetica;

  div
    { 
      color: #000; 
      background: #fff; 

      a {
        padding: 5px;
      }
    }
}

То после обработки кода Scaffold выдаст примерно такой css:

body {
  color : #fefefe;
  font: 12px Helvetica;
}

body div
{ 
  color: #000; 
  background: #fff; 
}    
body div a{
  padding: 5px;
}

А если чуть-чуть доработать исходный css до такого вида:

body {
  color : #fefefe;
  font: 12px Helvetica;

  div
    { 
      color: #000; 
      background: #fff; 

      a {
        padding: 5px;
        &: hover {color: yellow;}
      }
    }
}

То на выходе мы получим

body {
  color : #fefefe;
  font: 12px Helvetica;
}

body div
{ 
  color: #000; 
  background: #fff; 
}    
body div a{
  padding: 5px;
}

body div a:hover{
  color: yellow;
}

Как Вы могли заметить - добавилась конструкция &:hover в тэге a. Селектор & позволяет обратиться к предку (в данном примере к a).

Константы

Допишем наш изначальный код до примерно такого вида:

@constants {
  body_color: #fefefe;
}
body {
  color : !body_color;
  font: 12px Helvetica;
}

Как видите, добавился новый оператор @constants, в котором мы задали одну единственную константу под названием body_color. Использование самой консатнты в селекторах происходит через ! (восклицательный знак). Соответственно после "компиляции", выходной css будет выглядеть так:

body {
  color : #fefefe;
  font: 12px Helvetica;
}

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

Выражения

Еще одна плюшка, которая появляется при использовании Scaffold - это возможность использовать выражения для подсчета каких-либо значений. Выражения в Scaffold пишутся с помощью "команды" #[выражение]. Например код:

body {
  color : #fefefe;
  font: 12px Helvetica;

  padding: #[10*5]px;
}

Даст примерно такой результат:

body {
  color : #fefefe;
  font: 12px Helvetica;

  padding: 50px;
}

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

@constants {
  body_color: #fefefe;
  global_padding: 10;
}
body {
  color : !body_color;
  font: 12px Helvetica;

  padding: #[!global_padding * 5]px;
}

Результат компиляции будет выглядеть примерно так:

body {
  color : #fefefe;
  font: 12px Helvetica;

  padding: 50px;
}

"Смешение"

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

=bordered {
  border: 1px solid #eee;
}
body {
  +bordered;
  color : !body_color;
  font: 12px Helvetica;
}

Как видите, в коде появился шаблон с названием bordered. Результат выполнения кода:

body {
  border: 1px solid #eee;
  color : !body_color;
  font: 12px Helvetica;
}

Еще одна замечательная особенность данных "шаблонов", что в них можно передавать параметры, например:

=bordered(!c) {
  border: 1px solid !c;
}
body {
  +bordered(#222);
  color : !body_color;
  font: 12px Helvetica;
}

В коде выше, мы передаем значение #222 как переменную в шаблон bordered. Результат выполнения кода:

body {
  border: 1px solid #222;
  color : !body_color;
  font: 12px Helvetica;
}

Так же можно задать значение по-умолчанию для шаблона. Давайте доработаем наш код до следующего:

=bordered(!c = #eee) {
  border: 1px solid !c;
}
body {
  +bordered(#222);
  color : !body_color;
  font: 12px Helvetica;
}
div {
  +bordered;
}

И результат будет таким:

body {
  border: 1px solid #222;
  color : !body_color;
  font: 12px Helvetica;
}
div {
  border: 1px solid #eee;
}

Сам Scaffold идёт с целым набором шаблонов по-умолчанию. Например:

body {
  +reset-border-model; 

 
  color : #fefefe;
  font: 12px Helvetica;
}

Даст такой результат:

body {
  margin: 0; 
  padding: 0;
  border: 0;
 
  color : #fefefe;
  font: 12px Helvetica;
}

Дополнительно о наборах шаблонов, идущих в Scaffold можно почитать на сайте Scaffold. Всё о чем я щас написал, можно посмотреть в видео, которое прикреплено ниже. Дополнительную информацию по Scaffold можно так же получить на родном сайте

Тэги: css, scaffold, framework

11.03.2010

CSS : улучшение картинок

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

Один из самых простых приемов - двойная граница. Этот прием не требует создания дополнительных картинок и полностью базируется на css.

css : пример улучшения внешнего вида картинок

HTML код для картинки будет выглядеть примерно так:

А CSS будет содержать примерно такой вид:

img.double_border {
border: 1px solid #bbb;
padding: 5px; /*размер внутренней границы*/
background: #ddd; /*цвет внутренней границы*/
}

Тэги: css, картинки

06.03.2010

CSS : Использование фоновых изображений

Краткий курс по темам CSS из учебника для начинающих:

Фоновые изображения очень полезны при создании различных визуальных эффектов на сайте. Неважно - добавляете ли Вы фонофое изображение на всю страницу или же используете картинки для улучшения навигации - свойство background вдохнет жизнь в Ваши страницы.

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

Использование больших фонов

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

Почитайте статью Nick La на WebDesigner Wall о том, как добиться эффекта, представленного на картинке ниже.

css : background - большие фоновые картинки

А так же советую прочитать статью на Webdesigner Depot о том "Что следует и чего не следует делать с большими фоновыми картинками"

Замена текста

Возможно, Вы уже знаете, что не все веб-браузеры поддерживают кастомные шрифты, встроенные на вебсайте. Но при этом Вы можете заменить текст на картинку. Один из самых простых способов - использование значения text-indent :

Наиболее часто используемый пример для заголовков. Этот прием заменяет все заголовки на странице на картинки:

h1 {
background: url(home_h1.gif) no-repeat;
text-indent: -99999px;
}

Иногда Вам может понадобиться указать ширину и высоту для блока (или использовать display:block если это inline элемент)

.replacethis {
background: url(home_h1.gif) no-repeat;
text-indent: -99999px;
width: 100%;
height: 60px;
display: block; /*--Нужно только для inline элементов--*/
}

Дополнительный материал по теме:

Nine Techniques for CSS Image Replacement

Using background-image to Replace Text

Image Placement vs. Image Replacement

Revised Image Replacement

CSS спрайты

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

css : спрайты (sprites) - пример на гугл

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

css : sprites - в навигации apple

Так для чего же их использовать? Ответ достаточно прост - чтобы во-первых сократить скорость загрузки изображений (обычно одна большая картинка занимает меньше места, чем несколько маленьких), а так же уменьшить количество HTTP запросов, которые отправляются на сервер.

Дополнительная информация по спрайтам:

The Mystery Of CSS Sprites: Techniques, Tools and Tutorials

Advanced CSS Menu

CSS Sprite Navigation Tutorial

Creating Easy and Useful CSS Sprites

Building Faster Websites with CSS Sprites

CSS Sprites: Image Slicing’s Kiss of Death

CSS Sprites: How Yahoo.com and AOL.com Improve Web Performance

What Are CSS Sprites?

Тэги: css, sprites, background, спрайты, фоновые изображения

06.03.2010

CSS : Позиционирование

Краткий курс по темам CSS из учебника для начинающих:

Свойство position (relative, absolute и fixed) - одно из наиболее мощных средств в CSS. Оно позволяет разместить элементы используя точные координаты, что даёт вам свободу в дизайне и выводит за границы привычных коробочных решений.

Когда мы позиционируем элемент, то, по-сути, нам нужно знать три простых вещи:

Координаты X и Y для элемента
Выбрать правильный вид позиционирования (relative, absolute, fixed или static)
Установить значение для z-index (чтобы указать какой элемент выше, а какой ниже)

При использовании position:relative элемент будет расположен в том месте, где он предполагался "по коду".Например, если элемент, изображенный на картинке, находится в левом верхнем углу, то указание переменным top и left значения 10px, сдвинет элемент от левого верхнего угла ровно на 10 пикселей вправо и на 10 пикселей вниз.

Обычно, relative используется для указания "базовой точки" (координаты X и Y) для "абсолютно" (absolute) позиционированных элементов. По-умолчанию, начальная позиция для всех position:absolute элементов является (0:0) (левый верхний угол браузера). Если указать для родительского элемента position:relative, то у всех детей стартовая позиция будет отсчитываться уже от левого-верхнего угла родительского элемента, таким образом (0:0) - это уже левый верхний угол родительского элемента, а не браузера.

css : position relative

Элементы с position:absolute могут быть расположены где угодно. Изначально, значение (0:0) для такого элемента - левый верхний угол окна браузера. На положение элемента никак не влияют float значения, а так же окружающие элементы.

Элементы со значением position: fixed так же начинают отсчет от левой верхней границы браузера, с тем лишь различием относительно absolute, что fixed элементы располагаются в любом случае относительно окна браузера. То есть даже если пользователь будет прокручивать страницу, элемент останется на том же месте на экране.

Значение z-index указывает на "этаж" на котором будет располагаться элемент. Чем больше значение, тем "выше" элемент (а значит его не будут перекрывать элементы, z-index которых меньше).

css : z-index

Дополнительные ссылки по теме:

W3Schools: CSS Positioning

CSS-Tricks: Absolute, Relative, Fixed Positioning

Stopping the CSS Positioning Panic

Learn CSS Positioning in Ten Steps

In-Depth Coverage of CSS Layers, Z-Index, Relative and Absolute Positioning

Тэги: css, positioning, relative, absolute, fixed, static

03.03.2010

Показаны 1 - 5 из 14 статей | Страница 1 из 3

< Previous 12 3 Next >

Заметки по программированию и PC