18+

Важно!

Реклама

• Форум может быть недоступен у некоторых российских провайдеров. Подробности и инструкция.

• Пожалуйста, заполняйте темы в соответствии с правилами каталога.
Победители конкурса рекламных шаблонов:
Демоноводство
логин: Агитатор, пароль: 0000
или кнопка "PR-вход" в форме входа.

Верстка: секреты и хитрости

Статьи и заметки.
Ответить
Аватара пользователя
Механикъ
Администратор
Сообщения: 762
Зарегистрирован: 04 апр 2015, 00:23
Репутация: 77
Статус: Не в сети

Верстка: секреты и хитрости

#16070

Сообщение Механикъ » 20 апр 2017, 13:20

Многослойный фон в CSS3
Сложность: 4 из 10

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

Забудьте про эти сложности! Мы имеем дело с CSS3. Это значит, что у нас есть простой и клёвый способ раз и навсегда расправиться с этой проблемой.
Называется этот способ многослойный фон.

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

Код: Выделить всё

body {background: url(/files/фон_форума.png) #цвет_фона_форума repeat}
#pun {
    background-color: #цвет_фона_таблицы;
    background-image: url(/files/название_форума.png), 
    url(/files/фон_заголовка.png), 
    url(/files/фон_таблицы.png);
    background-position: 500px 10px, 50% 0, 0 0;
    background-repeat: no-repeat, no-repeat, repeat;
    background-size: auto, 882px, auto;
}
Главный принцип: мы должны соблюдать cтрогую последовательность. На первом месте расположен самый верхний слой, далее по нисходящей.
В порядке строгой очередности, отделяя каждый слой запятой, мы расписываем все параметры наших слоев.

То же самое можно записать другим способом, соблюдая принцип:
background: background-attachment ("scroll" по умолчанию можно не указывать, "fixed" или "local") || background-color (цвет фона) || background-image (адрес изображения)
|| background-position (по ширине и высоте) || background-repeat ("repeat" по умолчанию можно не указывать, "repeat-x", "repeat-y", "no-repeat")

Сокращенная запись:

Код: Выделить всё

#pun {
    background: url(/files/название_форума.png) 500px 10px no-repeat, 
    url(/files/фон_заголовка.png) 50% 0 no-repeat, 
    #цвет_фона_таблицы url(/files/фон_таблицы.png) 0 0;
    background-size: auto, 882px, auto;
}
Параметр background-size (масштабирование изображения) прописывается отдельно.
Слоёв может быть столько, сколько вам надо, ограничений нет.

Аватара пользователя
Механикъ
Администратор
Сообщения: 762
Зарегистрирован: 04 апр 2015, 00:23
Репутация: 77
Статус: Не в сети

Верстка: секреты и хитрости

#16077

Сообщение Механикъ » 20 апр 2017, 21:51

Фон форума меняет размер вместе с размером окна
Сложность: 2 из 10

Я часто встречаю форумы, где используются огромные (в размер экрана) бэкграунды, которые на больших мониторах всё равно оставляют зазоры, тогда как на маленьких виден только кусочек этой красоты.
Пример - кандидат в раздел "Как делать нельзя":
Изображение
Фон данного форума размером 1920x1080px и весом 1,25 Мб...

Существует очень простой способ избежать такой неприятности. Это свойство background-size со значением cover.
Рассмотрим пример:

Код: Выделить всё

body {
    background: fixed url(/files/фон_форума.png) 50% 0;
    background-size: cover;
}
Для такого фона прекрасно подойдет непрозрачный .png (предпочтителен именно этот формат, поскольку .jpg из-за сжатия здорово пикселит при увеличении масштаба) размером немного больше 1024x768px и весом всего лишь около 160 кб.
Необходимо использовать фиксированный фон, чтобы ваш пейзаж не прокручивался вместе с таблицей.

Аватара пользователя
Механикъ
Администратор
Сообщения: 762
Зарегистрирован: 04 апр 2015, 00:23
Репутация: 77
Статус: Не в сети

Верстка: секреты и хитрости

#16081

Сообщение Механикъ » 21 апр 2017, 12:38

Спрайты
Сложность: 6 из 10

Спрайт - это одно большое фоновое изображение (на прозрачной подложке), состоящее из кучи маленьких:
Изображение
Зачем это надо?
Если у нас есть много мелких элементов, для каждого из которых нужна собственная иконка, мы можем увеличить скорость загрузки этих иконок, используя вместо пары десятков отдельных картинок одну, которая загрузится в кэш браузера один раз.
Такой подход сократит и время загрузки страницы, и объем графики.
Необходимое условие: элементы, фоном для которых будет служить часть спрайта, должны быть ограничены по ширине и высоте.
Идеальный вариант - кнопки и иконки.
Что делать, когда спрайт загружен на сайт?
Использовать его в качестве фона наших элементов, позиционируя, как бэкграунд, в координатах по X и Y:

