Главная » Css live (страница 5)

Css live

CSS-2018: W3C выбирает, каким возможностям пора дать «зеленый свет»

Хотя у языка CSS уже давно нет версий (т.е. «CSS3» уже никогда не будет «готов», а «CSS4» и выше вообще не будет), Рабочая группа CSS периодически выпускает «снимки» (snapshots), отражающие реальное состояние CSS на тот или иной момент. Последний такой «снимок», CSS-2017, вышел год назад, с тех пор W3C решил сделать их ежегодными — в чем-то похоже, как у спецификаций HTML5.x ...

Читать далее »

Еженедельная подборка красивых эффектов на CSS/SVG/JS #74

Подборка свежих эффектов, интересных идей и полезных наработок. SVG-рисунок при прокрутке Необычный слайдер в стиле ползунка Многоугольники Удерживая курсором, фигуры можно перемещать. Обратите внимание, что их цвет меняется в зависимости от положения относительно друг друга (красный, зеленый, синий).Технологии: canvas, JS, Pixi.js.Автор: Блейк Боуэн (@osublake) Посмотреть живой пример Анимация «Старцы» по мотивам Лавкрафта Разворот книги на CSS Поворот карточек на CSS Эффект ...

Читать далее »

Аддитивная анимация с помощью Web Animations API

Перевод статьи Additive Animation with the Web Animations API с сайта css-tricks.com для CSS-live.ru, автор — Дэн Уилсон Эти возможности пока что не поддерживаются ни одним стабильным браузером. Однако, всё, о чем я сейчас расскажу, уже есть в Firefox Nightly, и ключевые части есть в Chrome Canary (при включенном флаге «Экспериментальные возможности веб-платформы»), поэтому во время чтения этой статьи я рекомендую использовать ...

Читать далее »

Еженедельная подборка красивых эффектов на CSS/SVG/JS #73

Подборка свежих эффектов, интересных идей и полезных наработок. Трехмерный городок Кликом и удерживанием курсора можно «крутить» пейзаж.Эффектнее смотрится в полностраничном режиме.Технологии: canvas, JS.Автор: Дэйв ДеСандро (@desandro) Посмотреть живой пример Перетасовка карт на Vue Кнопкой Shuffle колода перетасовывается. Кнопками Slow — Medium — Fast можно управлять скоростью.Технологии: CSS, Vue.js.Автор: Hassan Dj (@itslit) Посмотреть живой пример Анимация страницы отписки от рассылки Генератор домиков ...

Читать далее »

Еженедельная подборка красивых эффектов на CSS/SVG/JS #72

Подборка свежих эффектов, интересных идей и полезных наработок. CSS-иллюстрация «Спортсменка» По клику на кнопки «Run» и «Walk» девушка переходит на бег или ходьбу.Нижние кнопки управления меняют среду и образ девушки, а ползунком можно управлять скоростью движения.Эффектнее смотрится в полностраничном режиме.Технологии: CSS, CSS-переменные, CSS-анимация, CSS-трансформации.Автор: White Pallet (@WhitePallet) Посмотреть живой пример Имитация экрана Автор демонстрирует, как CSS-функция matrix3d() может применяться с целью ...

Читать далее »

Сторонний CSS небезопасен

Перевод статьи Third party CSS is not safe с сайта jakearchibald.com, опубликовано на css-live.ru с разрешения автора — Джейка Арчибальда. Несколько дней назад немало шума наделал «кейлоггер», написанный на CSS. Одни требовали, чтобы браузеры это «починили». Другие вникли чуть поглубже и заметили, что уязвимость коснулась лишь сайтов, написанных на фреймворках типа Реакта — мол, это Реакт виноват. Но на самом деле проблема в том, что сторонний ...

Читать далее »

Как использовать вариативные шрифты в реальном мире

Перевод статьи How to use variable fonts in the real world с сайта clearleft.com для CSS-live.ru, с разрешения автора — Ричарда Раттера Использовать вариативные шрифты в реальном мире не так-то легко, как оказалось. Эта статья поясняет, как мы справились с этим на новом сайте Ampersand и что мы узнали за это время. Вариативный шрифт — один файл шрифта, который умеет ...

Читать далее »

Отзывчивые компоненты: решение проблемы выражений от контейнера

Перевод статьи Responsive Components: a Solution to the Container Queries Problem  с сайта philipwalton.com, опубликовано на css-live.ru с разрешения автора — Филипа Уолтона. Выражения от контейнера (Container queries) — предложение, которое позволило бы веб-разработчикам оформлять DOM-элементы в зависимости от размера содержащего их элемента, а не окна браузера. Каждый веб-разработчик наверняка слыхал о таких выражениях. Разработчики нуждались в них (сначала это были «выражения от элемента», затем — «выражения от ...

Читать далее »

Еженедельная подборка красивых эффектов на CSS/SVG/JS #71

Подборка свежих эффектов, интересных идей и полезных наработок. «Волк Шредингера» Кликом справа или слева вы изменяете ширину синего блока.Технологии: CSS, CSS-анимация, CSS-трансформации, transition, mo.js (Motion Graphics for the Web).Автор: Jean (@jeankvd) Посмотреть живой пример Одинокое дерево Плавный скролл и «прилипающее» меню «Конструктор» гамбургера Ссылками в левой части добавляете ингридиенты, потом кнопкой «Order» вы «Заказываете» гамбургер.Технологии: SVG, CSS, Vue.js, Anime.js.Автор: Тиффани Чхонг ...

Читать далее »

Как использовать свойство order во флексбоксах, не вызывая хаоса

Перевод статьи Avoiding chaos when using Flexbox ‘order’ для css-live.ru, с разрешения автора — Амелии Беллами-Ройдз Недавняя твиттерная суматоха вынудила меня сделать наконец демо с флексбоксами, которое я хотела создать еще с тех пор, как впервые начала экспериментировать с flex-свойствами CSS. Рома Комаров поделился исследованием, как с помощью флексбоксов и CSS-свойства order получить эффект сортировки таблицы на чистом CSS. Другие CSS-эксперты ...

Читать далее »