Ну чё пора?! 👨‍💻

А вы как относитесь к кодингу по ночам?

👍 — обожаю ночной кодинг
🤨 — сомнительно, но иногда можно
🫡 — спасибо, но нет... я лучше посплю

🔔 Переключатель уведомлений на CSS

Код и демо: codepen.io/josetxu/pen/XWQXrmZ

🖥 Пример создания адаптивной верстки сайта с помощь Grid CSS

HTML разметка ⤵️

<div class="layout">
    <header>Header</header>
    <nav>Sidebar</nav>
    <main>Main</main>
    <article class="widget">Widget</article>
    <article class="statistics">Statistics</article>
    <footer>Footer</footer>
</div>

CSS стили ⤵️

.layout {
  display: grid;
  gap: 4px;
  grid-template-rows: 40px 40px auto 60px 60px 40px;
  grid-template-columns: 1fr;
  grid-template-areas: 'header' 'sidebar' 'main' 'widget' 'statistics' 'footer';
  height: 100vh;
}
@media (min-width: 480px) {
  .layout {
    display: grid;
    grid-template-rows: 40px auto 80px 40px;
    grid-template-columns: 160px auto auto;
    grid-template-areas: 'header header header' 'sidebar main main' 'sidebar widget statistics' 'footer footer footer';
  }
}
header {
  grid-area: header;
  background: #c08bfd;
}
footer {
  grid-area: footer;
  background: #c08bfd;
}
nav {
  grid-area: sidebar;
  background: #f6c356;
}
main {
  grid-area: main;
  background: #b2ee94;
}
.widget {
  grid-area: widget;
  background: #ff8983;
  width: 100%;
}
.statistics {
  grid-area: statistics;
  background: #99c2fe;
  width: 100%;
}

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

✔️ Анимированное добавление и удаление карточек с помощью CSS и JavaScript

Код и демо: codepen.io/bramus/pen/zxOOzYX

🔰 Теги sub и sup в HTML

<sub> (subscript) — опускает текст ниже базовой линии.

Идеален для:
🔜 Химических формул: H<sub>2</sub>O → H₂O
🔜 Математических индексов: X<sub>n</sub> → Xₙ

<sup> (superscript) — поднимает текст выше.

Используйте для:
🔜 Степеней: 2<sup>3</sup> = 8 → 2³ = 8
🔜 Сносок: Текст<sup><a href="#source">[1]</a></sup> → Текст[¹]
🔜 Единиц измерения: 25м<sup>2</sup> → 25м²

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

📣 Необычный ползунок диапазона на CSS и JavaScript

Unicycle Range Slider - ползунок с человечком на одноколесном велосипед, а при изменении диапазона числовое значение отображается на флаге

Код и демо: codepen.io/jkantner/pen/wvarNEp

🔰 Шпаргалка по CSS свойству transform

transform позволяет применять двумерные и трёхмерные преобразования к элементам, изменяя их форму, размер и положение.

В общем виде свойство transform записывается так: transform: функция(значение);, где функция — это тип преобразования, а значение — параметры этого преобразования.

Свойство transform принимает следующие значения:

🔜 none — никакого преобразования не применяется;
🔜 rotate(angle) — вращает элемент на заданный угол;
🔜 scale(x, y) — масштабирует элемент по осям X и Y;
🔜 translate(x, y) — перемещает элемент на заданные координаты;
🔜 skew(x-angle, y-angle) — наклоняет элемент на заданные углы по осям X и Y.

Transform не должен использоваться для изменения основной структуры веб-страницы. Он нужен для создания эффектов и анимаций, а не для основного макета страницы.

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

7 простых, но интересных ховер эффектов для кнопок в вашу коллекцию 👍

Код и демо: codepen.io/alvarotrigo/pen/YzVdgXY

🔠🔠🔠 Обводка текста с эффектом неонового свечения с помощью CSS

h1 {
  text-shadow: 10px 10px 30px #2101ec, 
              -10px -10px 30px #8a31e9;
  -webkit-text-stroke: 2px #fc65ff;
  -webkit-text-fill-color: transparent;

  font-size: 4em;
  font-weight: bold;
}

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

🤔Рано или поздно, каждый разработчик задумывается об этом

🎮 Забавная игрушка на JavaScript, в которой нужно попасть зайцем в морковку, чтобы её разбить

Прыжок осуществляется нажатием на левую кнопку мыши. Реализована при помощи библиотеки Three.js 👍

Код и демо: codepen.io/Yakudoo/pen/poqazQo

👨‍💻 Создаем фон в клеточку с помощью CSS

Для реализации данного фона нам потребуется CSS свойство background-image с двумя градиентами: один для горизонтальных линий, второй для вертикальных, а также background-size для того, чтобы задать размер каждой ячейки.

HTML разметка

<div class="background"></div>

CSS стили

.background {
  width: 577px;
  height: 194px;

  /* Горизонтальные и вертикальные линии */
  background-image: linear-gradient(rgba(255,255, 255, 0.2) 2px, transparent 1px), linear-gradient(90deg, rgba(255,255, 255, 0.2) 1px, transparent 1px); 
  
  /* Размер ячейки */
  background-size: 32px 32px; 
}

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

🍔 8 интересных анимаций для меню-гамбургер на CSS

Код и демо: codepen.io/ainalem/pen/LJYRxz

⌛ Лоадер с эффектом пульсации на CSS

HTML-разметка

<div class="main">
    <div class="circle"></div> 
    <div class="circle"></div> 
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div> 
</div>

CSS-стили

body {
    background-color: #242834;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
} 
.main {
    display: flex;
    width: 200px;
    justify-content: space-between; 
    align-items: center;
} 
.circle {
    width: 20px;
    height: 20px; 
    background: linear-gradient(#7864f4, #3072d3); 
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.circle:before {
    content: "";
    width: 20px;
    height: 20px;
    background: linear-gradient(#7864f4, #3072d3); 
    border-radius: 50%;
    opacity: 0.7;
    animation: loading 2s;
    animation-iteration-count: infinite;
}
@keyframes loading {
    100% {
        transform: scale(3); 
        opacity: 0;
    }
}
.circle:nth-child(2):before { 
    animation-delay: 0.3s;
} 
.circle:nth-child(3):before { 
    animation-delay: 0.6s;
}
.circle:nth-child(4):before { 
    animation-delay: 0.9s;
}
.circle:nth-child(5):before { 
    animation-delay: 1.2s;
}

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

Пожалуй, это самая простая форма заполнения номера телефона 👩‍💻

P. S сарказм 😉

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

Код и демо: codepen.io/yexx/pen/bNdyVmL