Знакомьтесь, <details>
Я хочу рассказать о замечательном элементе <details> и показать несколько примеров его использования, от простых до безумных.
Генератор тени для текста CSS (text-shadow)
Генератор для создания тени для текста CSS. Можно выставить необходимые параметры, поменять цвета текста, фона и самой тени, скопировать получившийся код и вставить его в файл стилей CSS.
Шпаргалка по Flexbox (CSS3 Flexible Box)
Флекс — это набор свойств контейнера и элементов. Некоторые из этих свойств добавляются к контейнеру, родительскому элементу, известному как «флекс-контейнер» (flex container), другие — к дочерним элементам, известным как «флекс-элементы» (flex items).
Использование CSS-анимации (Eng)
Анимации CSS позволяют анимировать переходы от одной конфигурации стиля CSS к другой. Анимация состоит из двух компонентов: стиля, описывающего анимацию CSS, и набора ключевых кадров, указывающих начальное и конечное состояния стиля анимации, а также возможные промежуточные путевые точки.
Как сделать задержку открытия модального окна?
Как можно сделать задержку открытия модального окна, т.е. чтобы окно открывалось через 1 секунду после нажатия на кнопку?
Каковы последствия использования «!important» в CSS? (Eng)
Я работаю над веб-сайтом несколько месяцев, и много раз, когда я пытался что-то отредактировать, мне приходилось использовать !important чтобы он отображался так, как ожидалось. Это плохая практика? Или это !importantкоманду можно использовать? Может ли это вызвать что-то нежелательное в дальнейшем?
Конвертер PX в EM
Установите размер шрифта по умолчанию (обычно 16 пикселей) Затем преобразуйте значение в пикселях в em на основе размера по умолчанию. Или преобразуйте значение em в пиксели на основе размера по умолчанию.
Отзывчивый размер шрифта
Хотелось иметь универсальный рецепт, который позволял бы задавать минимальное и максимальное значения для размера шрифта, да еще и привязать эти цифры к конкретным размерам viewport
Несколько небольших способов использования CSS :has() в реальном мире (Eng)
Несколько низкокачественных демонстраций фрагментов :has(), которые использовал в реальных клиентских проектах.
Плавная прокрутка к якорю (JS и CSS)
Плавный скролл к якорю – это популярная функциональность на современных сайтах, которая позволяет пользователям плавно перемещаться к определенному разделу страницы. В этой статье мы рассмотрим, как реализовать такой эффект с использованием JavaScript и CSS.