🪞 Зеркальное отражение текста с помощью 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%); -we…

Анимация в 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 { …

Маскирование в 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…

💓 Анимация в виде "Шкалы сердцебиения" с помощью 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: sca…