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

Соответствие дизайна тематике
Как ни странно, несоответствие тематике встречается часто. Причем не на сайтах и форумах, использующие стандартный дизайн, а именно на самых "креативных". Особенно у тех, у которых есть средства и возможность, а главное, время менять дизайн часто.

Вот подборка примеров с первых восьми страниц каталога http://webtalk.ru/ (форумы со стандартным дизайном пропускались)

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

Итог. первое, что при разработке дизайна надо учитывать - это ТЕМАТИКА ресурса
Не красивые картинки из интернета, не цветовая гамма, а именно тематика.

Для примера (чтоб было на чем показывать) я беру себе тему "Фентези". (дизайн можно скачать и посмотреть здесь: Стиль Fairy Fantasy (Mybb) + PSD макет [10/10])

Составление проекта дизайна

Когда вы определились, к какой тематике относится ваш сайт, необходимо определиться с тем, как должен выглядеть ваш дизайн.
На этом этапе надо определить для себя не цвет, не картинки, а форму.
Нужно решить, какие у вас будут функциональные блоки, какие заголовки, какая шапка. Делается это для того, чтобы заранее определиться с тем, что вы делаете и какой формы оно должно быть, а не решать это уже в процессе. В противном случае ваши идеи могут не сочетаться друг с другом, что-то придется менять и вы рискуете проделать много лишней работы.
Составлять проект дизайна лучше не на компьютере, а на листке бумаги. Уберите все лишнее с глаз, выключите компьютер и схематически нарисуйте себе макет на бумаге. Не отвлекайтесь от этого процесса и не лазийте по сайтам в поисках вдохновения. Все, что вам нужно для хорошего дизайна у вас уже есть в голове. Главное - отталкиваться от принципа, что возможно ВСЕ.

Вот пример схематического макета, которые я рисую:

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

Этот шаблон проекта можно повесить себе куда-нибудь на стенку, чтобы помнить то, что вы собрались делать и стараться не откланяться от цели.

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

Во-первых, где же исходники взять?

Подборка ссылок
http://lenagold.ru/ - Сайт с готовым клипартом (изображения в формате png).
на мой взгляд, это САМЫЙ лучший сайт по поиску клипарта и бесшовных текстур (повторяющихся фонов). Самый лучший благодаря своей навигации - можно искать по тематике, можно искать по цвету, можно искать по алфавиту. Почти все картинки размещены отдельно - вам не придется качать несколько гигабайт скрап-набора для того, чтоб получить один-единственный элемент.

http://allday.ru/ и http://pixelbrush.ru/ - два сайта тематики "все для фотошопа". Там есть много всего, но это "много всего" находится в одной каше. На эти сайты я залезаю обычно только если нигде не нашлось подходящего элемента, а рисовать самостоятельно очень-очень лень. Чтобы найти там что-то нужное, придется листать огромную кипу страниц ненужного. Тратится куча времени.

http://artfile.ru/ - На этом сайте выкладываются обои, но не простые, а золотые - много в формате hd, много-много разной тематики, короче, большие и качественные картинки.
Единственное, чего не хватает для счастья на этом сайте - еще более "узкое" разделение на категории или тегов. Когда ищется что-то конкретное - тратится безумное количество времени на проматывание ненужного.

(18+) http://konachan.com/ (английский) и http://mjv-art.org (русский) - сайты с обоями и артом в стиле Аниме.
Привела именно эти сайты, т.к. там много широкоформатных картинок. Однако, к сожалению, оба сайта содержат кучу хентая, если вам нет 18 даже не открывайте эти сайты - родители не поймут ваши оправдания типа "я пристойную картинку на этом сайте ищу".
поиск на этих сайтах происходит ТОЛЬКО по тегам. Комбинировать теги почему-то не получается. Так что, тяжело что-то искать.

Но найти исходники - это не главное, Главное - это исходники подобрать.
Несколько правил подборки исходников

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

2. Не бывает неподходящего цвета
Не отказывайтесь от исходника, если не подходит цвет - вас спасет колоризация. Есть множество уроков о том, как менять цвет объекта полностью или частично.
По той же причине не надо качать кучу одинаковых скрап-наборов только потому, что хочется не только фиолетовые цветочки, но и желтые. Выбирайте объект по форме, а потом поменяете цвет. Супер-художником для этого быть не придется.

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

4. Много картинок и графики не нужно
В принципе, подборка исходников может содержать хоть миллион графических картинок, но это не означает, что все они должны быть использованы в дизайне. Например, красиво смотрится дизайн, где в шапка сделана из одной картинки и не красиво получается, когда дизайнер пытается туда "упаковать" сразу несколько разных картинок с кучей деталей.
Если же действительно хочется сколлажировать несколько картинок, то смотрите не на исходники, а возвращайтесь к листку бумаги - обозначьте на на своем шаблоне схематическое расположение персонажей, объектов и декораций, а уже потом подбирайте исходники для коллажа.

