Вхід і реєстрація
Розробка · 16 листопада 2017, 22:02 1185
Сергій Фокін, доцент в КНУ имени Тараса Шевченко

HTML трикольорова textarea

Вітаю! Чи може хтось підказати? Намагаюся зробити, щоб textarea в html була забарвлена по черзі (горизонтально, справа наліво) трьома кольорами, не з плавним переходом, а щоб чітко закінчувався один колір і починався інший. З двома кольорами немає жодних проблем, з трьома кольорами і плавним переходом теж, а так, як треба не виходить.
Намагався так:

<textarea style=" background: linear-gradient(to right, blue 33% , white 33%); background: linear-gradient(to left, #999ffd, #eeeeee, #d55865); height: 7%; width: 43%;  border: none;" id="InfinitTense" class="form-control"></textarea>

Підписуйтеся на Telegram-канал «DOU #tech», щоб не пропустити нові технічні статті

Теми: HTML
👍ПодобаєтьсяСподобалось0
До обраногоВ обраному0
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Gennady Dogaev full-stack web developer (freelance) 19.11.2017 15:29

Самый лучший результат — под textarea положить 3 div с нужными цветами и абсолютным позиционированием. Это сработает для любой ширины (даже если пользователь будет растягивать поле), кроссбраузерно и не имеет размытия (градиент без размытия на границах получается только в сафари). Недостаток — много лиших элементов (3 дива + обертка).

codepen.io/GennadyDogaev/pen/wPpXgR

Відповісти
Підтримати
Олексій Пєніє 21.11.2017 10:16

Самый лучший вариант — положить на это хер. Ибо пользователю эти понты в лучшем случае до ожпы.

Відповісти
Підтримати
Gennady Dogaev
minodvesP Vasya 21.11.2017 16:46
Самый лучший результат — под textarea положить 3 div с нужными цветами и абсолютным позиционированием.

а если попробовать сделать проще — найти нужную картинку и сделать ее бэкграундом в диве, в который в свою очередь обернуть textarea ?
Правда не уверен, сработает эта идея или нет (но думаю, если поколдовать над стилями и/или скрипт написать, вполне может сработать). Единственный минус — при больших разрешениях будут пиксели (хотя если это просто три полоски, то пиксельность наверное пофиг).

З.Ы. хотя твой вариант — труЪ. ;)

Відповісти
Підтримати
Gennady Dogaev
Gennady Dogaev full-stack web developer (freelance) 21.11.2017 16:54
а если попробовать сделать проще — найти нужную картинку и сделать ее бэкграундом в диве, в который в свою очередь обернуть textarea ?

Можно тогда сделать её бэкграундом самой textarea. Но это если известна ширина в пикселях. Тогда делается трехцветная полоска высотой в 1px и шириной как textarea и потом фон просто повторяется. Это старый приём.

Відповісти
Підтримати
minodvesP Vasya
Sergii Voloshyn Product Manager в DOU.ua 21.11.2017 17:37
Но это если известна ширина в пикселях.

А если растянуть картинку 1×3 или 3×1 под нужный размер?

Відповісти
Підтримати
Gennady Dogaev
Gennady Dogaev full-stack web developer (freelance) 21.11.2017 17:42

Теоретически это возможно, сейчас браузеры поддерживают растягивание фона. На практике не проверял, не уверен не будет ли такой фон размыт на границах цветов. Всё-таки браузер будет растягивать его как обычную картинку. Хотя, если взять svg — возможно получится идеально.

Відповісти
Підтримати
Sergii Voloshyn
Sergii Voloshyn Product Manager в DOU.ua 21.11.2017 17:50

Вот такое получилось (сильно не тестил) с png картинкой 1×3 px:
s.dou.ua/...​torage-files/3colors.html

Відповісти
Підтримати
Gennady Dogaev
Gennady Dogaev full-stack web developer (freelance) 17.11.2017 12:59

Попробуй в градинетах стопов добавить и использовать не целые проценты
Типа 

to right, blue 0%, blue 29.99%, green 30%, green 59.99%, white 60%, white 100%
. Должно сработать, визуально скорей всего на границах размытие никто не заметит при типичной ширине сайта в 1280.
Відповісти
Підтримати
Олексій Пєніє 19.11.2017 10:43

29.99 не требуется, можно сразу 30 указывать. Можно даже пересечь, попробуй чё получится :)

