yoksel : ) (yoksel) wrote in journals_covers,
yoksel : )
yoksel
journals_covers

Category:

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

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

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.

Код элемента должен выглядеть так:

<div class="has-columns"> Пример кода с классом для пользователей платных аккаунтов </div>

или так:

<div data-columns> Пример кода с data-columns для любых аккаунтов </div>

После того, как вы создали пост текстом, обернутым в такой элемент, отредактируйте свой 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 и старше.

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

Экспериментируйте : )
Tags: useful: уроки по оформлению ЖЖ
Subscribe
promo journals_covers august 1, 2013 11:15 62
Buy for 200 tokens
У меня сегодня прекрасная новость: длинные инструкции по настройкам оформления больше не нужны, потому что теперь настройки на русском! : ) '​*':'*'тут салютики'*':'*' Сначала это было сделано для Хамелеона, теперь настройки переведены для Minimalism и Expressive. Помимо перевода, настройки…
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 39 comments