Отредактировано Герда (25.10.2012 03:30:38)

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

Как работает CSS
Что по сути есть изменение дизайна? Это изменение графической составляющей форума и интерфейса.
Любые форумы и сайты - это таблицы с текстом и ссылками. А дизайн css позволяет этим таблицам принять вид удобный для чтения и восприятия информации. Например: на форумах визуально разделены разные "блоки" - разные посты отделяются визуальными границами, страница тем отделяется от общего фона сраницы, а информация об авторе стоит справа/слева от сообщений - все это заслуга CSS.
Таким образом, у редактирования дизайна есть две миссии: улучшение интерфейса и наведение отличительной красоты. Однако, дизайн css не влияет на содержимое форума: текст сообщений, названия разделов, функционал форума через стиль не поправить.

Верстка дизайна представляет собой прописывание кодов для конкретных элементов.
В любом движке любого сайта и форума для этого можно действовать двумя способами - либо прописывать коды в head с тегами <style>, или открыть стандартный шаблон и изменять его.
На примере mybb форума: вставлять данные коды с тегами <style> в Администрирование > Настройки > HTML-верх или можно редактировать стандартный дизайн-шаблон через Администрирование > Стиль.

Чтобы научиться писать сами коды, не надо их зубрить, нужно просто понять как они работают и запомнить написание кодов.
Любой css-код состоит из СЕЛЕКТОРА, СВОЙСТВА и ЗНАЧЕНИЯ.
СЕЛЕКТОР (от англ. select - выбирать; selector - "отборщик") - это "имя" элемента, который меняется. мы указываем (выбираем), что будет изменено. (например: категории форума, форма ответа, поля профиля и т.п.)
селекторы не нужно выучивать наизусть и знать, они на каждом движке свои. Это уникальные идентификаторы и классы элементов, которые можно "подглядеть" в исходном коде.
Например, вот так выглядит HTML код шапки mybb форума (красное - идентификаторы, синее - классы):

