Колонки – создание средствами CSS3

.two-column {
    column-count: 2;
    column-gap: 20px;
}
.three-column {
    column-count: 3;
    column-gap: 20px;
}

Этот код создает красивые 2 и 3 колонки равной ширины с расстоянием между ними равным 20px. Такой код будут писать наши дети, так как IE9, не имеет поддержки “CSS Multi-column layout”.

Что делать?

Будем искать рабочее решение. Требуется:

• любое количество резиновых колонок с фиксированным расстоянием между ними
• поддержка IE6 и выше
• отсутствие JS
• различные ширины колонок

2 колонки

Пусть .g(grid) — класс контейнера для наших колонок, а, .gc(grid column) — класс самой колонки. Тогда HTML-структура будет выглядеть так:

<div class="g">
  <div class="gc">
    <p>1 column</p>
  </div><!-- gc -->
  <div class="gc">
    <p>2 column</p>
  </div><!-- gc -->
</div><!-- g -->

CSS-стили:

.g { overflow: hidden; }
.gc { float: left; overflow: hidden; }

Для универсальности введем классы для различных ширин колонок:

.w-20 { width: 20%; }
.w-33 { width: 33.33%; }
.w-40 { width: 40%; }
.w-50 { width: 50%; }
.w-60 { width: 60%; }
.w-66 { width: 66.66%; }
.w-80 { width: 80%; }

Классы для процентных ширин позволят создавать 2-ух колоночные структуры самых разных размеров.

Для 2-ух колонок ширина каждой должна быть 50%. Добавим класс w-50 для каждой колонки.

<div class="gc w-50">
  <p>1 column</p>
</div><!-- w-50 -->

Остался отступ между первой и второй колонкой. Путь он будет 20px.

Этот отступ будет формироваться из 2-ух дополнительных элементов с классом .gcb(grid column body) для второй колонки и .gcb-first для первой:

.gcb-first { padding-right: 10px; }
.gcb { padding-left: 10px; }

HTML/CSS-шаблон для 2-ух колонок

HTML:

<div class="g">
  <div class="gc w-50">
    <div class="gcb-first">
      <p>1 column</p>
    </div><!-- gcb -->
  </div><!-- w-50 -->
  <div class="gc w-50">
    <div class="gcb">
      <p>2 column</p>
    </div><!-- gcb -->
  </div><!-- w-50 -->
</div><!-- g -->

Стили:

.g, .gc { zoom: 1; }
.g:after, .gc:after { content: '.'; display: block; height: 0; clear: both; visibility: hidden; }
.gc { float: left; clear: right; }
.gcb-first { padding-right: 10px; }
.gcb { padding-left: 10px; }

.w-20 { width: 20%; }
.w-33 { width: 33.33%; }
.w-40 { width: 40%; }
.w-50 { width: 50%; }
.w-60 { width: 60%; }
.w-66 { width: 66.66%; }
.w-80 { width: 80%; }

Этот шаблон будет основой для создания 3-ёх и более колонок.

Данная структура полностью эмулирует CSS-свойства column-count: 2; column-gap: 20px;.

Избыточность HTML/CSS-кода обусловлена поддержкой IE6 и IE7.

Самое интересное, на мой взгляд, заключается в том, что для создания трёх, четырёх, пяти и шести колоночной структуры нам не понадобиться больше ни одной строчки CSS-кода.

3 колонки

Чтобы сделать 3 колонки, надо взять 2-ух колоночный шаблон, задать ширину первой колонки 66%, второй 33%.

В первую колонку шириной 66% поместить 2-ух колоночной шаблон с колонками 50%/50%. Ширина каждой из этих колонок, по отношению к родительскому контейнеру будет 66%/2=33%.

В итоге ширина всех колонок будет 33%.

Итоговый шаблон будет выглядеть так:

<div class="g">
  <div class="gc w-66">
    <div class="gcb-first">

      <div class="gc w-50">
        <div class="gcb-first">
          <p>1 column</p>
        </div><!-- gcb -->
      </div><!-- w-50 -->
      <div class="gc w-50">
        <div class="gcb">
          <p>2 column</p>
        </div><!-- gcb -->
      </div><!-- w-50 -->

    </div><!-- gcb -->
  </div><!-- w-66 -->
  <div class="gc w-33">
    <div class="gcb">
      <p>3 column</p>
    </div><!-- gcb -->
  </div><!-- w-33 -->
</div><!-- g -->

4 колонки

Руководствуясь тем же принципом, следует создать 2 колонки с шириной 50%/50%, и, в каждую колонку вложить еще раз 2-ух колоночную структуру с шириной 50%/50%.

В итоге ширина каждой из 4-ёх колонок будет 25%:

