png + opacity + ie7/8

Баг с прозрачностью в Осликах нового поколения и упрощенный способ его решения найден!

Если полупрозрачная 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 fast typing package для Komodo Edit

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

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

Портированная Twilight тема для Komodo Edit

Twilight theme for Komodo Edit

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

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

  • HTML
  • CSS
  • JavaScript
  • Diff
  • PHP

Исправляем ошибки округления ширины в Internet Explorer 6

Проблема

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

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

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

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

xScope – забиваем гвозди микроскопом

xscope

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

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

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

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

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

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

css-framework – перезагрузка

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

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

IE7 как js-костыли для 7-летнего браузера

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

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

Outlook 2007 <> CSS

Если вы ненавидите Microsoft за то, что они сделали IE… ха, вы ещё не верстали HTML-письма для Outlook 2007.

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

CSS support in email clients

Закруглить уголки профессионально?

Самый просто способ закруглить уголки — ?

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

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

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

4 ссылки в день №7

  1. Pure Css Data Chart — красивые CSS-only графики.
  2. Offspring JavaScript Library — минималистическая javascript библиотека приучающая IE и другие браузеры к псевдоклассам first-child,last-child и похожим.
  3. CSS layout without float — интересный взгляд на построение layout без свойства float.
  4. Nuvio Templates — весьма добротные бесплатные шаблоны для ваших интернет проектов.