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

Страница: 1

Тема закрыта

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

Поделиться125.08.20 13:59

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

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

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

Сам топик статьи будет пока что закрыт, чтобы комментарии и вопросы не помешали разместить информацию в плавильной последовательности.
Новости об обновлении статьи я буду публиковать здесь: Обсуждение статьи: «Как сделать дизайн форума/сайта?»
Свои вопросы по статье вы также можете задать там же.

Если вы хотите поддержать и смотивировать меня на скорейшее создание этого опуса, вы можете ЗАДОНАТИТЬ на кофе, шоколадку и нормальный микрофон (для видосов).

Оглавление

Начало разработки дизайна

Создание макета

Графика в вебдизайне

Формат графики
контент в разработке: Photoshop для новичков
Как "нарезать" макет. Правила использования графики в вебдизайне.

Основы CSS и HTML

Зачем нужен дизайн CSS
Как работает HTML
NEW! Как работает CSS
- new! Синтаксис CSS: Общее
- new! Синтаксис CSS: СЕЛЕКТОРЫ
контент в разработке: Инструменты разработчика

Верстка дизайна: погружаемся в CSS
контент в разработке:

Фон элемента (Backgound)
Отображение элемента (Display)
Позиционирование элемента (Position)
Отступы (margin и padding)

Верстка: ошибки новичков

Проблема лишних картинкок
контент в разработке: проблема длиннющих селекторов
контент в разработке: проблема "циганских юбок"
контент в разработке: проблема "бутербродов"

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

Поделиться225.08.20 23:46

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

Начало разработки дизайна
Как запланировать проект дизайна, какие ошибки допускают новички.

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

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

Для начала дизайнеру нужно определиться со следующим:
1. какой контент содержат страницы и как лучше его разместить
Это касается стандартного функционала движка. Например, в интернет-магазине есть вывод товаров, категории товаров, контент на странице товара, корзина и т.д. На форуме есть список категорий, список топиков, сообщения на странице топика, профиль пользователя и т.д.
Всё это можно и НУЖНО изменить "под себя" - в этом и есть первостепенная задача СВОЕГО дизайна: чтобы форум стал удобнее для нужд конкретной аудитории.

2. какой дополнительный контент должны содержать страницы и как лучше его разместить
Это касается не стандартного функционала движка, а вашего встроенного: что НУЖНО будет выводить на сайте или форуме, какие виджеты будут необходимы и полезны, что из этого стоит разместить только на главной, а что - на каждой странице, и т.д.
Это делается на этапе продумывания дизайна, чтобы потом не было проблемы "куда же это засунуть" и не тащить к себе как сорока все прикольное и блестящее, а только реально нужное.

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

Наверх к оглавлению

Примеры продумывания шаблонов

Интернет-магазин игровых услуг.
В обычном интернет-магазине правильно было бы сделать картинки товаров, чтобы на странице пользователь мог раскрыть картинки товара или покрутить объект в зд, оценив со всех сторон дизайн телевизора/смартфона/труселей (или что он там покупает).
Но что лучше сделать, если наш "товар" - это услуга по прохождению какого-то контента из онлайн-игры? "Убийство Архимонда" в картинках изобразить можно, но это было бы странно.
Интересное дизайн-решение: интегрировать фоновую картинку вместо стандартной картинки товара:

Дизайн для проекта ForumD.ru или MyBB Bright Flat.
На обычном форуме для общения сам шаблон дизайна может быть стандартным. Но что, если наш проект - это скорее "блог", чем форум? Например, на главной форума нужны длинные описания разделов и много ссылок для быстрого перехода, на страницах списка тем нужно выделять заголовки топика, а на страницах топиков важен контент (статья), а не куча полей профиля пользователя.
Дизайн-решение: переписываем полностью форумные таблицы в блоки - так, чтоб они соответствовали формату блогов, а не форума.

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

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

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

Наверх к оглавлению

Зачем нужен дизайн? Как придумать дизайн для сайта?

Наверх к оглавлению

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

Этап 1. Составляем список нужного и ненужного.
Считайте этот этап подготовкой ТехЗадания (брифа) по дизайну для самого себя. Этот этап позволит учесть все особенности вашего движка, весь дополнительный контент и все технические фичи, которые понадобятся на сайте.
Итак, форумы/сайты конкурентов мы закрываем и открываем чистый лист для заметок. На нем надо разместить:

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

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

Этап 2. Продумываем общий схематический дизайн шаблона.
Прежде, чем открывать фотошоп или искать самую красивую сисястую эльфийку, которая идеально впишется в ваш дизайн, необходимо взять чистый лист бумаги и схематично от руки нарисовать как вы видите ваш будущий дизайн.
Желательно - постранично. Можно это делать поэтапно, особенно, если работаете со сложносоставным движком с кучей разных страниц типа интернет-магазина или форума. На примере форумов: сначала нарисовали себе главную и приступили к макету, а список тем, посты, профили и прочее будем подрисовывать отдельно, когда до них дойдет дело.
Однако хотя бы общим концептом надо озаботиться СРАЗУ.

Вот примеры моих каракулей при продумывании разных дизайнов:

Сообщения на странице топика для ФД

Идея
Воплощение

Необычное меню для форума

Идея
Воплощение

Невоплощенное (лендинг для ФД и идея ролевого дизайна)

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

Только после этих этапов можно приступать к макету. А прорисовка макета будет буквальным продолжением этих этапов.

Что важно: хочу вдохновить и успокоить новичков, которые не берутся продумывать нестандартный шаблон просто из боязни не осилить верстку.
Ваша фантазия относительно шаблона может быть ограничена только фактором УДОБСТВА для пользователей. То есть вы на этапе подготовки должны знать, что ЛЮБОЙ стандартный элемент движка можно куда-нибудь подвинуть, в любое место вставить красивые рамочки, в любое место добавить какой-нибудь свой контент или блок для картинок. Даже проблемы с технически ограниченными движками типа mybb, wix, ucoz и т.д. (где нет доступа в html-код) решаемы (хоть и через жопу).
Решить свои проблемы с воплощением дизайна можно на нашем форуме или других подобных ресурсах, задавая нужные вопросы и демонстрируя свои макеты. Так что отсутствие навыков при желании научиться делать дизайн круто, индивидуально и правильно не должно вас останавливать. Придумывайте сложные вещи, учитесь их исполнять и со временем вы сможете верстать что угодно для какой угодно платформы.

Наверх к оглавлению

no-prof

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

Поделиться312.09.20 17:44

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

Создание макета
Основы разработки дизайна на макете.

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

Как делать макет для дизайна форума/сайта?
Для кого-то это может быть открытием, поэтому на всякий случай сразу обозначим: макет для дизайна форума/сайта рисуется целиком, а не по отдельным частям.
Макет - это второй этап продумывания дизайна, где вы размещаете весь контент сайта, разрисовываете, придаете элементам форму и т.д.
Вот так это выглядит:

Потом макет "нарезается" на отдельные элементы, которые вставляются в код сайта.

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

Делайте ПОЛНЫЕ подробные макеты
Макет - это финальный этап продумывания дизайна (почти окончательный этап), где вы решаете где какой текст должен быть расположен, какого он должен быть размера и какого цвета. Чем подробнее макет, тем меньше проблем с его версткой. Когда вы что-то не вносите на макет потом будете сталкиваться с проблемой "а куда это засунуть".
Представьте, что макет будете верстать не вы и всего что на макете нет, не будет и на сайте - и вот с таким подходом рисуйте ВСЁ. Да, это сложно, это дольше, зато это - профессиональный и правильный подход к дизайну, который убережет вас от многих проблем.

Конечно, макет - это ВАШ рабочий инструмент, и он НЕ обязан содержать каждую внутреннюю страничку и каждую точечку. К тому же, часто бывает, что в процессе верстки некоторые мелочи меняются, переносятся, добавляются. Но это не повод отказаться от подробного макета.
На просторе рынка ролевых дизайнов можно наблюдать вот такие макеты:

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

Продумывайте верстку при разработке макета
Другая проблема дизайнеров - это отрисовка невероятной красоты, которую потом либо нереально вкорячить, либо реально, но очень тяжело.
К сожалению, проблема встречается даже у профессиональных дизайнеров и лечится только с практикой. Когда дизайнер вообще не прикасается к верстке, у него наблюдается много косяков при разработке.
Здесь я выдам несколько основных советов для начинающих, которые упростят вам жизнь.
Во-первых, учитывайте разрешения экрана. Если рисуете фиксированный дизайн, нанесите на макет основные слои разрешений - тогда станет видно, как будет обрезаться ваша супер-симпотичная шапочка, помещаются ли элементы форума на узком экране и т.д.
Во-вторых, когда рисуете всякие детальки, окантовки и т.д., учитывайте, что потом это всё надо как-то "нарезать" и куда-то вставить. Если пользуетесь готовым движком, отвлекитесь и посмотрите в код, подумайте, каким способом это надо будет засовывать.
Подробнее мы вернемся к этому вопросу в части Что учесть при разработке макета

Ошибки новичков в разработке дизайна
Это уже более субъективные вещи, с которыми приходилось сталкиваться. Однако, может быть, они кому-то пригодятся.
Во-первых, при подборе исходников следует учитывать, что не бывает неподходящего цвета. Любую картинку можно перекрасить под ваш дизайн. Некоторые, конечно, "красятся" с трудом, но в любом случае вам следует озадачить себя поиском уроков по колоризации различных элементов в графическом редакторе, а не искать неприменно "красную" эльфийку - это вам поможет в будущем, и, если не умеете, лучше начать этому учиться уже сейчас. Когда подбираете исходники, смотрите на форму, а не на цвет.
Во-вторых, не надо смешивать стили рисовки. Например, анимешный персонаж + компьютерная графика + фото реального человека одновременно в одной шапке смотрятся нелепо. (если только сайт не посвящен кино/комп.играм, но даже в этом случае 2д и 3д объекты рядом никак не смотрятся - надо выбирать: либо засовываем нарисованное, либо реалистичное, либо разграничиваем это как-то отдельно.) То же можно сказать и про элементы дизайна: реалистичная металлическая рамочка не подойдет под дизайн в стиле рисованной графики.
В-третьих, не всегда стоит пихать в дизайн слишком много исходников и графики. Например, в шапке сайта очень органично смотрится ОДИН персонаж, а не десять. Но новички любят понапихать побольше или сделать шапку-коллаж из кучи всего сразу. Другой пример - не каждому форуму/сайту нужен "графонистый" дизайн, состоящий из кучи картинок, мелочей, кнопок и окантовок. Если речь о фентези-ролевой, то это актуально, но если форум больше сконцентрирован на общении или контенте, то вам ни к чему настолько "атмосферный" дизайн и следует быть проще.

Наверх к оглавлению

Советы по работе с макетом

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

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

Как вы видите, папка ВНУТРИ папки - это тоже неплохая идея, когда речь идет о большом макете, состоящем из множества элементов.
Что именно объединять?
Во-первых, стоит раскладывать макет на элементы сайта (шапка, подвал, сайдбар, "рамка тела", контент).
Во-вторых, любой элемент который насчитывает с десяток слоёв заслуживает храниться в папке. Нарисовали окантовочку, украшенную кучей листиков, звездочек и блестяшек? Упакуйте все эффекты по папкам: "листья"/"звезды"/"блестяшки".

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

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

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

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

