👨‍💻 Разделитель разрядов в JavaScript

Я задам лишь один вопрос:
«Что будет выведено в консоль» ❓

console.log( 1_000 + 1_500 )

Думаете, что произойдет конкатенация и в консоль выведется «1_0001_500»? Или же выведет ошибку? На самом деле ответом будет являться число 2500, но почему?

Всё просто, символ "_" является разделителем для улучшения читабельности. Согласитесь, гораздо быстрее понять, что написано «один миллион» 👌, когда он выглядит так: 1_000_000, а не так: 1000000

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

Градиентная рамка с закругленными краями c помощью CSS

.box {
  border: 10px solid transparent;
  background: linear-gradient(
              #2a2c34, 
              #2a2c34) padding-box, 
              linear-gradient(45deg, 
              #FF52E5,
              #F6D242) border-box;
  border-radius: 14px;
}

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

👨‍💻 Анимированный border с градиентом с помощью CSS

div {
    --angle: 0deg;
    width: 30vmin;
    height: 30vmin;
    border: .8rem solid;
    border-image: linear-gradient(var(--angle),
                #00cc99, 
                #eef0f5, 
                #6600ff) 1;
    animation: 5s rotate linear infinite;
}
    
@keyframes rotate {
    to {
    --angle: 360deg
    }
}
    
@property --angle {
    syntax: '<angle>'; 
    initial-value: 0deg; 
    inherits: false;
}

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

🥺 Градиентное затемнение изображения на CSS

Для получения данного эффекта мы используем background: linear-gradient:

🔜 to top — задаёт направление градиента;
🔜 rgba(0, 0, 0, 0.8) — первый цвет градиента;
🔜 rgba(255, 255, 255, 0.2) — второй цвет.

HTML разметка

<div class="container">
    <img src="image.jpg" class="gradient">
    <div class="gradient"></div>
</div>

CSS стили

.container {
  width: 500px; height: 700px;
  position: relative;
}
.gradient {
  height: 100%; width: 100%;
  background-image: 
          linear-gradient(to top, 
        rgba(0, 0, 0, 0.8), 
        rgba(255, 255, 255, 0.2));
  position: absolute;
  top: 0; left: 0;
}
img {
  height: 100%; width: 100%;
  object-fit: cover;
  display: block;
}

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

📱 Интересная анимация фона на CSS

Код и демо: codepen.io/TheMOZZARELLA/pen/OJYLbyK

🥺 Градиентное затемнение изображения на CSS

Для получения данного эффекта мы используем background: linear-gradient:

🔜 to top — задаёт направление градиента;
🔜 rgba(0, 0, 0, 0.8) — первый цвет градиента;
🔜 rgba(255, 255, 255, 0.2) — второй цвет.

HTML разметка

<div class="container">
    <img src="image.jpg" class="gradient">
    <div class="gradient"></div>
</div>

CSS стили

.container {
  width: 500px; height: 700px;
  position: relative;
}
.gradient {
  height: 100%; width: 100%;
  background-image: 
          linear-gradient(to top, 
        rgba(0, 0, 0, 0.8), 
        rgba(255, 255, 255, 0.2));
  position: absolute;
  top: 0; left: 0;
}
img {
  height: 100%; width: 100%;
  object-fit: cover;
  display: block;
}

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

💱 Ползунок ценового диапазона с интересной анимацией

📱 Код и демо: codepen.io/simeydotme/pen/WNLxxvx

💡 А вы знали, что с помощью свойства 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