От автора: эта статья является частью серии «CSS Grid Layout». Одна вещь, о которой мы упоминали, но пока что должным образом не рассматривали в этой серии — это какие области имеет CSS сетка. До сих пор наши элементы сетки содержались в одной ячейке сетки, но мы можем создавать более практически применимые макеты, нарушая эти границы. Давайте рассмотрим как!
От автора: эта статья является частью серии «CSS Grid Layout Module». В этом руководстве мы возьмем сетку из предыдущей статьи и используем ее в качестве площадки для экспериментов, чтобы подробнее изучить Grid. Мы улучшим то, как определяются зазоры, рассмотрим гибкие CSS столбцы и макеты, единицы измерения fr и представим функцию repeat().
От автора: большинство языков программирования поддерживают переменные. Но, к сожалению, CSS не нуждался в поддержке родных переменных с самого начала. Вы пишете CSS? Тогда для вас нет переменных. Ну, кроме тех случаев, когда вы использовали такой препроцессор, как Sass. Такие препроцессоры подают использование переменных в качестве большого дополнения. И знаете что? Это довольно веская причина их использовать. Веб быстро развивается. И я рад сообщить, что теперь использование переменных в CSS стало реальным. Хотя препроцессоры поддерживают намного больше функций, всё же добавление переменных CSS это отлично. Это двигает сеть ещё ближе к будущему. В этом руководстве я покажу вам, как изначально работают переменные в CSS, и как можно использовать их, чтобы сделать жизнь намного проще.
От автора: в прошлом месяце мы запустили редизайн Thomasnet.com — сайта американской обрабатывающей промышленности (и компании, которой посчастливилось нанять меня на полный рабочий день). Редизайн, в котором мы решили пойти ва-банк при помощи CSS Grid. Это веб-сайт, который в одном только январе получил 100k + посетителей в Internet Explorer 11 – первого среди браузеров не поддерживающего CSS Grid.
От автора: предположим, вы пытаетесь создать элемент дизайна в котором углы блока являются срезанными. Может быть, вы фанат «Звездного крейсера «Галактика»? Или, может быть, вам просто нравится этот необычный эффект, так как он отличается от стандартных прямоугольников.
От автора: подходы к разработке макетов в Интернете меняются, и на переднем крае этих изменений находится CSS Grid Layout. В этом обновленном руководство мы не будет фокусироваться на деталях и нюансах, вместо этого поможет вам начать работу с CSS Grid Layout прямо сейчас.
От автора: ниже вы найдете некоторые из самых странных функций CSS, а также советы и рекомендации CSS для продвинутых пользователей.
Как создать Off-Canvas меню с использованием CSS и немного JavaScript
От автора: в этом руководстве мы рассмотрим простой, но эффективный способ создания Off Canvas меню с использованием HTML, CSS и JavaScript.
Как создать адаптивный компонент вкладок с использованием CSS и совсем немного JavaScript
От автора: в этом руководстве вы узнаете, как создать адаптивный компонент вкладки с использованием CSS и совсем немного JavaScript. Вполне возможно создавать компоненты вкладок и на чистом CSS, но для этого примера давайте на практике наработаем наши навыки JavaScript.
От автора: Knockout text – это техника, в которой слова вырезаются из элемента, открывая задний фон. Другими словами, виден только фон, поскольку буквы проделывают отверстия в элементе. Это привлекательно, так как открывает типографические стили, которые нельзя получить из традиционных свойств CSS, таких как color.
Все права защищены © 2026
Бернацкий Андрей Васильевич
Служба поддержки
Материалы сайта (статьи, уроки, видео уроки, курсы и прочее) предназначены исключительно для самостоятельного изучения
2018-03-23