в коде css идентификаторы указываются решеточкой (#), а классы - точкой (.). Например:

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

СВОЙСТВО (так же называется "параметр") - это то, что именно будет меняться в выбранном (с помощью селектора) элементе. Например: фон, размер, границы и т.п.
ЗНАЧЕНИЕ (так же называется "аргумент") - это какие именно изменения произойдут с выбранным свойством. Например: указываем цвет, ссылку на фон, размер в пикселях или процентах и т.п.
В отличие от селекторов, которые можно посмотреть в исходном коде сайта, СВОЙСТВА и ЗНАЧЕНИЯ нужно либо знать, либо подглядывать в специальных справочниках по мере необходимости.

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

Парочек свойство: значение; у селектора может быть сразу несколько, указываются они через точку с запятой (;)

Если не соблюдать вышеизложенные правила пунктуации в CSS-кодах, они не будут работать.
о селекторах mybb-форума можно почитать здесь: Новый FAQ по дизайну и CSS
о свойствах и значениях можно почитать в разделе CSS-кодов

Инструменты для верстки дизайна (Firebug)
Как уже говорилось выше, селекторы нужно не зубрить и знать, а их всегда можно подглядеть в исходном коде.
Для того, чтоб исходный код было удобно просматривать, сделана масса программ, в том числе есть иснструменты для просмотра исходного кода, встроенные в браузер по умолчанию. Однако, они не очень удобны, для того, чтоб щелкать html и css коды как орешки, лучше озаботиться поиском отдельного програмного обеспечения.
Программ для веб-разработчиков масса, тут каждый выбирает для себя, мне лично подошел FireBug, поэтому и добавлю сюда инструкцию по использованию. (если у кого-нибудь будут рекомендации программы получше, скиньте в ЛС, предложим альтернативу).

FireBug - это плагин для браузера FireFox. Им можно абсолютно бесплатно обзавестись на firebug.ru, и если вам понравится, добровольно пожертвовать разработчикам, сколько не жалко.
после установки у вас появится возможность проанализировать код любого элемента на любой странице:

Если навести курсор на строчку HTML-кода, будет показана область, которая относится к этому коду. Если кликнуть по строчке, то справа будут отображаться все CSS-коды, которые влияют на дизайн этой области.

и HTML-код и CSS-Код в панели FireBug модно редактировать. Более того, туда встроено авто-заполнение, поэтому подобрать коды с ошибками не получится.

Подробнее о том, как использовать FireBug показано в этом видео-уроке:

Учимся правильно резать макет

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

Планирование элементов дизайна
Необходимо сориентироваться и экономно распланировать расположение элементов дизайна.

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

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

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

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

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

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

  - понижайте качество JPG картинки
Когда сохраняете картинку в JPG, вы можете значительно сбросить ее вес, покрутив колесико Quality (Качество):

Для глаза разница не заметна, а вес графики станет меньше.

элементы, которые у меня получились:

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

Учимся вставлять фоновые картинки

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

Чтобы этих проблем не было, нужно не просто ставить фоновую картинку, а указывать все настройки для нее (все значения свойства BACKGROUND)

background-color - задает фоновый цвет.
значения:
цвет (см. таблицу цветов)
transparent (прозрачный)
примеры:
селектор {background-color: red;}
селектор {background-color: #ff0000;}
селектор {background-color: transparent;}

background-image - устанавливает фоновое изображение для элемента.
значения:
url(путь к файлу)
none - отсутствует
примеры:
селектор {background-image: url("/files/0007/e3/f7/87936.png");}
селектор {background-image: none;}

background-repeat - определяет, как будет повторяться фоновое изображение, установленное с помощью свойства background-image.
значения:
repeat - картинка повторяется по горизонтали и вертикали. (это значение идет по умолчанию)
no-repeat - картинка не повторяется
repeat-x - повторяется только по горизонтали
repeat-y - повторяется только по вертикали
space - повторяется столько раз, чтобы полностью заполнить область; если это не удаётся, между картинками добавляется пустое пространство.
round - повторяется так, чтобы в области поместилось целое число рисунков; если это не удаётся сделать, то фоновые рисунки масштабируются.
примеры:
селектор {background-repeat: no-repeat;}
селектор {background-repeat: repeat-x;}

background-position: - задает начальное положение фонового изображения, установленного с помощью свойства background-image.
значения:
У этого свойства два значения: положение по горизонтали (может быть — left, center, right) и вертикали (может быть — top, center, bottom).
Кроме использования ключевых слов положение также можно задавать в процентах, пикселах или других единицах. Если применяются ключевые слова, то порядок их следования не имеет значения, при процентной записи вначале задается положение рисунка по горизонтали, а затем, через пробел, положение по вертикали.
примеры:
селектор {background-position:: top center;}
селектор {background-position:: 30px 30px;}
селектор {background-position:: 10% 50%;}

background-attachment - устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом.
значения:
fixed - делает фоновое изображение элемента неподвижным.
scroll - позволяет перемещаться фону вместе с содержимым.
local - фон фиксируется с учётом поведения элемента: если элемент имеет прокрутку, то фон будет прокручиваться вместе с содержимым, но фон выходящий за рамки элемента остаётся на месте.
примеры:
селектор {background-attachment:: fixed;}

Все значения фона можно прописать одним кодом!
Универсальное свойство background позволяет установить одновременно до пяти характеристик фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству.
Значения не разделяются запятыми, а пишутся подряд (согласна правилам CSS-кодов, описанных выше):

Составляем css-код дизайна

-> ->
По прочтении всего, изложенного выше, с составлением кодов может быть только одна проблема - как вычислить нужный селектор?
Ведь любые свойства и значения CSS можно всегда подглядеть или спросить, а селекторы везде разные.
Секрет составления кода дизайна во внимательном просмотре HTML кода.
Рассмотрим этот процесс на примере последовательности фоновых изображений в текущем дизайне.

На самый задний фон необходимо поставить текстурку (http://uploads.ru/i/c/o/H/coHy9.jpg).
Заглядываем в HTML-код страницы и ищем самый первый тег, с которого начинается код (он, кстати, везде и всегда одинаковый):

<html>
   ....
</html>

Мы можем вписать тектуру в данный тег:

html {background: url("http://uploads.ru/i/c/o/H/coHy9.jpg") repeat scroll 0 0 #000000;}

Следующим "слоем" у нас идет эльфийки с цветочками (http://uploads.ru/i/M/I/V/MIVB8.jpg). Смотрим, какие теги идут следующими:

<html>
   <head>
      ....
   </head>
   <body>
      ....
   </body>
</html>

С помощью FireBug видно, что тег HEAD не подсвечивается, а при наведении курсора на BODY выделяется вся страница (потому как тег body в html отвечает за тело форума/сайта, собственно body и переводится с английского как "тело" - в нем хранятся все коды, отвечающие за содержимое страницы).

вписываем фон в body:

body {background: url("http://uploads.ru/i/M/I/V/MIVB8.jpg") no-repeat scroll center bottom transparent;}

следующим слоем нужно вписать верхние цветочки, которые должны отображаться под фоном таблиц и под шапкой (http://uploads.ru/i/d/q/J/dqJp6.png)
Разворачиваем тег BODY и ищем ближайший тег содержимого страницы:

<html>
   <head>....</head>
   <body>
      <div id="pun_wrap">
         ....
      </div>
   </body>
</html>

вписываем фон в контейнер с идентификатором pun_wrap:

#pun_wrap {background: url("http://uploads.ru/i/d/q/J/dqJp6.png") no-repeat scroll center top transparent;}

следующим этапом идет фон форумного контента (http://uploads.ru/i/U/Z/g/UZgKV.png)
разворачиваем контейнер pun_wrap и сразу же видим контейнер pun

<html>
   <head>....</head>
   <body>
      <div id="pun_wrap">
         <div id="pun">
            ....
         </div>
      </div>
   </body>
</html>

на этот раз нужно не только вписать фон, но и задать ширину контейнера:

#pun {
    background: url("http://uploads.ru/i/U/Z/g/UZgKV.png") repeat-y scroll center top transparent;
    margin: auto;
    padding: 0 40px;
    position: relative;
    width: 918px;
}

Вот таким образом, анализируя HTML-код, можно задавать настройки.
С помощью FireBug можно экспериментировать, например, редактировать CSS-коды до того, как вставлять изменения в стиль - если что-то пойдет не так или что-то перекосится, вы всегда можете обновить страницу и попробовать написать код заново.
Сам процесс подбора размеров форумных элементов и вставки картинок с помощью Firebug у меня занял 40 минут.

Верстка дизайна на mуbb форуме при помощи FireBug

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

Отредактировано Герда (08.12.2012 18:59:23)

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

Создание таблицы
Для примера таблицы, вернемся к макету и нарисуем любую невероятной красоты штуку для информации.

При создании таблиц, конечно нужно исходить не из неземной красоты, а из функционала, который табличка должна в себя включать:

Для начала нужно составить HTML-код полученного макета. попытаемся прочертить визуальные границы:

Составляем HTML-код таблицы. Подробно о том, как составлять HTML код таблицы написано здесь: Таблицы в HTML.

<table>
<tr>
<td rowspan="2">контейнер</td>
<td colspan="2">ссылка1, ссылка 2, ссылка3</td>
</tr>
<tr>
<td rowspan="2">ссылки</td>
<td rowspan="2">баннеры</td>
</tr>
<tr>
<td>текст</td>
</tr>
</table>

теперь будем постепенно эту таблицу разукрашивать через стиль.
Сделаем фон. Для этого зададим табличке идентификатор my_table.

Теперь создадим контейнер. Чтобы меньше использовать картинок (что позволит табличке быстрее грузиться), используем CSS3.

CSS3: меньше картинок, больше кодов
Что такое css 3 и откуда он взялся? жили-были люди, которые хотели быстро и просто раскрасить интернет без использования HTML, и придумали они каскадные таблицы стилей CSS. Разработчики браузеров сказали "ух ты! какая полезная штука. добавим мы ваши коды в браузеры, чтобы они отображались у пользователей". С тех пор мы можем менять дизайн сайта через CSS, а браузеры "понимают" этот код и выдают пользователю картинку.
Но разработчики не стояли на месте, а сели и подумали над новой версией CSS-кодов. Зачем? затем, что не все действия можно выполнить с помощью css-кодов. закругленные контейнеры приходилось делать картинками, светящиеся буковки - тоже картинками... Слишком много картинок.
Так появился CSS3 - новые коды для дизайна.

Плюсы и минусы CSS3
Плюс в том, что все ваши дизайнерские навороты можно выполнить с помощью простых кодов, а не делать много-много картинок. Код грузится значительно быстрее картинки, а следовательно, дизайн будет "легче".
Проблема в том, что разработчики браузеров не спешили "учить" браузеры понимать эти коды, поэтому в старых версиях CSS3 не отображается (например, Internet Explorer 9 знает css3, а все предыдущие версии не отображают CSS3).
Так что, использовать CSS надо на всякий пожарный так, чтобы страница была читабельна как с этими кодами, так и без них.

CSS3 кроссбраузерность
Еще одна проблема - каждый браузер по-своему "понимает" коды CSS3. Например, свечение текста в Mozilla и в Opera выглядят по разному. Еще один пример - закругление границ, некоторые версии некоторых браузеров "требуют" писать css-код для них отдельно:

#селектор {
  -moz-border-radius: 10px; /* Firefox */
  -webkit-border-radius: 10px; /* Safari, Chrome */
  -khtml-border-radius: 10px; /* KHTML */
  border-radius: 10px; /* CSS3 */
}

Так что, при использовании CSS3 требуется тщательная проверка на кроссбраузерность.
В любом случае, повозиться с CSS3 стоит, т.к. экономия трафика значительна.

здесь и далее использовались материалы сайта http://www.wisdomweb.ru
Что умеет CSS3
Свойств CSS3 настолько много, что все их перечислять на наглядном примере в этой статье не имеет смысла - глава растянется на очень большое количество символов, скриншотов и пояснительного текста. Имеет смысл обращаться в Каталог CSS кодов с просьбами сделать урок по интересующим свойствам.
Здесь будет перечислены все свойства, а ниже будут разбираться подробнее те, которые используются в примере дизайна (border-radius, box-shadow и text-shadow).

background-image - модернизировано и позволяет вставлять сразу несколько фоновых изображений для элемента;
background-size - задает размер фонового изображения;
background-origin - позволяет установить как должно вычисляться положение элемента относительно границ его родительского элемента;
background:linear-gradient и background:radial-gradient - позволяет создавать градиентный фон (линейный и радиальный);
border-radius - создает элемент с закругленными (сглаженными углами);
box-shadow - делает тень или свечение у элемента;
border-colors - позволяет регулировать цвет каждого пикселя границы;
border-image - осуществляет вставку изображений в качестве границы;
@font-face - позволяет импортировать любые шрифты;
text-shadow - делает тень или свечение у текста;
text-overflow - позволяет указать, что должно случиться с текстом вышедшем за пределы границ элемента;
word-wrap - заставляет длинные слова, выходящие за пределы границ элемента, должны разделяться и переносится на новую строку;
opacity - создает полу-прозрачные элементы;
transform - позволяет трансформировать элементы с помощью разных значений, например, поворачивать, смещать, растягивать и т.п.;
transition - одно из свойств, позволяющий анимировать элементы, создает эффекты перехода;
@keyframes - создает анимацию;
column-count - позволяет легко и ыстро разбить текст на столбцы;
column-gap - устанавливает величину отступа между столбцами текста;
column-rule - задает ширину, цвет и стиль оформления пространства между столбцами;
column-width - позволяет указывать ширину столбцов текста;

BORDER-RADIUS
С помощью нового CSS3 свойства border-radius Вы можете делать углы элементов сглаженными.

#el1 {
border-radius:5px;
}
#el2 {
border-radius:10px;
}
#el3 {
border-radius:20px;
}
#el4 {
border-radius:15px;
}

>>> ПОСМОТРЕТЬ ДЕМО <<<

Данное свойство может применяться не ко всем углам элемента, а только к определенным:
    border-top-left-radius делает сглаженным только верхний правый угол элемента;
    border-top-right-radius делает сглаженным только верхний левый угол элемента;
    border-bottom-left-radius делает сглаженным только нижний правый угол элемента;
    border-bottom-right-radius делает сглаженным только нижний левый угол элемента.

Можно не использовать эти свойства, а записывать закругление границ одним кодом:

#el1 {
border-radius:5px 5px 15px 15px;
}
#el2 {
border-radius: 0 0 10px 10px;
}
#el3 {
border-radius:40px 0 40px 0;
}
#el4 {
border-radius:0px 20px 20px 20px;
}

