От автора: сегодня с удовольствием хочу вам представить новый open-source инструмент от IBM, который может помочь в работе с CSS Grid, под названием CSS Gridish! CSS Gridish берет спецификации дизайна сетки вашего продукта и делает несколько ресурсов, которые ваша команда может использовать. Скетч файл с монтажными областями и настройками сетки/макета для дизайнеров CSS/SCSS код с применением CSS Grid и фолбека ...

От автора: помните, как в детстве вы вырезали картинки из журналов? Вы клеили их на бумагу и создавали коллажи? Этот пост посвящен вырезанию изображений в вебе с помощью свойства clip-path CSS. Мы узнаем, как проводить вырезку, а также как с помощью вырезанных частей создавать интересные эффекты, комбинируя части с оригинальным изображением. В качестве примера я буду использовать следующее изображение. Цветок ...

От автора: недавно я столкнулся с адаптивным дизайном, который выглядел сложным в плане измененного порядка элементов и макетов для разных областей просмотра. Этот новый дизайн выглядел сложным, пока мы не рассмотрели его в контексте CSS Grid и FlexBox. Демо: https://codepen.io/collection/XQdebB/ Проблемой здесь может стать поддержка Internet Explorer 11 и Safari 9+. После того, как мы рассмотрим сложности дизайна, мы покажем, ...

От автора: да, display contents включен по умолчанию в Blink и WebKit, и, скорее всего, появится в Chrome 65 и Safari 11.1. Эти браузеры догонят Firefox, в котором это свойство включено с версии 37. Таким образом, Edge остается один без этого свойства . По этому поводу хочу отметить, что работу по поддержке в Chromium начал Emilio Cobos в рамках Igalia ...

От автора: типографика в вебе всегда отставала от своего печатного собрата. И это можно понять, ведь у печатного шрифта были столетия, чтобы развиться до такой сложности, которую трудно уместить в рамках браузера. Тем не менее, благодаря растущей доступности возможностей OpenType в веб-шрифтах и способности контролировать эти функции через CSS, положение быстро меняется. Сегодня мы поговорим о том, как использует типографика ...

От автора: раньше было так: дизайнеры занимались дизайном, кодеры занимались кодом. Все просто. Но когда появились переходы и анимация CSS , эти границы начали немного размываться. Дизайнеры больше не могут просто заниматься дизайном, а кодеры писать код – теперь в целях эффективности сотрудничества первые должны немного разбираться в коде, а вторые – в дизайне. Допустим, дизайнер просит разработчика сделать блок, ...