Архив за Апрель 2009

  • Кнопки: reloaded

    Удивительно, как некоторые граждане извращаются, чтобы сделать элементарные вещи. Странно, что никто не предложил простого решения такой простой задачи, особенно когда не учитывается размер шрифта и не нужна полупрозрачность. Вот мой вариант, как можно решить такую задачу:

    xbtn

    Первое, что нужно сделать, это внимательно посмотреть и проанализировать исходный материал. Я вижу здесь обычный блок с отступами, на который наложена фоновая картинка.

    stage1

    То есть нужно сделать инлайновый блок высотой 22 пикселя, боковым паддингом в 12 пикселей и фоновой картинкой. Но есть небольшая проблема: текст внутри может меняться. Вместе с этим, естественно, должна «увеличиваться» фоновая картинка. Как этого добиться? Очень просто.

    А что если мы сделаем два вложенных друг в друга блока и обоим положим одну и ту же картинку: первому блоку сделаем выравнивание по левому краю, а второму — по правому?.

    stage2

    Для этого саму картинку нужно сделать достаточно длинной — пикселей 400 по ширине,— чтобы даже очень длинный текст поместился. Реализация очень простая: два элемента с фоновой картинкой, вложенных друг в друга, внутреннему говорим padding: 0 12px;. Внутренний элемент разопрет внешний до нужных размеров.

    Но есть еще одна незадача: фоновая картинка внутреннего элемента полностью перекрывает фон внешнего элемента:

    stage3

    Исправить это, опять же, довольно просто: снизим левый отступ у внутреннего элемента на 3 пикселя и сместим его на эту же величину вправо, освободив, тем самым, левый угол:

    stage4

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

    .styled-button, .styled-button button {
    	background:url(button.png) no-repeat;
    	display:-moz-inline-stack;
    	display:inline-block; /* Эмуляция для FF2 */
    	font-size:11px;
    }
    
    .styled-button {
    	margin-right:3px;
    }
    
    .styled-button button {
    	border:0;
    	margin:0;
    	padding:0 12px 0 9px;
    	position:relative;
    	left:3px;
    	height:22px;
    	line-height:22px;
    	background-position:top right;
    	white-space:nowrap;
    }
    

    Сам HTML-код совсем уж простой:

    
    

    Тестовая страница

    Естественно, мы, как и автор заметки на Хабре, забили на то, что пользователь захочет увеличить размер шрифта. Для таких случаев есть более универсальный метод.

    Метки: , ,
  • Не используйте @import

    Стив Саудерс (Steve Souders) — инженер из Yahoo! — написал прекрасную заметку о том, почему не стоит использовать @import для подключения CSS. Если коротко: @import в большинстве случаев блокирует параллельную загрузку CSS-файлов. А так как сама загрузка CSS блокирует отрисовку документа — пользователь будет долго видеть пустой экран.

    Метки: ,
  • Aptana Zen Coding v0.1 (beta)

    Выпустил первую бета-версию Aptana Zen Coding. Хватайте ее с сайта проекта на Google Code. Там же есть краткая документация по установке и настройке (более полную версию сейчас пишет Вадим).

    Все возможности, а также некоторые новые фичи показаны на скринкасте:

    Видео в хорошем качестве

    Метки: , ,
  • Aptana Zen Coding Demo

    По мотивам Zen Coding Concept.


    Видео-демонстрация

  • ФДВР. Каналы и маски: практика — I

    В этой статье мы научимся на практике применять каналы и маски для оптимизации изображений в формате PNG.

    Первое, на что хочется обратить внимание, так это на игнорируемые многими разработчиками маски влияния на цветовое распределение и на смешивание в окне Save for Web:

    masks

    Давайте посмотрим, как это может помочь нам в оптимизации PNG-изображения. Возьмем исходник:

    clock

    Попробуем сохранить его в PNG8 со следующими настройками: Color reduction: Adaptive, Dither: No dithering, Colors: 256. Не будем рассуждать, насколько целесообразно сохранять такое изображение в PNG (мы ведь тренируемся), лучше посмотрим на то, что получилось:


    42 КБ

    Первое, что мне бросается в глаза — «побитый» маятник. На общем фоне это очень яркое пятно, которое притягивает взгляд зрителя, и это же пятно выглядит очень некрасиво. Попробуем сгладить цветовые переходы маятника, выставив в параметрах сохранения Dither: 100%.

    step2
    46 КБ

    Маятник выглядит немного лучше, чего не скажешь о всем остальном изображении: вес файла увеличился на 4 КБ и на однородном фоне появился шум:

    step2_noise

    Зачастую от шума можно избавиться, снизив значение параметра Dither, но и качество самого изображения может пострадать.

    Исходя из этих проблем, попробуем совершить невероятное: сделаем так, чтобы изображение выглядело лучше при меньшем количестве цветов и весе изображения. Для этого нам помогут отмеченные выше маски влияния.

    Начнем с цвета. Переходим в палитру Channels и создаем новый канал под названием color. Мы уже определили, что проблемной областью является маятник, поэтому в нужном месте рисуем белый кружок (для удобства лучше включить канал RGB):

    step3

    Переходим в диалоговое окно Save for Web и выставляем там следующие параметры: Color reduction: Adaptive, Dither: No, Colors: 128 (как видите, количество цветов делаем в 2 раза меньше). Теперь надо выбрать маску влияния на цвет: жмем на иконку рядом с Color reduction и в списке выбираем канал color. Смотрим:

    Сейчас вы увидели маску влияния в действии: маятник выглядит прекрасно, чего не скажешь о всем остальном. По сути, мы сказали фотошопу: «Область маятника очень важна, поэтому постарайся сделать так, чтобы там сохранилось как можно больше цветов». Маска влияния работает точно так же, как и обычная маска: белый цвет означает максимальный приоритет области пикселей в основном изображении, черный — минимальный. Все промежуточные оттенки пропорционально влияют на приоритет области.

    Маятник перетащил одеяло на себя, поэтому нужно снизить интенсивность цвета белого кружка, чтобы остальные области не были обделены цветом. Закрываем окно Save for Web, выделяем канал color и применяем к нему Levels (Ctrl+L или ⌘+L). Ставим нижнему белому ползунку в Output levels значение 50. Таким образом мы снизили интенсивность цвета в маске, сказав, что самый яркий цвет должен быть не больше 50:

    step5

    Пробуем еще раз сохранить с теми же параметрами:

    step6

    Уже лучше, но появились другие проблемные области, которые тоже нужно исправить:

    step7

    Думаю, вы уже поняли, как работают маски влияния. Вы подсказываете фотошопу, каким именно областям изображения нужно уделить больше внимания при снижении количества цветов. Чем ярче цвет в маске, тем больше цветов из этой области старается сохранить фотошоп. Методом проб и ошибок у меня получилась вот такая маска (вы можете скопировать изображение себе, чтобы проверить в действии):

    step8

    Маска влияния на смешивание (dithering) работает точно так же: вы указываете, как сильно нужно смешать пиксели в указанных областях. Помните, что при смешивании образуются нерегулярные структуры цветов, которые плохо сжимаются PNG-упаковщиком (поэтому изображение с включенным смешиванием, как правило, весит больше, чем без него). С помощью маски можно указать, какие именно области нуждаются в смешивании, сократив, тем самым, итоговый вес файла.

    У меня получилась вот такая маска:

    step9

    Соединив все вместе получим такое изображение (параметры сохранения: Adaptive, 128 цветов):

    step10

    Вполне неплохо для 128 цветов, не находите? Сделаем последние штрихи: увеличим количество цветов до 180, а верхнюю границу смешивания снизим до 80%. В итоге наш модельный ряд выглядит следующим образом:


    256 цветов, без смешивания, без оптимизации
    42 КБ
    result
    180 цветов
    34 КБ
    step10
    128 цветов
    31 КБ

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

новое →