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

Колонки – создание средствами 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 – jQuery Semantic Accordion плагин.

Немного занимался изобретением велосипедов, получился – jQuery Semantic Tabs плагин.

Компактный 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();
}

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

Cделал так называемую CSS fast typing package для Komodo Edit по методу Виталия Харисова.

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

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

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

• HTML
• CSS
• JavaScript
• Diff
• PHP

Проблема

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

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

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

Читаем дальше…

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

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

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

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

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

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

В cвязи с запуском новой версии сайта http://css-framework.ru, несколько дней доступ к нему будет закрыт.

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

Господа вебдевелоперы, кто из вас слышал о проекте IE7 { css2: auto; }?

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