WebTaverna /> js, css, html

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

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

🖥 Пример создания адаптивной сетки с помощь Flexbox CSS HTML - разметка <div class="container"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> <div class="flex-item">4</div> </div> CSS - стили .container { font-family: 'Segoe UI', Tahoma; display: flex; width: 100%; flex-wrap: wrap; } .flex-item { background: #F4BD50; font-size: 1.5rem; display: flex; height: 3.75rem; align-items: center; justify-content: center; flex-grow: 1; flex-basis: 6.25rem; }...

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

💡 А вы знали, что с помощью свойства resize можно сделать изменяемый размер не только для textarea, но и для других HTML-элементов? Для этого достаточно добавить overflow: auto, тогда и у других элементов появится такая возможность. HTML разметка <h1>t.me/WebTaverna</h1> CSS стили h1 { resize: both; overflow: auto; padding: 20px 30px; border: 1px solid #fff; } Свойство resize принимает следующие значения: 🔜 none — размеры изменить нельзя (значение по умолчанию); 🔜 both — размеры можно изменят...

Анимированный текст с градиентом на 🔠🔠🔠 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