ИльяКомментарии к записи Параллакс-эффект на чистом CSS отключены
В этой статье показано, как с помощью CSS-трансформаций, перспективы и небольших хитростей с масштабированием сделать параллакс-эффект на чистом CSS. Параллакс чаще всего делается на JavaScript, и почти всегда он реализован плохо: отлавливается событиепрокрутка, изменения в DOM вносятся напрямую в обработчике и вызываются лишние перерасчёты и перерисовки. Всё это происходит асинхронно с потоковым рендерингом браузера, в результате чего некоторые кадры пропускаются и эффект выглядит прерывистым. Впрочем, это не так уж страшно —requestAnimationFrame и отложенное обновление DOM позволяют управлять внешним видом сайтов с параллакс-эффектом. Но что если вы могли бы совсем не зависеть от JavaScript? Перенос параллакс-эффекта на CSS избавит вас от упомянутых проблем и позволит браузеру положиться на аппаратное ускорение — почти всё будет обрабатываться компоновщиком. В результате вы получите согласованную частоту кадров и гладкую прокрутку страницы. Кроме того, можно сочетать этот эффект с другими CSS-приёмами, такими как медиавыражения и поддержка CSS-свойств. Как насчёт отзывчивого параллакс-эффекта? Теория Прежде чем говорить о принципе работы, давайте выполним базовую разметку: <div class=«parallax«> <div class=«parallax__layer parallax__layer—back«> … </div> <div class=«parallax__layer parallax__layer—base«> … </div> </div> А вот основные стили: .parallax { perspective: 1px; height: 100vh; overflow-x: hidden; overflow-y: auto; } .parallax__layer { position:… Читать далее »
Люди часто используют JavaScript, чтобы сделать выпадающее меню. Но на самом деле это можно сделать на чистом CSS. И в этом уроке вы узнаете, как это сделать. Принцип работы Для начала, чтобы вы поняли принцип работы выпадающих элементов, разберём простой пример. Возьмём простой html-код для работы: 1 <div class=»example_shown»>Наведи на меня курсор > <div class=»example_hidden»>я — скрытая часть</div></div> и применим к этому коду такие стили: .example_shown { display:inline-block; } .example_hidden { display:none; } .example_shown:hover .example_hidden { display:inline-block; } Наведи на меня курсор > В css мы скрыли нужную часть текста, изменив его отображение на display:none;. При наведении курсора (:hover) на родительский элемент .example_shown у дочернего элемента .example_hidden меняется тип отображения на видимый. По такому принципу и строятся выпадающие меню. Создание выпадающего меню Теперь займёмся реализацией самого меню. Для его организации воспользуемся тегами списков ul и li 1 2 3 4 5 6 7 8 9 10 11 12 13 14… Читать далее »
Ну кто из нас не знает, что такое псевдоселекторы (или псевдоклассы) в CSS? Да-да, это то, что обычно пишут после селектора через двоеточие. Самые известные псевдоклассы это :link, :hover, :visited и :active. Такие конструкции в CSS, как правило, можно встретить в каждом файле стилей, но их использование ограничивается лишь описанием состояния ссылок и не более того. В общем, тема псевдоселекторов еще не обсуждалась на нашем сайте, так что самое время приступить 😉 Итак, как я уже сказал, веб-разработчики используют псевдоклассы в основном для задания стилей ссылок, например :link для непосещенной ссылки, :hover для ссылки при наведении, :active для нажатой и удерживаемой ссылки и :visited для посещенной. Кстати, у нас есть отличная статья про оформление ссылок, рекомендую.Идем дальше. Как вы думаете, сколько, помимо этих четырех, существует псевдоклассов? :first-child, last-child? Кто еще? Все? А на самом деле всего их 33. Рассмотрим все детально. Название и назначение псевдоклассов :link — отвечает за стили непосещенной ссылки;… Читать далее »
От автора: Эта статья отображает лишь одно из многих решений проблемы адаптивных изображений. До выбора конкретного решения мы предлагаем вам рассмотреть разные подходы, включая эти два:Как избежать дублирования загрузки адаптивных изображений (How To Avoid Duplicate Downloads In Responsive Images ) и Выбор решения для адаптивных изображени (Choosing A Responsive Image Solution). При разговорах о таких новых стандартах HTML5, как атрибут srcset и элемент picture, а также технологиях серверной стороны, таких как Адаптивный веб-дизайн +компоненты серверной стороны (Responsive Web Design + Server Side Components ) (RESS), простительно, если вы решите, что простые статические вебсайты сейчас не в состоянии поддерживать адаптивные изображения. Однако такое заключение может оказаться преждевременным. Фактически, существует легкий прямой способ доставки адаптивных изображений, поддерживаемых всеми современными веб-браузерами: фоновые изображения CSS. Однако этот подход имеет свои ограничения и не всегда работает. Но если при несложных требованиях вы готовы сделать дополнительное усилие и обеспечить доступность ваших изображений, то все, что вам… Читать далее »
От автора: анимация CSS очень интересна; ее красота состоит в том, что с помощью множества простых свойств можно сделать что угодно от элегантного плавного проявления до очень красивых эффектов. Одно из средств CSS, находящееся где-то в промежутке между ними – это эффект переворота CSS, где при этом на обеих сторонах контейнера, как с лицевой, так и изнаночной, имеется контент. Этот учебник покажет вам, как легко и просто создать его. Краткое примечание: это не первый учебник о подобном эффекте, но все остальные показались мне слишком сложными. Во многие другие статьи добавлены дополнительные стили для кодирования примеров, требующие затем от читателя расшифровки, что из них нужно, а что нет. В данном учебнике этот вопрос опускается, предоставляя вам только необходимые стили; можете украсить любую сторону каждого оборота как вам заблагорассудится. ДЕМО HTML Структура HTML для получения ожидаемого вами двустороннего эффекта: 01.<div class=»flip-container» ontouchstart=»this.classList.toggle(‘hover’);»> 02.<div class=»flipper»> 03.<div class=»front»> 04.<!— front content —> 05.</div> 06.<div… Читать далее »
Селектор CSS – это тот элемент, к которому мы собираемся применять CSS свойства. Слово «селектор» говорит само за себя, оно обозначает выбор. p {color: red} div span {background: green} ul li {list-style: none} Селекторы class и id В примере выше мы имеем 3 селектора – это p, div span, ul li. То есть весь наш файл стилей состоит из селекторов и их свойств. Наиболее удобно и наглядно, особенно новичкам, брать за селектор имя класса (class) тега или уникальный идентификатор (id) тега. Чтобы присвоить класс или идентификатор какому-либо тегу, мы должны указать их среди атрибутов этого тега. У конкретного тега может быть максимум 1 идентификатор и бесконечное число классов. Пример: <div id=»first»>текст в первом диве</div> <div class=»second»>текст во втором диве</div> <div id=»third» class=»first second third»>текст в третьем диве</div> На что стоит обратить внимание: Классы и идентификаторы можно присваивать любым (всем) тегам. Каждый id уникален и не может повторяться в пределах одной… Читать далее »
Модуль Flexbox-лейаута (flexible box — «гибкий блок», на данный момент W3C Candidate Recommendation) ставит задачу предложить более эффективный способ вёрстки, выравнивания и распределения свободного места между элементами в контейнере, даже когда их размер неизвестен и/или динамический (отсюда слово «гибкий»). Главная задумка flex-вёрстки в наделении контейнера способностью изменять ширину/высоту (и порядок) своих элементов для наилучшего заполнения пространства (в большинстве случаев — для поддержки всех видов дисплеев и размеров экранов). Flex-контейнер растягивает элементы для заполнения свободного места или сжимает их, чтобы предотвратить выход за границы. Самое важное, flexbox-лейаут не зависит от направления в отличие от обычных лейаутов (блоки, располагащиеся вертикально, и инлайн-элементы, располагающиеся горизонтально). В то время, как обычный лейаут отлично подходит для веб-страниц, ему не хватает гибкости (никакого каламбура) для поддержки больших или сложных приложений (особенно Замечание: Flexbox-лейаут лучше всего подходит для составных частей приложения и мелкомасштабных лейаутов, в то время как Grid-лейаут больше используется для лейаутов большого масштаба. Основы Т.к…. Читать далее »