<div class="g">
  <div class="gc w-50">
    <div class="gcb-first">

      <div class="gc w-50">
        <div class="gcb-first">
          <p>1 column</p>
        </div><!-- gcb -->
      </div><!-- w-50 -->
      <div class="gc w-50">
        <div class="gcb">
          <p>2 column</p>
       </div><!-- gcb -->
      </div><!-- w-50 -->

    </div><!-- gcb -->
  </div><!-- w-50 -->
  <div class="gc w-50">
    <div class="gcb">

      <div class="gc w-50">
        <div class="gcb-first">
          <p>3 column</p>
        </div><!-- gcb -->
      </div><!-- w-50 -->
      <div class="gc w-50">
        <div class="gcb">
          <p>4 column</p>
        </div><!-- gcb -->
      </div><!-- w-50 -->

  </div><!-- w-50 -->
</div><!-- g -->

Пример

Чтобы не сломать ваш мозг окончательно, примеры 5 и 6 колонок можно посмотреть на отдельной странице или поиграться с кодом в живую.

Данный метод построения колонок может с успехом найти свое применение в верстке резиновых макетов сайтов.

Компактный jQuery плагин для создания, так называемых «вкладок».

Если полупрозрачная png-картинка или фоновое изображение имеет 8-битный альфа-канал, он превращается в 1-битный во время действия фильтра, меняющего свойсто opacity. Пиксели с альфа-каналом прозрачности заливаются чёрным цветом.

Решение проблемы для слабых духом — мухи отдельно котлеты отдельно хранить следует. Меняем opacity для одного элемента, png-картинку/фон храним в другом элементе.

Другое решение подразумевает применение filter: AlphaImageLoader:

.element {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="file.png",sizingMethod="scale");
}

Но, не все знают, что работает и вот такой упрощённый вариант:

.element {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader();
}

Это поможет вам сильно не отвлекаться на поглаживания по головке и танцы с бубном вокруг священного животного :)

Аббревиатуры для ускоренного набирания CSS-свойств.

Любителям темных красок посвящается. Пользуйтесь на здоровье.

Тестировал на:

• HTML
• CSS
• JavaScript
• Diff
• PHP

При создании сайтов с «резиновым» дизайном, нескольких колонок с текстом, везде, где есть необходимость задавать ширины элементов в процентах — технических дизайнеров мучил один очень неприятный баг Internet Explorer 6.

Этот браузер, при получении дробных значений ширины, округляет числа в большую сторону.

В итоге, при изменении размера видимой области сайта, сумма ширин становилась больше 100%, что приводило к прыгающим блокам.

Вообще, это проблема всех браузеров и каждый с ней «борется» по разному. Но, только у IE6 сумма ширин становиться больше ширины родительского блока.

Об актуальности проблемы говорит, хотя бы тот факт, что на сайте «Студия Артемия Лебедева» есть три(1, 2, 3) способа решения данной проблемы.

Решение

Хочу предложить свой, как мне кажется, более универсальный способ решения этой проблемы.

После многочисленных экспериментов, родилось решение.

Если вкратце, то пришлось отказаться от свойства float: left; и заменить его на display: inline-block;. Весь остальной код — это следствия этого изменения.

.columns {
	width: 100%;
	overflow: hidden;	/* to hide horizontal scrollbar */
	white-space: nowrap;	/* disable inline blocks wrapping */
}
.column-1,
.column-2 {
	display: inline-block;	/* display columns as inline blocks */
	vertical-align: top;	/* vertical aligment to top */
}
.column-1 { width: 30%; background: #faa; }
.column-2 { width: 70%; background: #afa; }
.column-content {
	padding: 1em;
	white-space: normal;	/* restore normal text wrapping inside */
}

Для Internet Explorer 6/7:

.column-1,
.column-2 {
	display: inline;		/* IE display: inline-block */
	zoom: 1;				/* emulation */
}

И html-код:

<div class="columns-2">
	<div class="column-1">
		<div class="column-content">
			<p>Column width 30%.</p>
		</div><!-- column-content -->
	</div>
	<div class="column-2">
		<div class="column-content">
			<p>Column width 70%</p>
		</div><!-- column-content -->
	</div><!-- column -->
</div><!-- columns -->

Тестировалось в следующих браузерах:

• Internet Explorer 6/7/8
• Mozilla Firefox 3
• Safari 4
• Google Chrome
• Opera 10

Программа, для тех, кто хочет контролировать каждый пиксель.

Незаменимый набор инструментов для тех. дизайнеров.

Включает в себя:

• Dimensions — измерялка высоты/ширины всего, что есть на экране (совершенно фантастический инструмент)
• Rulers — экранные линейки
• Screens — области видимости различных разрешений экрана
• Loupe — с возможностью попиксельного измерения увеличенных объектов
• Guides — направляющие линии
• Frames — прямоугольные области в любых размерах и количествах
• Crosshair — координаты курсора

xScope(Mac OS X), цена $26.95.

Да, macbook pro — моя рабочая лошадка. Спасибо руководству на работе :)

Сам фреймворк также обновился, новую версию можно скачать – http://code.google.com/p/css-framework/downloads/list

Интересует такой вопрос — используете ли вы это в реальных проектах? С высокой нагрузкой как оно справляется? Подводные камни?