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

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

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

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

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

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

От автора: Подсветка строк таблицы в CSS является до ужаса простой задачей. Все, что вам нужно, – это написать tr:hover { background: yellow; }. Но подсветка столбцов всегда была немного сложнее, т.к. у нас нет в распоряжении такого HTML элемента, который был бы родителем для ячеек таблицы относительно столбца. Немного JavaScript может легко это исправить, но Эндрю Хоу (Andrew Howe) недавно прислал мне письмо, в котором попросил поделиться небольшим трюком, который он обнаружил на сайте StackOverflow.

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

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

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

От автора: Полноэкранное меню, которое заменяет контент страницы, выталкивая его за пределы экрана.

Недавно мы увидели красивый редизайн сайта Hello Monday. Наше внимание привлекла полноэкранная навигация: она полностью заменяет текущий контент, выталкивая его за пределы видимости. Это и вдохновило нас на создание нашего необычного демо-примера!

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

От автора: Коллекция анимированных «иконок-гамбургеров» для меню на чистом CSS с переключением состояний (обычного и активного (когда меню открыто)) при клике.

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

От автора: Использование правила @font-face для загрузки кастомных (пользовательских) веб-шрифтов — это великолепная возможность создать для наших сайтов уникальный и запоминающийся стиль. Однако, когда кастомные шрифты применяются в вебе с использованием стандартных техник, то они могут снизить скорость загрузки и отрицательно сказаться на производительности (как реальной, так и воспринимаемой пользователями). К счастью, мы определили некоторые методы, внимательное применение которых обеспечит вашему сайту баланс юзабилити, производительности и стиля.

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

От автора: Привет. Меня зовут Кори (Cory). У меня есть одна небольшая страсть. Я уже очень давно и серьезно увлекаюсь сеточными системами. По факту, я помог создать достаточно популярную сеточную систему под названием Jeet. Я всегда любил, когда математика используется для упорядочивания и расстановки вещей.

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

От автора: Небольшая коллекция вдохновляющих эффектов для диалоговых окон с использованием CSS анимаций. Некоторые эффекты используют SVG анимации, трансформирующие SVG пути с помощью Snap.svg.

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