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

Дмитрий Просветов · 13.05.24

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

Он генерирует градиентный фон или градиентный текст, или и то, и другое вместе.
Образец обоих вместе отображается по умолчанию, когда вы нажимаете ссылку выше.
Мой выбор цветовых комбинаций может привести вас к LMAO, поэтому, пожалуйста, извините за цветовую комбинацию по умолчанию.
Измените их на что-то по вашему выбору.
Поддерживаются как RGB, так и HEX.

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

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

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

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

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

Максим Чудин · 03.06.24

У него много кровотечений из-за псевдонимов, вероятно, из-за попытки заливки растром. Это выглядит немного шатко. Точно так же у градиентов возникают проблемы с зеркальностью, как будто вы ограничиваете его 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; 
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) {

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.

титов саня · 07.06.24

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

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

Снимите флажок сглаживания, и вы увидите предыдущий стиль, один цвет плавно переходит в другой.
Это - один цвет превращается в другой.

aironnn · 12.06.24

Привет

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

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

Дмитрий Просветов

Максим Чудин

титов саня

aironnn