4. Не склеивайте слои без необходимости.
Ни один дизайнер - не робот. В любой момент можно допустить ошибку: можно что-то криво обрезать, где-то может торчать лишняя тень, можно ошибиться со стилем слоя и т.д. И все это может быть не на поверхности, а зарыто где-то между слоёв. А самое главное - такие косяки иногда выявляются даже не стадии верстки, а когда уже начинаешь пользоваться дизайном и замечаешь, что кое-что кое-где криво.
Поэтому у вас ВСЕГДА должна быть возможность "откатиться", выкопать проблемный слой, в пару кликов решить проблему и перезалить элемент дизайна.

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

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

Наверх к оглавлению

Что учесть при разработке макета

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

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

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

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

1400-1500 ни в коем случае не является каким-либо стандартом. Есть еще люди с мониторами шириной 1600px и 1920px. А бывают и ребята, которые покупают огромные моники с разрешением в 2560 или даже 3840. Не обязательно, чтоб картинка заполняла всю ширину монитора в 3850px, но нужно, чтоб она не обрывалась даже на таком широком дисплее. Если вы работаете с маленького монитора, вы должны рисовать макеты как минимум на 1920 в ширину и делать фон таким, чтобы он либо мог растягиваться на любую ширину, либо красиво переходил в цвет, а не резко обрывался.

Такой же ошибкой является, когда дизайнер, напротив, пользуется огромным монитором и считает, что шапки и фоновые элементы размером, например, в 1300 пикселей - это отличная ширина. Да, с монитора в 1920 и выше такая ширина выглядит отлично, но бывают пользователи с разрешением 1280 и 1024 - при фиксированном дизайне у таких ребят будет неудобный горизонтальный скролл.
Если вы хотите делать широкие дизайны, вы должны делать их с учетом адаптивности: чтобы можно было их делать не фиксированными, а "резиновыми" и подстроить под разрешение экрана. Если же вы делаете фиксированный дизайн, ориентируйтесь на пользователей ПК с самым низким разрешением: 1024 - максимальная ширина для "туловища" и шапок (хотя бывают нетбуки с меньшим разрешением, но черт с ними, пусть они считаются уже "мобильными").

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

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

Выравнивание элементов
Следующие проблемы с макетами - это кривые макеты.
В принципе, макет - это ваш рабочий инструмент, и он действительно может содержать несоответствия в размерах и неточности (которые легко правятся на стадии верстки) или на нем вообще может отсутствовать часть контента (которую вы и без макета знаете, как и куда пристроить).
Но надо понимать, где в макете можно действовать по принципу "и так сойдет", а какие вещи вам аукнутся на стадии верстки. Например, размеры заголовков и шрифтов правятся легким движением руки в коде сайта. Также в большинстве случаев не составит труда, например, поправить отступы элементов друг от друга. А вот когда у вас справа рамочка в 6 пикселей, а слева в 7 пикселей, это может обернутся тем, что при верстке внутренних элементов вы без калькулятора не обойдетесь.
Основные фоновые элементы у вас должны быть ровными и симметричными.
Во-первых, НЕ делайте элементов с нечетной шириной. Например: 803px - это плохо, сделайте 804 или 802. За счет этого будет проще считать отступы внутреннего содержимого и верстать.
Во-вторых, соблюдайте симметрию. Глазу не видна разница в 1 пиксель, но код это увидит и заставит танцевать шаманские танцы с бубном. Это важно, если вы хотите освоить адаптивную верстку. Во избежание проблем с несимметричностью и кривизной, старайтесь при создании похожих элементов, делать копии предыдущего, а не создавать новый, и из этой копии дорабатывать элемент.
Также вам пригодится освоить приемы по выравниванию элементов относительно друг друга. Когда я делала свои первые фиксированные кривые дизайны, очень часто моя шапка получалась шире/уже с одной из сторон и не состыковывалась с "туловищем". Чтоб у вас такого не было, используйте и вспомогательные слои, и инструменты программы, которые могут сами поставить вам элементы справа/слева/по центру. Если вы используете Photoshop, то в следующей части Photoshop для новичков можете посмотреть, как это делается. У других редакторов также есть схожий инструментарий.

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

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

Рисуйте окантовки прямо на макете так, чтоб их можно было разделить на эти части.
А еще когда рисуете двойную окантовку следите, чтоб ее можно было "разрезать" на одинаковой высоте. Например:

Паттерн на фоне повторяется без швов на этой высоте, "зубчики" окантовки размножены ровно настолько, чтоб примыкать к повторению "бордюра". Зачем всё это нужно? В следующей части мы поговорим о форматах графики, но помимо этого следует учесть, что вы не напасётесь селекторов для вставки всяких "подюбников" отдельными картинками. А я очень часто при верстке чужих макетов сталкивалась с тем, что каждый подобный элемент окантовки имеет разную высоту и необходимо перерисовывать половину макета. Чтоб вас не постигала беда с возможными дорисовками и доделками на стадии верстки, старайтесь делать такие вещи заранее.

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

Наверх к оглавлению

no-prof

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

Поделиться406.11.20 03:26

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

Графика в вебдизайне
Правила создания графики для дизайна.

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

Формат графики
Для дизайна ВАЖЕН формат графики, т.к. он влияет и на качество картинок, и главное - на его ВЕС! Ваша задача делать графику в таком формате, чтобы ее вес был минимален.
Для начала изучим, какие бывают картинки и какие из них подходят для дизайна.
Сразу обозначим приоритет использования форматов в вебдизайне: SVG/WEBP > JPEG > PNG > GIF

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

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

сжимает изображения без потерь на 26% лучше, чем PNG
сжимает изображения с потерями лучше, чем JPEG на 25-34%
поддерживает прозрачность без потерь при увеличении размера всего лишь на 22%

Формат JPG (49.086 кб)

Формат PNG (70.960 кб)

Формат GIF (36.519 кб)

Формат WebP (37.054 кб)

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

JPG - это формат, который нужно использовать в вебдизайне по МАКСИМУМУ, если вы не хотите пересаживаться на WEBP. Он позволяет занизить качество изображения, уменьшив его вес, так, чтобы человеческий глаз не видел сильной потери качества. Ошибка новичков - просто сохранять в JPG, не пытаясь кликать в ползунки графического редактора, скидывая лишние килобайты веса. Хотя даже если ничего не сжимать, этот формат всё равно легче GiF и PNG при своем качестве картинки, так что именно в нем надо сохраняться, если у элемента нет прозрачности.

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

"Подвал" ролевого дизайна

Использующаяся картинка

Такие огромных PNG картинок в вебдизайне быть не должно. Я и сама по началу из-за неопытности (а позже - из-за лени) частенько делала гигантские png-шапочки или png-окантовочки, но сейчас ответственно заявляю: такие штуки можно и НУЖНО делать только в JPG (а лучше - в WEBP).
PNG - это для маленьких иконочек, рюшечек и логотипов с прозрачностью. Ну, или для клипарта и исходников, а такое в вебдизайне не используется. Если в вашем элементе прозрачность не нужна, используйте JPG (а лучше - в WEBP). Если ваш элемент нуждается в прозрачности, но при этом он огромный, то думайте, как это сделать через JPG.
Вообще всегда и везде старайтесь максимально избегать этого формата. Например, иконки можно сделать в JPG, если они будут стоять на однотонном фоне. Да, и даже если иконки стоят на фоне текстурки, в некоторых случаях можно в фон иконки засунуть ту же текстурку и они будут визуально отображаться без "стыков". Правильный пример использования PNG - это, например, логотип, который "ездит" по фону шапки: если лого должно быть в одном месте, а фоновая картинка подстраивается под размеры экрана, можно вырезать лого отдельно и вставлять в PNG.

GIF - это формат невысокого качества (ограничен на 256 цветов), поддерживающий прозрачность (хреново) и анимацию. Его часто используют новички бездумно, однако он достаточно сложный и требовательный к своему изучению. Я бы рекомендовала от него вообще отказаться - его не должно быть в современном вебдизайне, но т.к. многие новички до сих пор его используют, я подробно расскажу о нем.
Из достоинств: этот формат порой легче JGP и PNG, однако это связано с потерей качества. Если отмотать наверх к картинкам с роботами, вы увидите, что GIF даже легче WebP, однако картинка стала "зернистой" - потеря качества заметна. Так что, он НЕ подходит для любых картинок, где много теней, цветов, световых эффектов и т.д. Однако, если в картинке цветов по минимуму, то, сохранив в GIF, вы получите иногда даже меньше размер, чем у JPG.
Он подходит для маленьких немногоцветных иконочек, смайликов, тоненьких бордюрчиков, рюшечек и т.д. В таких случаях от этого формата можно получить пользу.
При использовании прозрачности GIF делает элементу обводку, например, вот этот смайлик шикарно выглядит на белом фоне: :cool: , и весит вообще не много, однако переключаясь на темную тему форума, вы увидите неровные белые края смайла. Так что, использовать прозрачность можно, но нужно делать это с умом.
Гифки до сих пор востребованы из-за анимации, однако это их свойство уже стоит одной ногой в могиле. Они, конечно, еще некоторое время будут жить в виде смайлов и баннеров, но вы могли заметить, что загружая гифки на все современные соц-сети, они преобразуются в видео-формат. Почему? Потому что видео весит меньше, чем гифка, а качество замечательно. При создании видео-анимаций мы не ограничены количеством цветов, нам не приходится долго подбирать настройки качества, делая анимацию легче и т.д.

Почему надо отказаться от анимации в GIF
В вебдизайне гиф-анимация живет только в руках новичков, которые знают некоторые трюки создания анимации, но не освоили другие современные методы. В старой статье 2012го года я рассказывала про GIF-анимацию, как сделать ее легче, как ее встраивать в дизайн, но сейчас этого просто НЕ БУДЕТ, от нее надо отказываться.
Во-первых, простейшую анимацию можно и нужно делать через CSS. Например, когда какая-нибудь иконка или индикатор мигает, прыгает или меняет свой цвет - реализуемо просто кодом. Картинки для этого нужны, только если прыгать, мигать и менять цвет должен не просто кружочек/квадратик, а какая-нибудь иконочка. И, в отличие от GIF, анимацию через CSS мы можем делать интерактивной: мигать только при наведении курсора, прыгать только при нажатии на элемент и т.д.
Во-вторых, современный HTML поддерживает встроенные видео-элементы и может проигрывать и зацикливать видеофайлы. Поэтому сложную и красивую анимацию надо осваивать в видеоредакторах. Весить будет в разы меньше гифок, а качество будет в разы больше: можно сделать, чтоб по всей шапке сайта горел огонь, мерцали искры, летали феи или даже видео-нарезка отображалась. Весить это счастье будет немного.
Если вас пугает мысль об освоении видеомонтажа, я вам честно заявляю: это сложно настолько же, насколько сложен фотошоп со своими гифками - там тоже не легко добиться эффекта горящего огня, мерцающих искр и т.д., но при этом на выходе получается либо хреновое качество, либо картинка весом в гигабайты, а в видеоредакторе при тех же усилиях вы сможете смонтировать большую шапку с цикличной анимацией и получить хорошее качество.
Про видеомонтаж здесь уроков не будет, но по опыту скажу, что забивая в гугл запросы "как сделать огонь на видео" и "видео футаж - горящий огонь", вы найдете ответы, уроки и дальше с практикой разберетесь. Зато в статье мы разберемся с тем, как вставлять видео-анимацию на сайт и как делать анимацию через CSS, так что, надеюсь, в вашем случае гифки упокоятся с миром и использовать их в вебдизайне вы не будете.

