Latest posts
WebTaverna /> js, css, html
24 Jul, 18:55
WebTaverna /> js, css, html
25 Jun, 07:44
WebTaverna /> js, css, html
12 Jun, 15:40
🪞 Зеркальное отражение текста с помощью CSSHTML разметка ⤵️ <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;
WebTaverna /> js, css, html
4 Jun, 18:39
WebTaverna /> js, css, html
25 May, 07:40
WebTaverna /> js, css, html
20 May, 07:25
Анимация в URL с помощью JavaScript и Emoji 👨💻const myEmojis = ['😃', '🤨', '😡']function urlAnimate () {window.location.hash = myEmojis [Math.floor((Date.now()/100)%myEmojis.length)]setTimeout(urlAnimate, 1000) }urlAnimate()👍- если было полезно | ➡️ WebTavernaWebTaverna /> js, css, html
13 May, 04:48
WebTaverna /> js, css, html
11 May, 14:31edited
Проверяем, правильно ли заполнено поле ввода с цифрами?Решить эту задачу нам помогут псевдоклассы в 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; }WebTaverna /> js, css, html
10 May, 16:50
WebTaverna /> js, css, html
26 Mar, 10:17
Маскирование в 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 /> js, css, html
20 Mar, 11:35
WebTaverna /> js, css, html
15 Mar, 11:02
WebTaverna /> js, css, html
13 Mar, 11:11
💓 Анимация в виде "Шкалы сердцебиения" с помощью 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;WebTaverna /> js, css, html
10 Mar, 08:24
Анимированный текст с градиентом на 🔠🔠🔠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 /> js, css, html
5 Mar, 17:55
Выравнивание чисел с помощью CSS свойства font-variant-numericДанное свойство позволяет управлять начертаниями цифр, дробей и порядковых числительных👍- если было полезно | ➡️ WebTaverna
WebTaverna /> js, css, html
3 Mar, 07:40
WebTaverna /> js, css, html
1 Mar, 07:31
WebTaverna /> js, css, html
27 Feb, 15:48
Отличие em от rem : 📌 Наглядная шпаргалка по относительным величинам CSSEm и rem в CSS — это относительные единицы измерения, которые зависят от размера шрифта.🔜 Em относится к размеру шрифта родительского элемента. 🔜 Rem относится к размеру шрифта корневого элемента.👍- если было полезно | ➡️ WebTaverna
WebTaverna /> js, css, html
27 Feb, 09:07
WebTaverna /> js, css, html
26 Feb, 15:08
Related Channels
Other channels in the same section of the catalogue.
