Притворяемся газетой или как сделать колонки

Dec 26, 2012 10:05


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

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 и старше.

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

Экспериментируйте : )

useful: уроки по оформлению ЖЖ

Previous post Next post
Up