Наверх к оглавлению

Photoshop для новичков
Как уже написано в предыдущей части, созданию графики для дизайна невозможно научиться за "десять простых шагов". Только практика, практика и еще раз практика. Однако здесь я дам несколько простейших уроков в Photoshop для новичков, которые пригодятся для создания дизайна для сайта/форума своими силами. Если вы гуру по фотошопу (или другим редакторам), можете смело пропускать эту часть и приниматься за изучение CSS далее.
Почему именно Photoshop? Просто, потому что он под рукой, и я в нем работаю дольше всего - лучше всего могу рассказать именно о нем.
Я НЕ рекомендую его как лучший графический редактор по работе с макетами. Чисто для справки и расширения кругозора - среди профи, если уж берутся за фирму Adobe, то чаще используют InDesign и Illustrator. Однако в последнее время, вышла масса профессиональных программ с более адекватным интерфейсом, которые являются полными аналогами продуктов Adobe, только работают лучше, быстрее и стоят меньше, так что дизайнеров специализированных фирмах частенько "пересаживают" на другое ПО. Кароче, макет вы можете рисовать хоть в пейнте (если ухитритесь придерживаться в нем правил, которые обозначены в этой статье), только в нем разбирайтесь сами, а я пойду по популистскому пути, тем более, что эта статья ориентирована на новичков, которые только начинают свой путь в дизайне и, скорее всего, именно Photoshop им попадется под руку.

Вспомогательные слои, линии, выравнивание
контент в разработке

Сохранение графики в разных форматах
контент в разработке

Основы колоризации
контент в разработке

Наверх к оглавлению

Как "нарезать" макет. Правила использования графики в вебдизайне

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

Чем меньше ВЕС графики, тем лучше
Это и есть основной принцип любой верстки. Наша задача - добиваться того, чтоб картинки занимали килобайты, а не мегабайты. В принципе, почти всё, что будет приведено ниже также является практическими советами о том, как можно сбрасывать "сбрасывать лишний вес" с сайта.
За основу надо взять правило корректного использования форматов - этим вы уже начнете уменьшать вес графики.
К этому же правилу можно отнести оргомные PNG-шапки и PNG-подвалы. Если что-то должно переходить в фон, оно должно вырезаться с фоном и вставляться в фон через jpg - не используйте увесистую графику там, где можно сделать через менее прожорливые картинки и коды.

НЕ используйте картинки (там, где можно без них).
Основная проблема верстки у новичков - постоянное использование фоновых картинок ВЕЗДЕ.
На самом деле основной ваш инструмент - это CSS. Всё, что можно сделать кодом, нужно делать кодом.

Например, не нужно вставлять белый квадратик, если вы хотите покрасить что-то в белый цвет (даже если этот квадратик размером 1px*1px). Вместо этого нужно использовать background: #fff;.
Если приведенный пример вам кажется глупеньким и уж совсем похожим на ошибки полных новичков, то вот еще пример из того, что попадалось на глаза:

В этом дизайне рамка заголовка "All You Need Is Love" сделана картинкой. Текстуру действительно можно вставить картинкой, но серая рамочка спокойно реализуется через свойство border, поэтому в этом случае нужно не вырезать в фотошопе длинную "колбасу" для заголовков, а вставить текстуру и обвести ее серой рамочкой на CSS.

Через CSS можно делать любые рамки, одноцветные и градиентные фоны, тени, формы и т.д. Прежде, чем вырезать что-то в фотошопе (или чем вы там пользуетесь), попробуйте загуглить "CSS Как сделать *название_штуки*" - даже с минимальным опытом и знаниями о CSS можно спокойно найти более рациональные способы что-то обвести, загруглить и покрасить.

Что нельзя сделать через CSS - это рисунки, текстуры. Вот только их и надо вставлять картинками.

Чем меньше размер картинки (ширина, высота), тем лучше.
Вы научились использовать корректный формат графики? Поздравляю! Теперь надо учиться "резать" макет так, чтобы ваша графика не была размером с лошадиную жопу. Ведь чем меньше ширина и высота картинки - тем меньше её вес.

Если фон вашего сайта залит текстурой, не нужно делать картинку 1920*1080px или более. Сайт - это не обои на рабочий стол. Вы вырезаете текстуру и размножаете ее так, чтобы она "заливала" сайт.
Если шапка вашего сайта плавно переходит в текстуру, то вы вырезаете шапку ВМЕСТЕ с текстурой и позиционируете ее на фоне также, чтобы она сливалась с текстурой сайта. Если немножко "поколдовать" с кодами фона и вырезкой шапки, никаких "стыков" на месте текстуры шапки и текстуры фона быть не должно.

Еще пример можно наблюдать на текущем дизайне этого форума: от лени и нежелания копаться/разбираться вставлены вот такие картинки для перехода фонов:

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

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

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

К этому же пункту относится использование спрайтов. Так уж получается, что 100 иконочек по отдельности будут весить больше, чем, если все эти иконочки засунуть в одну картинку (причем желательно - jpg) и через background-position выбирать какая из них будет отображаться. К тому же это просто удобнее. Вам будет проще поменять ссылку на картинку один раз, а не 100 раз.

Фоны отдельных элементов должны быть обособлены друг от друга.
Обратная проблема - это когда новички лепят прям ВСЁ на одну и ту же картинку.
Например, поверх шапки начинают в эту же картинку приделывать меню сайта, верх окантовки форума и фоновые элементы таблички, которая находится в шапке.
Верстка должна быть "живой", не надо фиксировать намертво элементы, присваивая им строго-определенное место из-за фоновых картинок.
Во-первых, вы дадите себе больше "Свободы" в изменении дизайна, если будете делать более динамичную верстку. Захочется повыше поднять меню и окантовку форума - поднимите, будет шапка поменьше, а меню повыше, делается просто кодом. Если же меню у вас "влипло" на фоне шапки, то простыми CSS кодами эту проблему не решить, и ничего никуда не сдвинуть.
Во-вторых, если вы собираетесь делать какую-никакую мобильную версию, то учиться отделять один элемент от другого просто необходимо. В мобильной версии каждый пиксель форума принимает другой вид, другую высоту. Например, как вы собираетесь расставить на узком экране информацию из "таблички", если приколотили её насмерть к шапке? Придется извращаться, прописывать для нее отдельный фон, делать для мобилок отдельную шапку... Проще основной дизайн сверстать не через ж, а на мобильном просто чуть-чуть подлатать позиционирование.
Отделять фоновые элементы друг от друга надо по принципу функциональности. Шапка и фон - отдельно, меню - отдельно, окантовки форума/сайта - отдельно. Если какой-то элемент уже имеет другую функцию, другое назначение, не надо его фоны впихивать туда, где стоит другой селектор другого элемента.

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

Наверх к оглавлению

no-prof

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

Поделиться509.11.20 17:48

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

Основы CSS и HTML
Логика работы CSS и HTML, а также синтаксис этих языков

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

Зачем нужен дизайн CSS

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

На этих скриншотах вы можете увидеть как выглядит сайт вообще БЕЗ любых кодов CSS и сравнить их с одним из стандартных стилей движка:

Форум без дизайна Главная страница	Форум со стандартным дизайном Главная страница
Форум без дизайна Страница топика (темы)	Форум со стандартным дизайном Страница топика (темы)

Как вы видите, без CSS контент на страницах вообще не возможно адекватно воспринимать, а с самым стандартным простеньким дизайном движка всё становится понятно и компактно - меню выстраиваются в ряд, таблички имеют отступы и разделители, лишние надписи убраны, заголовки подкрашены и т.д.
Таким образом, основная задача дизайна не просто наведение красоты, но и самое главное - улучшение интерфейса. И об этом никогда не стоит забывать в разработке своих стилей. Главное - не то, какого цвета рамочки и какая сисястая красавица будет в шапке, а главное - чтоб у вас не "слиплись" элементы интерфейса друг с другом в нечитаемую кашу, где одно невозможно отличить от другого.

Наверх к оглавлению

Как работает HTML

Что такое HTML и чем он отличается от CSS.
HTML - это специальные теги, которые содержат внутри контент вашей страницы.
На примере выше можно увидеть, что если удалить CSS код, HTML коды никуда не делись, просто у них обнулился дизайн до такого, который есть в браузерах по умолчанию: белый фон, черный текст Times New Roman, синие ссылки, гигантский размер шрифта у заголовков и т.д.
В разных движках форумов или сайтов HTML код страницы формируется по-разному. В хороших движках у администратора есть доступ в шаблоны страниц и вы можете сами втыкать контент между выбранных ВАМИ тегов. Во всяких сайтах-конструкторах и бесплатных форумных хостингов доступ к HTML-коду страниц часто отсутствует: они предоставляют некий "стандартизированный" код и менять его можно только скриптами.
Важно понимать: CSS код не меняет HTML элементы. Он заставляет их выглядеть и отображаться по-другому, это только визуальная часть. Например, можно с помощью CSS заставить меню "прилипнуть" к верху окна браузера, но "физически" меню остается в коде страницы там же, где и было - оно не перемещается в самый верх. Зная это, вы можете понимать, какие проблемы решает CSS, а где нужно искать скрипты, либо (если есть такая возможность) лезть в шаблоны страниц.

Структура HTML
Основа HTML кода любого сайта будет такой:

Внутри body будут располагаться все элементы страницы.

Теги вложены друг в друга и идут такой вот "лесенкой":

Тег, который вложен внутрь, называется дочерним элементом.
А тег, внутрь которого вложен дочерний элемент, называется родительским элементом

На примере выше:

Дочерние элементы

<p></p> является дочерним элементом для <div></div>
<span></span> является дочерним элементом для <p></p>

Родительские элементы

<div></div> является родительским элементом для <p></p>
<p></p> является родительским элементом для <span></span>

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

Синтаксис HTML
У всех HTML-тегов (как и у CSS или любого языка программирования) есть синтаксис - правила их написания:

Первый тег называется "открывающий тег": название тега пишется латинскими буквами без пробелов внутри скобочек <>
Второй тег называется "закрывающий тег": название тега пишется латинскими буквами без пробелов внутри скобочек со слешем </>, и естественно название должно быть таким же, как и закрывающий тег.

Например:

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

ВАЖНО! Надо соблюдать синстаксис HTML, иначе вы "сломаете" код страницы. Например, если не поставить закрывающий тег </b> (или пропустите слеш в закрывающем теге), то весь текст на странице станет жирным. Такая ошибка часто допускается случайно при написании своих HTML кодов. Однако, когда вы понимаете синтаксис, вы знаете, где искать ошибку.

Какие бывают HTML теги.
Стандартных HTML-тегов для контента существует огромное количество, при желании подобрать нужный можно загуглить, например, "HTML как создать таблицу/заголовок/строчный текст/блок/что_там_еще_вам_надо".
У всех стандартных тегов есть определенная связь с стилями по умолчанию. Как в примере выше, текст внутри тегов <b></b> по умолчанию жирный. Теги таблицы позволяет сортировать контент в ячейки, которые расставят их по умолчанию в ряд. Блоки по умолчанию растягиваются на всю ширину страницы и т.д.

Некоторые теги - особые и не имеют закрывающего тега. Например, тег картинки:

