WebTaverna /> js, css, html
4.85K subscribers
1.18K photos
567 videos
773 links
Уютное местечко для Frontend-разработчиков

admin: @WebT_admin
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
📱 Рандомное подчеркивание для пунктов меню

Реализовано с помощью SVG, CSS и JavaScript библиотеки GSAP

Код и демо: codepen.io/osmosupply/pen/qEEKRrx
Please open Telegram to view this post
VIEW IN TELEGRAM
2👍2
Media is too big
VIEW IN TELEGRAM
🖥 Меняем title вкладки, если пользователь перешел на другую

// Когда пользователь переключается на другую вкладку
window.addEventListener('blur', () => {
document.title = 'Вернитесь 😢'
})

// Когда пользователь возвращается на вашу страницу
window.addEventListener('focus', () => {
document.title = 't.me/WebTaverna 🙂'
})
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Интересный ползунок для сайта стилизованный под научную тематику 🎓

Код и демо: codepen.io/chrisgannon/pen/rvBMmM
Please open Telegram to view this post
VIEW IN TELEGRAM
4👍3🔥1
🔖 Наглядная шпаргалка по (first, last) nth-child в CSS

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

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

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


👍- если было полезно | ➡️ WebTaverna
Please open Telegram to view this post
VIEW IN TELEGRAM
👍41
🤣9👍21💯1
This media is not supported in your browser
VIEW IN TELEGRAM
🔒 Интересный эффект сканирования к "Показать/Скрыть пароль" на CSS

Код и демо: codepen.io/josetxu/pen/xxgNbxp
Please open Telegram to view this post
VIEW IN TELEGRAM
👍62
Media is too big
VIEW IN TELEGRAM
🖥 Разделяем статью на отзывчивые колонки с помощью columns в CSS

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

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


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

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

👍- если было полезно | ➡️ WebTaverna
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
6 оригинальных загрузчиков для ваших проектов

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


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

👍- если было полезно | ➡️ WebTaverna
Please open Telegram to view this post
VIEW IN TELEGRAM
👍52😁1
CSS свойства padding-inline и padding-block

padding-inline - одновременно устанавливает внутренние отступы слева и справа
div {
padding-inline: 30px;
}


padding-block - одновременно устанавливает внутренние отступы сверху и снизу
div {
padding-block: 30px;
}


👍 если было полезно | ➡️ WebTaverna
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9🔥21
Media is too big
VIEW IN TELEGRAM
Красивая реализация меню на чистом CSS

Код и демо: codepen.io/ig_design/pen/XWXZaGb
👍31
This media is not supported in your browser
VIEW IN TELEGRAM
👨‍💻 Анимированный 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
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
🖥 Красивая анимация для слайдера с помощь CSS и JavaScript

Код и демо: codepen.io/Nidal95/pen/WbvNarw
Please open Telegram to view this post
VIEW IN TELEGRAM
👍51
🤣13💯3
А вы в выходные дни работаете (учитесь) или отдыхаете?

🫡 - работаю
✍️ - учусь
😎 - отдыхаю
🫡1613😎12🔥1😢1
This media is not supported in your browser
VIEW IN TELEGRAM
🖥 Красивый параллакс эффект при прокрутке страницы вниз

Код и демо: codepen.io/osmosupply/pen/NWQevrB
Please open Telegram to view this post
VIEW IN TELEGRAM
👍31
This media is not supported in your browser
VIEW IN TELEGRAM
Карточка с интересным эффектом на 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
Please open Telegram to view this post
VIEW IN TELEGRAM
👍41🔥1
🤣13👍1🔥1👏1
Маскирование в 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
Please open Telegram to view this post
VIEW IN TELEGRAM
👍103🔥2