Понедельник, 09 Июля 2012 11:34

Разбиваем текст на колонки

Written by 
Оцени эту запись
(2 Голоса)

Если на странице есть некоторый большой текст, который нужно разбить на колонки, может воспользоваться замечательный свойством CSS3 - columns. Для колонок можно разать их количество, ширину колонки, растояние между колонками и линию между ними.

 

 

Всего есть такие свойства:

 

  • column-count - задает количество колонок
  • column-gap - расстояние между колонками, задается в пикселях
  • column-rule - рисует линию между колонками, ей нужно задать ширину, тип и цвет
  • column-width - ширина колонки
  • columns - объединяет column-count и column-width, в нем можно вместе прописать ширину колонок и их количество

 

 

Понятие Web 2.0 впервые появилось в статье  What Is Web 2.0  Тима О’Рейли. Хотя этот вопрос спорный и общественность не может прийти к единому мнению. Но тем не менее, это понятие стало очень популярно, модно и современно. Часто понятие Веб 2.0 используют в маркетинге для поднятия стоимости продукта, ибо оно модно.

 

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

 

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

 

Для информации размещенной на ресурсах по технологиям Веб 2.0 характерны ключевые теги, которые позволяют уточнять тематику информации и упрощать поиск по ней. Также свойственны ленты новостей RSS. 

 

Под эту идеологию попали и изменения в дизайне ресурсов. Дизайну свойственны объем и округлости, яркая графика, большие размеры заголовков для выделения основного текста на фоне графики. Разным информационным интернет-ресурсам свойственны облака тегов и ярко выделенные информационные блоки. Большое внимание удиляется приятности внешнего вида и удобности пользования ресурсом.

 

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

 

 

 

 

Здесь я прописала такие стили:

 

<div style="-moz-column-width: 200px; -webkit-column-width: 200px; column-width: 200px; -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; -moz-column-gap: 20px; -webkit-column-gap: 20px; column-gap: 20px; -moz-column-rule: 2px dashed #7D26CD; -webkit-column-rule: 2px dashed #7D26CD; column-rule: 2px dashed #7D26CD;">Текст</div>

 

Как видим, для кроссбраузерности приходится использовать свойста с приставками -moz-(для FF) и -webkit-(для Chrome, Safari).

 

На колонки можно разбивать не только текст, но и другое содержимое блока. Например, сделаем список(который уже есть выше) разбитый на две колонки:

 

 

  • column-count - задает количество колонок
  • column-gap - расстояние между колонками, задается в пикселях
  • column-rule - рисует линию между колонками, ей нужно задать ширину, тип и цвет
  • column-width - ширина колонки
  • columns - объединяет column-count и column-width, в нем можно вместе прописать ширину колонок и их количество

 

 

 

Примечание.

 

Все мультиколоночные свойства не работают для элементов box:

 

display: -webkit-box;

display: -moz-box;

 

 

 

 

 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов