Онлайн-конструктор градиентного текста и фона, сделайте обзор, пожалуйста

Онлайн-конструктор градиентного текста и фона, сделайте обзор, пожалуйста

Привет, Я только что закончил кодирование этого:
https://vagMineTech.com/imageMake/gradientImage.php

Он генерирует градиентный фон или градиентный текст, или и то, и другое вместе.

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

Мой выбор цветовых комбинаций может привести вас к LMAO, поэтому, пожалуйста, извините за цветовую комбинацию по умолчанию.

Измените их на что-то по вашему выбору.

Поддерживаются как RGB, так и HEX.

Обычно решения, которые я нашел в Интернете, разбивают строку на символы и меняют цвет символ за символом.

Они не создают плавный эффект градиента в фотошопе на тексте.

Онлайн-инструмент градиента на VagMineTech.com пытается сделать то же, что и Photoshop, с эффектом текстового градиента.

Не знаю, насколько мне удалось это сделать...

Вы увидите гораздо лучший эффект градиента на шрифтах большего размера и более длинных строках.

Кстати, вертикальный градиент означает сверху вниз, а не вертикальную линию посередине.

Аналогично, горизонтальный градиент означает направление слева направо или наоборот, а не плоскую горизонтальную линию посередине.

Повторный градиент означает, что шаблон градиента повторяется снова и снова по всей ширине/высоте.

Растягивающийся градиент означает два цвета, один плавно переходящий в другой по всей ширине/высоте.

Можно изменить направление градиента растяжения, а также наклонить его.

Дайте мне знать, что вы думаете.

У него много кровотечений из-за псевдонимов, вероятно, из-за попытки заливки растром.

Это выглядит немного шатко.

Точно так же у градиентов возникают проблемы с зеркальностью, как будто вы ограничиваете его 8-битным цветом, поэтому он кажется почти размытым.

Интерфейс мог бы использовать некоторое форматирование, чтобы не выглядело так, будто все метки и вводимые данные вставлены туда волей-неволей.

Хотя в наши дни, учитывая то, что он делает, я не уверен, что я бы вообще тратил на это изображения.

Вероятно, я мог бы реализовать что-то подобное, где результатом будет HTML+CSS, который будет выглядеть намного лучше благодаря свойству CSS background-clip и тому, как оно взаимодействует с цветом:прозрачный.

 h1 {


display:inline-block;


text-align:right;


padding:0.35em 1em;


font:normal 8em/1.5em tahoma,helvetica,sans-serif;


background:#004;


background:linear-gradient(


170deg,


#FFF 0%,


#004 40%


);


}


h1 a {


display:inline-block;


text-decoration:none;


}


h1 span,


h1 small {


display:block;


background-clip:text;


-webkit-background-clip:text;


color:transparent;


vertical-align:bottom;


}


h1 span {


margin-top:-0.4em; /*compensate for tahoma's crap X-height alignment */


background-image:linear-gradient(


180deg,


#600 0%,


#B77 60%,


#FFF 61%


);


-webkit-text-stroke:0.016em #006;


}


h1 small {


font-size:0.2em;


line-height:1.2em;


font-weight:normal;


text-align:right;


background-image:linear-gradient(


90deg,


#999 0%,


#FFF 100%


);


}


@media all and (-ms-high-contrast:none) {


/* make this at least show text in IE10 */


h1 span,


h1 small {


background:transparent;


color:#FFF;


}


}

Код (разметка): Затем для CSS:

  <h1> <a href="/"> <span>Domain</span> <small>Small Caption Line</small> </a> </h1> 

Код (разметка): около 1 тыс.

кода, большая часть которого находится в таблице стилей, где его можно кэшировать.

замена изображения, размер которого будет примерно 20 или 30 тыс.? Только будьте осторожны, в IE9/более ранних версиях он идет битами вверх лицевой стороной вниз.

и он не будет стилизован в IE 10-11 (вы получите белый текст без обводки). Если вы действительно заботитесь о том, чтобы IE9/более ранние версии хотя бы отображали текст, то отдельный лист в IE CC, вероятно, будет лучшим вариантом действий. Живая демонстрация здесь:
https://cutcodedown.com/for_others/Jeet/gradient/

Вы можете увидеть значительную разницу в качестве, используя CSS вместо изображений. По сути, если этот инструмент предназначен для веб-сайтов, то это уже не работа с изображениями. Будет весело, если вы перепишете его, чтобы создать правильный CSS.

Добавлена опция для текстовых градиентов (пока не фона) «Плавное преобразование градиента». Это последний флажок в области стилей текста, отмеченный по умолчанию. Полученные результаты:
http://vagminetech.com/imageMake/gradientImage.php

Это должно быть похоже на то, что вы показали с помощью CSS. Сгенерированное изображение имеет цвет обводки для текста «ДОМЕН», его можно удалить. Снимите флажок сглаживания, и вы увидите предыдущий стиль, один цвет плавно переходит в другой. Это - один цвет превращается в другой.

Привет Я не программист, поэтому не буду делиться отзывами о технологии. Будучи дизайнером, это определенно очень помогает. Это будет очень полезный инструмент для маленьких дизайнеров!