Відповісти
Підтримати
Gennady Dogaev
Gennady Dogaev full-stack web developer (freelance) 19.11.2017 11:38

Я бы не рисковал — браузер в таком случае имеет право какую-то точку пропустить.

Відповісти
Підтримати
Олексій Пєніє
Gennady Dogaev full-stack web developer (freelance) 21.11.2017 14:51

Ну, когда работаешь над фронтом — нужно работать над ним хорошо, я считаю, а не полагаться на «авось».

Відповісти
Підтримати
Олексій Пєніє
Олексій Пєніє 21.11.2017 16:45

Оценивать надо UI, а не степень соответствия бюрократии. Потому что с фронтом потом иметь дело живым людям.

Відповісти
Підтримати
Gennady Dogaev
Gennady Dogaev full-stack web developer (freelance) 21.11.2017 16:48

Ну тут мы маленькую и конкретную техническую проблему обсуждаем, у меня недостаточно знаний о ситуации в целом чтобы оценивать UI. Так-то вообще непонятно зачем textarea полосами закрашивать. А с конкретной технической проблемой я бы не полагался на то, что все браузеры поймут такой градиент. Если на 30% 2 цвета, то браузер может и выкинуть лишний, вряд ли это спека регламентирует.

Відповісти
Підтримати
Олексій Пєніє
Gennady Dogaev full-stack web developer (freelance) 19.11.2017 13:02

Вообще, в Edge, Chrome, Firefox можно хоть 29.99, хоть 30. Результат одинаков. В Safari не проверил — чет виртуалка не хочет запускаться. Но с градиентом таки есть проблема — граница размыта намного больше чем я думал, для практического применения непригодно. Вот с чем размытия нет, так это с box-shadow. Но нужно знать размеры элемента и почему-то не сработало в FF.

Желающим посмотреть и поиграться дальше: codepen.io/GennadyDogaev/pen/wPpXgR

Відповісти
Підтримати
Олексій Пєніє
Victor Musienkо Senior Engineer 17.11.2017 10:41

можна було б на канвасі зробити 3 прямокутниками, а текстареа поставити background: transparent

Відповісти
Підтримати
Олексій Пєніє 17.11.2017 12:17

Можна було взагалі картинку із трьох пікселів зробити і розтягувати як завгодно. Але щоб це зрозуміло читалося, краще таки в 1 строчку робити.

Відповісти
Підтримати
Victor Musienkо
Victor Musienkо Senior Engineer 17.11.2017 12:22

таки твій варіант найліпший)

Відповісти
Підтримати
Олексій Пєніє
Олексій Пєніє 17.11.2017 00:09

Поставь нулевые границы перехода, и будет тебе счастье
background: linear-gradient(to right, blue 0% ,blue 33%, white 33%, white 67%, red 67%, red 100%);

Иными словами, от 0 до 33 он у тебя синий, от 33 до 33 (то есть нигде) идёт плавный переход с синего на белый, и т.д.

Відповісти
Підтримати
Сергій Фокін доцент в КНУ имени Тараса Шевченко 17.11.2017 08:37

Дякую!

Відповісти
Підтримати
Олексій Пєніє
Сергій Фокін доцент в КНУ имени Тараса Шевченко 16.11.2017 23:37

Дякую! Розкішний ресурс!

Відповісти
Підтримати
Alex Bylim
Artyom Krivokrisenko 16.11.2017 22:11

Я догадался что вы пытаетесь сделать: jsfiddle.net/xt90hh86

Відповісти
Підтримати
Дмитрий JSLover 16.11.2017 23:37

Нет нет, всё правильно. Правильные вещи верстает товарищ )))))))

Відповісти
Підтримати
Oleksii Zazulin
Сергій Фокін доцент в КНУ имени Тараса Шевченко 16.11.2017 23:39

Дякую, нічого, напвено, боттом на лефт поміняю, я просто не подумав, що переходи між кольорами треба позначати, бо насправді потрбно відтворити кольори прапора Франції, воно в горизонтальному порядку. Я зрозумів, вже завтра вставлю в код, певен, що проблем не буде.

Відповісти
Підтримати
Oleksii Zazulin
Сергій Фокін доцент в КНУ имени Тараса Шевченко 16.11.2017 22:01

-

Підписатись на коментарі

Не підписуватись
Скористайтесь акаунтом
×
з умовами використання сайту і політикою конфіденційності.