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

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

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

Подборка свежих эффектов, интересных идей и полезных наработок. Постер к фильму «Соло: Звездные войны» Кнопка включения-выключения в стиле Sci-Fi Имитация трехмерного интерфейса Красивый рисунок из линий Анимация часов из блоков Трехмерная анимация соцсетей Трансформация куба на CSS Вверху слева можно убрать галочку, чтобы тени были более четкими.Технологии: CSS-анимация, CSS-трансформации.Автор: Дэвид Харшид (@davidkpiano) Посмотреть живой пример Анимация портрета Цветной маятник-змейка на CSS ...

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

Ссылки против кнопок в современных веб-приложениях

Перевод статьи Links vs. Buttons in Modern Web Applications с сайта marcysutton.com для CSS-live.ru, автор — Марси Саттон Github: ссылки или кнопки? Одна из вечных тем во фронтенд-доступности — неразбериха между ссылками и кнопками. Ну, HTML-элементы, которые открывают ссылки в новом окне или отправляют форму, знаете? В веб-приложениях на JavaScript мы по-прежнему путаемся, какой элемент выбрать для пользовательского действия. Чтобы ...

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

Наименее используемые селекторы CSS

От автора: CSS селекторы, которые могут иметь решающее значение во время разработки. Они могут спасти от хаоса javascript, семантически организовать css и оптимизировать скорость загрузки сайта. nth-child(-n) Передавая отрицательное число n, вы указываете его вернуть все элементы перед этим числом и получите то, что мы можем назвать отрицательными дочерними диапазонами. li:nth-child(-n+5) { color: red; } only-of-type Этот структурный псевдо класс ...

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

Знакомство с CSS Gridish: инструмент, помогающий команде адаптировать CSS Grid

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

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

Новые спецификации CSS-селекторов

Привычные нам CSS-селекторы 3 уровня стали рекомендацией W3C еще в 2011-м (почти одновременно с CSS2.1), а черновик селекторов 4 уровня был опубликован еще в 2013-м и очень долго не менялся. Но на этой неделе рабочая группа CSS спохватилась и показала, что работа над селекторами не заброшена. С перерывом в два дня обе спецификации обновились: 30 января — старая, а 1 ...

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

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

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

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

«display: contents» грядет

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

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

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

Подборка свежих эффектов, интересных идей и полезных наработок. Бегущая зебра Портреты Анимация «Винтовая линия (Helix)» Трансформация логотипа Красивая анимация с линиями Анимация волны из частиц Анимация с курицей SVG-анимация леттеринг-логотипа Список дел с CSS-анимацией Пожелания и идеи по содержанию следующих выпусков приветствуем в комментариях. P.S. Это тоже может быть интересно:

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

Всё, что вам нужно знать о CSS-in-JS

Перевод статьи All You Need To Know About CSS-in-JS с сайта hackernoon.com для CSS-live.ru, автор — Индрек Ласн Прекрасная иллюстрация Анны Дадей Краткая выжимка статьи — поговорим о компонентном подходе к CSS. Больше нет необходимости в поддержке множества CSS-файлов. CSS-in-JS делает логику CSS абстракцией уровня компонента, а не уровня документа (используя принцип модульности). Пример со стилизованным React-компонентом Предположу, что вы слышали термины «CSS-in-JS», «стилизованные компоненты», «Radium», «Aphrodite», но не стали в них вникать, ...

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

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

Подборка свежих эффектов, интересных идей и полезных наработок. Анимация «Дуэль» Неоновая вывеска Анимация с авокадо Нужно «схватить» курсором косточку и потянуть в сторону. Предупреждение: анимация сопровождается звуком!Технологии: canvas, CSS, JS.Автор: Себастьян ДеРосси (@derossi_s) Посмотреть живой пример Портрет из текстовой мозаики Создание рисунка из частиц «Нарисуйте» какие-нибудь линии «ручкой», удерживая курсор. После этого нажмите «Create Particles» для генерации частиц.Технологии: canvas, WebGL, particles.js.Автор: ...

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