Как стать автором
Обновить

Генератор градиентов на CSS

Время на прочтение1 мин
Количество просмотров53K
Хочу поделиться небольшой, но полезной тулзой для генерации Photoshop-like градиентов. Называется этот инструмент громко — Ultimate CSS Gradient Generator. Но большей значимости ему придает не имя, а создатели — это те же ребята, которые сделали ColorZilla, отличнейший плагин для Firefox.

Но меньше слов, больше дела. Генератор работает очень просто:
  • выбираем из списка нужный нам шаблон (а их там больше сотни)
  • настраиваем размер элементы
  • определяемся с цветами
  • копируем код

Код выходит достаточно чистый, вот пример:
background: #ebf1f6; /* old browsers */
background: -moz-linear-gradient(top, #ebf1f6 0%, #abd3ee 50%, #89c3eb 51%, #d5ebfb 100%); /* firefox */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebf1f6), color-stop(50%,#abd3ee), color-stop(51%,#89c3eb), color-stop(100%,#d5ebfb)); /* webkit */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#d5ebfb',GradientType=0 ); /* ie */

Это код для


UPD: спасибо Lazio_od за еще одну отличную тулзу.
Теги:
Хабы:
Всего голосов 54: ↑50 и ↓4+46
Комментарии25

Публикации

Истории

Ближайшие события

24 – 25 октября
One Day Offer для AQA Engineer и Developers
Онлайн
25 октября
Конференция по росту продуктов EGC’24
МоскваОнлайн
26 октября
ProIT Network Fest
Санкт-Петербург
7 – 8 ноября
Конференция byteoilgas_conf 2024
МоскваОнлайн
7 – 8 ноября
Конференция «Матемаркетинг»
МоскваОнлайн
15 – 16 ноября
IT-конференция Merge Skolkovo
Москва
25 – 26 апреля
IT-конференция Merge Tatarstan 2025
Казань