>>> ПОСМОТРЕТЬ ДЕМО <<<

Чтобы border-radius отображалось корректно во всех браузерах, лучше записывать свойство для каждого браузера (значение при этом должно быть одно и то же):

#селектор {
  border-radius: 10px;
  -moz-border-radius: 10px; /* Firefox */
  -webkit-border-radius: 10px; /* Safari, Chrome */
  -khtml-border-radius: 10px; /* KHTML */
}

BOX-SHADOW
С помощью свойства box-shadow Вы можете добавлять к элементам страницы тени.
Тень может быть внешней и внутренней. Внешние тени создают эффект приподнятости элемента над остальным содержимым, а внутренние создают эффект вдавленности элемента.

#el9 {
box-shadow:4px 4px black;
}
#el10 {
box-shadow:6px 6px 6px 2px black;
}
#el11 {
box-shadow:0px 0px 6px 2px black inset;
}

>>> ПОСМОТРЕТЬ ДЕМО <<<

Чтобы box-shadow отображалось корректно во всех браузерах, лучше записывать свойство для каждого браузера (значение при этом должно быть одно и то же):

#селектор {
   .shadow {
    background: #fc0; /* Цвет фона - обязательно для IE*/
    box-shadow: 0 0 10px red; 
    -moz-box-shadow: 0 0 10px red; /* Для Firefox */
    -webkit-box-shadow: 0 0 10px red; /* Для Safari и Chrome */
}

