sefea

8 инструментов, улучшающих работу с CSS

Наши соц. сети: instagram, fb, tg

1.Курсор

Здесь вы можете проверить различные значения свойства курсора. Наведите указатель мыши на каждое поле и посмотрите, как будет выглядеть курсор в вашем браузере.

2.Фильтры

Эта игровая площадка помогает визуализировать, что делают разные значения фильтров. Вы можете накладывать разные фильтры, изменять их значения и готовить CSS к использованию.

3.Трансформация

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

4.Тени

Использование теней в вашем дизайне - отличный вариант, если все сделано правильно. Это то, что делает генератор shadow-box. Вы можете добавить множество теней, а затем получить сгенерированный CSS.

5 nth-селекторы

nth-селекторы чрезвычайно полезны, их использование довольно сложно понять. Используйте этот инструмент, чтобы увидеть, как работают разные селекторы.

6.Радиус границ

Свойство border-radius поначалу не сложно понять. Но если использовать 8 значений вместо 4, это может сбить с толку. Взгляните на этот pen и отключите простой режим.

7.Градиент

Нет недостатка в генераторах градиентов, но нет универсального генератора градиентов. У некоторых отсутствует хороший пользовательский интерфейс или недостаточно возможностей. Этот инструмент предоставляет интуитивно понятный и «полный» генератор. Он имеет более 500 предустановок, и вы можете управлять почти всеми аспектами градиента, такими как цвета, размер, форма, тип и даже складывать несколько градиентов. Убедитесь, что вы нажали кнопку информации, чтобы получить дополнительную информацию об инструменте и о том, как его использовать.

8.Палитра

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

Приятного кодинга!