От автора: Каждый раз при использовании CSS мы применяем селекторы. Но, несмотря на это, селекторы CSS –один из самых пренебрегаемых разделов спецификации.

Мы говорим о больших преобразованиях в CSS3, но часто забываем об основах. Правильное применение селекторов упрощает и украшает ежедневное кодирование. Сегодня я хочу рассказать о 10 селекторах, которые часто ускользают из памяти, но являются эффективными и очень полезными.

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

От автора: существует предел того, насколько разумно маленьким может быть изображение. Будучи масштабированным до размера экрана смартфона, текст в этом изображении едва читается. Конечно, пользователь может применить увеличение, но когда при беглом просмотре статьи приходится что-то увеличивать и уменьшать, это сильно раздражает.

Зачастую мы способны применить некое дизайнерское решение, чтобы исправить такое состояние: представить на маленькие экраны другое изображение, на котором, например, содержимое организовано более подходящим образом. Но иногда это невозможно… скажем, при простом отображении контента из CMS.

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

От автора: Центрирование элементов HTML на веб-странице кажется простым делом. Иногда это действительно так… но сложные разметки часто исключают некоторые решения, заставляя веб-разработчиков работать без сетки.

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

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

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

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

Библиотека jQuery UI предлагает нам виджет Табы (//jqueryui.com/tabs/), позволяющий с легкостью реализовать необходимый функционал. Однако, если вы не хотите подключать дополнительную библиотеку, если хотите реализовать вкладки, что называется с нуля, то данный урок как раз то, что вам нужно.

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

От автора: гиперссылки и кнопки – все еще являются функционалом в привычном внешнем виде вебсайта или веб-приложения. При взаимодействии они чаще всего дают очень небольшую ответную реакцию. Но можно очень легко добавить самые простые стили и дать понять пользователю, что они либо уже взаимодействуют, либо могут взаимодействовать с данным элементом.

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

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

Сегодня мы хотим поделиться с вами еще одним экспериментальным меню. Конечно, вы уже знакомы с так называемой off-canvas-навигацией (скрытой и открывающейся по требованию, например, при нажатии на кнопку) в мобильных приложениях и его реализацией для адаптивных вебсайтов вроде этого, созданного Дэвидом Бушелом (David Bushell). Мы пытались исследовать возможность создания вложенного многоуровневого меню, что могло оказаться весьма кстати для меню с большим количеством контента (такого, как навигация онлайн-магазинов). Результатом стало «выдвижное» меню, способное (теоретически) содержать бесконечные вложенные подменю. При открытии подуровня навигации все содержимое сдвигается еще больше, при этом видимым остается кусочек родительского меню. На выбор – его можно оставить видимым, а можно убрать, в таком случае подменю просто закроет родительский элемент.

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

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

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

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

От автора: вдохновляемся эффектами загрузки элементов сетки с помощью анимации CSS.

Сегодня мы хотели бы поделиться с вами эффектами загрузки элементов сетки. Идея в том, чтобы показывать элементы в сетке с анимацией, когда те оказываются в окне просмотра. Эти возможности бесконечны и мы хотели бы немного вдохновить вас. Некоторые эффекты взяты из великолепных эффектов прокрутки CSS3 Хакима эль Хаттаба (Hakim El Hattab), а идея навеяна мозаичной анимацией, подсмотренной в приложении Google Plus.

Так как Masonry является популярной библиотекой разметки сеток, мы подумали, что в этом демо-примере использовать ее было бы неплохо. Если хотите применить другую, или вообще обойтись без библиотеки, вам придется удалить инициализацию из скрипта и отрегулировать селекторы и т.д. Это очевидно.

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

От автора: проблема пользовательского интерфейса, к которой мы здесь обращаемся – та же, на которой сосредоточены многие мои CSS 3D— работы, такие как пользовательский интерфейс Origami: мы живем в мире очень разнообразных экранов, причем стремительно становятся нормой их маленькие размеры. Это требует переоценки имеющегося пространства: вместо размещения подписей под фотографиями нам может понадобиться поместить их за изображением с тем, чтобы те появлялись при действиях касания или проведения мышью.

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