CSS развивается быстрее, чем когда-либо. Со всеми новыми функциями, которые сейчас доступны — и в будущем — с тех пор, как мы получили Flexbox и Grid много лет назад, способ написания CSS также развивается. В этой статье Джефф Грэм рассказывает, какие функции оказали наибольшее влияние на его нынешний подход к CSS, а какие — нет…
Я писал свой Advent of UI Components и наткнулся на значение from-font для свойства CSS text-decoration-thickness. Мне было любопытно, поэтому я провел небольшое исследование и думаю, что то, что я нашел (и узнал), интересно и стоит того, чтобы им поделиться. О значении from-font Вот как MDN определяет значение from-font: Если файл шрифта содержит информацию о…
Если вы веб-разработчик или веб-дизайнер, вам необходимо иметь сайт-портфолио. Это позволяет вам предоставить информацию о себе и продемонстрировать свои лучшие работы с соответствующими навыками и опытом. Затем я покажу вам, как создать красивый адаптивный веб-сайт-портфолио для себя, используя HTML, CSS, JavaScript и Bootstrap версии 5. ] Наличие веб-сайта портфолио имеет ряд преимуществ, в том числе:…
Коллекция бесплатных примеров отзывов HTML и CSS из Codepen и других ресурсов.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответил: да
Зависимости: —
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответил: нет
Зависимости: —
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответил: нет
Зависимости: font-awesome.css
Изображение с наложенным отзывом.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответил: да
Зависимости: font-awesome.css
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответил: да
Зависимости: font-awesome.css
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответил: да
Зависимости: font-awesome.css
Карточка отзыва с изображением, заголовком и цитатой.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответил: да
Зависимости: —
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответил: да
Зависимости: font-awesome.css
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответил: да
Зависимости: font-awesome.css
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответил: да
Зависимости: font-awesome.css
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответил: да
Зависимости: —
Слайдер отзывов в стиле Metro
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответил: нет
Зависимости: —
Круговые диаграммы — это распространенные компоненты, позволяющие отображать части целого, и их можно использовать для самых разных целей. Вы найдете множество статей о создании такого компонента, но обычно они основаны либо на SVG, либо на множестве элементов HTML. В этом посте я покажу вам, как создать круговую диаграмму с помощью CSS и только одного элемента.…
Краткое описание ↬ Знаете ли вы, что выбранная вами цветовая палитра может повлиять на то, сколько энергии использует ваш сайт? Даже более экологичный выбор цветов может снизить влияние на время автономной работы мобильных устройств. В этой статье Мишель Баркер делится советами о не столь очевидных вещах, которые вы должны иметь в виду при работе с…
Несколько недель назад я поделился некоторыми трюками, которые использую для создания пышных, реалистичных теней: Здесь используется несколько стратегий, но самая важная из них — многоуровневая . Вместо одной тени мы складываем 5 или 6 отдельных теневых слоев. Каждый слой был настроен с различными значениями для смещения x / y, радиуса размытия, распространения, цвета и непрозрачности.…
https://gra.dient.art/
Псевдоэлементы CSS :: before и :: after позволяют вставлять «контент» до и после любого незамещенного элемента (например, они работают с но не ). Это эффективно позволяет отображать на веб-странице что-то, чего может не быть в содержимом HTML. Вы не должны использовать его для фактического контента, потому что он не очень доступен, так как вы даже…
42 потрясающих градиента CSS, включая градиент Gay Pride Flag, с очень простыми функциями редактирования. Найдите идеальный вариант или измените их в соответствии со своими потребностями. Идеально подходит для дизайнеров, разработчиков и брендов. Щелкните ручки, чтобы редактировать цвета, перетащите их, чтобы отрегулировать положение, щелкните между маркерами, чтобы добавить новые маркеры, и перетащите ползунок ниже, чтобы изменить…
