Стилизация участков текста с помощью 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

CSS лифт: конечный автомат на CSS для навигации между этажами

Ещё одна крутая демонстрация современных возможностей CSS. В этой интерактивной модели автор реализовал конечный автомат, который позволяет управлять лифтом, двигающемся между 4 этажами.

Рекомендую изучить, если хотите лучше понимать всю мощь CSS.

#css

Интерактивный гайд по CSS Grid

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

#фронтенд #css

Анимация пружины и отскока на чистом CSS

Обычное для создания простых анимаций на CSS используется свойство transition с указанием какого типа движение будет: ease-in, ease-in-out, ease-out или ease. Но если нам требуется что-то не стандартное, такие варианты уже не подходят.

Тут на сцену выходит функция linear(), которая позволяет нам задавать кривую движения так, как нужно нам. Например, для создания эффекта пружины или отскока, как у резинового мячика.

Джош Комо написал простой наглядный гайд, как пользоваться функцией linear для создания таких и других кастомных эффектов перехода. Рекомендую ознакомиться.

#фронтенд #css