Стилизация участков текста с помощью CSS Custom Highlight API

Задача по настройке внешнего вида диапазонов текста часто встречается в работе Frontend-разработчика. В этой статье мы рассмотрим стилизацию участков текста с помощью CSS Custom Highlight API, а также изучим практическую сторону создания диапазонов выделения.

#фронтенд #css

Old but gold: Десять советов по улучшению CSS-переходов и анимации

Одни анимации и переходы только украшают приложение — другие делают его хуже. Пользователи могут не понимать, что такого особенного в переходах или анимации, но они могут чётко определить разницу между хорошим и плохим.

Как избежать негативных отзывов при создании собственных виджетов? В этой статье автор собрал советы и рекомендаций для CSS анимаций:

https://joshcollinsworth.com/blog/great-transitions

#css

Вам больше не нужен JavaScript

И не потому, что вы будете писать на другом языке. Просто сегодня CSS и HTML могут заменить значительную часть JS-кода. Здесь собраны интересные решения CSS, которые сегодня отлично работают и освобождают вас от необходимости подтягивать различные JS-файлы.

Подробнее.

#фронтенд #безопасность #javascript #css

Какие 4 CSS-свойства вы используете чаще всего?

У всех разные привычки и способы стилизации элементов. Ребята из CSS-TRICKS задумались на тему «чтобы ты взял с собой на необитаемый остров...», но только с поправкой на CSS. Каждый выбрал свои 4 CSS-свойства, без которых не представляет свою вёрстку.

Почитать об их выборе можно здесь. А вы напишите свои варианты и расскажите почему именно так.

#css #фронтенд #обсуждение

Бросаем кости на рандом с CSS random()

Как вы могли догадаться из заголовка, в CSS появилась функция random(), которая позволяет генерировать случайные значения для ваших стилей — позиции, цвета, размера и так далее.

Попробовать пока что её можно в Safari Technology Preview. А узнать о ней подробнее и посмотреть как же всё-таки кидать с помощью неё кости, можно в статье: https://webkit.org/blog/17285/rolling-the-dice-with-css-random/

#css

Используем @starting-style для ваших CSS-анимаций

Вы слышали о правиле @starting-style? Это новый инструмент, который позволяет использовать CSS-переходы при появлении элемента. Он сильно упрощает вёрстку, освобождая от костылей и делая код чище.

Как это работает рассказал Джош Комо в своей новой статье.

#css #фронтенд

JavaScript, отдохни! Делаем интерактивные вещи на HTML и CSS

Продолжаем делиться современными возможностями HTML и JS. Здесь собрали ещё пачку кейсов, где вы можете сократить количество JS-кода и облегчить свой сайт.

#javascript #html #css

Трюк с радиокнопкой в корзине товаров

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

Подробнее в материале.

#фронтенд #css

Пробуем использовать cross-fade() в CSS

Функция CSS cross-fade() смешивает фоновое изображение и маску с заданным значением прозрачности. То есть вы можете сделать плавный переход между слоями изображений, расположенных друг над другом. Для каждого слоя можно использовать свой уровень прозрачности и это даёт возможность создавать сложные переходы и даже анимации.

Как этим пользоваться рассказали в статье.

#css #фронтенд

— Насколько хорошо вы умеете работать с CSS?
— Настолько, что рисую на CSS картины.
— Что?
— Что?

Целый аккаунт с похожими работами: https://twitter.com/asyrafhussin4

#css @tproger_web