Интересный ползунок для сайта стилизованный под научную тематику 🎓

Код и демо: codepen.io/chrisgannon/pen/rvBMmM

🔖 Наглядная шпаргалка по (first, last) nth-child в CSS

CSS псевдокласс :nth-child() находит один или более элементов, основываясь на их позиции среди группы соседних элементов.

Синтаксис: nth-child указывается с единственным аргументом, описывающим паттерн для выбирания элементов.

/* Выбирает каждый четвёртый элемент
   среди любой группы соседних элементов */
:nth-child(4n) {
  color: lime;
}

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

🔒 Интересный эффект сканирования к "Показать/Скрыть пароль" на CSS

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

🖥 Разделяем статью на отзывчивые колонки с помощью columns в CSS

Идея в том, чтобы взять фрагмент содержимого и поместить его в несколько колонок, как в газете.

.article {
  columns: 15rem auto;
  column-gap: 1rem;
}
.article h1 {
  column-span: all;
}

🔜 columns - позволяет нам указать значения для свойств column-count и column-width одновременно, задав количество и ширину колонок

🔜 column-span - позволяет элементу растянуться на несколько колонок

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

⌛ 6 оригинальных загрузчиков для ваших проектов

Реализовано с помощь CSS-анимации

Код и демо: codepen.io/melnik909/pen/yLmWadq

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

CSS свойства padding-inline и padding-block

padding-inline - одновременно устанавливает внутренние отступы слева и справа

div {
  padding-inline: 30px;
}

padding-block - одновременно устанавливает внутренние отступы сверху и снизу

div {
  padding-block: 30px;
}

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

Код и демо: codepen.io/Nidal95/pen/WbvNarw

🖥 Красивый параллакс эффект при прокрутке страницы вниз

Код и демо: codepen.io/osmosupply/pen/NWQevrB

Карточка с интересным эффектом на CSS

При наведение на текст появляется красивое теневое обрамление, а поверхность карты переливается голографическим градиентом.

HTML-разметка

<div class="holographic-container">
    <div class="holographic-card">
        <h2>HOLOGRAM</h2>
    </div>
</div>

CSS-стили

.holographic-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #000;
}
.holographic-card {
  width: 300px;
  height: 200px;
  background: #111;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  transition: all 0.5s ease;
}
.holographic-card h2 {
  color: #0ff;
  font-size: 2rem;
  position: relative;
  z-index: 2;
}
.holographic-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    0deg, 
    transparent, 
    transparent 30%, 
    rgba(0,255,255,0.3)
  );
  transform: rotate(-45deg);
  transition: all 0.5s ease;
  opacity: 0;
}
.holographic-card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(0,255,255,0.5);
}
.holographic-card:hover::before {
  opacity: 1;
  transform: rotate(-45deg) translateY(100%);
}

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

☹️ Весьма оригинальная CSS анимация для загрузчика

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

🖥 Пример создания адаптивной сетки с помощь 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

😎 Пожалуй, это лучшее объяснения, как работает z-index в CSS

z-index — CSS свойство, которое определяет порядок наложения элементов в трёхмерном пространстве на веб-странице

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