WebTaverna /> js, css, html
Відкрити в Telegram
Уютное местечко для Frontend-разработчиков admin: @WebT_admin
Показати більше4 727
Підписники
+124 години
-67 днів
-3730 день
Триває завантаження даних...
Схожі канали
Хмара тегів
Вхідні та вихідні згадування
---
---
---
---
---
---
Залучення підписників
червень '26
червень '26
+4
в 0 каналах
травень '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 каналах
| Дата | Залучення підписників | Згадування | Канали | |
| 13 червня | 0 | |||
| 12 червня | +2 | |||
| 11 червня | 0 | |||
| 10 червня | 0 | |||
| 09 червня | +1 | |||
| 08 червня | 0 | |||
| 07 червня | 0 | |||
| 06 червня | 0 | |||
| 05 червня | 0 | |||
| 04 червня | 0 | |||
| 03 червня | +1 | |||
| 02 червня | 0 | |||
| 01 червня | 0 |
Дописи каналу
🪞 Зеркальное отражение текста с помощью 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| 2 | Немає тексту... | 527 |
| 3 | Немає тексту... | 830 |
| 4 | Анимация в URL с помощью JavaScript и Emoji 👨💻
const myEmojis = ['😃', '🤨', '😡']
function urlAnimate () {
window.location.hash = myEmojis
[Math.floor((Date.now()/100)%myEmojis.length)]
setTimeout(urlAnimate, 1000)
}
urlAnimate()
👍- если было полезно | ➡️ WebTaverna | 918 |
| 5 | 🔰 Шпаргалка по 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 | 0 |
| 6 | Немає тексту... | 1 038 |
| 7 | Проверяем, правильно ли заполнено поле ввода с цифрами? 🔍
Решить эту задачу нам помогут псевдоклассы в 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 |
| 8 | Немає тексту... | 650 |
| 9 | Маскирование в 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 | 0 |
| 10 | Немає тексту... | 0 |
Вже доступно! Дослідження Telegram за 2025 — головні інсайти року 