Также никто вам не запрещает дописывать СВОИ кастомные теги. Они не будут никак связаны с стандартизированными стилями, зато под них можно прописать свои собственные. Например:

Такой текст вполне можно вставить в любую HTML-форму, теги отображаться не будут, а контент - будет. И потом с помощью стилей CSS можно будет такому тегу задать какое-то особое отображение.

Атрибуты HTML тегов и их синтексис.
Еще у HTML-тегов существуют атрибуты. Это такие специальные надстройки, которые вписываются в открывающие теги и придают им особые свойства.
Синтаксис у атрибутов такой:

Как вы видите атрибуты вставляются в открывающий тег через пробел от названия тега.
После названия атрибута ставится знак равенства и кавычки ="".
В кавычках пишется значение. У разных атрибутов бывают разные значения.
Бывает несколько атрибутов. В этом случае они также пишутся через пробел друг от друга. В конце открывающего тега пробел не нужен.

Примеры:

Код HTML	Демо	Описание атрибута и значения
Скрытый текст: Для просмотра скрытого текста - войдите или зарегистрируйтесь.	[html]<p title="всплывающий текст">Текст</p>[/html]	title - это атрибут, который добавляет подсказку (которая появляется при наведении курсора) значением этого атрибута является всплывающий текст - именно он появится при наведении курсора
Скрытый текст: Для просмотра скрытого текста - войдите или зарегистрируйтесь.	[html]<a href="https://forumd.ru/" target="_blank">Текст ссылки</a>[/html]	href - это атрибут, который определяет адрес ссылки, а адрес ссылки в этом случае является значением. target - это атрибут, который определяет, где будет открываться ссылка. В данном случае _blank - это значение, которое откроет ссылку в новой вкладке.
Скрытый текст: Для просмотра скрытого текста - войдите или зарегистрируйтесь.	[html]<img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" style="border:5px solid;">[/html]	Атрибут src устанавливает ссылку на файл, в данном случае его значение - это ссылка на картинку. Атрибут border устанавливает рамочку вокруг элемента, а значение (цифра 5) - это ширина рамочки.

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

HTML атрибуты для дизайна: style, id и class
Теперь поговорим о атрибутах и тегах, которые напрямую влияют на дизайн.
Как уже говорилось выше, у всех стандартных тегов есть некоторые стили по умолчанию, например:
<span>текст</span> - это строчный текст, он по умолчанию встает рядом с другими элементами.
<p>текст</p> - это абзац, он ведет себя как блок: любые элементы после него по умолчанию перенесутся на новую строчку.
<div>текст</div> - это блок, по умолчанию растягивается на всю ширину, и любые элементы после него перенесутся на новую строчку.

"Поведение" любых тегов по умолчанию можно менять с помощью CSS кодов (а также дополнять другими свойствами и стилями). Однако чаще всего мы НЕ хотим, чтобы менялись абсолютно все теги данного типа, а хотим, чтоб какой-то конкретный имел другой стиль.

Один из методов это сделать - атрибут style:

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

Другой метод прописать стили для элементов - это атрибуты id и class.

id - это уникальный идентификатор элемента. В свойства этого атрибута можно вписать только один идентификатор.
ВАЖНО! По правилам "хорошего кода" идентификаторы предназначены для обозначения одного элемента, т.е. один и тот же идентификатор никогда не должен использоваться дважды. Конечно, вы можете расположить на странице разные блоки с одним и тем же ID - это будет работать, но тем самым вы рискуете устроить кашу в коде и лишить себя некоторых возможностей. Для посторяющихся по стилю элементов гораздо лучше использовать классы.

class - это класс элемента. Можно прописать один, а можно сразу несколько.

Также могут быть ситуации, когда для элемента можно присвоить одновременно и идентификатор, и класс одновременно:

Значением атрибутов id и class является любой текст, состоящий из латинских букв и циферок. Также можно использовать символы - или _. Не рискуйте использовать что-либо другое, т.к. не все браузеры реагируют на необычные символы или кириллицу.

Имея в коде атрибуты id и class, мы можем писать любые стили для них в CSS. Например:

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

Подробнее о использовании классов и идентификаторов можно почитать тут: Правильное использование классов и идентификаторов.

Наверх к оглавлению

Как работает CSS

Что такое CSS, чем он отличается от HTML и как работать с CSS кодами
CSS (Cascading Style Sheets, каскадные таблицы стилей) — язык описания внешнего вида HTML-тегов.
HTML и CSS действуют в единой связке, но выполняют разные задачи. HTML создает структуру (разметку) страницы: тут сделать табличку, тут добавить блок, здесь вставить заголовок и т.д. А CSS описывает как должна выглядеть структура: пусть табличка растягивается на всю ширину страницы, пусть блок прилипнет к краю экрана, пусть заголовок будет красного цвета и т.д.

В любом движке есть возможность вставлять CSS коды различными методами.
Во-первых, можно вставлять коды через HTML.
В виде ссылки:

<link rel="stylesheet" type="text/css" href="файл.css">

Или с помощью тегов:

<style>
тут ваши коды
</style>

Такие ссылки и теги лучше всего вставлять между тегов <head> - так они будут быстрее обрабатываться.
Но если это не основные стили или платформа не дает возможности редактировать <head>, то можно вставить в другое место, где работает HTML. Основное правило: чем "выше", тем лучше, например, если стиль относится к скрипту - ставьте стиль выше скрипта, чтобы при срабатывании скрипта дизайн не подвисал.

Во-вторых вы можете ссылаться внутри самих CSS стилей на другие css-файлы кодом:

@import url('файл.css');

ВАЖНО! такая ссылка должна стоять в самом начале CSS-стиля, иначе она работать не будет.

Пример:

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

Синтаксис CSS: Общее
Любой css код состоит из СЕЛЕКТОРА, СВОЙСТВА и ЗНАЧЕНИЯ.

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

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

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

селектор {тут коды стиля}

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

селектор, селектор, селектор {тут коды стиля}

ВНИМАНИЕ! После последнего селектора запятая НЕ СТАВИТСЯ!
Также не допускайте пробела перед запятой, иначе код не будет работать! Пробел после запятой можно не ставить, но рекомендую все же его сохранять - так будет визуально проще работать с кодом.

Свойства и значения пишутся внутри фигурных скобок. После свойства ставится двоеточие.

селектор {свойство: значение}

ВНИМАНИЕ! не допускайте пробела перед двоеточием, иначе код не будет работать! Пробел после двоеточия можно не ставить, но рекомендую все же его сохранять - так будет визуально проще работать с кодом.

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

селектор {свойство: значение; свойство: значение; свойство: значение;}

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

Также не обязательно писать CSS код в одну строку. CSS коды толерантны к переносу на следующую строчку через enter.
Например:

селектор {
свойство: значение;
свойство: значение;
свойство: значение;
}

селектор,
селектор,
селектор {
свойство: значение;
свойство: значение;
}

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

Синтаксис CSS: СЕЛЕКТОРЫ
Селектор ссылается на конкретный HTML-код и выбирать селекторы можно разными способами.
Базовые правила написания селекторов таковы:

HTML код Скрытый текст: Для просмотра скрытого текста - войдите или зарегистрируйтесь.
CSS код	Пояснение
Скрытый текст: Для просмотра скрытого текста - войдите или зарегистрируйтесь.	Серектором могут быть просто HTML теги, такие как span, div, p и т.д. В этом случае коды применяются на ВСЕ HTML-теги этого типа на страницах сайта. Например, если вы пропишите, что span должен быть красного цвета, то весь контент внутри любых тегов span окрасятся в красный.
Скрытый текст: Для просмотра скрытого текста - войдите или зарегистрируйтесь.	Селектор можно взять по классу элемента. Если HTML-код содержит атрибут class="my-class", то в CSS можно сослаться на него поставив точку и название класса: .my-class. В этом случае коды применятся на ВСЕ HTML-элементы, у которых есть класс с таким названием. В отличие от предыдущего примера, такой способ позволяет применять стили выборочно только к тем элементам, которые помечены определенным классом, а не ко всем тегам данного типа.
Скрытый текст: Для просмотра скрытого текста - войдите или зарегистрируйтесь.	Селектор можно взять по ID элемента. Если HTML-код содержит атрибут id="my-id", то в CSS можно сослаться на него поставив решеточку и название ID: #my-id. В этом случае коды применятся на HTML-элемент, у которого есть ID с таким названием. И, как описано выше (см. HTML атрибуты для дизайна), по правилам "хорошего кода" идентификаторы предназначены для обозначения одного элемента, т.е. один и тот же идентификатор никогда не должен использоваться дважды. Соответственно, такие стили будут затрагивать только один конкретный элемент, если в вашем HTML-коде все сделано верно.

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

HTML код

CSS код

Пояснение

Синтаксис: Если вы хотите выбрать элемент, который имеет одновременно класс и идентификатор, вам необходимо написать селектор без пробела, как в указанном примере.

Применение: Если у нас в коде есть много кнопок с классом class="primary", то конкретно кнопку "Отправить" можно видоизменнить, добавив идентификатор к селектору.

Синтаксис: Если вы хотите выбрать дочерний элемент внутри другого элемента, то селекторы разделяются пробелом, как в этом примере.
ВАЖНО! В этом случае важно следить, что сначала мы указываем селектор родительского элемента, а потом дочернего. Всегда начинаем с элемента, ближайшего к "корню" HTML разметки.

Применение: Если у нас уже прописан стиль для всех элементов с классом class="my-class", то мы можем видоизменить стиль для этого блока, обратившись к родителю с ID id="my-id".

Селектор можно прописать не по классу или ID, а по другим атрибутам. Например:

Скрытый текст: Для просмотра скрытого текста - войдите или зарегистрируйтесь.	Этот код воздействует на все ссылки (<a>), которые открывают ссылки в новой вкладке (т.е. у которых есть атрибут target со значением _blank)
Скрытый текст: Для просмотра скрытого текста - войдите или зарегистрируйтесь.	Такой код воздействует на все ссылки (<a>), которые содержат кусочек ссылки /profile.php? (на примере нашего форума - такие ссылки связаны с профилями любых пользователей).

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

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

Псевдокласс — это селектор, который выбирает элементы, находящиеся в специфическом состоянии.
Самый простой пример псевдокласса, с которым вы столкнетесь - это :hover - он позволяет осуществлять какие-либо изменения при наведении курсора.

Псевдоэлементы ведут себя сходным образом, однако они действуют так, как если бы вы добавили в разметку целый новый HTML-элемент.
Самые распостраненные примеры псевдоэлементов - это :before и :after - они позволяют добавить контент до или после какого-то элемента, как если бы вы залезли в разметку страницы.

Псевдоклассы и псевдоэлементы - это какбы "надбавки" к селекторам, они пишутся слитно через двоеточие после выбранного селектора. Также вы можете объединять псевдоклассы и псевдоэлементы.
Примеры:

HTML и CSS код	Результат	Пояснение
<a href="/">Cсылка меняет свое состояние</a> Скрытый текст: Для просмотра скрытого текста - войдите или зарегистрируйтесь.	[html]<div id="css-exmpl-1"><a href="#css-exmpl-1">Cсылка меняет свое состояние</a></div> <style> #css-exmpl-1 a { display: inline-block; padding: 10px; border-radius: 10px; color: #fff; background: #0080b7; } #css-exmpl-1 a:hover {background: #e63737;} #css-exmpl-1 a:active {background: #26af33;} </style> [/html]	Эта ссылка с помощью CSS превращена в кнопку с синим фоном. С помощью псевдокласса :hover та же самая ссылка будет иметь крассный фон при наведении на нее курсора. С помощью псевдокласса :active фон ссылки окрасится в зеленый, если на нее кликнуть.
<span class="name"> <a href="/profile.php?id=2">Вася</a> </span> Скрытый текст: Для просмотра скрытого текста - войдите или зарегистрируйтесь.	[html] <div id="css-exmpl-2"><span class="name"><a href="#css-exmpl-2">Вася</a></span></div> <style>#css-exmpl-2 .name:before {content: 'Автор статьи: ';}</style> [/html]	По умолчанию мы имеем только ссылку на профиль некого Васи. С помощью псевдоэлемента :before мы вставляем перед ссылкой пояснение, что Вася - это Автор статьи, при этом нам не пришлось лезть в HTML код и дописывать там это пояснение. Такой css-код работает так, как если бы у нас был следующий HTML: Скрытый текст: Для просмотра скрытого текста - войдите или зарегистрируйтесь.
<div class="my-class"> <div>Первый элемент</div> <div>Второй элемент</div> <div>Третий элемент</div> <div>Последний элемент</div> </div> Скрытый текст: Для просмотра скрытого текста - войдите или зарегистрируйтесь.	[html]<div id="css-exmpl-3"> <div>Первый элемент</div> <div>Второй элемент</div> <div>Третий элемент</div> <div>Последний элемент</div> </div> <style> #css-exmpl-3 div:first-child {color: #e63737} #css-exmpl-3 div:nth-child(2) {color: #f7941d} #css-exmpl-3 div:nth-child(3) {color: #0481d9} #css-exmpl-3 div:last-child {color: #26af33} </style>[/html]	В этом примере у нас есть родительский элемент с классом my-class, но нет селекторов для внутренних блоков. Если мы хотим применить к ним разные стили, то на выручку приходят порядковые псевдоклассы: :first-child позволит выбрать ПЕРВЫЙ элемент в списке. :last-child позволит выбрать ПОСЛЕДНИЙ элемент в списке. :nth-child(N) позволяет выбрать элемент по порядковому номеру, где N - это цифра, каким по счету стоит элемент внутри родителя. ВНИМАНИЕ! все эти псевдоклассы применяются по ТИПУ элемента. В нашем случае это div. Если внутри родителя будет еще стоять несколько html-кодов разного типа (div, span, a и т.д.), CSS-код будет игнорировать их и считать порядковый номер элемента div, а не других из того же ряда.

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

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

Что касается синтаксиса, то можно вас отослать обратно к части Синтаксис CSS: Общее и призвать вас внимательно следить за тем, чтобы они имели правильные разделители:

селектор {
свойство: значение;
свойство: значение;
свойство: значение;
}

Наверх к оглавлению

контент в разработке:

Инструменты разработчика

no-prof

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

Поделиться626.10.22 04:22

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

Верстка дизайна: погружаемся в CSS

контент в разработке:

Фон элемента (Backgound)
Отображение элемента (Display)
Позиционирование элемента (Position)

no-prof

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

Поделиться709.03.23 21:20

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

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

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

Проблема лишних картинкок

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