TEXT-SHADOW
С помощью нового CSS3 свойства text-shadow Вы можете добавлять к тексту элементов тени (к тексту одного элемента может быть добавлено одновременно несколько теней).
При задании тени для текста необходимо указать: величину смещения тени от текста по горизонтали и вертикали (может быть отрицательной), а также радиус размытия и цвет тени.

#shadow1 {
text-shadow:3px 2px #FFAE00;
}
#shadow2 {
text-shadow:1px 1px 10px #FFAE00;
}
#shadow3 {
text-shadow:2px 2px 2px #FFAE00, 2px 2px 15px #1435AD;
}

>>> ПОСМОТРЕТЬ ДЕМО <<<

CSS3 на примере таблицы

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

Для создания контейнера назовем ячейку с контейнером "box-td" и вставим в ячейку контейнер "my_box"
HTML

<table id="my_table">
<tr>
<td rowspan="2" id="box-td">

<div id="my_box">контейнер</div>

</td>
<td colspan="2">ссылка1, ссылка 2, ссылка3</td>
</tr>
<tr>
<td rowspan="2">ссылки</td>
<td rowspan="2">баннеры</td>
</tr>
<tr>
<td>текст</td>
</tr>
</table>

Через стиль ограничиваем размер ячейки (чтоб ничто никуда не вылазило):

