WebTaverna /> js, css, html
رفتن به کانال در Telegram
Уютное местечко для Frontend-разработчиков admin: @WebT_admin
نمایش بیشتر4 621
مشترکین
-324 ساعت
-117 روز
-4630 روز
در حال بارگیری داده...
کانالهای مشابه
ابر برچسبها
اشارات ورودی و خروجی
---
---
---
---
---
---
جذب مشترکین
اوت '26
اوت '26
+11
در 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 کانالها
| تاریخ | رشد مشترکین | اشارات | کانالها | |
| 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 |
پستهای کانال
| 2 |  بدون متن... | 668 |
| 3 |  🪞 Зеркальное отражение текста с помощью 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](data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDACgcHiMeGSgjISMtKygwPGRBPDc3PHtYXUlkkYCZlo+AjIqgtObDoKrarYqMyP/L2u71////m8H////6/+b9//j/2wBDASstLTw1PHZBQXb4pYyl+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj/wAARCAAOACgDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDPC570pTHcU3JFGTTAUrikxRmkzQAuKKTNFAH/2Q==){kind=small} Анимация в 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 позволяет применять двумерные и трёхмерные преобразования к элементам, изменяя их форму, размер и положение.
В общем виде свойство 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-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 свойство устанавливает изображение, которое используется как слой маски для элемента ⤵️
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
Отлично подойдет для оформления каких-либо элементов на сайтах медицинской тематики
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-Мероприятия России. В нём каждый день анонсируются мероприятия со всех городов России
📆 в канале размещаются как онлайн, так и оффлайн мероприятия;
👩💻 можно найти ивенты по любому стеку: программирование, frontend-backend разработка, кибербезопасность, дата-аналитика, osint, devops и другие;
🎙 разнообразные форматы мероприятий: митапы с коллегами по цеху, конференции и вебинары с известными опытными специалистами, форумы и олимпиады от важных представителей индустрии и многое другое
А чтобы не искать по разным форумам и чатам новости о предстоящих ивентах:
🚀 IT-мероприятия России — подписывайся и будь в курсе всех предстоящих мероприятий! | 338 |
| 16 |  Анимированный текст с градиентом на 🔠🔠🔠
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
Данное свойство позволяет управлять начертаниями цифр, дробей и порядковых числительных
👍- если было полезно | ➡️ WebTaverna | 787 |
| 18 |  بدون متن... | 825 |
| 19 |  بدون متن... | 840 |
| 20 |  +1Реклама есть, продаж нет — почему?
Если реклама запущена, а в продажах тишина — дело часто не в рекламе.
Перед тем как обсуждать бюджеты и форматы, мы задаём простой вопрос: что происходит с клиентом после клика?
📊 В одном проекте половину заявок теряли на этапе звонка — люди просто не дозванивались. В другом — реклама обещала одно, а сайт и отдел продаж продавали другое.
В таких условиях любая реклама лишь ускоряет потери. Поэтому бизнесу чаще нужен не «ещё один канал», а взгляд на свою систему целиком. А уже потом — медиаплан.
✅ Об этом и не только мы говорим в канале Digital Agency Insight: разбираем, что важно увидеть в бизнесе до запуска рекламы, где обычно «течёт» воронка и как на всё это влияют законы о рекламе и правила площадок в России и за рубежом.
Смотреть
#реклама 16+
О рекламодателе | 93 |