Как вы видите, по задумке в дизайне используется однотонный серый фон, и эту идею можно было бы воплотить простым кодом:
body {background-color: #4e4e47;}
Вместо этого автор вставляет серый квадрат картинкой. Причем в формате png, хотя jpg весило бы меньше. Причем, зачем-то дважды.
Судя по всему, в данном примере автор бездумно вставлял картинки в готовый шаблон, совсем не разбираясь в кодах, и с вами такого не случится, если вы будете анализировать, где нужны картинки, а где - не нужны. При кропотливом подходе и желании учиться ваш код дизайна станет в разы меньше, а дизайны в разы быстрее прогружаться.

Для понимания, как работает "магия" css, давайте сверстаем простой HTML-шаблон:

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

Что делаем?	Код	Результат
Начнем с фона. Нам нужен Квадратный блок и нам надо покрасить его в серо-синий цвет. Я пишу на html код блока и присваиваю ему ID, чтобы потом обращаться к нему на CSS: <div id="supersquare"></div> Так как он на данный момент пустой, то отображаться он не будет, если просто вписать фон, поэтому я задаю еще и размер блока - к тому же, нам это пригодится позднее, ведь нам придется "двигать" другие квадраты относительно него. #supersquare {width: 300px; height:300px;} "Крашу" я наш квадрат, естественно, кодом, добавляя: background-color: #cedcdc; Если я не знаю как сделать что-либо из этого, я гуглю "CSS как задать размеры блока" или "CSS как изменить цвет фона"	Скрытый текст: Для просмотра скрытого текста - войдите или зарегистрируйтесь.	[html]<div id="supersquare1"></div> <style>#supersquare1 {width: 300px; height:300px;background-color: #cedcdc;}</style>[/html]
Теперь нам надо "нарисовать" синий квадрат (меньший по размеру, чем основной) и развернуть его. Возможно ли это на CSS? Если я не уверена я гуглю "как повернуть блок в css" и нахожу, что это возможно через свойство: transform: rotate(0deg); Значит, мы можем смело делать это кодом. я вписываю html-блок для нового квадрата внутрь кода: <div id="supersquare"><div class="ssblue"></div></div> Дальше я пишу стиль. Фон квадрату не нужен, нужна синяя рамка, которую можно сделать через свойство border. Разворачиваю квадрат с помощью transform. А размеры пока что можно поставить приблизительно, пока надо посмотреть, что получается.	Скрытый текст: Для просмотра скрытого текста - войдите или зарегистрируйтесь.	[html]<div id="supersquare2"> <div class="ssblue"></div> </div> <style> #supersquare2 { width: 300px; height:300px; background-color: #cedcdc; } #supersquare2 .ssblue { border: 2px solid #0481d9; width: 220px; height: 220px; transform: rotate(45deg); } </style>[/html]
Я вижу, что мой синий квадрат "уехал" из-за трансформации. Значит мне нужно его спозиционировать (двигать) относительно серого квадрата. Гуглю "css как двигать один блок относительно другого". После пары небольших гайдов понимаю, что мне нужно задать для #supersquare позиционирование relative и тогда я могу двигать синий квадрат внутри него с помощью свойств top и left. Также я прописываю меньшую ширину синего квадрата, ибо стало понятно, что он слишком жирный и не помещается.	Скрытый текст: Для просмотра скрытого текста - войдите или зарегистрируйтесь.	[html]<div id="supersquare3"> <div class="ssblue"></div> </div> <style> #supersquare3 { width: 300px; height:300px; background-color: #cedcdc; position:relative; } #supersquare3 .ssblue { border: 2px solid #0481d9; width: 190px; height: 190px; transform: rotate(45deg); position: absolute; top: 50px; left: 45px; } </style>[/html]
Теперь нарисуем красный квадрат. Он должен быть такого же размера, как и синий, без фона, с красным бордюром. я вставляю этот квадрат внутрь синего и прописываю для него стиль: <div id="supersquare"><div class="ssblue"><div class="ssred"></div></div></div> #supersquare .ssred { border: 2px solid #e63737; width: 190px; height: 190px; } смотрю, что получилось.	Скрытый текст: Для просмотра скрытого текста - войдите или зарегистрируйтесь.	[html]<div id="supersquare4"><div class="ssblue"><div class="ssred"></div></div></div> <style>#supersquare4 {width: 300px; height:300px;background-color: #cedcdc; position:relative;} #supersquare4 .ssblue { border: 2px solid #0481d9; width: 190px; height: 190px; transform: rotate(45deg); position: absolute; top: 50px; left: 45px; } #supersquare4 .ssred { border: 2px solid #e63737; width: 190px; height: 190px; }</style>[/html]
Так как красный квадрат находится ВНУТРИ синего, то на него автоматически распостранилось свойство transform - он уже наклонен и находится внутри родительского блока. Я могу еще погуглить "css как подвинуть блок" и прийти к выводу, что в этом случае можно сделать это через margin Применяю это свойство к красному квадрату #supersquare .ssred - и "рамочка" готова.	Скрытый текст: Для просмотра скрытого текста - войдите или зарегистрируйтесь.	[html]<div id="supersquare5"><div class="ssblue"><div class="ssred"></div></div></div> <style>#supersquare5 {width: 300px; height:300px;background-color: #cedcdc; position:relative;} #supersquare5 .ssblue { border: 2px solid #0481d9; width: 190px; height: 190px; transform: rotate(45deg); position: absolute; top: 50px; left: 45px; } #supersquare5 .ssred { border: 2px solid #e63737; width: 190px; height: 190px; margin-top: -12px; margin-left: 8px; }</style>[/html]
Теперь надо вписать два текста - заголовок и подзаголовок. Т.к. мне их тоже придется двигать поверх квадратов, я их буду добавлять в блоках div. Те, кто впишут тексты как-то иначе, все равно придут к блокам в процессе практики или просто применят display: block; к своим тегам. Что важно заметить на этом этапе для упрощения своей работы: у обоих текстов есть общие свойства, а есть различия, поэтому лучше их вписать с разными ID, но одинаковым классом: <div id="supersquare"> <div id="text1" class="text">Заголовок</div> <div id="text2" class="text">подзаголовок<br>мелким текстом</div> <div class="ssblue"> <div class="ssred"></div> </div> </div> Теперь в стиль я могу добавить #supersquare .text {} - для всех общих свойств. Туда я впишу шрифт. а различие свойств я впишу через коды: #supersquare #text1 {} #supersquare #text2 {} Пока что добавлю туда цвет.	Скрытый текст: Для просмотра скрытого текста - войдите или зарегистрируйтесь.	[html]<div id="supersquare6"> <div id="text1" class="text">Заголовок</div> <div id="text2" class="text">подзаголовок<br>мелким текстом</div> <div class="ssblue"> <div class="ssred"></div> </div> </div> <style>#supersquare6 {width: 300px; height:300px;background-color: #cedcdc; position:relative;} #supersquare6 .ssblue { border: 2px solid #0481d9; width: 190px; height: 190px; transform: rotate(45deg); position: absolute; top: 50px; left: 45px; } #supersquare6 .ssred { border: 2px solid #e63737; width: 190px; height: 190px; margin-top: -12px; margin-left: 8px; } #supersquare6 .text {font-family:"Franklin Gothic Medium";} #supersquare6 #text1 {color: #0481d9;} #supersquare6 #text2 {color: #e63737;} </style>[/html]
Спозиционируем текст. Мы это уже проделывали с синим квадратом и, т.к. мы хотим, чтобы текст был поверх квадратов, то действовать будем аналогично - через position: absolute; Чтобы при этом тексты отображалисть по центру, я задам блокам фиксированную ширину (равную основному квадрату) и выравнивание текста по центру через text-align: center; (как обычно, если вы этого трюка не знали, вам поможет гугл с запросом "как выравнивать текст внутри блока по центру") в каждый текст я вписываю размер шрифта и отступ сверху через свойство top.	Скрытый текст: Для просмотра скрытого текста - войдите или зарегистрируйтесь.	[html]<div id="supersquare7"> <div id="text1" class="text">Заголовок</div> <div id="text2" class="text">подзаголовок<br>мелким текстом</div> <div class="ssblue"> <div class="ssred"></div> </div> </div> <style>#supersquare7 {width: 300px; height:300px;background-color: #cedcdc; position:relative;} #supersquare7 .ssblue { border: 2px solid #0481d9; width: 190px; height: 190px; transform: rotate(45deg); position: absolute; top: 50px; left: 45px; } #supersquare7 .ssred { border: 2px solid #e63737; width: 190px; height: 190px; margin-top: -12px; margin-left: 8px; } #supersquare7 .text { font-family:"Franklin Gothic Medium"; width: 100%; position: absolute; text-align: center; } #supersquare7 #text1 { color: #0481d9; font-weight: bold; font-size: 50px; top: 70px; } #supersquare7 #text2 { color: #e63737; font-size: 30px; top: 126px; } </style>[/html]
Вижу проблему с тем, что красная линяя квадрата у нас находится поверх текста, а нам надо наоборот. Гуглю "как сделать один элемент поверх другого css" и узнаю про прекрасное свойство z-index - добавляю его в текст. Осталось только загуглить "как сделать обводку текста в CSS", чтобы сделать обводку того же цвета, что и фон, как на образце, чтобы текст не "слеплялся" с линиями рамочки. Узнаю про свойство text-shadow, использую генератор или какое-нибудь готовое CSS-решение.	Скрытый текст: Для просмотра скрытого текста - войдите или зарегистрируйтесь.	[html]<div id="supersquare99"> <div id="text1" class="text">Заголовок</div> <div id="text2" class="text">подзаголовок<br>мелким текстом</div> <div class="ssblue"> <div class="ssred"></div> </div> </div> <style>#supersquare99 {width: 300px; height:300px;background-color: #cedcdc; position:relative;} #supersquare99 .ssblue { border: 2px solid #0481d9; width: 190px; height: 190px; transform: rotate(45deg); position: absolute; top: 50px; left: 45px; } #supersquare99 .ssred { border: 2px solid #e63737; width: 190px; height: 190px; margin-top: -12px; margin-left: 8px; } #supersquare99 .text { font-family:"Franklin Gothic Medium"; width: 100%; position: absolute; text-align: center; z-index: 99; text-shadow: -0 -3px 0 #CEDCDC, 0 -3px 0 #CEDCDC, -0 3px 0 #CEDCDC, 0 3px 0 #CEDCDC, -3px -0 0 #CEDCDC, 3px -0 0 #CEDCDC, -3px 0 0 #CEDCDC, 3px 0 0 #CEDCDC, -1px -3px 0 #CEDCDC, 1px -3px 0 #CEDCDC, -1px 3px 0 #CEDCDC, 1px 3px 0 #CEDCDC, -3px -1px 0 #CEDCDC, 3px -1px 0 #CEDCDC, -3px 1px 0 #CEDCDC, 3px 1px 0 #CEDCDC, -2px -3px 0 #CEDCDC, 2px -3px 0 #CEDCDC, -2px 3px 0 #CEDCDC, 2px 3px 0 #CEDCDC, -3px -2px 0 #CEDCDC, 3px -2px 0 #CEDCDC, -3px 2px 0 #CEDCDC, 3px 2px 0 #CEDCDC, -3px -3px 0 #CEDCDC, 3px -3px 0 #CEDCDC, -3px 3px 0 #CEDCDC, 3px 3px 0 #CEDCDC, -3px -3px 0 #CEDCDC, 3px -3px 0 #CEDCDC, -3px 3px 0 #CEDCDC, 3px 3px 0 #CEDCDC; } #supersquare99 #text1 { color: #0481d9; font-weight: bold; font-size: 50px; top: 70px; } #supersquare99 #text2 { color: #e63737; font-size: 30px; top: 126px; } </style>[/html]

Как вы видите, достаточно просто начать копаться в кодах и раскладывать свои задумки по частям - и вот вы уже делаете дизайны на чистом CSS без того, чтобы под каждый пиксель вырезать картинку.
Зайти в этом деле можно очень далеко, например, вот котик, которого "чинили" у нас на конкурсе:

[html]
<style>
/* ---------------------------------- Parts of body ---------------------------------- */
.cat {
position: relative;
margin: 0px auto;
width: 400px;
height: 400px;
background: transparent;
}

.head {
position: absolute;
left: 60px;
top: 30px;
width: 280px;
height: 250px;
background: #000;

-webkit-border-radius: 280px/250px;
-khtml-border-radius: 280px/250px;
-moz-border-radius: 280px/250px;
-o-border-radius: 280px/250px;
border-radius: 280px/250px;
}

.body {
position: absolute;
left: 165px;
top: 250px;
width: 66px;
height: 125px;
background: #000;

-webkit-border-radius: 66px/125px;
-khtml-border-radius: 66px/125px;
-moz-border-radius: 66px/125px;
-o-border-radius: 66px/125px;
border-radius: 66px/125px;
}

/* ---------------------------------- Legs/Paws ---------------------------------- */
.left-leg, .right-leg {
position: absolute;
top: 327px;
width: 25px;
height: 60px;
background: #000;

-webkit-border-radius: 25px/60px;
-khtml-border-radius: 25px/60px;
-moz-border-radius: 25px/60px;
-o-border-radius: 25px/60px;
border-radius: 25px/60px;
}

.left-leg {
left: 207px;

-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}

.right-leg {
left: 163px;

-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-ms-transform: rotate(120deg);
-o-transform: rotate(120deg);
transform: rotate(120deg);
}

.left-paw, .right-paw {
position: absolute;
top: 350px;
width: 15px;
height: 35px;
background: #000;

-webkit-border-radius: 16px/35px;
-khtml-border-radius: 16px/35px;
-moz-border-radius: 16px/35px;
-o-border-radius: 16px/35px;
border-radius: 16px/35px;
}

.left-paw {
left: 205px;
}

.right-paw {
left: 180px;
}

/* ---------------------------------- Ears ---------------------------------- */
.left-ear, .right-ear {
position: absolute;
top: 40px;
width: 30px;
height: 60px;
background: #000;

-webkit-border-radius: 30px/60px;
-khtml-border-radius: 30px/60px;
-moz-border-radius: 30px/60px;
-o-border-radius: 30px/60px;
border-radius: 30px/60px;

-webkit-transform-origin: 15px 60px;
-moz-transform-origin: 15px 60px;
-o-transform-origin: 15px 60px;
}

.left-ear {
left: 300px;

-webkit-animation: left-ear 3s infinite linear normal none;
-moz-animation: left-ear 3s infinite linear normal none;
}

.right-ear {
left: 70px;

-webkit-animation: right-ear 3s infinite linear normal none;
-moz-animation: right-ear 3s infinite linear normal none;
}

/* ---------------------------------- Whiskers ---------------------------------- */
.left-whiskers, .right-whiskers {
position: absolute;
top: 140px;
width: 45px;
height: 30px;
}

.left-whiskers {
left: 330px;

-webkit-transform-origin: 0px 15px;
-moz-transform-origin: 0px 15px;
-o-transform-origin: 0px 15px;

-webkit-animation: left-whiskers 3s infinite linear normal none;
-moz-animation: left-whiskers 3s infinite linear normal none;
}

.right-whiskers {
left: 25px;

-webkit-transform-origin: 45px 15px;
-moz-transform-origin: 45px 15px;
-o-transform-origin: 45px 15px;

-webkit-animation: right-whiskers 3s infinite linear normal none;
-moz-animation: right-whiskers 3s infinite linear normal none;
}

.w1, .w3, .w5, .w2, .w4, .w6 {
position: absolute;
left: 0px;
width: 45px;
height: 3px;
background: #000;
}

.w1, .w2 {
top: 15px;
}

.w3 {
top: 8px;

-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
transform: rotate(-5deg);
}

.w5 {
top: 22px;

-webkit-transform: rotate(-355deg);
-moz-transform: rotate(-355deg);
-ms-transform: rotate(-355deg);
-o-transform: rotate(-355deg);
transform: rotate(-355deg);
}

.w4 {
top: 8px;

-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-o-transform: rotate(5deg);
transform: rotate(5deg);
}

.w6 {
top: 22px;

-webkit-transform: rotate(355deg);
-moz-transform: rotate(355deg);
-ms-transform: rotate(355deg);
-o-transform: rotate(355deg);
transform: rotate(355deg);
}

/* ---------------------------------- Eyes ---------------------------------- */
.left-eye, .right-eye {
position: absolute;
top: 95px;
width: 48px;
height: 48px;
background: #fff;

-webkit-border-radius: 48px;
-khtml-border-radius: 48px;
-moz-border-radius: 48px;
-o-border-radius: 48px;
border-radius: 48px;
}

.left-eye {
left: 271px;

-webkit-animation: left-eye 3s infinite linear normal none;
-moz-animation: left-eye 3s infinite linear normal none;
}

.right-eye {
left: 81px;

-webkit-animation: right-eye 3s infinite linear normal none;
-moz-animation: right-eye 3s infinite linear normal none;
}

.left-pupil, .right-pupil {
position: absolute;
left: 17px;
top: 15px;
width: 15px;
height: 15px;
background: #000;

-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
-moz-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
}

.left-pupil {
-webkit-animation: left-pupil 3s infinite linear normal none;
-moz-animation: left-pupil 3s infinite linear normal none;
}

.right-pupil {
-webkit-animation: right-pupil 3s infinite linear normal none;
-moz-animation: right-pupil 3s infinite linear normal none;
}

/* ---------------------------------- Tail ---------------------------------- */
.tail {
position: absolute;
left: 200px;
top: 290px;
width: 85px;
height: 70px;
background: transparent;
border: 5px solid #000;
border-top: none;
border-left: none;

-webkit-border-radius: 85px/70px;
-khtml-border-radius: 85px/70px;
-moz-border-radius: 85px/70px;
-o-border-radius: 85px/70px;
border-radius: 85px/70px;
}

/* ---------------------------------- Mouth ---------------------------------- */
.mouth {
position: absolute;
left: 192px;
top: 245px;
width: 16px;
height: 5px;
background: #900;
border: 1px solid #600;

-webkit-border-radius: 16px/5px;
-khtml-border-radius: 16px/5px;
-moz-border-radius: 16px/5px;
-o-border-radius: 16px/5px;
border-radius: 16px/5px;

opacity: 0;

-webkit-animation: mouth 3s infinite linear normal none;
-moz-animation: mouth 3s infinite linear normal none;
}

/* ---------------------------------- Teeth ---------------------------------- */
.tooth-tl, .tooth-tr, .tooth-bl, .tooth-br {
position: absolute;
left: 50%;
width: 0px;
height: 0px;

-moz-transform: scale(0);
}

.tooth-tl, .tooth-tr {
top: 2px;
border-bottom: 12px solid transparent;
border-top: 8px solid transparent;
}

.tooth-bl, .tooth-br {
bottom: 2px;
border-bottom: 8px solid transparent;
border-top: 12px solid transparent;
}

.tooth-tl {
margin-left: 5px;
border-left: 10px solid #fff;

-webkit-animation: tooth-tl 3s infinite linear normal none;
-moz-animation: tooth-tl 3s infinite linear normal none;
}

.tooth-tr {
margin-left: -15px;
border-right: 10px solid #fff;

-webkit-animation: tooth-tr 3s infinite linear normal none;
-moz-animation: tooth-tr 3s infinite linear normal none;
}

.tooth-bl {
margin-left: 5px;
border-left: 10px solid #fff;

-webkit-animation: tooth-bl 3s infinite linear normal none;
-moz-animation: tooth-bl 3s infinite linear normal none;
}

.tooth-br {
margin-left: -15px;
border-right: 10px solid #fff;

-webkit-animation: tooth-br 3s infinite linear normal none;
-moz-animation: tooth-br 3s infinite linear normal none;
}

/* ---------------------------------- Mouth Else ---------------------------------- */
.tongue {
position: absolute;
left: 50%;
margin-left: -40px;
bottom: -8px;
width: 80px;
height: 30px;
background: #f66;

-webkit-border-radius: 80px/30px;
-khtml-border-radius: 80px/30px;
-moz-border-radius: 80px/30px;
-o-border-radius: 80px/30px;
border-radius: 80px/30px;

-moz-transform: scale(0);

-webkit-animation: tongue 3s infinite linear normal none;
-moz-animation: tongue 3s infinite linear normal none;
}

.throat {
position: absolute;
left: 50%;
margin-left: -25px;
bottom: -70px;
width: 50px;
height: 70px;
background: #300;

-webkit-border-radius: 60px;
-khtml-border-radius: 60px;
-moz-border-radius: 60px;
-o-border-radius: 60px;
border-radius: 60px;

-moz-transform: scale(0);

-webkit-animation: throat 3s infinite linear normal none;
-moz-animation: throat 3s infinite linear normal none;
}

.uvula {
position: absolute;
left: 50%;
margin-left: -5px;
top: -20px;
width: 10px;
height: 50px;
background: #900;

-webkit-border-radius: 10px/50px;
-khtml-border-radius: 10px/50px;
-moz-border-radius: 10px/50px;
-o-border-radius: 10px/50px;
border-radius: 10px/50px;

-webkit-transform-origin: 5px 0px;
-moz-transform-origin: 5px 0px;

-moz-transform: scale(1);

-webkit-animation: uvula 0.1s 2s infinite linear normal none;
-moz-animation: uvula 0.1s 2s infinite linear normal none;
}

/* ---------------------------------- ---------------------------------- */

@-moz-keyframes left-ear {
0% {left: 300px; top: 40px; -moz-transform: rotate(0deg);}
40% {left: 300px; top: 40px; -moz-transform: rotate(0deg);}
42% {left: 302px; top: 50px; -moz-transform: rotate(30deg);}
44% {left: 304px; top: 60px; -moz-transform: rotate(60deg);}
46% {left: 306px; top: 70px; -moz-transform: rotate(90deg);}
48% {left: 310px; top: 80px; -moz-transform: rotate(120deg);}
50% {left: 315px; top: 90px; -moz-transform: rotate(150deg);}
80% {left: 315px; top: 90px; -moz-transform: rotate(150deg);}
82% {left: 310px; top: 80px; -moz-transform: rotate(120deg);}
84% {left: 306px; top: 70px; -moz-transform: rotate(90deg);}
86% {left: 304px; top: 60px; -moz-transform: rotate(60deg);}
88% {left: 302px; top: 50px; -moz-transform: rotate(30deg);}
100% {left: 300px; top: 40px; -moz-transform: rotate(0deg);}
}

@-moz-keyframes right-ear {
0% {left: 70px; top: 40px; -moz-transform: rotate(0deg);}
40% {left: 70px; top: 40px; -moz-transform: rotate(0deg);}
42% {left: 68px; top: 50px; -moz-transform: rotate(-30deg);}
44% {left: 66px; top: 60px; -moz-transform: rotate(-60deg);}
46% {left: 64px; top: 70px; -moz-transform: rotate(-90deg);}
48% {left: 60px; top: 80px; -moz-transform: rotate(-120deg);}
50% {left: 55px; top: 90px; -moz-transform: rotate(-150deg);}
80% {left: 55px; top: 90px; -moz-transform: rotate(-150deg);}
82% {left: 60px; top: 80px; -moz-transform: rotate(-120deg);}
84% {left: 64px; top: 70px; -moz-transform: rotate(-90deg);}
86% {left: 66px; top: 60px; -moz-transform: rotate(-60deg);}
88% {left: 68px; top: 50px; -moz-transform: rotate(-30deg);}
100% {left: 70px; top: 40px; -moz-transform: rotate(0deg);}
}

@-moz-keyframes left-whiskers {
0% {left: 330px; top: 140px; -moz-transform: rotate(0deg);}
40% {left: 330px; top: 140px; -moz-transform: rotate(0deg);}
42% {left: 320px; top: 120px; -moz-transform: rotate(-10deg);}
44% {left: 310px; top: 100px; -moz-transform: rotate(-20deg);}
46% {left: 300px; top: 80px; -moz-transform: rotate(-30deg);}
48% {left: 280px; top: 60px; -moz-transform: rotate(-40deg);}
50% {left: 265px; top: 50px; -moz-transform: rotate(-50deg);}
80% {left: 265px; top: 50px; -moz-transform: rotate(-50deg);}
82% {left: 280px; top: 60px; -moz-transform: rotate(-40deg);}
84% {left: 300px; top: 80px; -moz-transform: rotate(-30deg);}
86% {left: 310px; top: 100px; -moz-transform: rotate(-20deg);}
88% {left: 320px; top: 120px; -moz-transform: rotate(-10deg);}
100% {left: 330px; top: 140px; -moz-transform: rotate(0deg);}
}

@-moz-keyframes right-whiskers {
0% {left: 25px; top: 140px; -moz-transform: rotate(0deg);}
40% {left: 25px; top: 140px; -moz-transform: rotate(0deg);}
42% {left: 35px; top: 120px; -moz-transform: rotate(10deg);}
44% {left: 45px; top: 100px; -moz-transform: rotate(20deg);}
46% {left: 55px; top: 80px; -moz-transform: rotate(30deg);}
48% {left: 75px; top: 60px; -moz-transform: rotate(40deg);}
50% {left: 90px; top: 50px; -moz-transform: rotate(50deg);}
80% {left: 90px; top: 50px; -moz-transform: rotate(50deg);}
82% {left: 75px; top: 60px; -moz-transform: rotate(40deg);}
84% {left: 55px; top: 80px; -moz-transform: rotate(30deg);}
86% {left: 45px; top: 100px; -moz-transform: rotate(20deg);}
88% {left: 35px; top: 120px; -moz-transform: rotate(10deg);}
100% {left: 25px; top: 140px; -moz-transform: rotate(0deg);}
}

@-moz-keyframes left-eye {
0% {height: 48px; top: 95px; border-radius: 48px;}
40% {height: 48px; top: 95px; border-radius: 48px;}
50% {height: 0px; top: 90px; border-radius: 40px/5px;}
80% {height: 0px; top: 90px; border-radius: 40px/5px;}
100% {height: 48px;}
}

@-moz-keyframes right-eye {
0% {height: 48px; top: 95px; border-radius: 48px;}
40% {height: 48px; top: 95px; border-radius: 48px;}
50% {height: 0px; top: 90px; border-radius: 40px/5px;}
80% {height: 0px; top: 90px; border-radius: 40px/5px;}
100% {height: 48px;}
}

@-moz-keyframes left-pupil {
0% {top: 15px;}
40% {top: 15px;}
50% {top: -7px;}
100% {top: 15px;}
}

@-moz-keyframes right-pupil {
0% {top: 15px;}
40% {top: 15px;}
50% {top: -7px;}
100% {top: 15px;}
}

@-moz-keyframes mouth {
0% {top: 245px; width: 16px; height: 5px; left: 191px; border-radius: 16px/5px; opacity: 0; border: 1px solid #600;}
40% {top: 245px; width: 16px; height: 5px; left: 191px; border-radius: 16px/5px; opacity: 1; border: 1px solid #600;}
55% {top: 45px; width: 16px; height: 5px; left: 191px; border-radius: 16px/5px; opacity: 1; border: 1px solid #600;}
60% {top: 45px; width: 190px; height: 190px; left: 97px; border-radius: 190px; opacity: 1; border: 8px solid #600;}
85% {top: 45px; width: 190px; height: 190px; left: 97px; border-radius: 190px; opacity: 1; border: 8px solid #600;}
99% {top: 245px; width: 16px; height: 5px; left: 191px; border-radius: 16px/5px; opacity: 1; border: 1px solid #600;}
100% {top: 245px; width: 16px; height: 5px; left: 191px; border-radius: 16px/5px; opacity: 0; border: 1px solid #600;}
}

@-moz-keyframes tooth-tl {
0% {margin-left: 5px; top: 0px; -moz-transform: scale(0);}
55% {margin-left: 5px; top: 0px; -moz-transform: scale(0);}
60% {margin-left: 45px; top: 2px; -moz-transform: scale(1);}
85% {margin-left: 45px; top: 2px; -moz-transform: scale(1);}
99% {margin-left: 5px; top: 0px; -moz-transform: scale(0);}
100% {margin-left: 5px; top: 2px; -moz-transform: scale(0);}
}

@-moz-keyframes tooth-tr {
0% {margin-left: -15px; top: 0px; -moz-transform: scale(0);}
55% {margin-left: -15px; top: 0px; -moz-transform: scale(0);}
60% {margin-left: -55px; top: 2px; -moz-transform: scale(1);}
85% {margin-left: -55px; top: 2px; -moz-transform: scale(1);}
99% {margin-left: -15px; top: 0px; -moz-transform: scale(0);}
100% {margin-left: -15px; top: 2px; -moz-transform: scale(0);}
}

@-moz-keyframes tooth-bl {
0% {margin-left: 5px; bottom: 0px; -moz-transform: scale(0);}
55% {margin-left: 5px; bottom: 0px; -moz-transform: scale(0);}
60% {margin-left: 45px; bottom: 2px; -moz-transform: scale(1);}
85% {margin-left: 45px; bottom: 2px; -moz-transform: scale(1);}
99% {margin-left: 5px; bottom: 0px; -moz-transform: scale(0);}
100% {margin-left: 5px; bottom: 2px; -moz-transform: scale(0);}
}

@-moz-keyframes tooth-br {
0% {margin-left: -15px; bottom: 0px; -moz-transform: scale(0);}
55% {margin-left: -15px; bottom: 0px; -moz-transform: scale(0);}
60% {margin-left: -55px; bottom: 2px; -moz-transform: scale(1);}
85% {margin-left: -55px; bottom: 2px; -moz-transform: scale(1);}
99% {margin-left: -15px; bottom: 0px; -moz-transform: scale(0);}
100% {margin-left: -15px; bottom: 2px; -moz-transform: scale(0);}
}

@-moz-keyframes throat {
0% {bottom: -70px; -moz-transform: scale(0);}
40% {bottom: -70px; -moz-transform: scale(0);}
55% {bottom: -50px; -moz-transform: scale(0.1);}
60% {bottom: 0px; -moz-transform: scale(1);}
85% {bottom: 0px; -moz-transform: scale(1);}
99% {bottom: -30px; -moz-transform: scale(0.1);}
100% {bottom: -70px; -moz-transform: scale(0);}
}

@-moz-keyframes tongue {
0% {-moz-transform: scale(0);}
40% {-moz-transform: scale(0);}
55% {-moz-transform: scale(0.1);}
60% {-moz-transform: scale(1);}
85% {-moz-transform: scale(1);}
99% {-moz-transform: scale(0.1);}
100% {-moz-transform: scale(0);}
}

@-moz-keyframes uvula {
0% {-moz-transform: rotate(0deg);}
25% {-moz-transform: rotate(5deg);}
50% {-moz-transform: rotate(0deg);}
75% {-moz-transform: rotate(-5deg);}
100% {-moz-transform: rotate(0deg);}
}

/* Else Google */
@-webkit-keyframes left-ear {
0% {left:300px; top:40px; -webkit-transform:rotate(0deg);}
40% {left:300px; top:40px; -webkit-transform:rotate(0deg);}
42% {left:302px; top:50px; -webkit-transform:rotate(30deg);}
44% {left:304px; top:60px; -webkit-transform:rotate(60deg);}
46% {left:306px; top:70px; -webkit-transform:rotate(90deg);}
48% {left:310px; top:80px; -webkit-transform:rotate(120deg);}
50% {left:315px; top:90px; -webkit-transform:rotate(150deg);}
80% {left:315px; top:90px; -webkit-transform:rotate(150deg);}
82% {left:310px; top:80px; -webkit-transform:rotate(120deg);}
84% {left:306px; top:70px; -webkit-transform:rotate(90deg);}
86% {left:304px; top:60px; -webkit-transform:rotate(60deg);}
88% {left:302px; top:50px; -webkit-transform:rotate(30deg);}
100% {left:300px; top:40px; -webkit-transform:rotate(0deg);}
}

@-webkit-keyframes right-ear {
0% {left:70px; top:40px; -webkit-transform:rotate(0deg);}
40% {left:70px; top:40px; -webkit-transform:rotate(0deg);}
42% {left:68px; top:50px; -webkit-transform:rotate(-30deg);}
44% {left:66px; top:60px; -webkit-transform:rotate(-60deg);}
46% {left:64px; top:70px; -webkit-transform:rotate(-90deg);}
48% {left:60px; top:80px; -webkit-transform:rotate(-120deg);}
50% {left:55px; top:90px; -webkit-transform:rotate(-150deg);}
80% {left:55px; top:90px; -webkit-transform:rotate(-150deg);}
82% {left:60px; top:80px; -webkit-transform:rotate(-120deg);}
84% {left:64px; top:70px; -webkit-transform:rotate(-90deg);}
86% {left:66px; top:60px; -webkit-transform:rotate(-60deg);}
88% {left:68px; top:50px; -webkit-transform:rotate(-30deg);}
100% {left:70px; top:40px; -webkit-transform:rotate(-0deg);}
}

@-webkit-keyframes left-whiskers {
0% {left:330px; top:140px; -webkit-transform:rotate(0deg);}
40% {left:330px; top:140px; -webkit-transform:rotate(0deg);}
42% {left:320px; top:120px; -webkit-transform:rotate(-10deg);}
44% {left:310px; top:100px; -webkit-transform:rotate(-20deg);}
46% {left:300px; top:80px; -webkit-transform:rotate(-30deg);}
48% {left:280px; top:60px; -webkit-transform:rotate(-40deg);}
50% {left:265px; top:50px; -webkit-transform:rotate(-50deg);}
80% {left:265px; top:50px; -webkit-transform:rotate(-50deg);}
82% {left:280px; top:60px; -webkit-transform:rotate(-40deg);}
84% {left:300px; top:80px; -webkit-transform:rotate(-30deg);}
86% {left:310px; top:100px; -webkit-transform:rotate(-20deg);}
88% {left:320px; top:120px; -webkit-transform:rotate(-10deg);}
100% {left:330px; top:140px; -webkit-transform:rotate(0deg);}
}

@-webkit-keyframes right-whiskers {
0% {left:25px; top:140px; -webkit-transform:rotate(0deg);}
40% {left:25px; top:140px; -webkit-transform:rotate(0deg);}
42% {left:35px; top:120px; -webkit-transform:rotate(10deg);}
44% {left:45px; top:100px; -webkit-transform:rotate(20deg);}
46% {left:55px; top:80px; -webkit-transform:rotate(30deg);}
48% {left:75px; top:60px; -webkit-transform:rotate(40deg);}
50% {left:90px; top:50px; -webkit-transform:rotate(50deg);}
80% {left:90px; top:50px; -webkit-transform:rotate(50deg);}
82% {left:75px; top:60px; -webkit-transform:rotate(40deg);}
84% {left:55px; top:80px; -webkit-transform:rotate(30deg);}
86% {left:45px; top:100px; -webkit-transform:rotate(20deg);}
88% {left:35px; top:120px; -webkit-transform:rotate(10deg);}
100% {left:25px; top:140px; -webkit-transform:rotate(0deg);}
}

@-webkit-keyframes left-eye {
0% {height:48px; top:95px; border-radius:48px;}
40% {height:48px; top:95px; border-radius:48px;}
50% {height:0; top:90px; border-radius: 40px/5px;}
80% {height:0; top:90px; border-radius: 40px/5px;}
100% {height:48px;}
}

@-webkit-keyframes right-eye {
0% {height:48px; top:95px; border-radius:48px;}
40% {height:48px; top:95px; border-radius:48px;}
50% {height:0; top:90px; border-radius: 40px/5px;}
80% {height:0; top:90px; border-radius: 40px/5px;}
100% {height:48px;}
}

@-webkit-keyframes left-pupil {
0% {top:15px;}
40% {top:15px;}
50% {top:-7px;}
100% {top:15px;}
}

@-webkit-keyframes right-pupil {
0% {top:15px;}
40% {top:15px;}
50% {top:-7px;}
100% {top:15px;}
}

@-webkit-keyframes mouth {
0% {top:245px; width:16px; height:5px; left: 191px; border-radius: 16px/5px; opacity:0; border:1px solid #600;}
40% {top:245px; width:16px; height:5px; left: 191px; border-radius: 16px/5px; opacity:1; border:1px solid #600;}
55% {top:45px; width:16px; height:5px; left: 191px; border-radius: 16px/5px; opacity:1; border:1px solid #600;}
60% {top:45px; width:190px; height:190px; left: 97px; border-radius: 190px/190px; opacity:1; border:8px solid #600;}
85% {top:45px; width:190px; height:190px; left: 97px; border-radius: 190px/190px; opacity:1; border:8px solid #600;}
99% {top:245px; width:16px; height:5px; left: 191px; border-radius: 16px/5px; opacity:1; border:1px solid #600;}
100% {top:245px; width:16px; height:5px; left: 191px; border-radius: 16px/5px; opacity:0; border:1px solid #600;}
}

@-webkit-keyframes tooth-tl {
0% {margin-left:5px; top:0px; -webkit-transform: scale(0);}
55% {margin-left:5px; top:0px; -webkit-transform: scale(0);}
60% {margin-left:45px; top:2px; -webkit-transform: scale(1);}
85% {margin-left:45px; top:2px; -webkit-transform: scale(1);}
99% {margin-left:5px; top:0px; -webkit-transform: scale(0);}
100% {margin-left:5px; top:2px; -webkit-transform: scale(0);}
}

@-webkit-keyframes tooth-tr {
0% {margin-left:-15px; top:0px; -webkit-transform: scale(0);}
55% {margin-left:-15px; top:0px; -webkit-transform: scale(0);}
60% {margin-left:-55px; top:2px; -webkit-transform: scale(1);}
85% {margin-left:-55px; top:2px; -webkit-transform: scale(1);}
99% {margin-left:-15px; top:0px; -webkit-transform: scale(0);}
100% {margin-left:-15px; top:2px; -webkit-transform: scale(0);}
}

@-webkit-keyframes tooth-bl {
0% {margin-left:5px; bottom:0px; -webkit-transform: scale(0);}
55% {margin-left:5px; bottom:0px; -webkit-transform: scale(0);}
60% {margin-left:45px; bottom:2px; -webkit-transform: scale(1);}
85% {margin-left:45px; bottom:2px; -webkit-transform: scale(1);}
99% {margin-left:5px; bottom:0px; -webkit-transform: scale(0);}
100% {margin-left:5px; bottom:2px; -webkit-transform: scale(0);}
}

@-webkit-keyframes tooth-br {
0% {margin-left:-15px; bottom:0px; -webkit-transform: scale(0);}
55% {margin-left:-15px; bottom:0px; -webkit-transform: scale(0);}
60% {margin-left:-55px; bottom:2px; -webkit-transform: scale(1);}
85% {margin-left:-55px; bottom:2px; -webkit-transform: scale(1);}
99% {margin-left:-15px; bottom:0px; -webkit-transform: scale(0);}
100% {margin-left:-15px; bottom:2px; -webkit-transform: scale(0);}
}

@-webkit-keyframes throat {
0% {bottom:-70px; -webkit-transform: scale(0);}
40% {bottom:-70px; -webkit-transform: scale(0);}
55% {bottom:-50px; -webkit-transform: scale(0.1);}
60% {bottom:0; -webkit-transform: scale(1);}
85% {bottom:0; -webkit-transform: scale(1);}
99% {bottom:-30px; -webkit-transform: scale(0.1);}
100% {bottom:-70px; -webkit-transform: scale(0);}
}

@-webkit-keyframes tongue {
0% {-webkit-transform: scale(0);}
40% {-webkit-transform: scale(0);}
55% {-webkit-transform: scale(0.1);}
60% {-webkit-transform: scale(1);}
85% {-webkit-transform: scale(1);}
99% {-webkit-transform: scale(0.1);}
100% {-webkit-transform: scale(0);}
}

@-webkit-keyframes uvula {
0% {-webkit-transform:rotate(0deg);}
25% {-webkit-transform:rotate(5deg);}
50% {-webkit-transform:rotate(0deg);}
75% {-webkit-transform:rotate(-5deg);}
100% {-webkit-transform:rotate(0deg);}
}
</style>

<div id="content">
<div id="info">
<div class="cat">
<div class="head"></div>
<div class="body"></div>
<div class="left-leg"></div>
<div class="right-leg"></div>
<div class="left-paw"></div>
<div class="right-paw"></div>
<div class="left-ear"></div>
<div class="right-ear"></div>
<div class="left-whiskers">
<div class="w1"></div>
<div class="w3"></div>
<div class="w5"></div>
</div>
<div class="right-whiskers">
<div class="w2"></div>
<div class="w4"></div>
<div class="w6"></div>
</div>
<div class="left-eye">
<div class="left-pupil"></div>
</div>
<div class="right-eye">
<div class="right-pupil"></div>
</div>
<div class="tail"></div>
<div class="mouth">
<div class="tooth-tl"></div>
<div class="tooth-tr"></div>
<div class="tooth-bl"></div>
<div class="tooth-br"></div>
<div class="throat">
<div class="uvula"></div>
</div>
<div class="tongue"></div>

</div>
</div>
</div>
</div>[/html]

Этот котик нарисован на чистом CSS и HTML.
Конечно, сложно сразу вскочить на такой уровень, да и мало, кто таким заморачивается, но уж "рисовать" простые рамочки и раскрашивать одноцветные фоны вы однозначно сможете без фотошопа.

Наверх к оглавлению

контент в разработке:
проблема "циганских юбок"
проблема "бутербродов"

no-prof

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

Тема закрыта

Страница: 1

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

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

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

Объявление

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

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

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

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

🌟 SPECIAL OFFER: We distribute designs for free

❤️ Support the project

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

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

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

Поделиться125.08.20 13:59

Поделиться225.08.20 23:46

Поделиться312.09.20 17:44

Поделиться406.11.20 03:26

Поделиться509.11.20 17:48

Поделиться626.10.22 04:22

Поделиться709.03.23 21:20