uk
Feedback
WebTaverna /> js, css, html

WebTaverna /> js, css, html

Відкрити в Telegram

Уютное местечко для Frontend-разработчиков admin: @WebT_admin

Показати більше
4 615
Підписники
-624 години
-107 днів
-4530 день

Триває завантаження даних...

Залучення підписників
серпень '26
серпень '26
+14
в 0 каналах
липень '26
+19
в 0 каналах
Get PRO
червень '26
+16
в 0 каналах
Get PRO
травень '26
+16
в 0 каналах
Get PRO
квітень '26
+18
в 0 каналах
Get PRO
березень '26
+13
в 0 каналах
Get PRO
лютий '26
+18
в 0 каналах
Get PRO
січень '26
+29
в 2 каналах
Get PRO
грудень '25
+32
в 0 каналах
Get PRO
листопад '25
+47
в 2 каналах
Get PRO
жовтень '25
+19
в 0 каналах
Get PRO
вересень '25
+22
в 0 каналах
Get PRO
серпень '25
+14
в 0 каналах
Get PRO
липень '25
+13
в 0 каналах
Get PRO
червень '25
+26
в 0 каналах
Get PRO
травень '25
+22
в 0 каналах
Get PRO
квітень '25
+45
в 0 каналах
Get PRO
березень '25
+136
в 10 каналах
Get PRO
лютий '25
+201
в 8 каналах
Get PRO
січень '25
+260
в 3 каналах
Get PRO
грудень '24
+306
в 6 каналах
Get PRO
листопад '24
+327
в 10 каналах
Get PRO
жовтень '24
+956
в 40 каналах
Get PRO
вересень '24
+321
в 2 каналах
Get PRO
серпень '24
+623
в 29 каналах
Get PRO
липень '24
+156
в 2 каналах
Get PRO
червень '24
+78
в 0 каналах
Get PRO
травень '24
+159
в 0 каналах
Get PRO
квітень '24
+248
в 2 каналах
Get PRO
березень '24
+292
в 1 каналах
Get PRO
лютий '24
+69
в 0 каналах
Get PRO
січень '24
+78
в 1 каналах
Get PRO
грудень '23
+10
в 0 каналах
Get PRO
листопад '23
+6
в 0 каналах
Get PRO
жовтень '23
+14
в 1 каналах
Get PRO
вересень '23
+15
в 0 каналах
Get PRO
серпень '23
+81
в 0 каналах
Get PRO
липень '23
+89
в 0 каналах
Get PRO
червень '23
+121
в 0 каналах
Get PRO
травень '23
+11
в 0 каналах
Get PRO
квітень '23
+133
в 0 каналах
Get PRO
березень '23
+203
в 0 каналах
Get PRO
лютий '23
+123
в 0 каналах
Get PRO
січень '23
+21
в 0 каналах
Get PRO
грудень '22
+60
в 0 каналах
Get PRO
листопад '22
+289
в 0 каналах
Get PRO
жовтень '22
+157
в 0 каналах
Get PRO
вересень '22
+274
в 0 каналах
Get PRO
серпень '22
+97
в 0 каналах
Get PRO
липень '22
+340
в 0 каналах
Get PRO
червень '22
+115
в 0 каналах
Get PRO
травень '22
+82
в 0 каналах
Get PRO
квітень '22
+88
в 0 каналах
Get PRO
березень '22
+163
в 0 каналах
Get PRO
лютий '22
+215
в 0 каналах
Get PRO
січень '22
+226
в 0 каналах
Get PRO
грудень '21
+257
в 0 каналах
Get PRO
листопад '21
+448
в 0 каналах
Get PRO
жовтень '21
+281
в 0 каналах
Get PRO
вересень '21
+327
в 0 каналах
Get PRO
серпень '21
+124
в 0 каналах
Get PRO
липень '21
+145
в 0 каналах
Get PRO
червень '21
+385
в 0 каналах
Get PRO
травень '21
+141
в 0 каналах
Get PRO
квітень '21
+110
в 0 каналах
Get PRO
березень '21
+600
в 0 каналах
Дата
Залучення підписників
Згадування
Канали
29 серпня0
28 серпня+2
27 серпня+1
26 серпня0
25 серпня0
24 серпня+1
23 серпня+3
22 серпня+1
21 серпня0
20 серпня0
19 серпня+1
18 серпня+1
17 серпня0
16 серпня0
15 серпня0
14 серпня0
13 серпня0
12 серпня+1
11 серпня0
10 серпня0
09 серпня0
08 серпня0
07 серпня+1
06 серпня+2
05 серпня0
04 серпня0
03 серпня0
02 серпня0
01 серпня0
Дописи каналу
photo content