#box-td {height: 170px; width: 340px;}

А контейнеру задаем размер, отступы (ведь справа к нему надо будет "прилепить" фею) и CSS3 свойства (закругление и тень)

#my_box {
   background: #000;
   width: 280px; 
   height: 105px; 
   -moz-border-radius: 10px;  
   -webkit-border-radius: 10px;  
   -khtml-border-radius: 10px;  
   border-radius: 10px; 
   -webkit-box-shadow: 0px 0px 3px #8c61ca; 
   -moz-box-shadow: 0px 0px 3px #8c61ca; 
   box-shadow: 0px 0px 3px #8c61ca; 
   height: 100px; margin-left: 45px; 
   margin-top: 65px; 
   width: 275px; 
   padding:5px; 
   overflow: auto;
}

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

Добавляем текст (с отступом от феи) и готово:

Свойство DISPLAY: задаем отображение элементов
При создании каких-либо нестандартных элементов, вам понадобится внимательно изучить CSS-свойство display.
чем оно так необходимо и полезно? дело в том, что по правилам HTML теги влияют на положения элементов: например, если текст вставлен через параграф (<p>текст1</p> <p>текст2</p>), то он обязательно будет переноситься на следующую строку. С помощью свойства display можно менять эти правила, влиять на положение элементов.

Значения свойства display
(точные определения, взяты с HTML-book, ниже будут более понятные примеры и расшифровки)

block - Элемент показывается как блочный. Применение этого значения для встроенных элементов, например тега <span>, заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого.
                   
inline - Элемент отображается как встроенный. Использование блочных тегов, таких как <div> и <p>, автоматически создает перенос и показывает содержимое этих тегов с новой строки. Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент.
                   
inline-block - Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде тега <img>). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный.

inline-table - Определяет, что элемент является таблицей как при использовании тега <table>, но при этом таблица является встроенным элементом и происходит ее обтекание другими элементами, например, текстом.

list-item - Элемент выводится как блочный и добавляется маркер списка.

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

run-in - Устанавливает элемент как блочный или встроенный в зависимости от контекста.

table - Определяет, что элемент является блочной таблицей подобно использованию тега <table>.

table-caption - Задает заголовок таблицы подобно применению тега <caption>.

table-cell - Указывает, что элемент представляет собой ячейку таблицы (тег <td> или <th>).

table-column - Назначает элемент колонкой таблицы, словно был добавлен тег <col>.

table-column-group - Определяет, что элемент является группой одной или более колонок таблицы, как при использовании тега <colgroup>.

table-footer-group - Используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы. По своему действию сходно с работой тега <tfoot>.

table-header-group - Элемент предназначен для хранения одной или нескольких строк ячеек, которые представлены вверху таблицы. По своему действию сходно с работой тега <thead>.

table-row - Элемент отображается как строка таблицы (тег <tr>).

table-row-group - Создает структурный блок, состоящий из нескольких строк таблицы аналогично действию тега <tbody>.

Наглядные примеры и наиболее популярные применения свойства Display

#элемент {display: none;}
вот он, вот он - ответ на ваши бесконечные вопросы "как убрать вот это? как убрать вот то?"
если у вас нет доступа к шаблону сайта/форума, элемент можно заставить "исчезнуть" - находим нужный селектор и убираем его через CSS.

#элемент {display: block;}
этот тег заставляет элемент вести себя как контейнер: все элементы, которые стоят рядом, переносятся на следующую строчку; блочному элементу всегда можно задать ширину, высоту и тому подобные характеристики.

#элемент {display: inline;}
это свойство заставляет элемент(ы) отображаться в строчку. чаше всего употребляется в горизонтальных меню:

