css
(131)
Приголомшливі hover-ефекти за допомогою CSS змінних
Нещодавно я надихнувся грайливою hover-анімацією на сайті Grover. Переміщення мишки над кнопкою підписки має градієнтну заливку, яка видозмінюється при пересуванні курсору. Ідея проста, але результатом є кнопка, що виділяється з-поміж інших. Як можн...
Codeguida · 26 березня 2018 · 47
Проблеми безпеки CSS
Пару тижнів тому з'явилось декілька новин про вбудований в CSS 'keylogger'. І деякі люди неодмінно стали просити розробників браузерів залатати діру, проте деякі поцікавились проблемою дещо глибше і дізнались, що вона торкнулась лише сайтів побудован...
Codeguida · 22 березня 2018 · 1
Використання initial у CSS
Ключове слово initial оточене містикою для багатьох розробників. Насправді це просто спосіб повернення базових значень властивостям CSS. Зазвичай розробники використовують значення властивостей CSS за замовчуванням, наприклад auto, 0, normal, тощо. Я...
Codeguida · 06 березня 2018 · 1
Прототип системи відслідковування дій користувачів на сайтах за допомогою CSS
Розробник Ян Бьохер (Jan Böhmer) представив прототип системи відстеження переміщення відвідувачів по сайтах за допомогою CSS. Система не вимагає виконання коду на JavaScript. Які дані можна отримати за допомогою цієї системи? При розміщенні коду на с...
Codeguida · 15 січня 2018
Короткий огляд фронтенду в 2017 році
Фронтенд інжиніринг у 2017 розвивався неймовірними темпами. Ось список найбільш помітних подій. React 16 та ліцензія MIT React продовжує домінувати на фронтенд горизонті, і 2017 подарував нам один з найочікуваніших релізів цієї бібліотеки – версію 1...
Codeguida · 18 грудня 2017 · 5
CSS font-display: Майбутнє рендерингу шрифтів у вебі
Одним із недоліків використання веб-шрифтів, є те, що у випадку недоступності шрифту на пристрої користувача, його необхідно завантажувати. Це означає, що до того як шрифт стане доступним, браузер повинен вирішити як відобразити будь-який блок тексту...
Codeguida · 19 листопада 2017 · 35
Створення кнопок Play/Pause на чистому CSS
Загалом, іконки для контролю мультимедіа є універсально зрозумілою візуальною мовою для будь-яких інтерфейсів. Дизайнер може спокійно вважати, що кожен користувач не лише знає, що ▶️ = грати, але й те, що користувач буде шукати цю іконку для того, що...
Codeguida · 10 листопада 2017 · 69
Верстаємо під iPhone X
Safari без будь-яких налаштувань відображає сучасні вебсайти на iPhone X. Контент автоматично вміщується в безпечну зону дисплею, та не викривляється скругленими кутами чи зоною під сенсор. Зона вставки заповнюється background-color сторінки (як визн...
Codeguida · 13 жовтня 2017 · 18
Використання SVG clip-path для зміни кольору логотипу
Минулого тижня я закінчив сайт для запуску нового бізнесу. Дизайн був досить простим: одна сторінка з різними розділами, представленими горизонтальними блоками в повну ширину з різним кольором фону і з логотипом фіксованим у верхньому лівому куті. Єд...
Codeguida · 11 жовтня 2017 · 15
Покращуйте веб-типографію за допомогою CSS font-size-adjust
Властивість font-size-adjust в CSS дозволяє розробникам вказувати font-size на основі висоти маленьких, а не великих літер. Це може значно покращити чіткість тексту. У цій статті ви дізнаєтесь про важливість властивості font-size-adjust і навчитесь з...
Codeguida · 28 вересня 2017 · 9
Використання viewport units для масштабування фіксованих макетів
Бувають випадки, коли потрібно, щоб макет був фіксованим, але реагував на ширину viewport. Приклад із життя Погляньмо на сайт Netflix через десктопний браузер. Персонаж та інші елементи масштабовані відносно ширини viewport. Це важливо для персонажа:...
Codeguida · 27 вересня 2017 · 1
Як зробити ефект матового скла на чистому CSS?
Сьогодні розглянемо метод створення ефекту матового скла на чистому CSS. Як на цьому демо: 1. Створимо базову розмітку HTML Щоб не ускладнювати, я збираюся показати вам як робити ефект матового скла із пустим div. Усе, що вам буде потрібно у HTML –...
Codeguida · 07 серпня 2017 · 130