Cтатьи по тегу «CSS3»
Еженедельная подборка красивых эффектов на CSS/SVG/JS #49
Подборка свежих эффектов, интересных идей и полезных наработок.
Эффект отражения пейзажа в надписи
Анимация работает при наведении курсора
Технологии: CSS.
Автор: Алекс (@alexpopovich)
Еженедельная подборка красивых эффектов на CSS/SVG/JS #48
Подборка свежих эффектов, интересных идей и полезных наработок.
Анимация с мармеладкой
Удерживая курсор, можно перемещать мармеладку. (Для работы анимации требуется высота окна браузера не менее 500px.)
Технологии: canvas, JS: matter, p5
Автор: Мариуш Дабровски (@MarioD)
Еженедельная подборка красивых эффектов на CSS/SVG/JS #47
Подборка свежих эффектов, интересных идей и полезных наработок.
Слайдер с эффектом размытия при смене изображений
Технологии: CSS анимация, трансформации, SVG фильтры, JS
Автор: Дамиан Мути (@damianmuti)
Еженедельная подборка красивых эффектов на CSS/SVG/JS #46
Подборка свежих эффектов, интересных идей и полезных наработок.
CSS-гриды пришли насовсем
Перевод статьи CSS Grid Layout is Here to Stay с сайта blogs.igalia.com, опубликовано на css-live.ru с разрешения автора — Мануэля Рего Касановаса.
О том, что стояло за разработкой CSS Grid Layout в Chromium/Blink и Safari/WebKit, которую вела Igalia при поддержке Bloomberg.
Как грид-раскладка (Grid Layout) провела лето
Перевод статьи Grid Layout Summertime с сайта blogs.igalia.com, опубликовано на css-live.ru с разрешения автора — Мануэля Рего Касановаса.
Краткое описание изменений в реализации CSS Grid Layout за прошедшее лето
Лето закончилось, и команда Igalia успела не только хорошо отдохнуть, но и продуктивно поработать над CSS Grid Layout в Chromium/Blink и Safari/WebKit в рамках нашего постоянного сотрудничества с Bloomberg.
К концу сентября спецификация перешла в статус «Кандидат в рекомендации (CR)», Рэйчел Эндрю объяснила, что это значит, в своей статье. Однако, за прошедшие месяцы кое-где произошло несколько изменений, требующих обновления реализации.
Если не забыли моё выступление на последнем BlinkOn, мы рассматривали статус реализации. К тому времени накопилось куча вещей, помеченные как WIP (сокращение от Work In Progress, т.е. «Мы работаем над этим» — прим. перев.) или TODO («надо сделать», напоминания на будущее — прим. перев.), но теперь большинство из них уже реализованы, как я поясню в статье.
CSS Grid Layout и позиционированные элементы
Перевод статьи CSS Grid Layout and positioned items с сайта blogs.igalia.com, опубликовано на css-live.ru с разрешения автора — Мануэля Рего Касановаса.
В этой статье мы рассмотрим некоторые особенные возможности позиционированных грид-элементов.
В рамках работы Igalia над CSS Grid Layout в Chromium/Blink и Safari/WebKit, мы реализовали поддержку позиционированных элементов. Да, абсолютное позиционирование в гриде :)
Вероятно, сама идея позиционированных грид-элементов покажется вам странной, но не спешите с выводами. Идея статьи — рассмотреть, как они работают в грид-контейнере, поскольку у них есть свои особенности.
Модуль генерируемого контента CSS3 обновился спустя 13 лет
Лето в рабочей группе CSS в W3C началось с публикации нового черновика модуля генерируемого контента CSS 3 уровня. Публичных черновиков этого модуля не было аж с 2003 года!
Новая версия включила в себя также генерируемый контент для постраничного вывода, который раньше был отдельным модулем. Получился внушительный набор инструментов для генерации оглавлений, перекрестных ссылок, колонтитулов при печати и т.п. А вот CSS-счетчики (counters) переехали в отдельную спецификацию (хотя не исключено, что их снова объединят).
От самой радикальной идеи старой версии модуля — разрешить свойство content
для всех элементов — отказались, но не до конца. В полной мере оно доступно лишь для ::before
, ::after
, ::marker
и колонтитулов печатных страниц, но содержимое любых элементов можно будет заменять картинкой (в т.ч. градиентом и даже функцией element()
). Неужели мы дождемся стандартного способа замены текста картинкой почти без издержек?
Конечно, до практического применения большинству новинок далеко, спецификация пока в стадии обсуждения и «обкатки». Но присмотреться к ней стоит. И вдруг именно вы найдете лучший ответ на один из 19 пока открытых вопросов?
Мысли вслух о подсетках в CSS Grid Layout
Перевод статьи Subgrids thinking out loud с сайта blogs.igalia.com, опубликовано на css-live.ru с разрешения автора — Мануэля Рего Касановаса.
Итоги наших размышлений о функции подсеток из спецификации CSS Grid Layout.
За последние недели подсетки стали острой темой, в основном из-за статьи «Подсетки в Grid Layout жизненно важны» Эрика Мэйера (кстати, первод есть у нас на сайте — прим. перев.), в которой он привёл несколько примеров того, где подсетки могут оказаться весьма кстати. Эти примеры так или иначе связаны с предыдущей статьёй fantasai на эту же тему. К тому же Рэйчел Эндрю рассказывала про подсетки в своём блоге и в своей последней электронной книге про Grid Layout (что вполне достаточно, чтобы получить представление о синтаксисе и основных функциях грида).
Возможно вы в курсе, что последнее время Igalia работает над реализацией CSS Grid Layout в Chromium/Blink и Safari/WebKit. Как разработчики, мы решили, что неплохо будет поделиться нашим откликом на эту тему, так что на этой неделе команда, работающая над Grid Layout (Серхио, Хави и я) договорились о встрече для рассмотрения функции подсеток. Вот наши первые соображения об этом и первое черновое предложение насчет возможной реализации.
Подробно о размещении элементов в грид-раскладке (CSS Grid Layout)
Перевод статьи Deep Dive into Grid Layout Placement с сайта blogs.igalia.com, опубликовано на css-live.ru с разрешения автора — Мануэля Рего Касановаса.
Полный обзор разных методов позиционирования элементов, предлагаемых спецификацией CSS Grid Layout.
В последние месяцы в рамках моей работы в Igalia я сосредоточенно доделывал те новые/пропущенные места в реализации CSS Grid Layout в движке Blink, что относились к размещению элементов. Вкратце, работа в основном велась по 2 направлениям:
- Поддержка неявного грида перед явным. Так, чтобы к гриду можно было добавлять полосы не только в направлении заполнения (обычно справа/снизу), но и с противоположной стороны.
- Правильная интерпретация неизвестных именованных грид-линий. Это случай, когда элемент привязывается к линии под названием «
foo
», но нигде в гриде нет линий с таким именем.
Эти задачи могут показаться простыми, но из них вытекало немало изменений в реализации самого механизма. Ради их завершения мне в итоге пришлось чуть ли не переписать весь код нахождения позиций в гриде. Я даже написал документ с пояснением всего плана и всех технических подробностей, где можно найти ссылки на все соответствующие патчи.
Теперь, когда я всё это доделал, самое время объяснить, как им пользоваться. Хотя мой коллега Серхио уже писал об этом в 2014-м, спецификация с тех пор поменялась, так что, думаю, лучше попытаться объяснить всё целиком с нуля. Эта статья — что-то вроде выжимки с примерами из раздела «Размещение грид-элементов» спецификации CSS Grid Layout.
Подсетки в Grid Layout жизненно важны
Перевод статьи Subgrids Considered Essential с сайта meyerweb.com для css-live.ru. Автор — Эрик Мейер.
Модуль Grid layout — невероятно фантастическая штука. Я познакомился с ним подробно во время написания главы про грид-раскладку в четвёртом издании своей книги «CSS: полное руководство», и он позволяет вытворять с раскладками такое, что нам даже не снилось. И, кажется, я понял одну недостающую деталь — мощь и необходимость подсеток.
В подтверждение моих слов, рассмотрим пример, который можно наблюдать в различных формах на этой тестовой странице. Я практически целиком содрал этот пример у Fantasai, но разберу его немного иначе. За основу возьмём форму с разными полями и метками, находящимися в неупорядоченном списке, чтобы позаботиться о доступности и, в принципе, для чтения и удобства, если вдруг CSS не отобразится. Разметка выглядит так:
Лакомые кускочки Grid-раскладки, часть 3: размеры грид-полос
Перевод статьи Grid Tidbits part 3: grid track sizing с сайта thatemil.com, опубликовано на css-live.ru с разрешения автора — Эмиля Бьёрклунда (твиттер — @ThatEmil).
В этой заметке исследуются некоторые тонкости задания размеров грид-полос (иначе — рядов и колонок) в CSS Grid Layout. Гибкие размеры, функция повторения, функция minmax — вот это да!
Это третья в серии умеренно небольших статей о Grid-раскладке. В первой части мы рассмотрели, где и зачем это нужно, вторая часть знакомит с основами и терминологией.
Чтобы экспериментировать с примерами из этой заметки, рекомендую скачать и запустить Chrome Canary, поскольку в этом браузере самая актуальная реализация.
Лакомые кусочки Grid-раскладки, часть 2: основы и терминология
Перевод статьи Grid Tidbits part 2: terminology and basics с сайта thatemil.com, автор — Эмиль Бьёрклунд (твиттер — @ThatEmil).
В этой статье мы познакомимся с терминологией «CSS Grid Layout», основами определения grid-шаблонов и размещения в них элементов.
Это вторая из цикла относительно небольших статей про «Grid Layout». В первой части мы узнали о назначении grid-ов и о текущей ситуации в браузерах.
Для этого «лакомого кусочка» мы сделаем следующее:
- Возьмём элемент и превратим его в grid.
- Увидим, как элементы сами размещаются в grid’е
- Поупражняемся в том, как управлять этим размещением
Адаптивная турнирная сетка на CSS3
Дело было в пятницу вечером, на любимом форуме нашелся интересный вопрос, на jsFiddle нашлось место для экспериментов. В итоге получилось вот что: