На мапі, сформованої сервісом Google Maps API іноді може бути видно горізонтальні та вертикальні сірі лінії у вигляді сітки. Прибиремо це.

Стояла задача плавної зміни прозорості при загрузці картинки. Бо іноді, коли картинка дуже велика, то грузиться вона шматками, і це виглядає не дуже.

В браузері Safari є неприємний баг у зображень з ленивою загрузкою. Коли зображення на сторінці ще не загрузилось, воно позначається білою рамкою.

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

Якщо блоку в верстці задана висота 100vh, тобто, він займає 100% висоти в’юпорта, то на мобільному ми отримуємо проблему. А саме ця висота рахується без урахування верхнього бару браузера. В результаті блок вилазить за екран, якщо верхній бар відображається. Як це пофіксити?

Цей пост продовження поста про анімації через transition. Хочу додати кілька прикладів, які я використовую для анімації кнопок по наведенню. Приклад 1. Плавна зміна коліру. Приклад 2. Плавне горизонтальне заповнення. В цій та наступних ми використовуюмо псевдоелемент :before. Для того, щоб він не перекривав текст кнопки, цей текст ми огортаємо в span. Приклад 3. Плавне […]

Є такі відносно нові властивості CSS як object-fit та object-position. Їх не так часто можна зустріти в верстці, але є певні задачі, де вони дуже спрощують життя. Наприклад, в вас є кілька блоків з одним макетом, і ви хочете, щоб ці блоки виглядали однаково рівно. Приміром, це лістинг товарів в інтернет-магазині або список постів в […]

У цій співбесіді упор на Advanced Custom Fields PRO. Більшість питаннь по використанню цого плагіна.

Зараз активно проходжу співбесіди у різні компанії на різні як фронтові, так і фулстекові посади. Питання реальної співбесіди зі мною на позицію розробника WordPress.

Иногда бывает необходимость задать css-свойства инлайном. Например, передать какие-либо настройки из админ-части CMS. Как это сделать: