Верстка \ CSS 3

Эффект для меню на CSS

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

Читать далее

Верстка \ CSS 3

В чем разница между Flexbox и Grid CSS?

От автора: давайте вкратце рассмотрим эту тему и попытаемся ответить без длинных объяснений. Существует много общего между Flexbox и Grid CSS, начиная с того, что они используются для разметки и являются гораздо более мощными, чем любая техника разметки, которая была до них. Они могут растягиваться и сжиматься, они могут центрировать вещи, они могут переупорядочивать вещи, они могут выравнивать вещи…

Читать далее

Верстка \ CSS 3

Проблемы с position: sticky CSS и способ их решить

От автора: в этой статье я хочу рассмотреть недостатки position: sticky; — в частности, как мы можем придумать креативную технику при работе с переполнениями, что вызывает разочарование при работе с нативным решением.

Читать далее

Верстка \ CSS 3

Полное руководство по свойствам размеров Flexbox

От автора: изменение размеров Flexbox позволяет создавать гибкие макеты, которые полностью адаптируются к экрану. Если вы все настроите правильно, вам не придется полагаться на медиа-запросы для поддержки разных экранов, окон просмотра и ориентаций.

Читать далее

Верстка \ CSS 3

CSS Hyphenation - перенос слов в 2019 году

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

Читать далее

Верстка \ CSS 3

Липкое позиционирование блоков (position sticky)

От автора: CSS постоянно развивается. Добавляются новые свойства, и со временем все большее количество браузеров начинает поддерживать новые свойства. В данном видео уроке мы рассмотрим применение относительно нового значения sticky у свойства position, используя которое, можно сделать блоки, прилипающие к верху страницы при скроле.

Читать далее

Верстка \ CSS 3

Быстрая проверка CSS и общие замечания о системах дизайна

От автора: в последнее время мной была выполнена проверка CSS в огромном объеме, и я подумал, что было бы неплохо записать, как я это делаю. Уверен, что есть миллион различных способов сделать это в зависимости от размера и масштаба вашего приложения и того, как CSS работает под капотом, поэтому, пожалуйста, отнеситесь к этому с определенной долей скептицизма.

Читать далее

Верстка \ CSS 3

Градиентные рамки в CSS

От автора: допустим, вам нужна градиентная рамка CSS вокруг элемента. Я представляю себе это так: для этого не существует простого очевидного CSS API; я просто создам элемент-оболочку с linear-gradient фоном, а затем внутренний элемент перекроет большую часть этого фона, за исключением тонкой линии вокруг него.

Читать далее