Все элементы дизайна форума

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

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

http://uploads.ru/t/V/N/U/VNUDf.jpg

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

http://uploads.ru/t/W/y/U/WyUtv.jpg

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

http://uploads.ru/t/Q/h/E/QhE98.jpg

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

подготовка

чтобы табличка отображалась так, как на макете, пришлось еще дополнить стиль (убрать фон объявления, передвинуть слово "оъявление" и т.п.)

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

коды

HTML

CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS3 на примере таблицы
http://uploads.ru/i/T/1/0/T105E.jpg

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

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

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

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

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

коды

HTML

CSS

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

коды

HTML

CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Было (.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;})

http://uploads.ru/t/D/4/e/D4euq.jpg

http://uploads.ru/t/a/8/N/a8N0r.jpg

#элемент {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;})

http://uploads.ru/t/n/u/c/nucC9.jpg

http://uploads.ru/t/V/l/9/Vl94j.jpg

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

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

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

http://uploads.ru/t/y/o/F/yoFEW.jpg

http://uploads.ru/t/g/2/Y/g2YJr.jpg

#элемент {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;})

http://uploads.ru/t/V/l/9/Vl94j.jpg

http://uploads.ru/t/c/p/7/cp7Su.jpg

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

Было (убраны все свойства display)

Стало (#pun-ulinks {display: table;}
#pun-ulinks.container {display: table-row;}
#pun-ulinks li, #pun-ulinks li a {display: table-cell;})

http://uploads.ru/t/S/c/X/ScXlB.jpg

http://uploads.ru/t/N/W/r/NWrDg.jpg

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

http://uploads.ru/t/8/S/N/8SNiq.jpg

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

коды

HTML

CSS

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

код HTML

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

http://uploads.ru/t/O/Z/D/OZDo4.jpg

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

http://uploads.ru/t/5/k/z/5kz6b.jpg

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

http://uploads.ru/t/k/g/2/kg2uC.jpg

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

http://uploads.ru/t/r/t/J/rtJYD.jpg

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

http://uploads.ru/t/N/8/A/N8A6U.jpg

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

http://uploads.ru/t/V/N/U/VNUDf.jpg -> http://uploads.ru/t/S/N/W/SNW2X.jpg
Все администраторы ролевых форумов (да и не только ролевых) обожают вставлять в таблицы красивые надписи-заголовки. Поэтому тут настало времени поговорить о шрифтах, о том, как они работают и, наконец, о том, как сделать шрифт не только красивым, но и читабельным.

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

#селектор {font-family: Georgia, 'Times New Roman', Times, serif;}

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

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

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

Выбираем язык шрифта:
http://uploads.ru/t/Q/p/h/QphHi.jpg

Выбираем шрифт и нажимаем кнопку Quick-use:
http://uploads.ru/t/1/G/l/1GlFz.jpg

Под предпросмотром шрифта надо еще раз отметить использование Кириллицы:
http://uploads.ru/t/N/n/U/NnUWL.jpg

Вставляем код себе на сайт/форум:
http://uploads.ru/t/H/Y/r/HYrKn.jpg

Ниже отображается CSS свойство и значение, которое нужно задать селекторам, к которым необходимо применить этот шрифт:
http://uploads.ru/t/z/r/P/zrPLl.jpg

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

http://uploads.ru/t/m/k/Y/mkYfp.jpg

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

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

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

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

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

коды

HTML

CSS

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

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

font-style:italic;

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

font-weight:bold;

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

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

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

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


Источник: http://qssupport.ru/viewtopic.php?id=2482




Рекомендуем посмотреть ещё:


Закрыть ... [X]


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

Все элементы дизайна форума Создание логотипов и элементов дизайна - Форум WebForMyself - Основы
Все элементы дизайна форума FAQ по дизайну форума СSS 3. Иконка сообщений (Скрин 2. элемент 3)
Все элементы дизайна форума Бесплатная коллекция элементов дизайна для форума
Все элементы дизайна форума Элементы дизайна. / Обо всем / Форум
Все элементы дизайна форума Графика, дизайн сайтов - SEO форум m
Все элементы дизайна форума Новый стиль дизайн форума для uCoz
Все элементы дизайна форума Элементы для дизайна - Форум
Форум дизайнеров Антураж студия декора ВКонтакте Декор стен: 44 фото-идеи необычного декора стен на заметку Деловой центр «Новь» : Центр оптовой торговли : Блузки Интерьер цветочного магазина: фото идеи

Похожие новости