Главная » Архив меток: CSS 3 (страница 11)

Архив меток: CSS 3

Что такое flex-grow, flex-shrink и flex-basis

От автора: когда вы применяете свойство CSS к элементу, происходит множество вещей, невидимых на первый взгляд. Например, допустим, у нас есть такой HTML: <div class="parent"> <div class="child">Child</div> <div class="child">Child</div> <div class="child">Child</div> </div> А потом мы пишем CSS … .parent { display: flex; } Технически это не один стиль, который мы применяем, когда пишем одну строку CSS выше. Фактически, здесь к ...

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

Как получить совместимые липкие элементы на всю ширину

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

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

Динамические размеры липкой боковой панели с HTML и CSS

От автора: создание содержимого страницы, которое «прилипает» к области просмотра при прокрутке, что-то вроде меню перехода к привязке или заголовков разделов, никогда не было таким простым. Добавьте position: sticky в набор правил CSS, установите смещение направления (например top: 0), и вы готовы произвести впечатление на своих товарищей по команде с минимальными усилиями. Но липкое позиционирование может быть немного сложным, особенно ...

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

Подробное рассмотрение CSS Grid minmax()

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

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

Переменные Sass, CSS, а также переменные семантической темы

От автора: на прошлой неделе мне представилась возможность поработать над побочным проектом, который не планируется включать в матрицу поддержки Internet Explorer 11, и это вызвало у меня только положительные эмоции! Это открывает дверь к большому количеству забавного CSS, под названием «Специальные возможности». Добавление соответствующей «Темной темы» в приложение некоторое время ожидало своей очереди, и, увидев в моем графике немного свободного ...

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

Дизайн с адаптивной высотой

От автора: термин «Адаптивная верстка» часто подразумевает под собой проверку браузера в области просмотра на разной ширине и различных по размерам устройств. Мы всегда тестируем браузер по горизонтали, уменьшая ширину, но я редко встречал какие-либо соображения по поводу тестирования по вертикали за счет уменьшения высоты окна браузера. В глубине души возникает вопрос: нужно ли нам уменьшать высоту окна браузера? Да, ...

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

Привлекайте внимание пользователя с помощью селектора CSS :focus-within

От автора: вы можете использовать селектор :focus-within для стилизации родителя выделенного фокусом элемента. Это позволяет создавать пользовательский интерфейс интерактивной формы без единой строчки JavaScript. Попробуйте пример ниже: Этот пример использует :focus-within, плюс псевдо-селектор ::before и некоторую магию позиционирования. Мы рассмотрим детали, но вы можете проверить полный источник ниже. Селектор :focus-within + псевдоэлементы ::before + абсолютное позиционирование Все в одном блоке ...

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

Сравнение и объяснение всех единиц измерения CSS

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

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

Нестандартное мышление с CSS Grid

От автора: поддержка CSS Grid (CSS сетки) в современных браузерах открыла новые возможности компоновки элементов. Мы можем создавать более сложные дизайны, используя меньше элементов, чем мы могли, используя компонент Flexbox. Но когда вы думаете о CSS Grid, вы в основном думаете о блочном макете, ведь так? Некоторые примеры макетов из Grid by Example Рэйчел Эндрю с сайта Энди Барефут создаёт ...

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

«Универсальный селектор CSS работает медленно» — еще один фэйк!

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

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