#элемент {display: inline-block;}
Что делать, если нам нужно, чтоб элемент вел себя как контейнер (ему можно было бы задать ширину, высоту), но при этом, чтоб элемент не переносил на другие строчки своих соседей? тут нас спасает значение inline-block

значения table
эти значения могут позволить превратить в табличку все то, что таблицей не является.

Применение свойства DISPLAY на примере таблицы
В соседней от CSS3 контейнера ячейке, нам нужно разместить красивые контейнеры для каких-нибудь важных ссылок:

сначала назначаем ячейки ID  и задаем ее размеры

Теперь сделаем каждую ссылку с отдельном div-контейнере:

попробуем их стилизовать:

#link1, #link2, #link3 {background: #000000;
border-radius: 10px 10px 0 0;
box-shadow: 0 0 3px #8C61CA;
text-align: center;
}

добавим ширину и высоту, чтоб они не растягивались:

#link1, #link2, #link3 {background: #000000;
border-radius: 10px 10px 0 0;
box-shadow: 0 0 3px #8C61CA;
text-align: center;
height: 50px;
width: 135px;
}

получается беда: ссылки все равно идут друг под другом (потому что мы поместили их в div-блоки)
заставим их стоять в ряд, добавив display:inline;

#link1, #link2, #link3 {background: #000000;
border-radius: 10px 10px 0 0;
box-shadow: 0 0 3px #8C61CA;
text-align: center;
height: 50px;
width: 135px;
display:inline;
}

опять не то. как видно на скрине, перестали работать ширина и высота.
значит, нам нужно заставить элементы быть одновременно блочными, но при этом стоять в линию. Поправзяем inline на inline-block

#link1, #link2, #link3 {background: #000000;
border-radius: 10px 10px 0 0;
box-shadow: 0 0 3px #8C61CA;
text-align: center;
height: 50px;
width: 135px;
display: inline-block;
}

это именно то, что и было на макете. осталось только подвинуть элемент с помощью свойства margin

#link1, #link2, #link3 {background: #000000;
border-radius: 10px 10px 0 0;
box-shadow: 0 0 3px #8C61CA;
text-align: center;
height: 50px;
width: 135px;
display: inline-block;
margin: 34px 3px 3px;
}

Красивые заголовки и шрифты

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

Как работают шрифты в CSS (свойство FONT)
Названия разных шрифтов в CSS вставляются с помощью свойства font-family:

Список шрифтов может включать одно или несколько названий, разделенных запятой.
Если в названии шрифта есть пробелы, то согласно правилам CSS, он записывается в одинарных кавычках (обратите внимание на написание шрифта Times New Roman в коде).
Как это работает.
Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берется следующее имя из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность, что хотя бы один из них будет обнаружен на клиентском компьютере.
Таким образом, последовательность шрифтов лучше начинать с экзотических типов и заканчивать обобщенным именем, которое задает вид начертания.
Внимание! Когда вы пытаетесь уставить на форум какой-то неимоверно красивый шрифт, поставленный на ваш компьютер, это не значит, что у ваших пользователей он будет отображаться. Он может отображаться ТОЛЬКО у тех, кто скачают его и установят на компьютер.

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

Красивые заголовки с помощью Google Web Fonts
Не смотря на многочисленные недостатки картинок-заголовок, здравый смысл все равно будет повержен одним простым аргументом: "хочу что было красиво". Поэтому стоит предложить альтернативу.
Существует возможность импортировать шрифты с внешних ресурсов. Таким образом, грузиться они будут не с компьютера пользователя, а с какого-либо сайта. Один из таких ресурсов - Google Web Fonts

Выбираем язык шрифта:

Выбираем шрифт и нажимаем кнопку Quick-use:

Под предпросмотром шрифта надо еще раз отметить использование Кириллицы:

Вставляем код себе на сайт/форум:

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

На примере названия форума:

в HTML-вверх код Google Web Fonts

<link href='http://fonts.googleapis.com/css?family=Marck+Script&subset=latin,cyrillic' rel='stylesheet' type='text/css'>

В CSS стиль заголовка:

#pun-title h1 {display: block;  font-family: 'Marck Script',cursive; height: auto; padding: 0 0 0 176px; position: absolute; top: 76px;}
#pun-title h1 span {color: #E25DB3; font-size: 2.1em; text-shadow: 1px 1px 2px #9670CE;}

Внимание! Недостатки Google Web Fonts:
Во-первых, на данный момент, не работает в Opera.
Во-вторых, хоть шрифт грузиться быстрее тонны картинок, но все равно грузится.
Ничего легче и приятней шрифтов, которые грузятся с компьютера пользователя, быть не может.

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

Код таблицы с заголовками
Так как в таблице дальше не используется ничего из того, о чем еще не говорилось выше, стоит сразу привести ее код в качестве примера использования Google Web Fonts

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