2
Немає тексту...
668
3
🪞 Зеркальное отражение текста с помощью CSS HTML разметка ⤵️ WebTaverna CSS стили ⤵️ h1 { po
🪞 Зеркальное отражение текста с помощью 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
741
4
Немає тексту...
936
5
Немає тексту...
924
6
Анимация в URL с помощью JavaScript и Emoji 👨‍💻 const myEmojis = ['😃', '🤨', '😡'] function urlAnimate () { window.locatio
Анимация в URL с помощью JavaScript и Emoji 👨‍💻 const myEmojis = ['😃', '🤨', '😡'] function urlAnimate () { window.location.hash = myEmojis [Math.floor((Date.now()/100)%myEmojis.length)] setTimeout(urlAnimate, 1000) } urlAnimate() 👍- если было полезно | ➡️ WebTaverna
970
7
🔰 Шпаргалка по CSS свойству transform transform позволяет применять двумерные и трёхмерные преобразования к элементам, измен
🔰 Шпаргалка по 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
1
8
Немає тексту...
1 038
9
Проверяем, правильно ли заполнено поле ввода с цифрами? 🔍 Решить эту задачу нам помогут псевдоклассы в CSS :in-range и :out-
Проверяем, правильно ли заполнено поле ввода с цифрами? 🔍 Решить эту задачу нам помогут псевдоклассы в CSS :in-range и :out-of-range, которые используются для стилизации полей ввода, поддерживающих атрибуты min и max 🔜 :in-range - введённое значение попадает в диапазон от min до max; 🔜 :out-of-range - не попадает в диапазон от min до max. Пример ⤵️ <input type="number" min="1" max="3"> input:in-range { background-color: #17a992; border: 5px solid #006776; } input:out-of-range { background-color: #f4a898; border: 5px solid #e62a5a; } Атрибуты min и max могут иметь поля ввода с типами date, month, week, time, datetime-local, number и range, в которых эти атрибуты задают диапазон допустимых значений, которые пользователь может вводить в поле. 👍- если было полезно | ➡️ WebTaverna
840
10
Немає тексту...
650
11
Маскирование в CSS c помощью свойства mask ☀️ Данное CSS свойство устанавливает изображение, которое используется как слой ма
Маскирование в 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
531
12
Немає тексту...
639
13
Немає тексту...
923
14
💓 Анимация в виде "Шкалы сердцебиения" с помощью SVG и CSS Отлично подойдет для оформления каких-либо элементов на сайтах ме
💓 Анимация в виде "Шкалы сердцебиения" с помощью SVG и CSS Отлично подойдет для оформления каких-либо элементов на сайтах медицинской тематики HTML-разметка <div class="loading"> <svg width="16px" height="12px"> <polyline id="back" points="1 6 4 6 6 11 10 1 12 6 15 6"></polyline> <polyline id="front" points="1 6 4 6 6 11 10 1 12 6 15 6"></polyline> </svg> </div> CSS-стили .loading { transform: scale(10); } .loading svg polyline { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .loading svg polyline#back { stroke: #ff4d5033; } .loading svg polyline#front { stroke: #ff4d4f; stroke-dasharray: 12, 36; stroke-dashoffset: 48; animation: dash 1s linear infinite; } @keyframes dash { 62.5% { opacity: 0; } to { stroke-dashoffset: 0; } } 👍- если было полезно | ➡️ WebTaverna
829
15
В России можно посещать IT-мероприятия хоть каждый день: как оффлайн, так и онлайн Но где их находить? Как узнавать о них ран
В России можно посещать IT-мероприятия хоть каждый день: как оффлайн, так и онлайн Но где их находить? Как узнавать о них раньше, чем когда все начнут выкладывать фотографии оттуда? Переходите на канал IT-Мероприятия России. В нём каждый день анонсируются мероприятия со всех городов России 📆 в канале размещаются как онлайн, так и оффлайн мероприятия; 👩‍💻 можно найти ивенты по любому стеку: программирование, frontend-backend разработка, кибербезопасность, дата-аналитика, osint, devops и другие; 🎙 разнообразные форматы мероприятий: митапы с коллегами по цеху, конференции и вебинары с известными опытными специалистами, форумы и олимпиады от важных представителей индустрии и многое другое А чтобы не искать по разным форумам и чатам новости о предстоящих ивентах: 🚀 IT-мероприятия России — подписывайся и будь в курсе всех предстоящих мероприятий!
338
16
Анимированный текст с градиентом на 🔠🔠🔠 HTML разметка t.me/WebTaverna CSS стили h1 { background: linear-gradient(
Анимированный текст с градиентом на 🔠🔠🔠 HTML разметка <h1>t.me/WebTaverna</h1> CSS стили h1 { background: linear-gradient(90deg, #d988da, #dcde8a, #d988da); background-repeat: no-repeat; background-size: 80%; animation: animate 3s linear infinite; -webkit-background-clip: text; -webkit-text-fill-color: rgba(255, 255, 255, 0); } @keyframes animate { 0% { background-position: -500%; } 100% { background-position: 500%; } } 👍- если было полезно | ➡️ WebTaverna
708
17
Выравнивание чисел с помощью CSS свойства font-variant-numeric Данное свойство позволяет управлять начертаниями цифр, дробей
Выравнивание чисел с помощью CSS свойства font-variant-numeric Данное свойство позволяет управлять начертаниями цифр, дробей и порядковых числительных 👍- если было полезно | ➡️ WebTaverna
787
18
Немає тексту...
825
19
Немає тексту...
840
20
Реклама есть, продаж нет — почему? Если реклама запущена, а в продажах тишина — дело часто не в рекламе. Перед тем как обсужд+1
Реклама есть, продаж нет — почему? Если реклама запущена, а в продажах тишина — дело часто не в рекламе. Перед тем как обсуждать бюджеты и форматы, мы задаём простой вопрос: что происходит с клиентом после клика? 📊 В одном проекте половину заявок теряли на этапе звонка — люди просто не дозванивались. В другом — реклама обещала одно, а сайт и отдел продаж продавали другое. В таких условиях любая реклама лишь ускоряет потери. Поэтому бизнесу чаще нужен не «ещё один канал», а взгляд на свою систему целиком. А уже потом — медиаплан. ✅ Об этом и не только мы говорим в канале Digital Agency Insight: разбираем, что важно увидеть в бизнесе до запуска рекламы, где обычно «течёт» воронка и как на всё это влияют законы о рекламе и правила площадок в России и за рубежом. Смотреть #реклама 16+ О рекламодателе
93