Некоторые обратили внимание на колонки на скриншотах в посте
Хамелеон: модель для сборки. Выглядят эффектно, делаются проще простого, но я их убрала из финальной версии кода, и вот почему:
1. Колонки поддерживаются не всеми браузерами (IE9 их не понимает)
2. Колонки хорошо дружат только с текстовыми блоками. Картинки могут вести себя сильно по-разному, и вам придётся каждый раз самим заботиться о том, чтобы всё выглядело хорошо.
Если вы хотите добавить колонки в свой дизайн, и трудности вас не останавливают, давайте посмотрим как это делается.
Предполагается, что вы хотя бы немного знакомы с кодами оформления ЖЖ.
Колонки делаются в помощью модуля CSS3:
Multiple Columns Доступные свойства:
column-count - число колонок
column-gap - расстояние между колонками
column-rule - разделитель
Пример кода:
column-count: 2;
column-gap: 30px;
column-rule: 1px dotted #AAA;
Следует помнить, что сейчас для работоспособности кода требуются браузерные префиксы, поэтому в итоге код будет выглядеть вот так:
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 30px;
-moz-column-gap: 30px;
column-gap: 30px;
-webkit-column-rule: 1px dotted #AAA;
-moz-column-rule: 1px dotted #AAA;
column-rule: 1px dotted #AAA;
Как это выглядит?
Примеры в картинках.
В качестве подопытного кролика возьмем такой текст с картинкой:
Добавляем код и получаем колонки:
У картинки в примере не заданы размеры, и она ужалась до ширины содержимого колонки. Если размеры заданы, либо картинки не ужимаются дизайном, она залезет на соседнюю колонку.
Как сделать колонки у себя в журнале?
Теоретически, сделать это можно двумя способами:
- прописать код прямо в теле поста
- добавить его в стили журнала.
Первый способ нам не подходит, потому что действие кода у себя в постах увидят только пользователи платных аккаунтов. Кроме того, при попадании такого поста в ленту другого пользователя колонки, скорее всего, пропадут.
Поэтому воспользуемся вторым способом и добавим колонки в коды оформления. Способ доступен для всех типов аккаунтов, но есть два нюанса:
1. Колонки будут только там, где есть оформление вашего журнала.
2. В постах с колонками нужна будет специальная разметка, чтобы колонки были только там где нужно, а не там, где им нравится.
Текст, который вы хотите разделить на колонки, следует обернуть блочным элементом, например: DIV.
Затем надо как-то пометить элемент, что вы хотите применять колонки именно к нему, а не ко всем таким тегам в ваших постах.
Платники могут просто задать элементу класс типа class="has-columns", остальные не имеют возможности использовать классы, но можно попробовать выкрутиться другим способом, добавив вместо класса такой атрибут: data-columns.
Код элемента должен выглядеть так:
Пример кода с классом для пользователей платных аккаунтов
или так:
Пример кода с data-columns для любых аккаунтов
После того, как вы создали пост текстом, обернутым в такой элемент, отредактируйте свой
Custom Css.
В большое текстовое поле для кодов вставьте вот такое:
/* Columns
------------------------------------------*/
.has-columns,
DIV[data-columns]{
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 30px;
-moz-column-gap: 30px;
column-gap: 30px;
-webkit-column-rule: 1px dotted #AAA;
-moz-column-rule: 1px dotted #AAA;
column-rule: 1px dotted #AAA;
}
Если картинки не сжимаются сами по ширине колонки, добавьте это:
.has-columns IMG,
DIV[data-columns] IMG {
max-width: 100%;
height: auto;
}
Сохраните и посмотрите что у вас получилось : )
Напоминаю, что колонки будут во всех современных браузерах, кроме IE9 и старше.
Можете отредактировать количество колонок, отступы между ними и разделитель. Любое значение нужно редактировать во всех трёх строчках, где оно есть.
Экспериментируйте : )