css (131)

Повне керівництво по Flexbox

Це повне керівництво пояснює все про flexbox, зосереджуючись на всіх можливих властивосях для батьківського елемента (контейнер flex) та дочірніх елементів (елементи flex). Воно також включає в себе історію, демонстрації, шаблони і таблицю підтримки...

Alex · 11 жовтня 2020 · 3.9K

П'ять способів приховати елементи в CSS

Є кілька способів приховати елемент в CSS. Можна вказати opacity: 0, visability: hidden, display: none або встановити крайні значення для абсолютного позиціонування. Ви коли-небудь задавалися питанням, чому так багато методів приховування елементу, к...

Codeguida · 19 січня 2020 · 715

CSS-змінні. Стратегія застосування

Динамічні властивості CSS дають можливість створювати креативні рішення, натомість значно ускладнюють структуру коду. Отримати максимум користі можливо, використовуючи стратегію структурування СSS з користувацькими властивостями . Користувацькі СSS-в...

Codeguida · 29 червня 2018 · 534

Маловідомі CSS-властивості

Існує багато CSS-властивостей, про які деякі дизайнери просто не знають. Або знають, але забувають використовувати ці властивості там, де вони здатні принести велику користь. Деякі з цих властивостей можуть допомогти відмовитися від використання Java...

Alex · 20 липня 2020 · 445

5 flexbox-технік, про які ви повинні знати

Flexbox це стандарт CSS, розроблений для полегшення створення інтерфейсів. Використовуючи різні властивості flexbox, ми можем сконструювати нашу сторінку з блоків, що розміщуються і розтягуються як ми того забажаємо. Сторінки та додатки, створені так...

Codeguida · 22 червня 2021 · 359

Гайд по CSS селекторам

CSS селектори - основа розуміння CSS. Селектори - це те, що допомагає визначити певний HTML елемент і додати до нього стилі. Тож не будемо обговорювати стилі і зосередимось на селекторах. В прикладах нижче, CSS буде знаходитись у файлі під назвою sty...

Codeguida · 10 травня 2021 · 272

Що цікавого можна зробити з checkbox

Checkbox дозволяють вибрати більше одного варіанта з запропонованих в формі. Розумно поєднуючи їх з CSS, можна отримати дивовижні речі. Ця стаття покликана продемонструвати деякі з креативних речей, що можна зробити з checkbox. Майте на увазі, в цій...

Codeguida · 16 жовтня 2021 · 255

Ресурси, що блокують рендеринг: як правильно їх позбутися

Ця стаття буде корисною, якщо Lighthouse коли-небудь казав вам «прибрати ресурси блокування рендерингу» (якщо не казав, то все одно можете дізнатись, як цього уникнути). Ресурси блокування рендерингу — поширена перешкода для швидкого завантаження ваш...

Codeguida · 21 вересня 2021 · 247

Проста валідація форм з HTML5

Коли ви збираєте інформацію від людей, через форму, ви застосовуєте якісь перевірки. Недотримання цих вимог може призвести до втрати клієнтів, небажаних даних в вашій базі даних або навіть слабких місць в системі безпеки вашого сайту. Історично, ство...

Codeguida · 13 січня 2021 · 228

Тригонометрія у CSS і JavaScript: ознайомлення

Пропонуємо до вашої уваги серію статей, у яких ми розглянемо основи тригонометрії, зрозуміємо, чим вона може бути корисною та як творчо застосувати її у CSS та JavaScript. Розуміння тригонометрії може бути нам надзвичайно корисним, коли справа стосує...

Codeguida · 24 червня 2021 · 224

Прості способи поліпшити анімацію при наведенні на кнопку

Реакція на дію - дуже важливий елемент веб-сайту, теми або шаблону. Кнопки стали одними з значущих компонентів веб-дизайну. Тож чому б не прикрасити їх, додавши прості CSS ефекти. Налаштовуємо код Додайте наступний CSS код для вашого елементу button....

Codeguida · 16 грудня 2020 · 198

Grid vs Flexbox: що обрати?

Попри деякі спільні риси, CSS Grid та CSS Flexbox використовуються для дуже різних завдань; кожна з цих технологій вирішує свій набір проблем. У статті ми розглянемо відмінності між цими техніками, дослідимо, як вони допомагають вирішувати різні проб...

Codeguida · 26 жовтня 2018 · 167