<p style='font-family:Arial;'>Демонстрация шрифта Arial.</p> 
<p style='font-family:"Arial Black";'>Демонстрация шрифта Arial Black.</p> 
<p style='font-family:"Comic Sans MS";'>Демонстрация шрифта Comic Sans MS.</p> 
<p style='font-family:"Courier New";'>Демонстрация шрифта Courier New.</p>
<p style='font-family:Georgia;'>Демонстрация шрифта Georgia.</p>
<p style='font-family:Impact;'> Демонстрация шрифта Impact.</p>
<p style='font-family:"Times New Roman";'>Демонстрация шрифта Times New Roman.</p>
<p style='font-family:"Trebuchet MS";'>Демонстрация шрифта Trebuchet MS.</p>
<p style='font-family:Verdana;'>Демонстрация шрифта Verdana.</p>

>>> ПОСМОТРЕТЬ ДЕМО <<<

font-style:italic;

<p style='font-family:Arial;font-style:italic;'>Демонстрация шрифта Arial.</p> 
<p style='font-family:"Arial Black";font-style:italic;'>Демонстрация шрифта Arial Black.</p> 
<p style='font-family:"Comic Sans MS";font-style:italic;'>Демонстрация шрифта Comic Sans MS.</p> 
<p style='font-family:"Courier New";font-style:italic;'>Демонстрация шрифта Courier New.</p>
<p style='font-family:Georgia;font-style:italic;'>Демонстрация шрифта Georgia.</p>
<p style='font-family:Impact;font-style:italic;'> Демонстрация шрифта Impact.</p>
<p style='font-family:"Times New Roman";font-style:italic;'>Демонстрация шрифта Times New Roman.</p>
<p style='font-family:"Trebuchet MS";font-style:italic;'>Демонстрация шрифта Trebuchet MS.</p>
<p style='font-family:Verdana;font-style:italic;'>Демонстрация шрифта Verdana.</p>

>>> ПОСМОТРЕТЬ ДЕМО <<<

font-weight:bold;

<p style='font-family:Arial;font-weight:bold;'>Демонстрация шрифта Arial.</p> 
<p style='font-family:"Arial Black";font-weight:bold;'>Демонстрация шрифта Arial Black.</p> 
<p style='font-family:"Comic Sans MS";font-weight:bold;'>Демонстрация шрифта Comic Sans MS.</p> 
<p style='font-family:"Courier New";font-weight:bold;'>Демонстрация шрифта Courier New.</p>
<p style='font-family:Georgia;font-weight:bold;'>Демонстрация шрифта Georgia.</p>
<p style='font-family:Impact;font-weight:bold;'> Демонстрация шрифта Impact.</p>
<p style='font-family:"Times New Roman";font-weight:bold;'>Демонстрация шрифта Times New Roman.</p>
<p style='font-family:"Trebuchet MS";font-weight:bold;'>Демонстрация шрифта Trebuchet MS.</p>
<p style='font-family:Verdana;font-weight:bold;'>Демонстрация шрифта Verdana.</p>

>>> ПОСМОТРЕТЬ ДЕМО <<<

font-style:italic; font-weight:bold;

<p style='font-family:Arial;font-style:italic;font-weight:bold;'>Демонстрация шрифта Arial.</p> 
<p style='font-family:"Arial Black";font-style:italic;font-weight:bold;'>Демонстрация шрифта Arial Black.</p> 
<p style='font-family:"Comic Sans MS";font-style:italic;font-weight:bold;'>Демонстрация шрифта Comic Sans MS.</p> 
<p style='font-family:"Courier New";font-style:italic;font-weight:bold;'>Демонстрация шрифта Courier New.</p>
<p style='font-family:Georgia;font-style:italic;font-weight:bold;'>Демонстрация шрифта Georgia.</p>
<p style='font-family:Impact;font-style:italic;font-weight:bold;'> Демонстрация шрифта Impact.</p>
<p style='font-family:"Times New Roman";font-style:italic;font-weight:bold;'>Демонстрация шрифта Times New Roman.</p>
<p style='font-family:"Trebuchet MS";font-style:italic;font-weight:bold;'>Демонстрация шрифта Trebuchet MS.</p>
<p style='font-family:Verdana;font-style:italic;font-weight:bold;'>Демонстрация шрифта Verdana.</p>

>>> ПОСМОТРЕТЬ ДЕМО <<<

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

{зарезервировано}

{зарезервировано}

Лютый
ссылку на форум, пожалуйста

07.12.12 Добавлен трюк "Анимация в дизайне"

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

Но если кому-то кажется, что с трюками еще не закончили - приводите примеры, дополним.