Главная » Архив меток: CSS3 (страница 7)

Архив меток: CSS3

Более простая реализация скроллинга с помощью CSS position: sticky

От автора: мы много писали о скроллинге здесь на The Pudding. Мы рассмотрели все, начиная со сравнения библиотек и заканчивая адаптивными передовыми методами и глубоким рассмотрением Scrollama. Но всегда есть место для улучшения. Одной из самых заметных попыток реализации прокрутки является липкий графический шаблон, благодаря которому графический элемент сначала «застывает» на несколько этапов прокрутки, а затем переходит к другому состоянию. ...

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

Темная тема за день

От автора: недавно я провел некоторое время со стартапом Kite. Я работал над типографикой своих инструментов. Среди их группы умных утилит, помогающих программистам кодировать, центральным является родное / веб-приложение Kite Copilot. Оно выглядит так: Однажды рано утром программист, использующий Copilot, написал нам предложение добавить вторую тему темного цвета: способ убедить приложение использовать легкий текст на более темном фоне. Это имело ...

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

Закругленные внутрь углы при помощи CSS

От автора: каждый из вас сможет сделать закругленные углы для блока. Для стандартного закругления углов достаточно прописать одну строку css кода. Но что делать если углы блока должны быть закруглены внутрь элемента? В данном уроке мы рассмотрим с вами одну из возможностей создания закругленных внутрь углов для элементов. По результатам видео вы научитесь реализовывать нестандартные блоки с закругленными внутрь углами.

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

Стратегическое руководство по использованию пользовательских свойств CSS

От автора: пользовательские свойства CSS (иногда называемые «переменными CSS») теперь поддерживаются во всех современных браузерах, и люди начинают использовать их в производстве. Это здорово, но они отличаются от переменных в препроцессорах, и я уже видел много примеров использования ими людей, не учитывая, какие преимущества они предлагают. Пользовательские свойства имеют огромный потенциал для изменения того, как мы пишем и структурируем CSS ...

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

CSS переменные и @supports

От автора: в данном уроке мы разберем два нововведения в css, которые уже можно использовать и которые упрощают нативную разработку. В данном уроке мы поговорим про css переменные, которые поддерживаются почти во всех браузерах, и которые очень облегчают жизнь, путем создания единой конфигурации. Также мы поговорим про один удобный флаг, с помощью которого вы сможете определить, работает ли в текущем ...

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

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

Подборка свежих эффектов, интересных идей и полезных наработок. «Мона Лиза» из линий Крестики-нолики на CSS Портрет Криса Койера Переключатель в виде теннисного мяча CSS-анимация иконок меню Демонстрация работы функции crossfade() UI на чистом CSS Рука-загрузчик на CSS Анимация рукописного текста Мишка-переключатель на CSS Пожелания и идеи по содержанию следующих выпусков приветствуем в комментариях. P.S. Это тоже может быть интересно:

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

Свойство CSS backdrop-filter

От автора: до вчерашнего дня я никогда не слышал о свойстве backdrop filter CSS, но через пару часов изучения я понял, что это не что иное, как магия. Это связано с тем, что оно добавляет фильтры (например, изменение оттенка, контраста или размытия) для фона элемента не затрагивая текст или другие элементы внутри него. Возьмем этот пример, в котором я воспроизвел ...

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

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

Подборка свежих эффектов, интересных идей и полезных наработок. WebGL-слайдер с искажением Анимация кнопок выравнивания Интересный дизайн галереи Create.js + Oreo Значки Мстителей Хронологическая лента Перчатка Бесконечности Анимация меню социальных сетей Анимация с лосем Анимированный узор на CSS-гридах Пожелания и идеи по содержанию следующих выпусков приветствуем в комментариях. P.S. Это тоже может быть интересно:

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

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

Подборка свежих эффектов, интересных идей и полезных наработок. Анимация про дизайнеров на CSS Лошадь в движении Эдварда Мейбридж Головоломка «Ханойская башня» Цель — переместить все диски с левой «башни» на правую. За один раз можно перемещать только один диск. При этом больший диск нельзя помещать на меньший.Технологии: CSS.Автор: Бенс Сабо (@finnhvman) Посмотреть живой пример Выбор любимого времени дня SVG-переключалка между табами ...

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

line-clamp

От автора: свойство line clamp усекает текст до определенного количества строк. Спецификация для него в настоящее время находится в Editor’s Draft, что значит, что ничего еще не закреплено — она в работе. Тем не менее, оно определено как сокращение для свойств max-lines и block-overflow, первое из которых помечено, как такое, которое в скором времени может быть удалено. Видеонаблюдение в Краснодаре ...

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