WebTaverna /> js, css, html

🪞 Зеркальное отражение текста с помощью CSS HTML разметка ⤵️ <h1 data-text="WebTaverna">WebTaverna</h1> CSS стили ⤵️ h1 { position: relative; color: #fff; font-size: 5em; font-weight: 800; } h1:before { content: attr(data-text); position: absolute; transform-origin: bottom; transform: rotateX(180deg); line-height: 1em; background: linear-gradient(0deg, #ffffff88 0, rgba(255, 255, 255, 0) 80%); -webkit-background-clip: text; color: rgba(0, 0, 0, 0); opacity: 0.5; } 👍- если было полезно | ➡️ WebTaverna

Анимация в URL с помощью JavaScript и Emoji 👨‍💻 const myEmojis = ['😃', '🤨', '😡'] function urlAnimate () { window.location.hash = myEmojis [Math.floor((Date.now()/100)%myEmojis.length)] setTimeout(urlAnimate, 1000) } urlAnimate() 👍- если было полезно | ➡️ WebTaverna

Проверяем, правильно ли заполнено поле ввода с цифрами? Решить эту задачу нам помогут псевдоклассы в 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 : 📌 Наглядная шпаргалка по относительным величинам CSS Em и rem в CSS — это относительные единицы измерения, которые зависят от размера шрифта. 🔜 Em относится к размеру шрифта родительского элемента. 🔜 Rem относится к размеру шрифта корневого элемента. 👍- если было полезно | ➡️ WebTaverna