От автора: когда я объявил, что собираюсь написать что-то для разработчиков JavaScript, которые не понимают CSS, многие люди (в том числе Джереми) сказали, что глава Каскады и наследование будет иметь решающее значение, так как многие разработчики JS, похоже, не понимают этого.
От автора: вы знаете о font display CSS? Это здорово. Это свойство CSS, которое можно использовать в блоках @font-face для управления тем, как визуально загружается этот шрифт. Загрузка шрифта на самом деле довольно сложная вещь. По этой ссылке вы найдете пример из руководства Зака Лизермана, которое содержит более 10 стратегий загрузки шрифтов, включая стратегии, которые применяют встроенный критический CSS подмножеств шрифтов в сочетании с загрузкой остальных шрифтов позже через JavaScript. Это далеко не увеселительная прогулка.
От автора: изучаем основы того, как использовать CSS переменные: область видимости, ограничения и взаимодействия с JavaScript, включая интерактивные примеры. Очистите свой Codepen и подготовьте его для самостоятельного выполнения заданий.
От автора: единицы измерения, связанные с окном просмотра, были введены в Спецификации CSS уровня 3: Значения и единицы измерения. Они позволяют задавать размеры элементов и размеры шрифта в процентах от общей ширины или высоты экрана пользователя (окна просмотра). Давайте рассмотрим, что мы можем сделать, используя в нашем CSS единицы измерения, о которых идет речь.
От автора: в первом уроке по верстке нашего нестандартного блока мы сверстали сам блок. В данном уроке мы продолжаем верстку блока с услугами, где применим эффекты при наведении, а также добавим поп-ап, в который можно вставлять описание услуг. В конце будет написан скрипт, при помощи которого можно открывать и закрывать данный поп-ап.
От автора: на красивых, качественных лендингах используются блоки с интересными эффектами и нестандартным расположением элементов. В этом уроке мы приступим к верстке подобных блоков. В создаваемом блоке будут присутствовать наклонные линии, красивый эффект по наведению, раскрытие описания по клику и прочее. В уроке блок будет называться «Наши услуги», но в своих проектах вы сможете использовать данный блок для чего угодно: для описания, для характеристик, для преимуществ и т.д. В данном уроке мы с вами создадим разметку и назначим необходимые стили для блока.
Как благодаря CSS Grid я перестал использовать макет BootStrap
От автора: почему я начал использовать вместо BootStrap CSS Grid? BootStrap слишком длинный: нужно много div, даже если в макете всего пара блоков. С добавлением адаптивности все становится еще хуже… или когда нужно передвинуть блоки. Сетка BootStrap ограничена 12 колонками. По умолчанию в BootStrap padding равен 10 пикселей, и его сложно переписать. Пользователи обязаны загружать BootStrap, что замедляет сайт.
Как работает CSS: парсинг и отрисовка CSS в критическом пути рендера
От автора: часто CSS представляют какой-то таинственной, причудливой силой, которая управляет всем, что мы видим в сети. Иногда стили могут быть простыми. Однако написание масштабируемого, производительного CSS, скорее, исключение, а не норма. Поэтому важно подробно разбираться в том, как работать с CSS.
От автора: для таких элементов как чекбоксы, радиокнопки и некоторых других невозможно определить CSS стили и управлять их внешним видом, поэтому приходится использовать различные хаки, и сегодня я расскажу вам как можно не прибегая к использованию JavaScript управлять внешним видом чекбоксов и радиокнопок на чистом CSS.
От автора: для чего нужен focus visible? Четко видимые стили в состоянии выделения фокусом ввода важны для пользователей, работающих в основном с клавиатуры. Однако эти стили часто могут быть нежелательными, когда они применяются в результате взаимодействия мыши / указателя. Классическим примером этого являются кнопки, которые вызывают определенное действие на странице, например, перемещение кадров карусели. В то время, как нам важно, чтобы пользователь клавиатуры мог видеть, когда фокус ввода находится на кнопке, пользователя мыши могут ввести в заблуждение не те изменения стилей кнопки после клика кнопки, которых он ожидал. Он может задаться вопросом, почему стили «застревают»? Или, возможно, состояние / функционал кнопки каким-то образом изменились?
Все права защищены © 2026
Бернацкий Андрей Васильевич
Служба поддержки
Материалы сайта (статьи, уроки, видео уроки, курсы и прочее) предназначены исключительно для самостоятельного изучения
2018-05-01