Светлана Павлова: статьи и переводы
Еженедельная подборка красивых эффектов на CSS/SVG/JS #64
Подборка свежих эффектов, интересных идей и полезных наработок.
Всё, что вам нужно знать о CSS-in-JS
Перевод статьи All You Need To Know About CSS-in-JS с сайта hackernoon.com для CSS-live.ru, автор — Индрек Ласн
Прекрасная иллюстрация Анны Дадей
Еженедельная подборка красивых эффектов на CSS/SVG/JS #63
Подборка свежих эффектов, интересных идей и полезных наработок.
Бегущая зебра
Анимация меняется по клику в любом ее месте.
Технологии: CSS, three.js.
Автор: DPDK (@dpdknl)
Еженедельная подборка красивых эффектов на CSS/SVG/JS #62
Подборка свежих эффектов, интересных идей и полезных наработок.
Использование медиавыражений для учета пропорций окна браузера
Перевод статьи Practical uses for the aspect-ratio media query с сайта chenhuijing.com для CSS-live.ru, автор — Чэнь Хуэй Цзин
Простая сетка на гридах с фолбэками с помощью @supports
Перевод статьи Basic grid layout with fallbacks using feature queries с сайта chenhuijing.com для CSS-live.ru, автор — Чэнь Хуэй Цзин
Еженедельная подборка красивых эффектов на CSS/SVG/JS #61
Подборка свежих эффектов, интересных идей и полезных наработок.
Анимация с убегающим холодильником
Технологии: CSS, CSS-трансформации, CSS-анимация.
Автор: Адам Кун (@cobra_winfrey)
Еженедельная подборка красивых эффектов на CSS/SVG/JS #60
Подборка свежих эффектов, интересных идей и полезных наработок.
Имитация чернильных клякс
«Кляксы» можно добавлять кликом по холсту. Обратите внимание, что старые бледнеют при добавлении новых, «впитываясь» в «бумагу», что добавляет реалистичности.
Технологии: canvas, JS.
Автор: Том Миллер (@creativeocean)
Понимание вьюпорта WebView в iOS 11
Перевод статьи Understanding the WebView Viewport in iOS 11 с сайта ayogo.com для CSS-live.ru, автор — Дэррил Пог
iOS 11 представила новое, — пожалуй, неинтуитивное — поведение, связанное со статус-баром. Оно имеет особое значение для тех, кто разрабатывает приложения при помощи инструментов вроде Apache Cordova и Ionic. В частности, изменение затрагивает веб-приложения под iOS11, использующие фиксированное позиционирование верхней панели навигации. Эта статья поможет понять вьюпорт WebView в iOS 11.
Примечание: уже существующие приложения продолжат работать так, как всегда работали — без изменений в поведении их вьюпорта. Нововведение затрагивает только приложения, скомпилированные при помощи Xcode 9 и предназначенные для iOS 11.
Еженедельная подборка красивых эффектов на CSS/SVG/JS #59
Подборка свежих эффектов, интересных идей и полезных наработок.
Еженедельная подборка красивых эффектов на CSS/SVG/JS #58
Подборка свежих эффектов, интересных идей и полезных наработок.
Имитация крема на CSS
Проводя курсором по середине квадрата, вы стираете «крем» и видите текст.
Технологии: CSS-трансформации, CSS-фильтры.
Автор: Юсуке Накая (@YusukeNakaya)
Еженедельная подборка красивых эффектов на CSS/SVG/JS #57
Подборка свежих эффектов, интересных идей и полезных наработок.
Раскладка на CSS-гридах с использованием CSS-перспективы
Имитация обложек музыкальных альбомов.
Технологии: CSS-гриды, CSS-трансформации, JS.
Автор: Энди Барефут (@andybarefoot)
Еженедельная подборка красивых эффектов на CSS/SVG/JS #56
Подборка свежих эффектов, интересных идей и полезных наработок.
Верстка страницы в стиле комиксов на CSS-гридах
Технологии: CSS grid, clip path.
Автор: Рен Айша (@rrenula)
Еженедельная подборка красивых эффектов на CSS/SVG/JS #55
Подборка свежих эффектов, интересных идей и полезных наработок.
Анимация текста в стиле отпечатков пальцев
Технологии: CSS, SVG, CSS анимация, GSAP.js.
Автор: Джон Хили (@jhealey5)