Retina Display, или знакомимся с ретиновыми дисплеями.

Экраны с повышенной плотностью пикселей и большими разрешениями продолжают захватывать рынок. Особенно преуспели в этом товарищи из Apple с их retina дисплеями. Однако то, что является наслаждением для глаз, в то же время добавляет головной боли веб-дизайнерам и фронт-енд разработчикам. Здесь я постарался собрать побольше информации о нюансах этих дисплеев с точки зрения веба и […]

Резиновая кнопка со скругленными углами и полупрозрачным фоном на CSS 2.1

Несмотря на рассвет css3 в вебе, многие до сих пор не могут воспользоваться всеми его преимуществами из-за ограничений старых версий Internet Explorer. К сожалению, далеко не каждый заказчик может одобрить подход graceful degradation, это скорее прерогатива собственных проектов. Поэтому все еще актуальны техники, которые безпроблемно работают и в старых браузерах. У опытных верстальщиков скорее всего […]

Adobe & HTML

Несколько дней назад компания Adobe представила свой новый сайт html.adobe.com, посвященный HTML, CSS и другим инструментам веб-разработки. На данный момент сайт заполнен не до конца, кое-где красуется «coming soon», однако уже имеющийся контент представляет немалый интерес.

Треугольники с тенью на CSS

Скорее всего, вы уже знаете, как сделать треугольник на чистом CSS, использовав свойство border. Если же не знаете, то можно почитать, например, здесь. Но что, если вам понадобятся треугольники с тенью? Классическая манипуляция с бордером не может изменить форму объекта, это всего лишь визуальный обман. Т.е. нельзя просто взять и добавить box-shadow к такому треугольнику, […]

Элемент Date Picker стал доступен в Chrome Canary и Chromium

Последнее обновление версий Chrome Canary и Chromium включило поддержку нового элемента для форм — Date Picker. Задав type="date" для input, мы увидим небольшой треугольник рядом с текстовым полем. Кликнув на него, пользователь сможет использовать date picker для выбора даты и ее параметров, и это без использования JavaScript. В комментариях к новости, Пол Айриш пояснил, что […]

Переменные в CSS

Если вы разработчик, то вы точно хорошо знакомы с переменными, и возможно они одни из ваших лучших друзей. По определению, переменная — это временное хранилище, которое содержит некое значение величины или информации. Но каким образом это относится к тому CSS, который мы все знаем? Год назад на Хабре был пост о планируемых новшествах в CSS, […]

Полезные ссылки для изучения CSS анимации

Мы начали наблюдать много экспериментов над CSS3 анимацией и статьи о ней в 2011-м, но тогда поддержка этой анимации была ограничена браузерами на вебките. В середине 2011-го Firefox 5 тоже получил эту поддержку, а также мы можем ожидать ее в следующей реинкарнации Internet Explorer (10), поэтому сейчас идеальное время, чтобы разобраться с синтаксисом @keyframes (покадровой […]

Знакомство с Parallax Scrolling + полезные ссылки

Любой, кто играл или наблюдал за игрой друзей, либо в принципе видел игры, которые были выпущены в 80-90-х годах, должны быть знакомы с техникой параллакс-скроллинга. Вспомните такие игры, как Mario Bros, Streets of Rage, Mortal Kombat, Turtles in Time или оригинальную игру Moon Patrol. В этих играх техника параллакса наблюдается в тот момент, когда несколько […]

Превью некоторых селекторов из CSS4

Девид Уолш (David Walsh, американский веб-разрабочик, один из создателей MooTools), в однажды своем блоге рассмотрел некоторые потенциально интересные нововведения в CSS4, которые появились после последних обновлений спецификации. Я неровно дышу к будущему веба и не мог пройти мимо этого текста. Прочтя его, решил сделать перевод, потому что несмотря на интересность этой темы, многие могут пройти […]

Новый метод замены текста картинкой, или избавляемся от -9999px

Поговорим о техниках замены текста изображением. Думаю, практически все сталкивались с моментами в верстке, когда, к примеру, для заголовка страницы нужно использовать графический объект, при этом сохранив под ним текст и для поисковых роботов, и для печатной версии. Да и в принципе, никогда не хочется ломать семантинку страницы. Немного об истории решения этого вопроса. Самой […]