От автора: каждый веб-шрифт включает пустые пространства выше и ниже текста, что затрудняет управление отображением пространства в компонентах пользовательского интерфейса. Я создал инструмент Text Crop Tool, чтобы предоставить разработчикам и дизайнерам возможность удалять эти пустые пространства, от которых больше не будет зависеть высота строки, и точнее отображать компоненты. Вот как я это сделал. Как это работает Я добавил красную рамку ...

Подборка свежих эффектов, интересных идей и полезных наработок. Солнечная система на CSS Переключаться между планетами можно навигацией слева или кликом на изображение. Под описанием планеты есть рабочая кнопка «Read more» («Подробнее»).Технологии: CSS, CSS-анимация, CSS-трансформации.Автор: Джейми Коултер (@jcoulterdesign) Посмотреть живой пример Дом с растущей крышей Трехмерная мозаика из шестиугольников Кнопка скрытия/отображения пароля на CSS Картины Мондриана на CSS-гридах Картины поворачиваются в зависимости ...

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

От автора: иногда сложно устанавливать CSS переменные для изменения системы дизайна: если область видимости переменных слишком мала, система потеряет однообразие. Если переменные слишком глобальные, теряется детализация. Возможно, мы можем решить обе проблемы. Я попробовал бы свести переменные системы дизайна до двух типов: глобальные и компонентные. Глобальные переменные приносят единообразие в компоненты. Компонентные переменные дают детализацию и изоляцию. Позвольте показать вам, ...

От автора: работа над большими проектами сопряжена со сложностью работы с большим кодом в большой команде. Слишком часто я ловил себя на том, что не следую главным принципам разработки ПО типа DRY (не повторяться), KISS (все должно быть до глупости просто) и YAGNI (вам это не понадобится). Учитывая эти проблемы, я начал использовать самые распространенные системы: OOCSS, SMACSS, ITCSS, ACSS ...

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

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

От автора: большинство языков программирования поддерживают переменные. Но, к сожалению, CSS не нуждался в поддержке родных переменных с самого начала. Вы пишете CSS? Тогда для вас нет переменных. Ну, кроме тех случаев, когда вы использовали такой препроцессор, как Sass. Такие препроцессоры подают использование переменных в качестве большого дополнения. И знаете что? Это довольно веская причина их использовать. Веб быстро развивается. ...

От автора: предположим, вы пытаетесь создать элемент дизайна в котором углы блока являются срезанными. Может быть, вы фанат «Звездного крейсера «Галактика»? Или, может быть, вам просто нравится этот необычный эффект, так как он отличается от стандартных прямоугольников. Я подозреваю, что есть много способов сделать это. Конечно, вы можете использовать несколько фонов. Вы могли бы также использовать гибкую SVG-фигуру для фона ...

От автора: в этом руководстве мы рассмотрим простой, но эффективный способ создания Off Canvas меню с использованием HTML, CSS и JavaScript. Чтобы получить представление о том, что мы будем создавать, ознакомьтесь с соответствующей демо-версией на CodePen (для лучшего понимания ознакомьтесь с большей версией): Примечание. В этом руководстве я не буду уделять внимание тому, как сделать Off-Canvas меню доступным или адаптивным, ...