Как сделать дизайн форума? Все о создании стиля на примере Mybb форума

Страница: 1 2 3 … 6 »

Сообщений 1 страница 10 из 54

Поделиться112.04.12 07:31

Автор: Gerda
крашеный некротехнофил
Последний визит:
Сегодня 08:02
Уважение: +9982

Устарело! новая версия здесь: Как сделать дизайн форума/сайта? Все о создании своего дизайна.

устарело

Уважаемые гости форума! Чтобы коды и навигация статье корректно отображались, зарегистрируйтесь на форуме.
Как создать дизайн?

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

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

КОПИРОВАНИЕ ЭТОЙ СТАТЬИ НА ДРУГИЕ РЕСУРСЫ РАЗРЕШАЕТСЯ ТОЛЬКО ПРИ НАЛИЧИИ ВОТ ТАКОЙ ВОТ НАДПИСИ В САМОМ ВЕРХУ (НАД СТАТЬЕЙ) И БЕЗ УМЕНЬШЕНИЯ РАЗМЕРА ШРИФТА!
Статья предоставлена форумом ForumDesign TS - Дизайн для форумов и техническая поддержка
Автор - Герда
Код:
[align=center]Статья предоставлена форумом [url=http://ForumD.ru/]ForumDesign TS - Дизайн для форумов и техническая поддержка[/url]
Автор - [b]Герда[/b][/align]
Источники информации и ссылки

Сторонние источники
Так сказать, список использованной литературы, который, само собой, заслуживает вашего внимания.

http://lenagold.ru/ - сайт с готовым клипартом (использовано для создания дизайна).
http://artfile.ru/ - на этом сайте выкладываются обои (использовано для создания дизайна).
http://ilovepsd.ru/ - замечательные советы по работе с макетом
http://www.wisdomweb.ru/ - на этом сайте есть отличные учебники по CSS и CSS3 с наглядными примерами
http://htmlbook.ru/ - шпаргалка по тегам HTML и свойствам CSS, всегда в нее подглядываю
http://www.google.com/webfonts - сервис Google для импорта красивых шрифтов на сайты

Внутренние ссылки
Чтобы не копировать сюда все то, о чем уже написано на ForumD.ru, в статье будет приведено масса ссылок на другие разделы и полезную информацию.

Каталог стилей - тут вы можете найти дизайн, по которому создана статья, взять его код, разобрать, собрать, перебрать и сделать с ним все, что угодно. Также имеются другие стили.
Уроки Photoshop - тут вы найдете массу приемов, которые могут вам пригодиться в создании дизайна
Все о photoshop - в этом разделе можно задать вопросы по работе в редакторе photoshop
Новый FAQ по дизайну и CSS - подробное описание шаблона дизайна для MyBB форума
Каталог CSS-кодов - здесь можно найти (или спросить) CSS-коды для дизайна.
Делаем GIF анимацию легче - урок photoshop по работе с форматом GIF
Таблицы в HTML - очень подробно о том, как сделать HTML код таблицы
Заготовки и клипарт для анимации - коллекция заготовок, которая может пригодиться при создании веб-анимации
Оглавление

[html]<a name="ogl"></a>[/html]
[html] - <a href="#1">Создание проекта дизайна</a><br>
     - <a href="#2">Соответствие дизайна тематике</a><br>
     - <a href="#3">Составление проекта дизайна</a><br>
     - <a href="#4">Поиск исходников</a><br>
         - <a href="#4-1">Подборка ссылок</a><br>
         - <a href="#4-2">Несколько правил подборки исходников</a><br>
 - <a href="#5">Создание макета</a><br>
     - <a href="#6">Учимся работать с макетом</a><br>
     - <a href="#7">Создание вспомогательных слоев</a><br>
     - <a href="#8">Создание дизайна</a><br>
         - <a href="#9">Основы колоризации</a><br>
         - <a href="#10">Как делать макет ровным?</a><br>
 - <a href="#11">Верстка дизайна</a><br>
     - <a href="#12">Как работает CSS</a><br>
     - <a href="#13">Инструменты для верстки: FireBug</a><br>
     - <a href="#14">Учимся правильно "резать" макет (правила работы с картинками для WEB)</a><br>
         - <a href="#14-1">Планирование элементов дизайна </a><br>
         - <a href="#14-2">Формат изображений</a><br>
     - <a href="#15">Учимся вставлять фоновые картинки </a><br>
     - <a href="#16">Составляем CSS-код дизайна</a><br>
         - <a href="#16-1">Верстка дизайна на mуbb форуме при помощи FireBug</a><br>
 - <a href="#17">Некоторые трюки</a><br>
     - <a href="#18">Создаем свои элементы HTML</a><br>
         - <a href="#19">Позиционирование в CSS</a><br>
         - <a href="#20">Делаем контейнеры для элементов дизайна</a><br>
         - <a href="#21">Делаем контейнеры для текста</a><br>
     - <a href="#22">Делаем красивые html-таблицы</a><br>
         - <a href="#23">Создание таблицы</a><br>
         - <a href="#24">CSS3: меньше картинок, больше кодов</a><br>
             - <a href="#24-1">BORDER-RADIUS</a><br>
             - <a href="#24-2">BOX-SHADOW</a><br>
             - <a href="#24-3">TEXT-SHADOW</a><br>
         - <a href="#25">CSS3 на примере таблицы</a><br>
         - <a href="#26">Свойство DISPLAY: задаем отображение элементов</a><br>
             - <a href="#26-1">Наглядные примеры и наиболее популярные применения свойства Display</a><br>
             - <a href="#26-2">Применение свойства DISPLAY на примере таблицы</a><br>
     - <a href="#27">Красивые заголовки и шрифты</a><br>
         - <a href="#27-1">Как работают шрифты в CSS (свойство FONT)</a><br>
         - <a href="#27-2">Картинки-заголовки (ДОЛОЙ ЭТУ БЯКУ!)</a> <br>
         - <a href="#27-3">Красивые заголовки с помощью Google Web Fonts</a><br>
         - <a href="#27-4">Безопасные шрифты</a><br>
     - <a href="#28">Анимация в дизайне</a><br>
         - <a href="#28-1">Создание анимации</a><br>
         - <a href="#28-2">Подгоняем анимацию под веб-формат</a><br>
             - <a href="#28-2-1">Размер анимации</a><br>
             - <a href="#28-2-2">Количество кадров</a><br>
             - <a href="#28-2-3">Меняем цикл анимации</a><br>
             - <a href="#28-2-4">Делаем Gif-анимацию легче</a><br>
       - <a href="#28-3">Встраиваем анимацию в дизайн</a><br>
             - <a href="#28-3-1">Используем z-index для порядка отображения элементов страницы</a><br>
             - <a href="#28-3-2">Как убрать прокрутку страницы (свойство overflow)</a>
[/html]
Обновления

23.04.2012 - львиная доля статьи дописана, глава [html]<a href="#12">Как работает CSS</a>[/html] откорректирована
25.10.2012 - увеличено оглавление для лучшей навигации то статье
26.10.2012 - в часть Как делать макет ровным? добавлен пункт "Выравнивание объекта относительно фона"
27.10.2012 - началась работа над трюком "[html]<a href="#28">Анимация в дизайне</a>[/html]", написано о создании анимашек.
29.11.2012 - добавлен пример использования безопасного шрифта в дизайне
07.12.2012 - дописана часть про встраивание анимации в дизайн
08.12.2012 - добавлено видео [html]<a href="#16-1">Верстка дизайна на mуbb форуме при помощи FireBug</a>[/html]

Теги: урок, photoshop, фотошоп, css, дизайн

Отредактировано Герда (17.07.13 22:37)

Discord TrueZlober#1227
Личная тема https://forumd.ru/viewtopic.php?id=7232
Портфолио https://forumd.ru/viewtopic.php?id=3833

Поделиться212.04.12 07:32

Автор: Gerda
крашеный некротехнофил
Последний визит:
Сегодня 08:02
Уважение: +9982

Устарело! новая версия здесь: Как сделать дизайн форума/сайта? Все о создании своего дизайна.

устарело

Создание проекта дизайна [html]<a name="1"></a>[/html]
Прежде, чем открывать фотошоп, куда-то лезть, что-то пытаться сделать, надо хорошо все обдумать.
Дизайн начинается не в фотошопе и не на страницах интернета, а у вас в воображении. Поэтому сначала дизайн продумывают, а потом уже делают.

[html]<a href="#ogl">К оглавлению</a>[/html]

Соответствие дизайна тематике [html]<a name="2"></a>[/html]
Как ни странно, несоответствие тематике встречается часто. Причем не на сайтах и форумах, использующие стандартный дизайн, а именно на самых "креативных". Особенно у тех, у которых есть средства и возможность, а главное, время менять дизайн часто.

Вот подборка примеров с первых восьми страниц каталога http://webtalk.ru/ (форумы со стандартным дизайном пропускались)
Тематика форума - фотошоп-уроки.
Кто этот мужик в шапке? Какое он имеет отношение к форуму?
Тематика форума - ВСЕ ОБО ВСЕМ. (ключи к играм, общение и т.д. и т.п.)
А дизайн на тему "Сумерки". Зачем? ведь куча форумов спокойно и со стандартным дизайном живут
Угадайте, какой сюжет у этой ролевой игры?
Вы не поверите! Эта ролевая на тему продолжения сумеречной саги
Мне лично кажется, что эта проблема возникает из-за того, что проект дизайна у многих начинается не с чистого листа бумаги, а с фотошопа или подбора клипарта. Например, нашли в интернете какую-то классную текстурку, влюбились в эту картинку по уши и теперь считают необходимым вставить ее в дизайн.
На своем опыте я знаю, что если попытаться сразу рисовать макет в фотошопе, то сталкиваешься с кучей проблем из-за отсутствие целостной картины. Например, шапку нарисовать получается, а фон идет уже совсем в другом стиле.

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

Для примера (чтоб было, на чем показывать) я беру себе тему "Фентези" (буду делать стиль для свободного каталога).

[html]<a href="#ogl">К оглавлению</a>[/html]

Составление проекта дизайна [html]<a name="3"></a>[/html]
Когда вы определились, к какой тематике относится ваш сайт, необходимо определиться с тем, как должен выглядеть ваш дизайн.
На этом этапе надо определить для себя не цвет, не картинки, а форму.
Нужно решить, какие у вас будут функциональные блоки, какие заголовки, какая шапка. Делается это для того, чтобы заранее определиться с тем, что вы делаете, и какой формы оно должно быть, а не решать это уже в процессе. В противном случае ваши идеи могут не сочетаться друг с другом, что-то придется менять, и вы рискуете проделать много лишней работы.
Составлять проект дизайна лучше не на компьютере, а на листке бумаги. Уберите все лишнее с глаз, выключите компьютер и схематически нарисуйте себе макет на бумаге. Не отвлекайтесь от этого процесса и не лазьте по сайтам в поисках вдохновения. Все, что вам нужно для хорошего дизайна, у вас уже есть в голове. Главное - отталкиваться от принципа, что возможно ВСЕ.

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

Расшифровка моих каракулей
Расшифровка моих каракулей:

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

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

[html]<a href="#ogl">К оглавлению</a>[/html]

Поиск исходников [html]<a name="4"></a>[/html]
Самые профессиональные супер-пупер дизайнеры, конечно, ничего не ищут, а рисуют сами. Но если до художника вам далеко, пользоваться сайтами с исходниками - не грех, все начинающие дизайнеры так делают, поэтому следует выдать напутствие, как это делать правильно.

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

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

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

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

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

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

Несколько правил подборки исходников [html]<a name="4-2"></a>[/html]

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

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

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

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

[html]<a href="#ogl">К оглавлению</a>[/html]

Отредактировано Герда (16.06.13 19:52)

Discord TrueZlober#1227
Личная тема https://forumd.ru/viewtopic.php?id=7232
Портфолио https://forumd.ru/viewtopic.php?id=3833

Поделиться312.04.12 07:35

Автор: Gerda
крашеный некротехнофил
Последний визит:
Сегодня 08:02
Уважение: +9982

Устарело! новая версия здесь: Как сделать дизайн форума/сайта? Все о создании своего дизайна.

устарело

Создание макета[html]<a name="5"></a>[/html]
Теперь, когда вы провели подготовительный этап работы над дизайном, необходимо узнать (а если знаете, то уяснить и не забывать) одно золотое правило:
Профессиональный дизайн делается ("рисуется") не по частям, а целиком.
Не нужно делать отдельно шапки, отдельно иконки. Все делается сразу и вместе в одном макете. Это позволит вам видеть, подходят ли элементы друг к другу, нет ли сильного контраста между фоном и форумом и прочие важные вещи.
В этой части мы подробно разберем правила работы с макетом и то, как, собственно, создавать свой макет.

[html]<a href="#ogl">К оглавлению</a>[/html]

Учимся работать с макетом[html]<a name="6"></a>[/html]
Для начала потребуется понять и использовать несколько простых правил, без которых ваш макет превратится с кашу, где даже вы не сможете разобраться.
(в этой части использовались материалы сайта http://ilovepsd.ru/)

1. Используйте папки.
Все слои, которые относятся к определенному элементу, сохраняйте в отдельную папку. Чтобы создать папку, нужно кликнуть на указанную иконку, а потом перетащить туда слои:
скриншот
2. Лучше еще и "раскрашивать" папки.
Таким образом вы визуально будете отличать один элемент от другого, а не всматриваться в название.

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

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

4. Не склеивайте слои без необходимости.
Всегда может получиться так, что вам или пользователям сайта потребуется что-то убрать или заменить. Если ваш макет состоит из отдельных слоев, то это может воплотиться в два-три клика, и не потребуется рисовать что-либо с нуля.
Если вам все же понадобилось что-то склеить в один слой, поступайте одним из двух методов:
1 способ - скопируйте все слои, которые намереваетесь склеить, вынесете в отдельную папку и сделайте ее невидимой. Таким образом у вас останутся все исходные элементы
2 способ - сохраните текущий макет с учетом версии. Например "design-1", следующая версия со склеенными слоями будет называться "design-2"

5. Не разводите "клонов".
Если вы рисуете дизайн постранично, не надо копировать шапку и подвал для каждой страницы. Создавайте их в виде глобальных блоков.
Правильно
Не правильно
[html]<a href="#ogl">К оглавлению</a>[/html]

Создание вспомогательных слоев[html]<a name="7"></a>[/html]
При работе с макетом надо представлять пространство веб-страницы, верстку дизайна, а самое главное - вписываться под разные разрешения экрана.
Мне в этом помогает создание вспомогательных слоев.
Разрешения экрана
Во-первых, надо запомнить: Ваш монитор и то, что вы видите на экране, не является истинной в последней инстанции!
У других пользователей разрешение экрана другое. Оно может быть больше вашего или меньше.
Ваша задача - учитывать это еще при создании макета, а не только при верстке.

(использовались материалы акции "дизайн и критика". выбраны именно те дизайны, которые нравятся пользователям)

При разрешении 1500+ обрывалась шапка

шапка плавно переходит в фон

при разрешении 1400+ обрывался фон

фон рассчитан на высокое разрешение экрана
Чтобы заранее не создавать себе проблем с версткой, создайте сначала вспомогательные слои под разные разрешения.
Основные разрешения - 1920*1200 (телеэкран), 1600*1200, 1400*900, 1280*800, 1024*768
Создавайте макет шириной в самое большое разрешение экрана:

Высота может быть любой. Можно поставить 1200, но если будет не хватать при создании элементов места (например, если вы будете отрисовывать высокую шапку и высокую область копирайта), то всегда можно просто увеличить (или уменьшить) рабочую область макета: Image > Canvas Size (Изображение > размер холста) - Alt+Ctrl+C

Выбираете единицу изменения (удобней всего - пиксели), выбираете, в какую сторону макет будет увеличиваться (где будет добавляться новое пространство), и остается только задать новый размер макета (помните, что писать надо не то количество, на которое собираетесь увеличивать/уменьшать пространство, а общий размер, который должен получиться после увеличения/уменьшения).
После создания большой рабочей области, создаем другие размеры с разрешением.
Создаем новый файл размером 1600*1200
Выбираем цвет и заливаем пространство (я выбрала синий).

Затем перетащите слой заливки на макет:

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

Создаем отдельный файл с боковой полоской. Ширина посчитана, а высота должна соответствовать высоте макета:

Затем перетащите боковушку на макет и поставьте ее слева. Затем скопируйте слой с боковой полоской. Для этого можно просто перетащить его мышкой на кнопку "новый слой" (слои находятся обычно на панели слоев слева; если у вас такой панели нет включите ее: Window > Layers/окно > слои):

Расположите вторую полоску справа. Остается только подвинуть середину так, чтоб она не наезжала и не вылезала за боковые полоски. Делать это надо при 100% отображении макета (если оно будет меньше, вы можете допустить пробел в 1-3 px между серединой и одной из полосок).
пользуйтесь лупой для масштабирования макета:

теперь объедените слои в одну группу (чтобы можно было их в любой момент отключить) и поставьте прозрачность на группу (это позволит вам просматривать область экрана поверх элементов дизайна)

То же самое повторите с остальными разрешениями экрана. Лучше будет выбирать разные цвета для разных разрешений. Цвета выбирайте, как вам будет удобней, но обязательно яркие (чтоб в полупрозрачном состоянии их было видно).

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

Часто делаете макеты или планируете часто делать макеты? Тогда СОХРАНИТЕ файл с вспомогательными слоями разрешений экрана как psd-шаблон, чтобы не повторять эту процедуру каждый раз.

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

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

[html]<a href="#ogl">К оглавлению</a>[/html]

Создание дизайна[html]<a name="8"></a>[/html]
->

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

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

Очень хотелось записать видео, как это делалось, но работа занимает около 40 минут, памяти проги не хватает. Так что, сделаю скриншоты по этапам работы:
Свернутый текст
-> ->
-> ->
-> ->
-> ->
-> ->
-> ->
-> ->
-> ->

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

[html]<a href="#ogl">К оглавлению</a>[/html]

Основы колоризации [html]<a name="9"></a>[/html]
Выше (при подборе исходников) уже говорилось о том, что цвет картинки не имеет значения. Вкратце о возможностях замены цвета изображения.

1. Заменить цвет

Инструментарий по замене цвета находится в Изображение > Коррекция > Заменить цвет (Image > Adjustment > Replace Color)

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

2. Полная цветокоррекция

Когда заменить цвет нужно не частично, а весь целиком, вам подойдет инструментарий Изображение > Коррекция > цветовой тон/насыщенность (Image > Adjustment > Hue/Saturation), быстрые клавиши - Ctrl+U

Ползунок Цветовой тон (Hue) задает цвет, в который нужно перекрасить исходник
Ползунок Контраст (Saturation) делает цвет более блеклым или ярким. (Например, когда хотите превратить золото в серебро, цвет не важен, зато контраст надо сдвинуть влево - цвет исчезнет, станет серым.)
Ползунок Свет (Lightness) делает картинку чернее/белее (не могу назвать этот эффект "темнее/светлее", в стандартной сборке без плагинов этот эффект больше походит на добавление поверх черного и белого, чем на световую цветокоррекцию)
Вы можете сохранить свою цветокоррекцию с помощью кнопки Save и загрузить позднее с помощью кнопки Load (например, если такую же цветокоррекцию надо произвести с еще несколькими другими картинками).
Кнопочка Колоризовать (Colorize) позволяет вам сделать автоподбор колоризации к выбранному цвету (отмечено стрелочками) - выберите заранее цвет и нажмите галочку "колоризовать", при необходимости доделайте колоризацию с помощью ползунков.
>

[html]<a href="#ogl">К оглавлению</a>[/html]

Как делать макет ровным?[html]<a name="10"></a>[/html]
Другая большая проблема для новичков - это выравнивание деталей относительно друг друга. Всплывает эта проблема на стадии вертки - выясняется, что фон торчит из-под "тела", а шапка получается меньшего размера, чем сам форум.
Первый шаг навстречу решению этой проблемы - делать макет целиком, 50% проблем (как, например, шапка меньше размера страницы) будет видно прямо на макете.
Другое дело - как "отзеркаливать" элементы относительно друг друга? Как сделать так, чтобы правая половина фона торчала настолько же, как и левая? Как сделать боковые украшения на шапке симметричными?

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

С помощью этих полупрозрачных полосок можно двигать элементы так, чтобы они находились на одинаковом расстоянии.
Для оптимального передвижения вам понадобится выбрать инструмент и запомнить сочетания клавиш:
Shift + стрелочки - двигает слой сразу на несколько пикселей;
Ctrl + стрелочки - двигает слой на 1 пиксель.

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

Затем остается просто создать новый слой "Body", залить его текстуркой или цветом, наложить какие угодно эффекты для боковых границ.

2. Линейка и направляющие.

Второй ваш помощник - это линейка, вызывается/убирается сочетанием клавиш Ctrl+R.
Сама по себе она почти бесполезна - когда вы что-то пытаетесь выравнивать по ней, вы все равно делаете на глазок. Для точности необходимо пользоваться направляющими линиями.
Чтобы создать направляющую, кликните по вертикальной или горизонтальной шкале (в зависимости от того, какая линия нужна) и потяните линию в нужное место.
Например, сделали боковые украшения справа - ставим направляющую в конец правых декораций. Затем смотрим на линейку и по направляющей считаем расстояние от линии до исходной точки. Потом отсчитываем по линейке такое же расстояние слева и ставим в нужном месте линию.

3. Выравнивание объекта относительно фона.

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

Выбираем инструмент "движения" и видим на верхней панеле следующие кнопки:

Кнопки не активны. Чтобы они заработали, с помощью CTRL кликаем на слой, который надо выравнять, и на слой, относительно которого будем равнять:

Теперь можно навести курсор и прочитать, что делают кнопки (в принципе, и по иконкам кнопок понятно назначение). Например, выравняем квадрат по центру:

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

[html]<a href="#ogl">К оглавлению</a>[/html]

Отредактировано Герда (16.06.13 21:31)

Discord TrueZlober#1227
Личная тема https://forumd.ru/viewtopic.php?id=7232
Портфолио https://forumd.ru/viewtopic.php?id=3833

Поделиться412.04.12 07:41

Автор: Gerda
крашеный некротехнофил
Последний визит:
Сегодня 08:02
Уважение: +9982

Устарело! новая версия здесь: Как сделать дизайн форума/сайта? Все о создании своего дизайна.

устарело

Верстка дизайна[html]<a name="11"></a>[/html]
В профессиональном дизайне работа над макетом и над версткой осуществляется, по-хорошему, разными людьми. Но если вы сами себе дизайн делаете, вы должны быть одновременно и поваром, и пекарем, и завхозом, так что, призываю вас постоянно и непрерывно изучать css.
В этой части статьи вы узнаете, что делать с макетом для того, чтоб он превратился в дизайн.

[html]<a href="#ogl">К оглавлению</a>[/html]

Как работает CSS[html]<a name="12"></a>[/html]
Что, по сути, есть изменение дизайна? Это изменение графической составляющей форума и интерфейса.
Любые форумы и сайты - это таблицы с текстом и ссылками. А дизайн css позволяет этим таблицам принять удобный вид для чтения и восприятия информации. Например: на форумах визуально разделены разные "блоки" - разные посты отделяются визуальными границами, страница тем отделяется от общего фона сраницы, а информация об авторе стоит справа/слева от сообщений - все это заслуга CSS.
Таким образом, у редактирования дизайна есть две миссии: улучшение интерфейса и наведение отличительной красоты. Однако дизайн css не влияет на содержимое форума: текст сообщений, названия разделов, функционал форума через стиль не поправить.
так выглядит форум без кодов CSS
так выглядит форум со стандартным дизайном
так выглядит форум с индивидуальным диайном
Верстка дизайна представляет собой прописывание кодов для конкретных элементов.
В любом движке любого сайта и форума для этого можно действовать двумя способами - либо прописывать коды в head с тегами <style>, либо открыть стандартный шаблон и изменять его.
На примере mybb форума: вставлять данные коды с тегами <style> в Администрирование > Настройки > HTML-верх или можно редактировать стандартный дизайн-шаблон через Администрирование > Стиль.

Чтобы научиться писать сами коды, не надо их зубрить, нужно просто понять, как они работают, и запомнить написание кодов (выучить синтаксис кодов).
Любой css-код состоит из СЕЛЕКТОРА, СВОЙСТВА и ЗНАЧЕНИЯ.
СЕЛЕКТОР (от англ. select - выбирать; selector - "отборщик") - это "имя" элемента, который меняется. Мы указываем (выбираем), что будет изменено (например: категории форума, форма ответа, поля профиля и т.п.).
селекторы не нужно выучивать наизусть и знать, они на каждом движке свои. Это уникальные идентификаторы и классы элементов, которые можно "подглядеть" в исходном коде.
Например, вот так выглядит HTML код шапки mybb форума (красное - идентификаторы, синее - классы):
<div id="pun-title" class="section">
<table id="title-logo-table" cellspacing="0">
<tbody id="title-logo-tbody">
<tr id="title-logo-tr">
<td id="title-logo-tdl" class="title-logo-tdl">
<h1 class="title-logo">
<span>ForumDesign TS - Дизайн для форумов и техническая поддержка</span>
</h1>
</td>
<td id="title-logo-tdr" class="title-logo-tdr">
<img width="468" height="60" border="0" src="http://mybb.ru/i/blank.gif">
</td>
</tr>
</tbody>
</table>
</div>
в коде css идентификаторы указываются решеточкой (#), а классы - точкой (.). Например:
#pun-title {тут будет код}
.title-logo-tdl {тут будет код}
селекторов может быть не один, а сразу несколько. Когда нужно задать одинаковые свойства сразу нескольким элементам html-кода, нужно перечислить идентификаторы и классы через запятую, например:
#title-logo-table, #title-logo-tr, #title-logo-tdl {тут будет код}
СВОЙСТВО (так же называется "параметр") - это то, что именно будет меняться в выбранном (с помощью селектора) элементе. Например: фон, размер, границы и т.п.
ЗНАЧЕНИЕ (так же называется "аргумент") - это какие именно изменения произойдут с выбранным свойством. Например: указываем цвет, ссылку на фон, размер в пикселях или процентах и т.п.
В отличие от селекторов, которые можно посмотреть в исходном коде сайта, СВОЙСТВА и ЗНАЧЕНИЯ нужно либо знать, либо подглядывать в специальных справочниках по мере необходимости.

Свойства и значения пишутся парами внутри фигурных скобок ({}). Свойство и значение - неразлучная пара: не бывает такого, что указано только свойство без значения, они всегда идут вместе.
После свойства ставится двоеточие и пишется аргумент:
#селектор {свойство: значение;}
пример:
#pun-navlinks {backgroud-color: #FF0000;}
расшифровка:
меню навигации {цвет фона: красный;}
Парочек свойство: значение; у селектора может быть сразу несколько, указываются они через точку с запятой (;)
#селектор {свойство: значение;
свойство: значение;
свойство: значение;
свойство: значение;
свойство: значение;
....
}
Если не соблюдать вышеизложенные правила пунктуации в CSS-кодах, они не будут работать.
о селекторах mybb-форума можно почитать здесь: Новый FAQ по дизайну и CSS
о свойствах и значениях можно почитать в разделе CSS-кодов

[html]<a href="#ogl">К оглавлению</a>[/html]

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

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

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

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

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

[html]<a href="#ogl">К оглавлению</a>[/html]

Учимся правильно резать макет[html]<a name="14"></a>[/html]

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

Планирование элементов дизайна [html]<a name="14-1"></a>[/html]
Необходимо сориентироваться и экономно распланировать расположение элементов дизайна.

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

+

+
Формат изображений [html]<a name="14-2"></a>[/html]
Первое, о чем необходимо думать при создании элементов дизайна - это их вес, который напрямую зависит от формата.
Пример - одна и та же картинка в разных форматах:
GIF - 36,92 Кб
PNG - 100,88 Кб
JPG - 17,96 Кб
- GIF следует использовать для анимации
Если картинка не анимированная, то формат нужно использовать другой, т.к. PNG и JPG картинки получаются значительно легче и качественней.
Если вы добавляете анимированный элемент дизайна, старайтесь уменьшить вес анимации. Подробнее об этом можно прочесть в уроке photoshop делаем GIF анимацию легче

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

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

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

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

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

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

[html]<a href="#ogl">К оглавлению</a>[/html]

Учимся вставлять фоновые картинки[html]<a name="15"></a>[/html]

Для того, чтоб успешно вставлять элементы дизайна на сайт, нужно всего лишь освоить свойство 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-кодов, описанных выше):
селектор {background: цвет картинка повторение фиксация расположение;}
Пример:
#pun {background: transparent url("/files/0007/e3/f7/87936.png") no-repeat fixed right bottom;}
расшифровка:
селектор {фон: прозрачный с вот такой картинкой: https://forumstatic.ru/files/0007/e3/f7/87936.png не дублировать фон зафиксировать фон разместить внизу справа;}

[html]<a href="#ogl">К оглавлению</a>[/html]

Составляем css-код дизайна[html]<a name="16"></a>[/html]
-> ->

По прочтении всего, изложенного выше, с составлением кодов может быть только одна проблема - как вычислить нужный селектор?
Ведь любые свойства и значения 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 минут.
коды
html верх:
Код:
<style>
html {background: url("http://uploads.ru/i/c/o/H/coHy9.jpg") repeat scroll 0 0 #000000;}
body {background: transparent url("http://uploads.ru/i/M/I/V/MIVB8.jpg") no-repeat scroll bottom center;}
#pun_wrap {background: transparent url("http://uploads.ru/i/d/q/J/dqJp6.png") no-repeat scroll top center;}
#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;}
.punbb { float: left; height: auto; margin: 0 40px; width: auto;}
#logoup {background: url("http://uploads.ru/i/k/Q/Y/kQY6w.png") no-repeat scroll center top transparent; height: 383px; margin: 0 -206px;}
#my_text {color: #FFFFFF; height: 134px; margin-left: 420px;  overflow: auto; position: absolute; top: 106px; width: 238px;}
#pun-title {background: transparent; border: none;}
#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;}
#pun-title td.title-logo-tdl, #pun-title table, #pun-title td.title-logo-tdr {width: auto; height: auto}
#pun-title td.title-logo-tdr {margin-left: -50px; position: absolute; top: 3px;}
#pun-navlinks {position: absolute; border: none; background: transparent; width: 840px; top: 306px;}
#pun-ulinks {position: absolute; border: none; background: transparent; width: 840px; top: 350px;}
#pun-navlinks .container, #pun-ulinks .container {border: none; background: transparent; text-align: center;}
#pun-navlinks .container {font-weight: bold;}
#pun-navlinks a, #pun-ulinks a, .punbb a, .punbb a:link, .punbb a:visited {color: #afa7ca;} #pun-navlinks a:hover, #pun-ulinks a:hover, .punbb a:hover {color: #9783db;}
#pun-ulinks li, #pun-ulinks li a {border: none;}
.punbb .divider {border-color: #858585 #333333 #333333;}
#pun-status, #pun-status .container, #pun-crumbs1, #pun-crumbs1 p.container, #pun-crumbs2, #pun-crumbs2 p.container, #pun-about, #pun-about .container {border: none; background: none; color: #b4b4b4;}
#pun-crumbs1 p.container {padding: 1em 1em 0;}
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2  {background: transparent url(http://uploads.ru/i/Q/e/8/Qe8ij.png) no-repeat top center; margin: 20px -20px 0; height: 34px; border: none; text-align:center;}
.punbb .section h2, #pun-main h1, #pun-main h2, #pun-stats h2, #pun-debug h2 {border: none;}
.punbb h2 span {font-weight: bold; position: relative;  top: 10px; color: #afa7ca;}
#pun-stats .container, .punbb .main .container, .punbb .post .container, .punbb .post h3, .punbb-admin #pun-admain .adcontainer {background: #000; margin: 0 12px;  -moz-border-radius: 0 0 10px 10px;  -webkit-border-radius: 0 0 10px 10px;  -khtml-border-radius: 0 0 10px 10px;  border-radius: 0 0 10px 10px; border-color: #636363; border-top: medium none;}
.punbb .section, .punbb .forum, .punbb .formal, .punbb .modmenu, .punbb .info, .punbb .category, .punbb .post {border: none;}
.punbb .post h3 span, #viewprofile li, #setmods dl {color: #b4b4b4; background: #000;}
.punbb th {text-align: center; border: none; background: transparent; color: #b4b4b4;}
.punbb .section .container, .punbb .post-body, .punbb .post-links, .punbb td.tc2, .punbb td.tc3, .punbb .formal fieldset .post-box, #viewprofile li strong, #viewprofile li div, #setmods dd, .punbb .info-box, .punbb #pun-main .info-box .legend {background: #000; color: #b4b4b4;}
.punbb td, .punbb fieldset, #viewprofile ul, #profilenav ul, .punbb .post .post-body, .punbb .post h3 span, .post-links ul, .post-links, .usertable table {border-color: #2f2f2f;}
.punbb .main th {border-color: #2f2f2f;}
.punbb .main .container, .punbb .post .container, .punbb .post h3, .punbb-admin #pun-admain .adcontainer {color: #B4B4B4;}
li#onlinelist {border: none;}
li#onlinelist div {border-color: #636363;}
.punbb tbody.hasicon td.tcl {padding-left: 1em;}
.punbb table Div.icon {float: left; display: block; width: 80px; height: 70px; border-style: none; background-image: url(http://uploads.ru/i/5/8/U/58Uro.jpg);  background-repeat: no-repeat; position: relative; padding-right: 5px; margin-left: -2px;}
TR.inew Div.icon {background-image : url(http://uploads.ru/i/s/l/1/sl1mb.jpg); background-repeat: no-repeat; }
TR.isticky Div.icon {background-image : url(http://uploads.ru/i/2/Y/M/2YMKl.jpg); height: 78px; background-repeat: no-repeat; }
TR.iclosed Div.icon {background-image : url(http://uploads.ru/i/D/0/e/D0eGk.jpg); background-repeat: no-repeat; }
#html-footer .container {border: none; background: transparent;}
#html-footer {margin-bottom: 0;}
#logobottom {background: url("http://uploads.ru/i/R/M/G/RMGjZ.png") no-repeat scroll center top transparent; height: 178px; margin: 0 -56px;}
#my_copyright {bottom: 64px; height: 86px; margin-left: 260px;  position: absolute;  width: 426px; color: #E25DB3; font-size: 2.1em; text-shadow: 1px 1px 2px #9670CE; font-family: 'Marck Script',cursive;}
#FD_copyright {bottom: 12px; margin-left: 244px; position: absolute; width: 460px;}
</style>

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

Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>Тут будет ваш текст <br/>

</div></div>
html низ
Код:
<div id="logobottom"><div id="my_copyright">

<center>Тут любой текст вашего копирайта.</center>

</div><div id="FD_copyright"><center> Стиль сделан В рамках проекта <a href="https://forumd.ru/">ForumDesign TS</a><br/> <a href="https://forumd.ru/viewforum.php?id=97">Выбери свой стиль</a> | <a href="https://forumd.ru/viewtopic.php?id=3073">Как создать дизайн?</a> | <a href="https://forumd.ru/viewforum.php?id=5">Дизайн на заказ</a></center></div></div>
[html]<a href="#ogl">К оглавлению</a>[/html]

Верстка дизайна на mуbb форуме при помощи FireBug [html]<a name="16-1"></a>[/html]

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

[html]<a href="#ogl">К оглавлению</a>[/html]

Отредактировано Герда (16.06.13 20:45)

Discord TrueZlober#1227
Личная тема https://forumd.ru/viewtopic.php?id=7232
Портфолио https://forumd.ru/viewtopic.php?id=3833

Поделиться513.04.12 18:32

Автор: Gerda
крашеный некротехнофил
Последний визит:
Сегодня 08:02
Уважение: +9982

Устарело! новая версия здесь: Как сделать дизайн форума/сайта? Все о создании своего дизайна.

устарело

Некоторые трюки[html]<a name="17"></a>[/html]
В этой части статьи вы научитесь двум вещам, без которых невозможен хороший дизайн:
1. Оригинальность
когда все коды и все фишки стянуты со стандартных уроков или из каталогов готовых кодов, дизайн получается клоном еще сотни таких же. в начале статьи вас уже просили закрыть интернет и включить воображение, а в этой части статьи вы на практике увидите, что с помощью CSS и HTML возможно почти все.

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

[html]<a href="#ogl">К оглавлению</a>[/html]

Создаем свои элементы HTML (контейнеры для текста, контейнеры для элементов дизайна)[html]<a name="18"></a>[/html]
В этом уроке стоит обратить ваше внимание на шапку из дизайна-примера:

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

[html]<a href="#ogl">К оглавлению</a>[/html]

Позиционирование в CSS[html]<a name="19"></a>[/html]
Свойство position устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице. С его помощью можно менять положение элементов дизайна, несмотря на место, которое они занимают в коде.

Значения:
absolute - указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице, словно абсолютно позиционированного элемента и нет. Визуально элемент с абсолютным позиционированием выглядит, так будто находится НАД остальными.
Было (#pun-status .container {background: transparent;})
Стало (#pun-status .container {background: transparent; position: absolute; top: 227px;})
После того, как элементу задается абсолютное позиционирование, можно регулировать положение с помощью свойств left (влево), top (сверху), right (справа) и bottom (снизу).
Пишем куда двигать и на какое расстояние, например:
Код:
селектор {
  position: absolute;
  top: 227px;
}
ВНИМАНИЕ!!! На положение при перемещении влияет значение свойства position родительского элемента (тега, внутри которой находится элемент): если у родителя значение position не установлено или родителя нет, то отсчет координат ведется от края окна браузера, а если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.
Вывод: когда вы задаете элементу абсолютное позиционирование, но не указываете позиционирование родителя, свойства LEFT и RIGHT двигают элемент не относительно рабочей области, а относительно ОКНА БРАУЗЕРА! (а ширина окна браузера у каждого разная - зависит от разрешения экрана)
именно таким образом получаются, например, рекламные баннеры, которые "ездят" по шапке сайта/форума.

relative - положение элемента устанавливается относительно его исходного места.
Было (#pun-announcement h2 {background: url("/files/0007/e3/f7/52475.png") no-repeat scroll left;})
Стало (#pun-announcement h2 {background: url("/files/0007/e3/f7/52475.png") no-repeat scroll left; position: relative; left: -22px;})
Добавление свойств left (влево), top (сверху), right (справа) и bottom (снизу) изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.
Пишем куда двигать и на какое расстояние, например:
Код:
селектор {
  position: relative;
  left: -22px;
}
fixed - по своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left (влево), top (сверху), right (справа) и bottom (снизу) точке на экране и не меняет своего положения при прокрутке веб-страницы.
Было
.tab {
height: 42px;
position: relative;
top: 0;}
Стало
.tab {
position: fixed;
top: 0;
width: 1000px;}

в отличие от absolute, при движении фиксированного элемента, вы его двигаете ОТ КРАЕВ ЭКРАНА, независимо от того, какое позиционирование стоит у родительского элемента.

Позиционирование на примере названия форума
находим селектор названия:
Код:
#pun-title h1 {....}
задираем объект вверх:
Код:
#pun-title h1 {
    position: absolute;
    top: 76px;
}
Делаем отступ слева и убираем другие отступы, которые стояли в шаблоне стиля:
Код:
#pun-title h1 {
    position: absolute;
    top: 76px;
    padding: 0 0 0 176px;
}
добавляем всякое-разное для красоты:
Код:
#pun-title h1 {
    position: absolute;
    top: 76px;
    padding: 0 0 0 176px;
    font-family: 'Marck Script',cursive;
}
#pun-title h1 span {
    color: #E25DB3;
    font-size: 2.1em;
    text-shadow: 1px 1px 2px #9670CE;
}
[html]<a href="#ogl">К оглавлению</a>[/html]

Делаем контейнеры для элементов дизайна[html]<a name="20"></a>[/html]
Указанную выше шапку (http://uploads.ru/i/k/Q/Y/kQY6w.png) можно было вставлять множеством способов...
Например, можно было объединить ее с фоном, расположенным под ней, и вставлять через контейнер pun_wrap. Но тогда картинка была бы больше, и, следовательно, тяжелее.
Или можно было бы ее нарезать (отдельно меню навигации, отдельно юзер-меню, отдельно бока, отдельно область шапки) и вставлять в соответствующие контейнеры (кстати, это было бы ПРАВИЛЬНЕЕ, т.к. можно было бы сделать большую часть картинки в формате JPG и суммарный вес графики получился бы меньше), но я преследовала цель как можно меньше времени тратить на дизайн и как можно больше - на написание этой статьи, поэтому шапка вставлена прям-таки под наши цели - через отдельный контейнер.

На любом движке существует возможность дополнить HTML-шаблон своими кодами: в некоторых случаях эти возможности шире (например, ucoz, phpbb, joomla и т.д.), в некоторых - крайне невелики (mybb, borda...). Главное - лишь бы было место, куда вставлять HTML, а дальше нас спасет позиционирование.

Создадим свой див блок для шапки и вставим его в верх:
Код:
<div></div>
Есть два способа оперировать стилем этого блока. Мы можем добавить атрибут STYLE прямо в контейнер и внутри него писать свойства и значения стиля:
Код:
<div style="background: url("http://uploads.ru/i/k/Q/Y/kQY6w.png") no-repeat scroll center top transparent; height:300px"></div>
В этом случае HTML-код получается громоздким, такой способ подходит в том случае, если стиль элемента будет регулярно меняться.
Если речь идет о шапке, которую вставил один раз - и забыл, то CSS коды можно вынести отдельно. Для этого нужно дать какое-нибудь уникальное имя (идентификатор) контейнеру:
Код:
<div id="logoup"></div>
когда у контейнера есть имя, мы можем ссылаться на него через CSS:
Код:
#logoup {background: url("http://uploads.ru/i/k/Q/Y/kQY6w.png") no-repeat scroll center top transparent; height: 383px; margin: 0 -206px;}
Точно так же выполнена и область копирайта:
вниз
Код:
<div id="logobottom"></div>
в стиль
Код:
#logobottom {background: url("http://uploads.ru/i/R/M/G/RMGjZ.png") no-repeat scroll center top transparent; height: 178px; margin: 0 -56px;}
[html]<a href="#ogl">К оглавлению</a>[/html]

Делаем контейнеры для текста (и любого другого HTML-контента)[html]<a name="21"></a>[/html]
Теперь разберем, как лучше поступать с контейнерами для какого-либо содержимого.
Во-первых, текст (или другое содержимое) должен быть внесен в отдельные дополнительные теги. Почему? Потому, что если тег элемента дизайна и тег текста совпадают, к тексту будут применяться настройки, заданные CSS-кодом элемента дизайна.
Во-вторых, текст лучше класть в родительский контейнер (который будет наиболее близок к его расположению на странице) - так можно будет больше времени уделить процессу стилизации и меньше времени его позиционированию.

Итак, нам нужно сделать контейнер в шапке форума. Создаем DIV для текста:
Код:
<div id="logoup">
   <div id="my_text">
      Тут будет ваш текст
   </div>
</div>
позиционируем текст:
Код:
#my_text {
    margin-left: 420px;
    top: 106px;
}
зададим максимальную ширину и максимальную высоты контейнера:
Код:
#my_text {
    margin-left: 420px;
    top: 106px;
    width: 238px;
    height: 134px;
}
и добавим прокрутку для того, чтоб не подбирать текст под высоту, а можно было впихнуть любое количество:
Код:
#my_text {
    margin-left: 420px;
    top: 106px;
    width: 238px;
    height: 134px;
    overflow: auto;
}
Так же (но в этом случае - без прокрутки) можно поступить и с копирайтом:
вниз
Код:
<div id="logobottom"><div id="my_copyright">

<center>Тут любой текст вашего копирайта.</center>

</div><div id="FD_copyright"><center> Стиль сделан В рамках проекта <a href="https://forumd.ru/">ForumDesign TS</a><br/> <a href="https://forumd.ru/viewforum.php?id=97">Выбери свой стиль</a> | <a href="https://forumd.ru/viewtopic.php?id=3073">Как создать дизайн?</a> | <a href="https://forumd.ru/viewforum.php?id=5">Дизайн на заказ</a></center></div></div>
в стиль
Код:
#my_copyright {bottom: 64px; height: 86px; margin-left: 260px;  position: absolute;  width: 426px; color: #E25DB3; font-size: 2.1em; text-shadow: 1px 1px 2px #9670CE; font-family: 'Marck Script',cursive;}
#FD_copyright {bottom: 12px; margin-left: 244px; position: absolute; width: 460px;}
[html]<a href="#ogl">К оглавлению</a>[/html]

Отредактировано Герда (16.06.13 20:52)

Discord TrueZlober#1227
Личная тема https://forumd.ru/viewtopic.php?id=7232
Портфолио https://forumd.ru/viewtopic.php?id=3833

Поделиться622.04.12 18:49

Автор: Gerda
крашеный некротехнофил
Последний визит:
Сегодня 08:02
Уважение: +9982

Устарело! новая версия здесь: Как сделать дизайн форума/сайта? Все о создании своего дизайна.

устарело

Делаем красивые HTML таблицы[html]<a name="22"></a>[/html]
Как вы уже могли понять, CSS позволяет до неузнаваемости преображать коды. Все, что для такого преображения нужно - это указать имя объекта, а дальше оперировать с его именем с помощью свойств CSS.
Эту операцию хотелось бы научить вас производить не только с отдельными контейнерами, но и с таблицами (на данный момент ни одна ролевая не обходится без таблички с важной информацией).

[html]<a href="#ogl">К оглавлению</a>[/html]

Создание таблицы[html]<a name="23"></a>[/html]
Для примера таблицы, вернемся к макету и нарисуем любую невероятной красоты штуку для информации.

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

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

Составляем HTML-код таблицы. Подробно о том, как составлять HTML код таблицы, написано здесь: Таблицы в HTML.
подготовка
чтобы табличка отображалась так, как на макете, пришлось еще дополнить стиль (убрать фон объявления, передвинуть слово "оъявление" и т.п.)
Код:
#pun-announcement, #pun-announcement .container, #pun-announcement h2, #pun-announcement h2 span {background:transparent; border:none;}
#pun-announcement {margin-bottom:0;}
#pun-announcement .container {padding: 4.3em 1em 0;}
#pun-announcement h2 span {position:absolute; margin-left: 130px; margin-top: 50px; }
Код:
<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.
коды
HTML
Код:
<table id="my_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>
CSS
Код:
#my_table {
   background: transparent url(http://uploads.ru/i/i/y/f/iyfQ8.png) no-repeat bottom center;
   border: 0 none; 
   height: 350px; 
   width: 850px; 
   margin: 0 -20px; 
   padding: 0 30px;
}
Теперь создадим контейнер. Чтобы меньше использовать картинок (что позволит табличке быстрее грузиться), используем CSS3.

[html]<a href="#ogl">К оглавлению</a>[/html]

CSS3: меньше картинок, больше кодов[html]<a name="24"></a>[/html]

Что такое 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[html]<a name="24-1"></a>[/html]
С помощью нового CSS3 свойства border-radius Вы можете делать углы элементов сглаженными.
Код:
#el1 {
border-radius:5px;
}
#el2 {
border-radius:10px;
}
#el3 {
border-radius:20px;
}
#el4 {
border-radius:15px;
}
[html]<div style="background:#ccc;height:200px;overflow:auto"><style type="text/css">#el1,#el2,#el3,#el4 {float:left;border:2px #000000 solid;padding:10px;width:300px;height:100px;margin:20px;background-color:#85004B;color:#FFF;font-weight:bold;}#el1 {border-radius:5px;}#el2 {border-radius:10px;}#el3 {border-radius:20px;}#el4 {border-radius:15px;}</style><p id="el1">Я первый элемент со сглаженными углами
<span style="text-decoration:underline">border-radius:5px</span></p><p id="el2">Я второй элемент со сглаженными углами<span style="text-decoration:underline">border-radius:10px</span></p><p id="el3">Я третий элемент со сглаженными углами<span style="text-decoration:underline">border-radius:20px</span></p><p id="el4">Я четвертый элемент со сглаженными углами<span style="text-decoration:underline">border-radius:15px</span></p></div>[/html]
Данное свойство может применяться не ко всем углам элемента, а только к определенным:
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;
}
[html]<div style="background:#ccc;height:200px;overflow:auto"><style type="text/css">#el5,#el6,#el7,#el8 {float:left;border:2px #000000 solid;padding:10px;width:300px;height:100px;margin:20px;background-color:#85004B;color:#FFF;font-weight:bold;}#el5 {border-radius:5px 5px 15px 15px;}#el6 {border-radius: 0 0 10px 10px;}#el7 {border-radius:40px 0 40px 0;}#el8 {border-radius:0px 20px 20px 20px;}</style><p id="el5">Я первый элемент со сглаженными углами <span style="text-decoration:underline">border-radius:5px 5px 15px 15px;</span></p><p id="el6">Я второй элемент со сглаженными углами<span style="text-decoration:underline">border-radius: 0 0 10px 10px;</span></p><p id="el7">Я третий элемент со сглаженными углами<span style="text-decoration:underline">border-radius:40px 0 40px 0;</span></p><p id="el8">Я четвертый элемент со сглаженными углами<span style="text-decoration:underline">border-radius:0px 20px 20px 20px;</span></p></div>[/html]
Чтобы border-radius отображалось корректно во всех браузерах, лучше записывать свойство для каждого браузера (значение при этом должно быть одно и то же):
Код:
#селектор {
  border-radius: 10px;
  -moz-border-radius: 10px; /* Firefox */
  -webkit-border-radius: 10px; /* Safari, Chrome */
  -khtml-border-radius: 10px; /* KHTML */
}
BOX-SHADOW[html]<a name="24-2"></a>[/html]
С помощью свойства 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;
}
[html]<div style="background:#ccc;height:200px;overflow:auto"><style type="text/css">#el10,#el11,#el9 {float:left;border:2px #000000 solid;padding:10px;width:300px;height:100px;margin:20px;background-color:#85004B;color:#FFF;font-weight:bold;}#el9 {box-shadow:4px 4px black;}#el10 {box-shadow:6px 6px 6px 2px black;}#el11 {box-shadow:0px 0px 6px 2px black inset;}</style><p id="el9">1. Первые два значения свойства<i>box-shadow </i>задают величину смещения тени по горизонтали и вертикали в пикселях, а третее значение задает цвет тени.<br>
<span style="text-decoration:underline;">box-shadow:4px 4px black;</span></p><p id="el10">2. Также данное свойство может иметь значения указывающие радиус разброса тени (третее значение) и размер тени (четвертое значение).<br><span style="text-decoration:underline;">box-shadow:6px 6px 6px 2px black;</span></p><p id="el11">3. С помощью значения inset Вы можете указать, что тень должна быть не внешней, а внутренней. Элементы с внутренними тенями кажутся 'вдавленными'.<br><span style="text-decoration:underline;">box-shadow:0px 0px 6px 2px black inset;</span></p></div>[/html]
Чтобы 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[html]<a name="24-3"></a>[/html]
С помощью нового 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;
}
[html]<div style="background:#ccc;height:200px;overflow:auto"><style type="text/css">#shadow1,#shadow2,#shadow3 {font-size:2.5em;font-family:Arial;}#shadow1 {text-shadow:3px 2px #FFAE00;}#shadow2 {text-shadow:1px 1px 10px #FFAE00;}#shadow3 {text-shadow:2px 2px 2px #FFAE00, 2px 2px 15px #1435AD;}</style><p id="shadow1">Пример простой тени</p><p id="shadow2">Пример тени с размытием</p><p id="shadow3">Несколько теней одновременно</p></div>[/html]

[html]<a href="#ogl">К оглавлению</a>[/html]

CSS3 на примере таблицы[html]<a name="25"></a>[/html]

Теперь с помощью 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 прописываем ширину, высоту и позиционирование:
коды
HTML
Код:
<table id="my_table">
<tr>
<td rowspan="2" id="box-td">

<div id="fairy1"></div>
<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>
CSS
Код:
#fairy1 {
   background: transparent url(http://uploads.ru/i/4/K/o/4KoS9.png) no-repeat top center; 
   height: 265px; 
   margin-left: -55px; 
   margin-top: -15px; 
   position: absolute; 
   width: 172px;
}
Добавляем текст (с отступом от феи), и готово:
коды
HTML
Код:
<table id="my_table">
<tr>
<td rowspan="2" id="box-td">

<div id="fairy1"></div>
<div id="my_box">
<div id="my_box-text">

тут удет текст внутри контейнера<br/>тут удет текст внутри контейнера<br/>тут удет текст внутри контейнера<br/>

</div>
</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>
CSS
Код:
#my_box-text {margin-left: 65px;}
[html]<a href="#ogl">К оглавлению</a>[/html]

Свойство DISPLAY: задаем отображение элементов[html]<a name="26"></a>[/html]

При создании каких-либо нестандартных элементов, вам понадобится внимательно изучить 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 [html]<a name="26-1"></a>[/html]

#элемент {display: none;}
вот он, вот он - ответ на ваши бесконечные вопросы "как убрать вот это? как убрать вот то?"
если у вас нет доступа к шаблону сайта/форума, элемент можно заставить "исчезнуть" - находим нужный селектор и убираем его через CSS.
Было (.tab {background: url("http://uploads.ru/i/q/g/n/qgnZQ.png") no-repeat scroll 0 0 transparent;})
Стало (.tab {background: url("http://uploads.ru/i/q/g/n/qgnZQ.png") no-repeat scroll 0 0 transparent; display: none;})
#элемент {display: block;}
этот тег заставляет элемент вести себя как контейнер: все элементы, которые стоят рядом, переносятся на следующую строчку; блочному элементу всегда можно задать ширину, высоту и тому подобные характеристики.
Было (#pun-ulinks li a {text-decoration: none; ~~text-align: center; width: 300px;~~})
Стало (#pun-ulinks li a {display: block; text-decoration: none; text-align: center; width: 300px;})
#элемент {display: inline;}
это свойство заставляет элемент(ы) отображаться в строчку; чаще всего употребляется в горизонтальных меню:
Было (#pun-navlinks li {display: block;})
Стало (#pun-navlinks li {display: inline;}})
#элемент {display: inline-block;}
Что делать, если нам нужно, чтоб элемент вел себя, как контейнер (ему можно было бы задать ширину, высоту), но при этом, чтоб элемент не переносил на другие строчки своих соседей? Тут нас спасает значение inline-block
Было (#pun-ulinks li a {display: block; text-decoration: none; text-align: center; width: 300px;})
Стало (#pun-ulinks li a {display: inline-block; text-decoration: none; text-align: center; width: 200px;})
значения table
Эти значения могут позволить превратить в табличку все то, что таблицей не является.
Было (убраны все свойства display)
Стало (#pun-ulinks {display: table;}
#pun-ulinks .container {display: table-row;}
#pun-ulinks li, #pun-ulinks li a {display: table-cell;})
Применение свойства DISPLAY на примере таблицы [html]<a name="26-2"></a>[/html]
В соседней от CSS3 контейнера ячейке нам нужно разместить красивые контейнеры для каких-нибудь важных ссылок:

сначала назначаем ячейки ID и задаем ее размеры
коды
HTML
Код:
<table id="my_table">
<tr>
<td rowspan="2" id="box-td">

<div id="fairy1"></div>
<div id="my_box">
<div id="my_box-text">

тут удет текст внутри контейнера<br/>тут удет текст внутри контейнера<br/>тут удет текст внутри контейнера<br/>

</div>
</div>

</td>
<td colspan="2" id="link-td">ссылка1, ссылка 2, ссылка3</td>
</tr>
<tr>
<td rowspan="2">ссылки</td>
<td rowspan="2">баннеры</td>
</tr>
<tr>
<td>текст</td>
</tr>
</table>
CSS
Код:
#link-td {height: 85px;}
Теперь сделаем каждую ссылку в отдельном div-контейнере:
код HTML
Код:
<table id="my_table">
<tr>
<td rowspan="2" id="box-td">
<div id="fairy1"></div>
<div id="my_box">
<div id="my_box-text">
тут удет текст внутри контейнера<br/>тут удет текст внутри контейнера<br/>тут удет текст внутри контейнера<br/>
</div>
</div>
</td>
<td colspan="2" id="link-td">

<div id="link1"><a href="#">Ссылка1</a></div>
<div id="link2"><a href="#">Ссылка2</a></div>
<div id="link3"><a href="#">Ссылка3</a></div>

</td>
</tr>
<tr>
<td rowspan="2">ссылки</td>
<td rowspan="2">баннеры</td>
</tr>
<tr>
<td>текст</td>
</tr>
</table>
попробуем их стилизовать:
Код:
#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;
}
[html]<a href="#ogl">К оглавлению</a>[/html]

Красивые заголовки и шрифты[html]<a name="27"></a>[/html]
->

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

Как работают шрифты в CSS (свойство FONT) [html]<a name="27-1"></a>[/html]
Названия разных шрифтов в CSS вставляются с помощью свойства font-family:
#селектор {font-family: Georgia, 'Times New Roman', Times, serif;}
Список шрифтов может включать одно или несколько названий, разделенных запятой.
Если в названии шрифта есть пробелы, то согласно правилам CSS, он записывается в одинарных кавычках (обратите внимание на написание шрифта Times New Roman в коде).
Как это работает.
Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берется следующее имя из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность, что хотя бы один из них будет обнаружен на клиентском компьютере.
Таким образом, последовательность шрифтов лучше начинать с экзотических типов и заканчивать обобщенным именем, которое задает вид начертания.
Внимание! Когда вы пытаетесь установить на форум какой-то неимоверно красивый шрифт, поставленный на ваш компьютер, это не значит, что у ваших пользователей он будет отображаться. Он может отображаться ТОЛЬКО у тех, кто скачают его и установят на компьютер.

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

Красивые заголовки с помощью Google Web Fonts [html]<a name="27-3"></a>[/html]
Несмотря на многочисленные недостатки картинок-заголовков, здравый смысл все равно будет повержен одним простым аргументом: "хочу, чтобы было красиво". Поэтому стоит предложить альтернативу.
Существует возможность импортировать шрифты с внешних ресурсов. Таким образом, грузиться они будут не с компьютера пользователя, а с какого-либо сайта. Один из таких ресурсов - 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
коды
HTML
Код:
<table id="my_table">
<tr valign="top">
<td rowspan="2" id="box-td">
<div id="fairy1"></div><div id="my_box"><div id="my_box-text">

тут удет текст внутри контейнера<br/>тут удет текст внутри контейнера<br/>тут удет текст внутри контейнера<br/>

</div></div></td>
<td colspan="2" id="link-td">

<div id="link1"><a href="#">Ссылка1</a></div>
<div id="link2"><a href="#">Ссылка2</a></div>
<div id="link3"><a href="#">Ссылка3</a></div>

</td></tr>
<tr valign="top">
<td rowspan="2" id="text-td2"><span>Ссылки</span> <div class="text-div">

Вставляйте сюда свои ссылки<br/>Стиль сделан В рамках проекта <a href="http://ForumD.ru/">ForumDesign TS</a><br/> <a href="http://ForumD.ru/viewforum.php?id=97">Выбери свой стиль</a> <br/> <a href="http://ForumD.ru/viewtopic.php?id=3073">Как создать дизайн?</a> <br/> <a href="http://ForumD.ru/viewforum.php?id=5">Дизайн на заказ</a> <br/> Вставляйте сюда свои ссылки

</div></td>
<td rowspan="2" id="text-td3"><span>Баннеры</span><div class="text-div">

Вставляйте сюда свои баннеры<br/><a href="http://ForumD.ru/"><img src="https://forumupload.ru/uploads/0007/e3/f7/48475-1.gif" title="ForumDesign TS" alt="Дизайн для форумов и техническая поддержка"></a> <a href="http://ForumD.ru/"><img src="https://forumupload.ru/uploads/0007/e3/f7/50268-2.gif" title="ForumDesign TS" alt="Дизайн для форумов и техническая поддержка"></a> <a href="http://ForumD.ru/"><img src="https://forumupload.ru/uploads/0007/e3/f7/48475-1.gif" title="ForumDesign TS" alt="Дизайн для форумов и техническая поддержка"></a> <a href="http://ForumD.ru/"><img src="https://forumupload.ru/uploads/0007/e3/f7/50268-2.gif" title="ForumDesign TS" alt="Дизайн для форумов и техническая поддержка"></a> <a href="http://ForumD.ru/"><img src="https://forumupload.ru/uploads/0007/e3/f7/48475-1.gif" title="ForumDesign TS" alt="Дизайн для форумов и техническая поддержка"></a> <a href="http://ForumD.ru/"><img src="https://forumupload.ru/uploads/0007/e3/f7/50268-2.gif" title="ForumDesign TS" alt="Дизайн для форумов и техническая поддержка"></a> <a href="http://ForumD.ru/"><img src="https://forumupload.ru/uploads/0007/e3/f7/48475-1.gif" title="ForumDesign TS" alt="Дизайн для форумов и техническая поддержка"></a> <a href="http://ForumD.ru/"><img src="https://forumupload.ru/uploads/0007/e3/f7/50268-2.gif" title="ForumDesign TS" alt="Дизайн для форумов и техническая поддержка"></a> <a href="http://ForumD.ru/"><img src="https://forumupload.ru/uploads/0007/e3/f7/48475-1.gif" title="ForumDesign TS" alt="Дизайн для форумов и техническая поддержка"></a> <a href="http://ForumD.ru/"><img src="https://forumupload.ru/uploads/0007/e3/f7/50268-2.gif" title="ForumDesign TS" alt="Дизайн для форумов и техническая поддержка"></a> <a href="http://ForumD.ru/"><img src="https://forumupload.ru/uploads/0007/e3/f7/48475-1.gif" title="ForumDesign TS" alt="Дизайн для форумов и техническая поддержка"></a> <a href="http://ForumD.ru/"><img src="https://forumupload.ru/uploads/0007/e3/f7/50268-2.gif" title="ForumDesign TS" alt="Дизайн для форумов и техническая поддержка"></a><br/>Вставляйте сюда свои баннеры
<br/><br/><br/><br/><br/><br/><br/><br/>

</div><div id="fairy2"></div></td></tr><tr valign="top">
<td id="text-td1"><span>Заголовок</span><div class="text-div">

и еще какой-нибудь текст. и еще какой-нибудь текст. и еще какой-нибудь текст. и еще какой-нибудь текст. и еще какой-нибудь текст. и еще какой-нибудь текст. и еще какой-нибудь текст. и еще какой-нибудь текст. и еще какой-нибудь текст. и еще какой-нибудь текст. и еще какой-нибудь текст. и еще какой-нибудь текст. и еще какой-нибудь текст. и еще какой-нибудь текст. 

</div></td></tr></table>
CSS
Код:
#my_table {background: transparent url(http://uploads.ru/i/i/y/f/iyfQ8.png) no-repeat bottom center; border: 0 none; height: 350px; width: 850px; margin: 0 -20px; padding: 0 30px;}
#box-td {height: 170px; width: 340px;}
#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;}
#fairy1 {background: transparent url(http://uploads.ru/i/4/K/o/4KoS9.png) no-repeat top center; height: 265px; margin-left: -55px; margin-top: -15px; position: absolute; width: 172px;}
#my_box-text {margin-left: 65px;}
#link-td {height: 85px;}
#link1, #link2, #link3 {-moz-border-radius: 10px 10px 0 0; -webkit-border-radius: 10px 10px 0 0; -khtml-border-radius: 10px 10px 0 0;  border-radius: 10px 10px 0 0; -webkit-box-shadow: 0px 0px 3px #8c61ca; -moz-box-shadow: 0px 0px 3px #8c61ca; box-shadow: 0px 0px 3px #8c61ca;
display: inline-block; height: 50px; margin: 34px 3px 3px; text-align: center; width: 135px; background: #000;}
#link1:hover, #link2:hover, #link3:hover {-webkit-box-shadow: 0px 0px 7px #8c61ca; -moz-box-shadow: 0px 0px 7px #8c61ca; box-shadow: 0px 0px 7px #8c61ca;}
#link1 a, #link2 a, #link3 a {font-family: 'Marck Script',cursive;color: #9595ad; font-size: 2.3em; text-shadow: 1px 1px 2px #8c61ca; text-decoration:none; padding-top:10px;}
#text-td2 {width: 220px;}
#text-td3 {width: 210px;}
#text-td1 .text-div, #text-td2 .text-div {border-right: 1px solid #505050;}
#text-td2 .text-div, #text-td3 .text-div {height: 200px; overflow:auto;}
#text-td1 {padding-bottom: 20px;}
#text-td1 .text-div {height: 110px; overflow: auto;}
#fairy2 {background: transparent url(http://uploads.ru/i/M/i/m/MimpY.png) no-repeat top center; height: 159px; position: absolute; width: 193px; margin-left: 85px; margin-top: -154px;}
#pun-announcement h2 span {position:absolute; margin-left: 130px; margin-top: 50px; }
#pun-announcement h2 span, #text-td2 span, #text-td3 span {font-family: 'Marck Script',cursive;color: #9595ad; font-size: 2.3em; text-shadow: 1px 1px 2px #8c61ca;}
#text-td1 span {font-family: 'Marck Script',cursive;color: #9595ad; font-size: 2.5em; text-shadow: 1px 1px 2px #8c61ca; margin-left: 60px;}
Безопасные шрифты [html]<a name="27-4"></a>[/html]
На самом деле самые красивые шрифты - самые простые, которые есть у пользователя по умолчанию и грузятся быстро и просто. Использование всех наворотов связано зачастую с тем, что пользователи в глаза не видели всего разнообразия самых обычных и доступных видов шрифтов.

шрифты
[html]<div style="background:#ccc;height:200px;overflow:auto;padding:10px;font-size:1.4em;"><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></div>[/html]
Код:
<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;
[html]<div style="background:#ccc;height:200px;overflow:auto;padding:10px;font-size:1.4em;"><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></div>[/html]
Код:
<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;
[html]<div style="background:#ccc;height:200px;overflow:auto;padding:10px;font-size:1.4em;"><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></div>[/html]
Код:
<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;
[html]<div style="background:#ccc;height:200px;overflow:auto;padding:10px;font-size:1.4em;"><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></div>[/html]
Код:
<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>
Как видно, если поэкспериментировать со стандартными безопасными шрифтами, вполне может получиться оригинальное начертание.

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

[html]<a href="#ogl">К оглавлению</a>[/html]

Отредактировано Герда (16.06.13 21:19)

Discord TrueZlober#1227
Личная тема https://forumd.ru/viewtopic.php?id=7232
Портфолио https://forumd.ru/viewtopic.php?id=3833

Поделиться722.04.12 23:13

Автор: Gerda
крашеный некротехнофил
Последний визит:
Сегодня 08:02
Уважение: +9982

Устарело! новая версия здесь: Как сделать дизайн форума/сайта? Все о создании своего дизайна.

устарело

Анимация в дизайне[html]<a name="28"></a>[/html]

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

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

2. Анимация просто обязана быть легкой.
Gif-анимация - самая коварная штука. Она испортит ко всем чертям загрузку вашего дизайна по любой из сотни причин: анимашек много, или анимация имеет гигантский размер, или анимация сохранена в самом потрясающем качестве, или она состоит из тонны кадров. Именно поэтому в этой части статьи мы подробно будем переваривать формат GIF.

3. Анимации не должна быть в ущерб работе сайта.
Проявляя креативность, всегда помните то, что писалось в пункте [html]<a name="12">Как работает CSS</a>[/html] - дизайн прежде всего должен служить для улучшения интерфейса сайта, а не усугубления чтения информации. Не ставьте анимашек в ущерб читабельности или взамен полезных блоков.

4. Не путайте кино и анимацию.
Заранее прошу забыть о том, чтобы вставлять с помощью этого урока минимувы (вычислю по айпи и оторву руки ]=| ) - эту штуку НИКАК нельзя нормально привести к веб-формату. Если вам нравятся кадры из кино, лучше подумать над установкой видео-плеера, включенного по умолчанию.

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

[html]<a href="#ogl">К оглавлению</a>[/html]

Создание анимации [html]<a name="28-1"></a>[/html]
Для начала следует достаточно хорошо овладеть GIF-анимацией, вам не подойдут уроки типа "делаем баннер". Самое простое, что я могу посоветовать - это анимация с параметрами наложения.
Для этого нам потребуется найти какую-нибудь картинку-заготовку с замкнутой анимацией. Этим добром можно разжиться у нас: Заготовки и клипарт для анимации

Я выбрала вот такую анимашку: http://s2.uploads.ru/tyIFL.gif . Для начала нужно ее разложить по кадрам. Для этого я использую приложение photoshop Image Ready
Просто перетаскиваю картинку на рабочую область программы и получаю все кадры анимации:

Можно прямо из этой программы перетащить анимацию в фотошоп Файл > Редактировать в photoshop (File > Edit with photoshop) или просто сохранить в формате psd Файл > Сохранить как (File > Save as, клавиши Shift+Ctrl+S), а потом уже открывать анимацию с кадрами в фотошопе.
Еще полезная информация для тех, кто не в курсе - в самом фотошопе окно анимации открывается через меню: Окно > Анимация (Window > Animation)

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

анимация по моей задумке должна как бы "сыпаться" сверху под названием форума.

Теперь рассмотрим тот факт, что анимашка не соответствует по цвету дизайну - нам нужна фиолетовая анимация, а не синяя. Для этого я открываю ее и колоризую самым ленивым методом через цветовой тон, клавиши Ctrl+U (см. выше [html]<a href="#9">Основы колоризации</a>[/html], пункт Полная цветокоррекция).
Переделывать придется каждый слой, поэтому я после подбора колоризации в окошке нажимаю кнопочку Сохранить (Save), сохраняю цветовой баланс, а в последствии просто жму кнопку Загрузить (Load) и получаю свои настройки.

Теперь создадим новую папку на панели слоев анимации и упакуем туда все слои:

Для этого выделите все слои с первого по последний при помощи зажатой кнопки Shift
После этого перетаскиваем папку на нашу заготовку под анимацию:

Далее меняем размер и расположение всей группы слоев через Редактирование > Свободное Трансформирование (Edit > Free transform, клавиши Ctrl+T)

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

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

[html]<a href="#ogl">К оглавлению</a>[/html]

Подгоняем анимацию под веб-формат [html]<a name="28-2"></a>[/html]
Сделать анимацию может любой обладатель фотошопа, а вот сделать ее подходящей для использования в дизайне - задача гораздо сложнее.
Необходимо соблюсти малый вес изображения, и работа над этим начинается еще до сохранения картинки. Советую всем проверять свою анимашку на "полноценность" по следующим параметрам...

Размер анимации[html]<a name="28-2-1"></a>[/html]
Чем больше картинка - тем больше ее вес. Когда речь идет о GIF-формате, лишние края становятся непосильной ношей.
Изначальную рабочую область картинки необходимо обрезать до размера анимированной части. Для этого можно кликнуть по иконке любого слоя анимации с нажатой кнопкой Ctrl:

Появится выделение. Сделайте инверсию: Выделение > Инверсия (Select > Inverse, клавиши Shift+Ctrl+I) и удалите лишний задник картинки:

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

Количество кадров[html]<a name="28-2-2"></a>[/html]
Чем больше количество кадров - тем больше вес анимации. Надо устранить как можно больше промежуточных отрывков, чтобы это не сказалось на плавности анимации.
Удалите каждый второй кадр - посмотрите на анимацию. Не пострадала? Тогда попробуйте повторить действие - и так столько раз, сколько позволит анимация.

я сократила анимацию с 88 кадров до 21
88 кадров, 740,93 КБ
21 кадр, 208,75 КБ
Меняем цикл анимации[html]<a name="28-2-3"></a>[/html]
Если после (или до) перекадровки анимация не выглядит цикличной, можно избавиться от еще одной порции кадров. Например, сделаем плавное появление и исчезание 10 кадров анимашки:
21 кадр, 208,75 КБ
14 кадров, 124,5 КБ
Делаем Gif-анимацию легче[html]<a name="28-2-4"></a>[/html]
Оставшийся секрет - это умение грамотно пожертвовать качеством во имя легкого веса картинки при сохранении.
Чем больше количество цветов, тем больше вес изображения
При облегчении изображений требуется жертвовать его качеством.
например, можно понизить количество цветов. некоторые изображения без проблем потерпят такие изменения.
высший пилотаж - стилизовать анимацию так, чтоб в ней и без того использовалась небольшая палитра оттенков.
Добавьте шума и попрощайтесь с отменным качеством
Финальные помощники в подгонке качества картинки ползунки lossy и web sharp, чем больше значение поставите, тем хуже будет качество и меньше будет вес. Их тоже нужно докрутить до той черты, когда потеря качества еще не режет глаз.
[html]<a href="#ogl">К оглавлению</a>[/html]

Встраиваем анимацию в дизайн [html]<a name="28-3"></a>[/html]

Встраивается анимация таким же образом, как и делалась шапка в дизайне-примере - просто [html]<a href="#20">делаем контейнер для элемента дизайна</a>[/html], встраиваем туда анимашку как фон, и двигаем так, чтоб ее место соответствовало другим фоновым элементам сайта.
Cоздаем DIV для анимашки и прописываем стартовые настройки в дизайне:
<div id="logoup">

<div id="my_text">
Тут будет ваш текст <br/>Тут будет ваш текст <br/>
</div>

<div id="animation"></div>

</div>
#animation {
background: url("http://s3.uploads.ru/cEh6l.gif") no-repeat scroll center top transparent;
height: 185px;
margin-left: 292px;
width: 393px;
}

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

[html]<a href="#ogl">К оглавлению</a>[/html]

Используем z-index для порядка отображения элементов страницы [html]<a name="28-3-1"></a>[/html]
Часто случается, что анимашки перекрывают другие элементы дизайна и блоки. Например, вам необходимо, чтоб она отображалась где-то на фоне, а анимашка торчит поверх шапки из-за того, что она встроена в html-верх. Проблема эта чисто майбб-шная, т.к. на нормальных форумных движках можно поправлять шаблон страницы и все свои декоративные изыски запихнуть в самый нижний элемент кода. Но даже проблему корявого кода страницы можно решить с помощью CSS.
Для примера, я убрала в таблице отступ блока с текстом в таблице:

Допустим, нам нужно, чтобы фея отображалась не поверх текстового блока, а под ним. В этом нам поможет свойство z-index
Описание:
Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index. Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative.
Значение z-index представляет собой число. Чем больше число - тем "выше" будет элемент.
Например:
<style>
#layer1, #layer2 {
position: relative; /* Относительное позиционирование */
}
#layer1 {
font-size: 50px; /* Размер шрифта в пикселах */
color: #000080; /* Синий цвет текста */
}
#layer2 {
top: -55px; /* Сдвигаем текст вверх */
left: 5px; /* Сдвигаем текст вправо */
color: #ffa500; /* Оранжевый цвет текста */
font-size:70px; /* Размер шрифта в пикселах */
}
#layer1 { z-index: 2; }
#layer2 { z-index: 1; }
</style>
<div id="layer1">Слой 1</div>
<div id="layer2">Слой 2</div>
Теперь рассмотрим код нашей таблички. Картинка с феей уже имеет абсолютное позиционирование, добавим в код z-index:
#fairy1 {
background: url("http://uploads.ru/i/4/K/o/4KoS9.png") no-repeat scroll center top transparent;
height: 265px;
margin-left: -55px;
margin-top: -15px;
position: absolute;
width: 172px;
z-index: 10;
}
Блок с текстом не имеет позиционирования. Надо добавить свойство position и поставить ему z-index больше, чем у блока с картинкой:
#my_box {
background: none repeat scroll 0 0 #000000;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 0 3px #8C61CA;
height: 100px;
margin-top: 65px;
overflow: auto;
padding: 5px;
width: 275px;
position: relative;
z-index: 20;
}
Получаем наглядный результат:

[html]<a href="#ogl">К оглавлению</a>[/html]

Как убрать прокрутку страницы [html]<a name="28-3-2"></a>[/html]
(сотни поклонов sadhaka, которая идеально разжевала проблему и ее решение в этой теме - с ее слов и написана эта часть статьи)

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

Автор стиля не стал превращать фон в огромную тяжелую гифку, а сделал отдельные картинки и вставлял их с помощью css-позиционарования.
Слева:
#left-ani {margin-left: -331px; margin-top: -47px; position: absolute;}
<div id="left-ani"><img src="http://uploads.ru/i/Q/3/Z/Q3ZIm.gif"></div>
Справа:
#right-ani {position: absolute; margin-left: 1037px; margin-top: -284px;}
<div id="right-ani"><img src="http://uploads.ru/i/S/4/H/S4HZE.gif"></div>

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

Причем эта проблема будет возникать только при наличии именно правой анимашки.

Почему и откуда берется проблема?
Все позиции считаются от верхнего левого угла. Для левой картинки указан отрицательный отступ слева, и когда позиционируемое место выходит за пределы экрана, то картинка исчезает. Т.е. при уменьшении окна браузера, позиция margin-left: -331px находится в невидимой области страницы, потому что граница окна браузера слева - это исходная точка отчета позиционирования всех элементов.

Но совсем по-другому будет справа, т.к. справа у нас нет "границы", справа у нас сколько угодно места, поэтому, если мы говорим в CSS-коде "отступи вот от этой точки 1000px", то браузер послушно это и делает, он не знает, что место справа у него закончилось.

Как решать проблему?
Можно сказать браузеру, что справа место кончилось, используя свойство overflow: hidden; для родительского контейнера анимашек (на примере майбб - это селектор #pun). Можно также попробовать поставить overflow: hidden; для body.

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

#my_text {
color: #FFFFFF;
height: 134px;
margin-left: 420px;
overflow: auto;
position: absolute;
top: 106px;
width: 238px;
}
Этим же свойством можно не только добавлять скролл-бары, но и убирать.

[html]<a href="#ogl">К оглавлению</a>[/html]

Отредактировано Герда (16.06.13 21:28)

Discord TrueZlober#1227
Личная тема https://forumd.ru/viewtopic.php?id=7232
Портфолио https://forumd.ru/viewtopic.php?id=3833

Поделиться822.04.12 23:16

Автор: Gerda
крашеный некротехнофил
Последний визит:
Сегодня 08:02
Уважение: +9982

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

Discord TrueZlober#1227
Личная тема https://forumd.ru/viewtopic.php?id=7232
Портфолио https://forumd.ru/viewtopic.php?id=3833

Поделиться922.04.12 23:17

Автор: Gerda
крашеный некротехнофил
Последний визит:
Сегодня 08:02
Уважение: +9982

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

Discord TrueZlober#1227
Личная тема https://forumd.ru/viewtopic.php?id=7232
Портфолио https://forumd.ru/viewtopic.php?id=3833

Поделиться1022.04.12 23:17

Автор: Gerda
крашеный некротехнофил
Последний визит:
Сегодня 08:02
Уважение: +9982

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

Discord TrueZlober#1227
Личная тема https://forumd.ru/viewtopic.php?id=7232
Портфолио https://forumd.ru/viewtopic.php?id=3833

Страница: 1 2 3 … 6 »

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

Меню навигации

Пользовательские ссылки

Объявление

☀️ WAFFLE - Самый яркий форум!

❤️ Поддержи проект! Стань модератором!

💰 Мгновенные уведомления от Alex_63 для MyBB.ru

💌 Акция! Подписка, лайк, коммент, репост!

🌟 SPECIAL OFFER: We distribute designs for free

❤️ Support the project

Информация о пользователе

Как сделать дизайн форума? Все о создании стиля на примере Mybb форума

Сообщений 1 страница 10 из 54

Поделиться112.04.12 07:31

Поделиться212.04.12 07:32

Поделиться312.04.12 07:35

Поделиться412.04.12 07:41

Поделиться513.04.12 18:32

Поделиться622.04.12 18:49

Поделиться722.04.12 23:13

Поделиться822.04.12 23:16

Поделиться922.04.12 23:17

Поделиться1022.04.12 23:17


Тематика форума - фотошоп-уроки. Кто этот мужик в шапке? Какое он имеет отношение к форуму?	Тематика форума - ВСЕ ОБО ВСЕМ. (ключи к играм, общение и т.д. и т.п.) А дизайн на тему "Сумерки". Зачем? ведь куча форумов спокойно и со стандартным дизайном живут	Угадайте, какой сюжет у этой ролевой игры? Вы не поверите! Эта ролевая на тему продолжения сумеречной саги

При разрешении 1500+ обрывалась шапка	шапка плавно переходит в фон
при разрешении 1400+ обрывался фон	фон рассчитан на высокое разрешение экрана

так выглядит форум без кодов CSS	так выглядит форум со стандартным дизайном	так выглядит форум с индивидуальным диайном

GIF - 36,92 Кб	PNG - 100,88 Кб	JPG - 17,96 Кб

Было (#pun-status .container {background: transparent;})	Стало (#pun-status .container {background: transparent; position: absolute; top: 227px;})

Было (#pun-announcement h2 {background: url("/files/0007/e3/f7/52475.png") no-repeat scroll left;})	Стало (#pun-announcement h2 {background: url("/files/0007/e3/f7/52475.png") no-repeat scroll left; position: relative; left: -22px;})

Было (.tab {background: url("http://uploads.ru/i/q/g/n/qgnZQ.png") no-repeat scroll 0 0 transparent;})	Стало (.tab {background: url("http://uploads.ru/i/q/g/n/qgnZQ.png") no-repeat scroll 0 0 transparent; display: none;})

Было (#pun-ulinks li a {text-decoration: none; ~~text-align: center; width: 300px;~~})	Стало (#pun-ulinks li a {display: block; text-decoration: none; text-align: center; width: 300px;})

Было (#pun-navlinks li {display: block;})	Стало (#pun-navlinks li {display: inline;}})

Было (#pun-ulinks li a {display: block; text-decoration: none; text-align: center; width: 300px;})	Стало (#pun-ulinks li a {display: inline-block; text-decoration: none; text-align: center; width: 200px;})

Было (убраны все свойства display)	Стало (#pun-ulinks {display: table;} #pun-ulinks .container {display: table-row;} #pun-ulinks li, #pun-ulinks li a {display: table-cell;})