WebTaverna /> js, css, html
Kanalga Telegram’da o‘tish
Уютное местечко для Frontend-разработчиков admin: @WebT_admin
Ko'proq ko'rsatish4 696
Obunachilar
-124 soatlar
-77 kunlar
-2830 kunlar
Ma'lumot yuklanmoqda...
O'xshash kanallar
Taglar buluti
Kirish va chiqish esdaliklari
---
---
---
---
---
---
Obunachilarni jalb qilish
Iyul '26
Iyul '26
+7
0 kanalda
Iyun '26
+16
0 kanalda
Get PRO
May '26
+16
0 kanalda
Get PRO
Aprel '26
+18
0 kanalda
Get PRO
Mart '26
+13
0 kanalda
Get PRO
Fevral '26
+18
0 kanalda
Get PRO
Yanvar '26
+29
2 kanalda
Get PRO
Dekabr '25
+32
0 kanalda
Get PRO
Noyabr '25
+47
2 kanalda
Get PRO
Oktabr '25
+19
0 kanalda
Get PRO
Sentabr '25
+22
0 kanalda
Get PRO
Avgust '25
+14
0 kanalda
Get PRO
Iyul '25
+13
0 kanalda
Get PRO
Iyun '25
+26
0 kanalda
Get PRO
May '25
+22
0 kanalda
Get PRO
Aprel '25
+45
0 kanalda
Get PRO
Mart '25
+136
10 kanalda
Get PRO
Fevral '25
+201
8 kanalda
Get PRO
Yanvar '25
+260
3 kanalda
Get PRO
Dekabr '24
+306
6 kanalda
Get PRO
Noyabr '24
+327
10 kanalda
Get PRO
Oktabr '24
+956
40 kanalda
Get PRO
Sentabr '24
+321
2 kanalda
Get PRO
Avgust '24
+623
29 kanalda
Get PRO
Iyul '24
+156
2 kanalda
Get PRO
Iyun '24
+78
0 kanalda
Get PRO
May '24
+159
0 kanalda
Get PRO
Aprel '24
+248
2 kanalda
Get PRO
Mart '24
+292
1 kanalda
Get PRO
Fevral '24
+69
0 kanalda
Get PRO
Yanvar '24
+78
1 kanalda
Get PRO
Dekabr '23
+10
0 kanalda
Get PRO
Noyabr '23
+6
0 kanalda
Get PRO
Oktabr '23
+14
1 kanalda
Get PRO
Sentabr '23
+15
0 kanalda
Get PRO
Avgust '23
+81
0 kanalda
Get PRO
Iyul '23
+89
0 kanalda
Get PRO
Iyun '23
+121
0 kanalda
Get PRO
May '23
+11
0 kanalda
Get PRO
Aprel '23
+133
0 kanalda
Get PRO
Mart '23
+203
0 kanalda
Get PRO
Fevral '23
+123
0 kanalda
Get PRO
Yanvar '23
+21
0 kanalda
Get PRO
Dekabr '22
+60
0 kanalda
Get PRO
Noyabr '22
+289
0 kanalda
Get PRO
Oktabr '22
+157
0 kanalda
Get PRO
Sentabr '22
+274
0 kanalda
Get PRO
Avgust '22
+97
0 kanalda
Get PRO
Iyul '22
+340
0 kanalda
Get PRO
Iyun '22
+115
0 kanalda
Get PRO
May '22
+82
0 kanalda
Get PRO
Aprel '22
+88
0 kanalda
Get PRO
Mart '22
+163
0 kanalda
Get PRO
Fevral '22
+215
0 kanalda
Get PRO
Yanvar '22
+226
0 kanalda
Get PRO
Dekabr '21
+257
0 kanalda
Get PRO
Noyabr '21
+448
0 kanalda
Get PRO
Oktabr '21
+281
0 kanalda
Get PRO
Sentabr '21
+327
0 kanalda
Get PRO
Avgust '21
+124
0 kanalda
Get PRO
Iyul '21
+145
0 kanalda
Get PRO
Iyun '21
+385
0 kanalda
Get PRO
May '21
+141
0 kanalda
Get PRO
Aprel '21
+110
0 kanalda
Get PRO
Mart '21
+600
0 kanalda
| Sana | Obunachilarni jalb qilish | Esdaliklar | Kanallar | |
| 12 Iyul | 0 | |||
| 11 Iyul | 0 | |||
| 10 Iyul | +1 | |||
| 09 Iyul | 0 | |||
| 08 Iyul | 0 | |||
| 07 Iyul | +1 | |||
| 06 Iyul | +2 | |||
| 05 Iyul | +2 | |||
| 04 Iyul | 0 | |||
| 03 Iyul | 0 | |||
| 02 Iyul | 0 | |||
| 01 Iyul | +1 |
Kanal postlari
| 2 |  🪞 Зеркальное отражение текста с помощью 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 |
| 3 |  Matn yo'q... | 936 |
| 4 |  Matn yo'q... | 924 |
| 5 | ![Анимация в 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 |
| 6 |  🔰 Шпаргалка по 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 |
| 7 |  Matn yo'q... | 1 038 |
| 8 |  Проверяем, правильно ли заполнено поле ввода с цифрами? 🔍
Решить эту задачу нам помогут псевдоклассы в 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 |
| 9 |  Matn yo'q... | 650 |
