Если полупрозрачная 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-код:

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

• 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

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

В этой чудо-программе HTML рендерит не кто иной, как Microsoft Word.

CSS support in email clients

4 области с фоновым изображением уголков. Есть, что-то лучше?

Чтобы без js, динамические размеры, мало-мало лишнего кода, любой цвет для закругленного блока, любой цвет для бордеров закругленных, любая толщина для бордера, а?

Ищется решение, для включения в css-framework. Обсуждение идёт на форуме проекта.