📱 Интересный эффект при наведение на карточки с помощью CSS и JavaScript

Код и демо: codepen.io/yudizsolutions/pen/wvZEeNE

💡 А вы знали, что с помощью свойства 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 — размеры можно изменять по горизонтали и вертикали;
🔜 horizontal — размер можно изменять по горизонтали;
🔜 vertical — размер можно изменять по вертикали

⚠️ Данное свойство не работает с тегами img, video и iframe, но решить эту проблему можно обернув нужный тег в <div>

👍- если было полезно | ➡️ 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;
}
.flex-item:nth-child(even) {
    background: #c7a4ff;
}

👍- если было полезно | ➡️ WebTaverna

Отличие em от rem : 📌 Наглядная шпаргалка по относительным величинам CSS

Em и rem в CSS — это относительные единицы измерения, которые зависят от размера шрифта.

🔜 Em относится к размеру шрифта родительского элемента.
🔜 Rem относится к размеру шрифта корневого элемента.

👍- если было полезно | ➡️ WebTaverna

Выравнивание чисел с помощью CSS свойства font-variant-numeric

Данное свойство позволяет управлять начертаниями цифр, дробей и порядковых числительных

👍- если было полезно | ➡️ 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

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

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