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

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

4 неизвестных свойства макета CSS

От автора: CSS продолжает развиваться, как и его кузен Javascript. Я подумал, что поделюсь с разработчиками некоторыми свойствами макета CSS, которые пока относительно неизвестны. Первые 3 — это вариации почти одного и того же, а четвертое — самое непонятное и неподдерживаемое из всех. PLACE-ITEMS Оно поражает многих разработчиков. Свойство place-items — это сокращение для свойств CSS align-items и justify-items. Если ...

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

Как легко создавать текстовые градиенты с помощью CSS

От автора: градиент — это переход цветов от начальной и конечной точке, а линейный градиент постепенно перемещается по прямой к другому цвету. Градиенты — это последняя тенденция в наши дни, и большинство веб-сайтов создаются с использованием градиентов. Благодаря свойству CSS background-clip очень легко реализовать градиенты для текста. Синтаксис: как создавать текстовые градиенты Во-первых, мы должны настроить шрифт, используя h1 или ...

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

Как работает CSS perspective

От автора: как человек, который любит создавать CSS-анимацию, я использую один из наиболее мощных инструментов perspective. Хотя свойство perspective не поддерживает 3D-эффекты само по себе (поскольку базовые фигуры не могут иметь глубины), вы можете использовать свойство transform для перемещения и поворота объектов в 3D-пространстве (с осями X, Y и Z), а затем используйте perspective для контроля глубины. В этой статье ...

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

Пользовательские radio / checkbox кнопки с выравниванием

От автора: создание пользовательских кнопок radio / checkbox — непростая задача. Они должны быть доступными, легко настраиваемыми и идеально согласованными с метками. Вот предварительный просмотр окончательного результата (загрузите компонент пользовательского интерфейса CodyHouse): Важное правило, которого я стараюсь придерживаться при создании компонентов — начинать с простейшей структуры и добавлять дополнительные элементы (например, родительские контейнеры) только в случае необходимости. Вот все, что ...

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

Баг viewport в Mobile Safari

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

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

Пользовательские маркеры с помощью CSS ::marker

От автора: теперь легко настроить цвет, размер или тип числа или маркера при использовании <ul> или <ol>. Благодаря Igalia, спонсируемой Bloomberg, мы наконец-то можем убрать хаки для стилей списков. Судите сами! Благодаря CSS ::marker мы можем изменять содержимое и некоторые стили маркеров и чисел. Совместимость с браузерами Когда выйдет Chromium 86, ::marker будет поддерживаться в Firefox для настольных компьютеров и ...

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

Создание пользовательской полосы прокрутки на CSS

От автора: вы когда-нибудь сталкивались с веб-сайтом с красивой полосой прокрутки и думали про себя: «Вау, как бы я хотел создать что-то подобное»? Я тоже! И после небольшого исследования я поняла, что создание пользовательской полосы прокрутки для вашего блога или личного портфолио не требует кучи CSS. Сегодня мы создадим градиентный индикатор выполнения, который плавно меняется от нуля до 100% по ...

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

Пропорциональное изменение размера с помощью переменных CSS

От автора: в этом фрагменте я хочу поделиться с вами тем, что я делаю при изменении размеров элементов в DevTools браузера. Предположим, вы реализуете дизайн в HTML и CSS и хотите поэкспериментировать с шириной и высотой иконки. Учтите следующее: .icon { --size: 32px; width: var(--size); height: var(--size); } В DevTools браузера вы можете изменить значение переменной —size, и это повлияет ...

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

Как сделать CSS реактивным!

От автора: итак, представьте себе эту сцену, мы на технической конференции в вашем родном городе, и к вам подходит странный разработчик (это я), я говорю вам. Эй, ваш CSS реактивный? Вы можете подумать примерно следующее: «Должен ли я ответить на этот вопрос? Будет ли долгая пауза неловкой. Что такое реактивный? Зачем нам делать CSS реактивным? И наконец … Эй, не ...

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

Пользовательские стили элементов select на CSS

От автора: современный CSS предоставляет нам ряд свойств для создания пользовательских стилей элемента select, которые имеют почти идентичный начальный вид для одиночных, множественных и отключенных элементов select в популярных браузерах. Несколько свойств и методов, которые будет использовать наше решение: clip-path для создания настраиваемой стрелки раскрывающегося списка макет сетки CSS для выравнивания пользовательского поля выбора и стрелки пользовательские переменные CSS для ...

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