css
(131)
Виріз в елементах: CSS чи SVG?
Фронтенд-розробники подекуди використовують на сайтах елементи з вирізами, ви мусили натрапляти на них хоча б раз. Для створення такої фігури за допомогою CSS або SVG існує кілька способів. Кожен з них має свої переваги та недоліки, про які ми з вами...
Codeguida · 08 вересня 2021 · 26
Анімація без jQuery ч.1
Існує помилкове переконання серед web-розробників, що CSS-анімації - єдиний ефективний спосіб створення анімацій для web. Цей міф має примусив багатьох девелоперів відмовитися від JavaScript-анімацій. Це є великим недоліком, тому що: потрібно керув...
Codeguida · 05 вересня 2021 · 6
Додаємо анімації життя
Перша ітерація - стандартне "послаблення" Це перша версія - звичайний, рукописний CSS3 ключовий кадр анімації з використанням всього двох клавіш: .form { animation: form-fly-up 0.35s ease; } @keyframes form-fly-up { 0% { t...
Codeguida · 02 вересня 2021 · 10
Створюємо власний блог з допомогою Parse.js, частина 2
Минулого разу ми встановити локальний сервер (XAMPP), веб-сервер (GitHub Pages) і сервер БД (Parse.com). Також, ми маємо HTML сторінки блогу і вбудований базовий Parse.js код для підключення до бази даних. У цьому уроці, ми навчимося створювати, отри...
Codeguida · 12 серпня 2021 · 12
Імітуємо розмиття об’єктів у русі через анімацію в CSS
Для початку розберімося, що ж таке розмиття об'єктів у русі (або motion blur), аби краще розуміти, що саме ми намагаємося відтворити. Певно, ви бачили світлини, зняті за умов слабкого освітлення, де рухомі об'єкти мають вигляд розмитих смуг. Або, нап...
Codeguida · 28 липня 2021 · 4
Коротко про посилання для пропуску та «липкі» хедери
Розповідаємо, як зробити так, щоб основний вміст не перекривався липкими хедерами. Для цього скористаємось властивістю scroll-padding елемента <html>. Чого ми хочемо уникнути: наш заголовок розрізаний навпіл нашим «липким» хедером Що таке посилання...
Codeguida · 14 липня 2021 · 4
Основи Webpack: Частина 1
При створенні сайту досить стандартною практикою є мати якийсь процес збірки на місці, щоб полегшити розробку і підготовку файлів до роботи. Ви можете використовувати Grunt або Gulp, побудувавши ланцюжки перетворень, які дадуть можливість вам закинут...
Codeguida · 13 липня 2021 · 155
Як зробити таби на чистому CSS, а потім ще з них зробити акордеон
Перш ніж почнемо — демо можна знайти ось тут, а сам код повністю — ось тут. Запрошую до вивчення, художнього читання на різні голоси та усіляких забав з цим кодом. Маленький такий дисклеймер — це все винятково для забави та щоби показати вам, який на...
Codeguida · 05 липня 2021 · 10
Тригонометрія у CSS та JavaScript: творчість і тригонометричні функції
У другій частині цієї серії, присвяченій тригонометрії, ми дослідимо тригонометричні функції JavaScript і дізнаємося, як ми можемо застосовувати їх до нашого коду CSS. У першій частині ми розглянули основи тригонометрії та дізналися, як можна застосо...
Codeguida · 29 червня 2021 · 125
CSS про який ви нічого не знали - ч.1
Добре, добре, я не можу точно гарантувати це, але є дуже велика можливість того, що ви з цим ще ніразу не користувались. Селектор root :root { } Використання root дозволяє вибрати найвищий батьківський елемент в DOM. Якщо ти пишеш на HTML, тоді...
Codeguida · 28 червня 2021 · 11
Гід по оптимізації веб-сторінок та додатків
Коли справа доходить до продуктивності, ми не маємо права примушувати користувачів чекати і залишити веб-сторінку з негативними враженнями. Оптимізація є основою професійного створення сайту. Що визначає швидкість сторінки? Можна виділити наступні пу...
Codeguida · 27 червня 2021 · 36
Перша CSS змінна: currentColor
CSS змінні повільно проходили шлях від intial draft до реалізації в браузері. Але все ж таки одна замінна перебувала у можливостях використання роками це- currentColor. Ця СSS деталь мала хорошу браузерну підтримку та деяке практичне застосування, от...
Codeguida · 27 червня 2021 · 7