🤚 Don't touch the code - забавный эффект рассыпающегося кода на отдельные символы при клике на него

Данный эффект можно применить не только коду, но и любому другому тексту

Код и демо: codepen.io/jh3y/pen/mdNrrKX

🪞 Зеркальное отражение текста с помощью 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%);
  -webkit-background-clip: text;
  color: rgba(0, 0, 0, 0);
  opacity: 0.5;
}

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

💳 Генератор CSS фильтров для вашего сайта

Делимся готовым кодом генератора CSS фильтров, который вы можете использовать в своем проекте

Код и демо: codepen.io/alexandrevacassin/pen/ExzWNyZ

Эффект матового стекла (Glassmorphism)

Для начала добавим div в HTML с классом .glassmorphism:

<div class="glassmorphism"></div>

Затем в CSS пропишем некоторые стили тегу body, чтобы задать ему высоту, ширину и фоновое изображение, а также отцентрируем внутри него наш div с помощью flex:

body {
    width: 100%;
    height: 100vh;
    background-image: url("photo.png");
    display: flex;
    justify-content: center;
    align-items: center;
}

А вот, собственно, и сами стили для данного эффекта:

.glassmorphism {
    background: linear-gradient(135deg, 
                rgba(255,255,255, 0.02), 
                rgba(255, 255, 255, 0));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    height: 200px;
    width: 500px;
}

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

👨‍💻 Разделитель разрядов в 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