"CSS Live". Сверстай свой мир

animation-direction?

Давайте предположим, что у вас есть CSS анимация для background-color, которая меняет цвет от желтого (#cc0) к голубому (#079) в бесконечном цикле. Код для этого может выглядеть примерно так:

@keyframes color {
  from { background: #cc0 }
  to { background: #079 }
}

div {
  animation: color 3s infinite;
}

Представим последовательность анимации в линейном виде (на рисунке три итерации):

Брюс Лоусон, среда, 16 мая 2012

После Великого Апрельского Браузерно-Префиксного Тарарама пришла Великая Майская Адаптивно-Картиночная Шумиха 2012-го.

Адаптивные изображения — очередная неразгаданная загадка «отзывчивого» веб-дизайна. Вы отдаете большие картинки высокого разрешения, подходящие для экранов типа «ретины», которые устройства с меньшим разрешением показывают уменьшенными, зря расходуя трафик? Или вы отдаете картинки низкого разрешения, которые мерзко выглядят, будучи растянутыми на большом экране? Вебмастерам приходится рассчитывать на искусные хаки, чтобы отдавать различные контентные картинки (т.е. <img> в HTML, а не CSS-фоны) для разных типов устройств.

Я очень люблю .netmagazine.com, но недавно они просто вывели меня из себя своей статьей "Текстуры для веб-шрифтов". В ней описывается, как накладывать текстуру на текст с помощью -webkit-mask-image, причем сообщается, что это экспериментальное свойство CSS. И даже предлагается использовать префиксы -moz-, -o- и -ms- для свойства, которое отсутствует в какой-либо спецификации и соответственно вряд ли вообще когда-нибудь будет поддерживаться каким-либо не WebKit браузером. Тем самым они вводят своих читателей в заблуждение. Не так давно я писала (перевод статьи) о том, насколько вредными для нашей отрасли могут быть подобные проприетарные вещи.

Альтернативные единицы измерения для трансформации вращения в CSS3

Стандартный код трансформации-вращения, учитывая основные браузеры, выглядит следующим образом:

.example {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

Как Вы можете видеть, благодаря сокращению, стоящему в скобках после числового значения (…deg), единицей измерения угла поворота для каждого из элементов являются градусы.

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

Сегодня я проснулся с каким-то странным чувством. Мне как будто казалось, что что-то должно произойти. Я вошёл в скайп и не ошибся! Меня уже поджидал Илья Стрельцын (@SelenIT2) с неожиданным решением одной известной задачи, связанной с очисткой потока.

Я полагаю, многие верстальщики уже догадались – о чём идёт речь, а если нет, то перед тем, как переходить к решению Ильи, давайте немного освежим память и вкратце рассмотрим несколько известных методов, а так же их достоинства и недостатки.

Марк Боа, среда, 29 июля 2009

Эта статья была обновлена 14 октября 2010, чтоб отобразить изменения в спецификации.

До недавнего времени возможность воспроизведения любого вида аудио в браузере включала использование Adobe Flash или других плагинов. Несмотря на то, что Flash-плейер от Adobe по праву считается наиболее популярным, большинство разработчиков и дизайнеров согласятся, что лучше вообще не зависеть от плагинов.

HTML5-элемент <audio>

Одно из самых волнующих и долгожданных свойств HTML5 – элемент <audio>, позволяющий нативно воспроизводить аудио в браузере. Мы уже можем ощутить преимущества его использования, так как практически все основные браузеры поддерживают его – на данный момент Firefox, Chrome, Safari и Opera, а скоро к ним присоединится и Internet Explorer 9, который сейчас на этапе беты (прим. пер.: уже давно релиз). В браузерах, которые не поддерживают <audio> нативно, мы легко можем использовать Flash.

Итак, у вас есть резиновый лейаут и изображения, которые меняют размеры, но вам нужно заставить так же изменяться и текст. Один и тот же размер шрифта не подойдет ко всем возможным размерам экранов!

Мы привыкли думать, что для изменения размеров тескта достаточно указать значение относительно размеров базового шрифта, используя em’ы или проценты. В адаптивном web-дизайне мы пишем кучу правил и устанавливаем кучу ограничений, чтобы удостовериться, что наш лейаут хорошо отображается на различных разрешениях. Текст – это замечательная изменчивая среда, но, указав один размер не получится красиво заполнить им страницу. Мы рассмотрим несколько простых советов как добиться того, чтобы текст красиво заполнял лейаут, невзирая на размер экрана или устройство на котором он отображается.

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

Несколько дней назад невероятно талантливый Роман Комаров опубликовал свой эксперимент «Скроллируемые тени» на чистом CSS. Если вы используете Google Reader вы, вероятно, знакомы с этим эффектом:

В CSS появились новые значения для изменения размеров объектов в зависимости от размера области просмотра (viewport): vw, vh и vmin. Уместно рассказать об этом сейчас, т.к. эти вещи появатся уже в Chrome 20 (в сборке canary на момент написания статьи). Пока нельзя сказать, что это работает. Использовать в продакшне их пока нельзя, но довольно скоро мы сможем ими пользоваться.

Почему это так классно?

На это есть несколько причин.

Если вы когда-либо использовали списки определений (<dl>) то вы в курсе проблемы. По дефолту, у <dt> и <dd> стоит display: block. Для того, чтобы превратить их в то, что нам надо в большинстве случаев (каждая пара термина и определения на одной строке) мы обычно используем несколько техник:

• Используем разный <dl> для каждой пары: разметка доминирует над стилями, что плохо
• Float: не гибко
• display: run-in; для <dt>: плохая поддержка браузерами (не поддерживается в Firefox)
• Добавление <br> после каждого <dd> и установка термину и определению display: inline;: невалидная разметка. Нужно ли продолжать?

Ах, если бы добавление <br> было валидным… Или, даже так: что если бы мы могли вставлять <br> при помощи CSS? На самом деле мы можем!