От автора: По мере того как с каждым релизом новых версий браузеров растет поддержка CSS3, а скучные браузеры, поддерживающие только CSS2, постепенно уходят со «сцены», у нас появляется гораздо больше вариантов для использования эффектов при наведении и переходов. Практически все кнопки призыва к действию (call-to-action), которые можно увидеть на веб-сайтах, используют в том или ином виде эффекты при наведении, потому что они привлекают внимание и делают веб-сайт более интересным.

Читать далее →

От автора: Оказывается, что currentColor появился уже достаточно давно, но я впервые услышал о нем только несколько месяцев назад, когда прочел заметку от Дадли Стори (Dudley Storey). Он утверждает, что данное ключевое слово имеет хорошую браузерную поддержку (IE9+). И для меня этого было вполне достаточно, чтобы начать использовать его в реальных проектах. Я был очень удивлен, когда выяснил, насколько полезным может быть данное ключевое слово: оно позволяет сделать ваш CSS код короче и умнее.

Читать далее →

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

Читать далее →

От автора: Отзывчивая и легко изменяемая навигация для крупных веб-сайтов или Интернет-магазинов, украшенная изящной CSS анимацией и имеющая поддержку устройств с отключенным JavaScript.

Читать далее →

От автора: В этом уроке мы затронем тему использования CSS-спрайтов, листов спрайтов и листов изображений. В частности мы рассмотрим преимущества использования данных техник перед работой с отдельными изображениями.

Читать далее →

От автора: Очень продолжительное время мы были вынуждены создавать интерфейсы для наших веб-приложений, применяя СSS техники, которые изначально задумывались для верстки печатных документов. Неудивительно, что их использование вызывает столько затруднений у новичков! К счастью, времена меняются. Теперь у нас есть модуль Flexbox. Если вы можете позволить себе не заботиться о поддержке в браузерах IE < 10 (а это большое «если»), то вы можете использовать Flexbox уже сегодня! Спецификация является завершенной, и почти все браузеры поддерживают данный модуль без необходимости применения вендорных префиксов.

Читать далее →

От автора: Один из моих читателей прислал мне GIF-картинку, демонстрирующую классный эффект, созданный Google для мобильных устройств (Вероятно так отображается домашняя страница в браузере Chrome с устройства на платформе Android?). В центре страницы размещено поле поиска (тег input с типом search), которое начинает прокручиваться вместе со страницей, но при прокрутке в обратном направлении, поиск снова размещается в шапке страницы. Давайте разберем данную ситуацию, поскольку вы знаете…

Читать далее →

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

Читать далее →

От автора: Возможно, что вы уже слышали про схему data: URI. Это действительно замечательный способ встраивания какого-нибудь ресурса, для загрузки которого обычно потребовался бы отдельный HTTP запрос. Формат записи, использующийся в схеме data: URI, может варьироваться. Обычно вы просто указываете, к какому типу относится встраиваемый ресурс (например, image/png), точка с запятой, а затем сами данные файла.

Читать далее →

От автора: Последние обновления CSS3 открыли для нас новые, встроенные в браузеры, возможности по изменению дизайна веб-приложений, например, скругление углов у блоков, добавление градиентов, нескольких фонов для одного элемента и тени. И CSS продолжает развиваться дальше. А возможности, которые появились в CSS сейчас, уже очень напоминают те инструменты, которыми мы привыкли пользоваться в любимом графическом редакторе.

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

Читать далее →