WebTaverna /> js, css, html

Проверяем, правильно ли заполнено поле ввода с цифрами? Решить эту задачу нам помогут псевдоклассы в CSS :in-range и :out-of-range, которые используются для стилизации полей ввода, поддерживающих атрибуты min и max :in-range - введённое значение попадает в диапазон от min до max; :out-of-range - не попадает в диапазон от min до max.Пример ⤵️<input type="number" min="1" max="3">input:in-range { background-color: #17a992; border: 5px solid #006776;}input:out-of-range { background-color: #f4a898; border: 5px solid #e62a5a;}Атрибуты min и max могут иметь поля ввода с типами date, month, week, time, datetime-local, number и range, в которых эти атрибуты задают диапазон допустимых значений, которые пользователь может вводить в поле.👍- если было полезно | ➡️ WebTaverna

Маскирование в CSS c помощью свойства mask ☀️Данное CSS свойство устанавливает изображение, которое используется как слой маски для элемента ⤵️img { mask: url("./graph.png"); mask-repeat: no-repeat; mask-size: cover; mask-position: center;} 🔜 mask: url() - задаём png изображение слоя-маски;🔜 mask-repeat - определяем порядок повторений;🔜 mask-size - определяем размеры изображения-маски;🔜 mask-position - устанавливаем начальную позицию относительно слоя;Также это можно записать в одну строку ⤵️img { mask: url("./graph.png") center/cover no-repeat;}👍- если было полезно | ➡️ WebTaverna

💓 Анимация в виде "Шкалы сердцебиения" с помощью SVG и CSSОтлично подойдет для оформления каких-либо элементов на сайтах медицинской тематикиHTML-разметка<div class="loading"> <svg width="16px" height="12px"> <polyline id="back" points="1 6 4 6 6 11 10 1 12 6 15 6"></polyline> <polyline id="front" points="1 6 4 6 6 11 10 1 12 6 15 6"></polyline> </svg></div>CSS-стили.loading { transform: scale(10);}.loading svg polyline { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;}.loading svg polyline#back { stroke: #ff4d5033;}.loading svg polyline#front { stroke: #ff4d4f; stroke-dasharray: 12, 36; stroke-dashoffset: 48; animation: dash 1s linear infinite;}@keyframes dash { 62.5% { opacity: 0; } to { stroke-dashoffset: 0; }}👍- если было полезно | ➡️ WebTaverna

Анимированный текст с градиентом на 🔠🔠🔠HTML разметка<h1>t.me/WebTaverna</h1>CSS стили h1 { background: linear-gradient(90deg, #d988da, #dcde8a, #d988da); background-repeat: no-repeat; background-size: 80%; animation: animate 3s linear infinite; -webkit-background-clip: text; -webkit-text-fill-color: rgba(255, 255, 255, 0);}@keyframes animate { 0% { background-position: -500%; } 100% { background-position: 500%; }}👍- если было полезно | ➡️ WebTaverna

Выравнивание чисел с помощью CSS свойства font-variant-numericДанное свойство позволяет управлять начертаниями цифр, дробей и порядковых числительных👍- если было полезно | ➡️ WebTaverna

Отличие em от rem : 📌 Наглядная шпаргалка по относительным величинам CSSEm и rem в CSS — это относительные единицы измерения, которые зависят от размера шрифта. 🔜 Em относится к размеру шрифта родительского элемента. 🔜 Rem относится к размеру шрифта корневого элемента.👍- если было полезно | ➡️ WebTaverna

Интересное решение. Как вам такое?👍 - и правда интересное 🤔 - сомнительное, но окей🤨 - ужасное...