От автора: Гамбургер-меню, выдвижное меню, off-canvas меню: как бы эту разновидность меню ни называли, скрытие основной навигации на сайте становится шаблоном, использующимся повсеместно в отзывчивом веб-дизайне. Все больше и больше сайтов используют зафиксированную иконку, при нажатии на которую весь сайт сдвигается в сторону, чтобы отобразить скрытое меню.
От автора: CSS3 развивается таким образом, что мы можем перевести в код CSS почти все, что создается в Photoshop’е. Тем не менее, до сих пор нам не удавалась обводка текста (text-stroke). Можно было добавлять к тексту тени, но до настоящего момента не существовало жизнеспособного решения проблемы обводки. Сейчас в webkit появился ответ на этот вопрос, представляющий обводку текста с помощью одного лишь CSS.
От автора: Обычно веб-дизайнеры привыкли помещать контент внутрь HTML «контейнеров» – article, nav, а также незаменимый div – а затем задают для данных контейнеров стили и размеры. Но иногда нам было бы удобнее, чтобы размеры контента сами определяли размеры контейнера, без дополнительной установки значений.
До этого я рассказывал про min-content, одно из значимых ключевых слов в CSS, которое дизайнеры могут использовать для создания веб-дизайнов, уделяющих первоочередное внимание контенту. В этой статье я рассмотрю противоположное ключевое слово: max-content.
От автора: Каждого дизайнера можно отнести к одной из двух больших категорий: Дизайнеры, которые сначала создают дизайн, а потом пытаются уместить контент внутри фиксированных размеров каркаса сайта. Хорошие дизайнеры, учитывающие все особенности контента, а также контекста, в котором он будет использоваться, и создают дизайн, который подстраивается под контент.
От автора: Сегодня мы покажем вам, как создать простые, но стильные эффекты проведения мышью для титров к изображениям. Идея заключается в том, чтобы сделать сетку с изображениями и применить к ним эффекты, которые при проведении мышью покажут титры с названием, автором и кнопкой-ссылкой. Для некоторых эффектов мы применим 3D-преобразования. Нам нужно добиться изящества и гарантировать вдохновение при создании множества их вариаций.
От автора: Сегодня мы собираемся познакомиться с по-настоящему классной техникой, которую вы можете использовать для создания эффекта, немного напоминающего параллакс скроллинг (parallax scrolling), но без необходимости использовать JavaScript; этого можно добиться очень просто, используя чистый CSS-код.
Создание круглых, плоских, а также переворачивающихся переключателей на CSS
От автора: В этом уроке, мы покажем, как легко создавать невероятные круглые, плоские и переворачивающиеся переключатели на CSS. Мы будем использовать чистый CSS для создания переключателей, добавляя классное взаимодействие с пользователем к функционалу флажков.
От автора: Прямоугольник внутри прямоугольников: вот как всегда строились наши веб страницы. Мы долго пытались освободиться от этих ограничений, используя CSS для создания геометрических фигур, но эти фигуры никогда не влияли на контент, находящийся внутри оформленных элементов, или на то, как располагаются другие элементы на странице относительно оформленного.
Очистка плавающих элементов: обзор различных методов clearfix
От автора: Очистка плавающих элементов долго была самой распространенной необходимостью во фронт-энд разработке. Не удивительно, что в течение нескольких лет, нам было предоставлено множество техник, известных как методы clearfix. До того, как мы углубимся в различные методы, давайте посмотрим на саму проблему, которую метод clearfix призван решать.
От автора: В этом учебнике мы рассмотрим техники, необходимые для того, чтобы сделать навигационное меню, скрытое до тех пор, пока пользователь не нажмет иконку меню, при чем содержимое смещается и затемняется, а меню вдвигается в поле зрения. Так же это меню будет адаптивным по вертикали и станет заполнять высоту окна браузера несмотря на размер экрана, на котором оно просматривается.
Чтобы добиться этого, мы применим пару разных методов, один из которых -flexbox, в настоящее время ставший настоящим модным словечком и «святым Граалем» методов веб-разметки. Мы воспользуемся им для того, чтобы меню подходило к высоте окна. Кроме того, мы так же применим jQuery для функциональности меню, заставим его выскальзывать при событии щелчка, а также обеспечим альтернативный вариант для тех, у кого отключен в браузера JavaScript (это определится с помощью Modernizr’а).
Все права защищены © 2025
Бернацкий Андрей Васильевич
Служба поддержки
Материалы сайта (статьи, уроки, видео уроки, курсы и прочее) предназначены исключительно для самостоятельного изучения
2014-09-05