JavaScript'er
Closed channel
Заявки приймаємо автоматично! Канал з лайфхаками для кожного поважаючого себе веб-розробника Запросити друга, якщо є: https://t.me/+my7itn9CGMplOTAy Зв'язок: @Ekater1na_admin
Show more7 118
Subscribers
-724 hours
-277 days
-7330 days
Posts Archive
7 118
Blurred card
Акцентуємо увагу на картці шляхом розмитого ефекту на інших зображеннях.
⤷ Забрати код
JavaScript'ер
7 118
📌Дуже гарний ефект для блоку картки на CSS
Насправді, це зовсім не так важко, головне знати кілька функцій - blur, calc і базові в мові стилів.
Ось код картки, але без дод. ефектів:
.card {
background: #191c29;
width: var(--card-width);
height: var(-card-height);
justify-content: center;
align-items: center;
color: rgb (88199250 / 0%);
}
Розберемо найважливіші функції:
• CSS-функція var() — підставляє кастомні властивості як значення властивостей
• Стильова функція blur() — задає розмиття за Гаусом зображень, фонових зображень або тексту.
• Функція calc() — здійснює математичне обчислення прямо в css.
І, звичайно ж, повний код картки на codepen.io
JavaScript'ер7 118
Топ-вакансії грудня — перші хороші новини для ІТ 2025 🔥
$8.8K AI Solutions Engineer, Poland
$8.0K Solutions Architect, Україна
$7.5K Senior Product Designer, Design Lead, Poland
Як вийти на новий рівень в ІТ та потрапити в "топ-найми" місяця?
Прийти та дізнатися всі тенденції на вебінарі від Neoversity «Як залишитися в IT» 15 січня о 19:00.
▪️Чесна аналітика про зарплати, ролі й технології 2025 року.
▪️Як залишатися затребуваним.
▪️Огляд перспектив у сфері розробки.
▪️Практичні кейси.
👉 Реєструйтеся зараз, щоб миттєво отримати корисний файл — гайд з підготовки до співбесіди за допомогою ChatGPT.
7 118
Який метод JavaScript використовується для перетворення JSON рядка в об'єкт?
7 118
Rube Goldberg HTML form
Незвичайна реалізація форми введення. Реалізовано за допомогою CSS та JS.
⤷ Забрати код
JavaScript'ер
7 118
🥸Наведи приклад мікрозавдань
Приклади мікрозадач JavaScript включають колбеки, пов'язані з Promise (методи .then(), .catch(), .finally()), а також MutationObserver. Ці завдання додаються в чергу мікрозадач і виконуються відразу після поточного стека викликів, але до виконання макрозадач, таких як таймери або події з черги подій.
JavaScript'ер
7 118
Який метод об'єкта Document у JavaScript створює новий елемент із вказаним ім'ям тега?
7 118
🔝Знали про таку цікаву фічу Vs Code ?
У кожного було таке, що хочеться просто зосередяться на код, але різні фігні тебе відволікають
Спробуй увімкнути Zen Mode , а точніше режим Дзен . Він залишає вам виключно область коду, щоб ви могли сконцентруватися на коді.
Щоб увімкнути, натисніть Ctrl+Shift+P та введіть zen . Пробуйте🤩
JavaScript'ер
7 118
🥸Чи знав ти, як можна додати ціле відео до будь-якого тексту на CSS?
Головне, про що потрібно знати - це властивість background-clip: text , яка змушує фонове зображення заповнювати лише текст, а не весь блок.
.clip-text {
background: url (http://i.giphy.com/fsULJFFGv8X3G.gif);
background-size: cover;
background-position: центр;
-webkit-background-clip: текст;
color: transparent;
}
Через це текст стає "пофарбованим" у зображення, а сам колір тексту встановлюється як прозорий ( color: transparent ), що дозволяє побачити лише фон всередині тексту.
Якщо комусь цікаво, залишу посилання на готовий код
JavaScript'ер7 118
Login/Registration Form Transition
Анімація для перемикання форми входу на сайт та реєстрації.
⤷ Забрати код
JavaScript'ер
7 118
Animated Card Flip
Перевертання карток при натисканні на них. Реалізовано за допомогою CSS та JS.
⤷ Забрати код
JavaScript'ер
7 118
🥸Чи знали про Html атрибут onblur?
Він використовується для обробки події втрати фокусу елементом. Як, наприклад, полем введення.
Коли елемент втрачає фокус (типу користувач клацає поза полем введення), то спрацьовує подію blur, і можна виконати певні дії, такі як валідація даних або зміна стилю елемента.
JavaScript'ер
