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

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

От автора: свойство CSS writing mode устанавливает горизонтальное и вертикальное направление написание текста. Хотя оно предназначено для целей мультиязычности, но может быть использовано для дизайна. Основы Свойство CSS writing-mode устанавливает направление содержимого как по горизонтали, так и по вертикали. writing-mode: horizontal-tb; Допустимые значения: horizontal-tb — Контент размещается горизонтально слева направо, вертикально сверху вниз. Значение по умолчанию. vertical-rl — Контент размещается ...

От автора: есть несколько интересных различий между тем, как работают current Color и пользовательские свойства. Оба являются примерами динамических свойств в CSS, но способы их реализации различаются некоторыми очень важными деталями. Недавно я натолкнулся на пример этого, который заставил меня немного почесать голову. Моя подруга пыталась установить тему для контейнера и применить цвет к границе заголовка и телу тексту. Что-то ...

От автора: знаете ли вы, что вы можете использовать отрицательные номера линий, чтобы позиционировать в CSS Grid элементы сетки? Я не делал этого до недавнего времени — точнее, я не думал об этом, так как никогда не чувствовал, что мне это нужно. Но после того, как я написал статью об относительном позиционировании элементов сетки, у меня в голове застряло, что ...

От автора: есть свойство CSS content, которое используется в тандеме с элементами ::before и ::after. Оно вводит контент в элемент. Вот пример: <div data-done="&#x2705;" class="email"> [email protected] </div> .email::before { content: attr(data-done) " Email: "; /* Это вставляется перед адресом email */ } Свойство обычно принимает все, что вы туда вносите. Однако есть некоторые недопустимые значения, которые оно не примет. Я ...

От автора: если вы когда-либо использовали смежные селекторы CSS одного уровня, вы знаете, что их всего два. Комбинатор + выбирает первое соответствие, которое находит сразу после, а комбинатор ~ выбирает все последующие. Но у нас нет способа выбрать те, которые расположены раньше. Либо родительские селекторы, либо предыдущие селекторные одного уровня — такого просто нет. Я знаю, что вы этого хотите, ...

От автора: когда вы используете восемь значений свойства border radius CSS, определяющих радиус округления углов границы, вы можете создавать естественно выглядящие фигуры. ВОТ ЭТО ДА. Нет времени, чтобы прочитать все это? Мы создали для вас визуальный инструмент. Он доступен здесь. Вступление В рамках конференции Frontend Conference в Цюрихе Рэйчел Эндрю рассказал об Использовании возможностей Grid Layout. В конце своего доклада ...

От автора: с помощью CSS фигуры создаются не слишком сложно. Квадраты и прямоугольники создать просто, так как они являются естественными фигурами сети. Добавьте ширину и высоту, и у вас есть прямоугольник точного размера. Добавьте border-radius, и вы можете округлить эту фигуру, этого достаточно, чтобы превращать эти прямоугольники в круги и овалы.   Мы также имеем псевдо-элементы ::before и ::after psuedo, ...

От автора: в этом кратком руководстве мы рассмотрим, как изменить курсор CSS — а точнее, настроить его внешний вид. Мы изменим вид курсора на стрелку, чтобы упростить навигацию по слайд-шоу. Чтобы лучше понять тему, мы рассмотрим два отдельных примера. Примечание. Цель этой статьи — не исчерпывающий анализ синтаксиса свойства cursor. Для более глубокого изучения данной темы обязательно ознакомьтесь с ресурсами, ...