Код: Выделить всё

.icon-add {
    background: url(/files/sprite.png) -407px -96px;
}
.icon-edit {
    background: url(/files/sprite.png) -337px -96px;
}
Пример сайта со спрайтами:
Изображение
Подробнее можно прочесть здесь.

Аватара пользователя
Механикъ
Администратор
Сообщения: 762
Зарегистрирован: 04 апр 2015, 00:23
Репутация: 77
Статус: Не в сети

Верстка: секреты и хитрости

#16082

Сообщение Механикъ » 21 апр 2017, 13:39

Использование иконочных шрифтов вместо картинок
Сложность: 9 из 10

Можно пойти ещё дальше и использовать вместо растровых изображений иконочный шрифт (это такой шрифт, у которого в дополнение к буквам есть символы и картинки). Пример использования вы можете посмотреть прямо здесь, на нашем форуме. Да-да, почти все иконки на "Танке" - это на самом деле шрифт. Он называется "Font Awesome" и распространяется бесплатно.

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

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

1. Импорт шрифта средствами CSS

Кстати, этот способ подходит и в том случае, когда вы хотите сделать свои заголовки или тексты неповторимыми.
1) загружаем нужный шрифт в раздел "Файлы" нашего форума, копируем ссылку на файл;
2) добавляем в поле собственного стиля style.css в админке, сразу после строчки
@import url(style_cs.css);
следующий код:

Код: Выделить всё

@font-face {
	font-family: FontName; 
	src: url("/files/font_link.ttf"); 
	font-style: normal; 
	font-weight: normal;
}
Этот код должен располагаться выше элементов, которые будут его использовать (то есть событие импорта шрифта должно произойти до того, как стиль элемента его затребует). Поэтому мы располагаем этот код в самом верху стиля.
FontName - название шрифта. Оно может быть любым. Используется латиница и цифры. Учтите, что если в вашем названии будут пробелы, то, прописывая его в свойстве font-family, не забудьте про кавычки.
font_link.ttf - ссылка, скопированная нами при загрузке шрифта в раздел "Файлы".
Если в папке несколько форматов шрифтов...
Подробнее - здесь.

2. Внедрение символа средствами CSS

Наконец, мы должны заставить браузер показать в иконке "букву шрифта". Воспользуемся для этого свойством content (подробнее), которое внедрит в нужном месте нужный символ. В случае с Font Awesome его символы (их список можно посмотреть здесь) закодированы в Unicode. Этот-то код нам и нужен:
Изображение
В этом примере код иконки "изображение" f03e. Значит для нашего элемента пишем такой CSS:

Код: Выделить всё

#button {
	font-family: FontName; /*имя иконочного шрифта*/
	color: #цвет_шрифта; /*цвет иконок*/
}
#button .img {
	content: "\f03e"; /*символ изображения*/
}
Полный список символов Unicode и их кодов можно посмотреть здесь.

Аватара пользователя
Механикъ
Администратор
Сообщения: 762
Зарегистрирован: 04 апр 2015, 00:23
Репутация: 77
Статус: Не в сети

Верстка: секреты и хитрости

#16083

Сообщение Механикъ » 21 апр 2017, 15:10

Самые популярные селекторы
Сложность: 1 из 10

#селектор, .селектор, тип, тип:псевдокласс, тип[атрибут] {свойство1: значение1; свойство2: значение2;}
#селектор - ID, идентификатор элемента#pun
.селектор - класс элемента.section
тип- теги html и их вариантыa, div, span, H1
:псевдокласс - определитель динамического состояния элемента, примыкает к селекторамa:href, a:focus
[атрибут]- выделяет типы элементов с заданными атрибутами, задается в квадратных скобкахimg[style="width: 88px, height: 31px"]
ID обозначает конкретный блок внутри "матрёшки" CSS.
Классы обычно присваиваются множеству элементов со сходными свойствами.
Полный список терминов можно изучить здесь.
Про селекторы - тут.

Аватара пользователя
Механикъ
Администратор
Сообщения: 762
Зарегистрирован: 04 апр 2015, 00:23
Репутация: 77
Статус: Не в сети

Верстка: секреты и хитрости

#16085

Сообщение Механикъ » 21 апр 2017, 17:29

Невидимые границы
Сложность: 1 из 10

Хотите убрать мешающие рамки в таблице форума? Не торопитесь писать border: none. У рамок есть толщина, а значит, убрав их, мы непременно столкнемся со смещением остальных элементов.
Вместо этого пропишите значение цвета границ transparent.

Ответить

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 0 гостей