css
(131)
CSS фото-ефекти. Частина третя: Три методи зробити ефект віньєтки
Метод перший: box-shadow Найпопулярніший спосіб - це накласти box-shadow на елемент. Це, до речі, є дуже цікавою і гнучкою властивістю. Я навіть написала цілий пост про те, як можна зробити піксель-арт за допомогою box-shadow списків з функціями у Sa...
Codeguida · 31 липня 2020 · 133
Знайомство з CSS Font Loading API
Нещодавно в мене було бажання вивчити щось нове, і мій вибір пав на CSS Font Loading API. Чому саме він? Перш за все, він добре підтримується веб-браузерами, а це вже вагомий привід познайомитися з ним. А по-друге, він робить взаємодію з кастомними ш...
Codeguida · 3 роки тому · 2
Створення CSS3 нотатки без використання зображень
В цій статті ми розглянемо, як створити CSS стікер для нотаток без жодного зображення! Ось як це буде виглядати: В даному випадку я використав його для відображення цитати А. Ейнштейна. Ви можете використати інший текст. HTML Давайте поглянемо, на...
Codeguida · 18 березня 2020 · 20
Об'єктно-орієнтований CSS
Це звучить дуже дивно, але ідеї ООП можна реалізувати в CSS, зробивши його більш зручним та швидким. Що таке OOCSS? Коли Ви чуєте "об'єктно-орієнтований CSS", можна подумати, що це якийсь новий CSS-препроцесор або щось, що було додано до CSS для розш...
Codeguida · 20 грудня 2021 · 11
Основи роботи з адаптивним текстом
Не секрет, що для того щоб текст прочитало якнайбільше людей, він теж повинен бути адаптивним. Його розмір повинен залежати від розміру екрану. Зазвичай для цього задають розміри в rem. І тоді вже браузер вирішує якого розміру текст потрібно відобраз...
Codeguida · 19 вересня 2021 · 17
Перша CSS змінна: currentColor
CSS змінні повільно проходили шлях від intial draft до реалізації в браузері. Але все ж таки одна замінна перебувала у можливостях використання роками це- currentColor. Ця СSS деталь мала хорошу браузерну підтримку та деяке практичне застосування, от...
Codeguida · 27 червня 2021 · 9
Прості способи поліпшити анімацію при наведенні на кнопку
Реакція на дію - дуже важливий елемент веб-сайту, теми або шаблону. Кнопки стали одними з значущих компонентів веб-дизайну. Тож чому б не прикрасити їх, додавши прості CSS ефекти. Налаштовуємо код Додайте наступний CSS код для вашого елементу button....
Codeguida · 16 грудня 2020 · 207
Bootstrap Grid за 15 хвилин
Bootstrap є найбільш поширеним frontend framework-ом на даний момент. Коли справа доходить до побудови адаптивних веб-сайтів і додатків, це перший вибір як професіоналів, так і любителів тому що з ним легко працювати. Той хто знає HTML, CSS і трохи...
Codeguida · 20 лютого 2020 · 95
Підбірка CSS і Javascript бібліотек для створення анімаційних ефектів
CSS бібліотеки Досвідчені розробники і веб-дизайнери витратили велику кількість часу, щоб створити ці CSS бібліотеки для анімації. Тож ви можете просто скористатися їх напрацюваннями, додати елемент до таблиці стилів і використати потрібні вам анімац...
Codeguida · 24 червня 2020 · 28
Гайд по CSS селекторам
CSS селектори - основа розуміння CSS. Селектори - це те, що допомагає визначити певний HTML елемент і додати до нього стилі. Тож не будемо обговорювати стилі і зосередимось на селекторах. В прикладах нижче, CSS буде знаходитись у файлі під назвою sty...
Codeguida · 3 роки тому · 284
Веселощі з CSS лічильниками
CSS лічильники – це одна з тих цікавих можливостей про, які аж хочеться сказати: «Ого, не знав, що на CSS можна таке зробити». Простіше кажучи, вони дозволяють вам рахувати елементи по-порядку – без JavaScript. Базовий лічильник Ось це – простий прик...
Codeguida · 23 листопада 2020 · 33