Изменить цвет различных разделов предварительно - PullRequest
Новая
       6

Изменить цвет различных разделов предварительно

0 голосов
/ 01 декабря 2018

Я пытаюсь сделать несколько цветов ASCII разных цветов в разных разделах.

Пример цвета призраков и текста различен: 

<code><pre>
 .-') _     ('-.    .-')    .-') _    
(  OO) )  _(  OO)  ( OO ). (  OO) )   
/     '._(,------.(_)---\_)/     '._  
|'--...__)|  .---'/    _ | |'--...__) 
'--.  .--'|  |    \  :` `. '--.  .--' 
   |  |  (|  '--.  '..`''.)   |  |    
   |  |   |  .--' .-._)   \   |  |    
   |  |   |  `---.\       /   |  |    
   `--'   `------' `-----'    `--'

Ответы [ 2 ]

0 голосов
/ 01 декабря 2018

Вы можете рассмотреть несколько фонов, и вы сможете легко настроить цвет каждой части элемента pre.Вы также можете рассмотреть em единицу, чтобы она работала с любым значением font-size: 

pre {
  background:
    linear-gradient(blue, blue) 0 0/5em 5em,
    linear-gradient(red, red) 0 100%/5em calc(100% - 5em),
    linear-gradient(green, green) 5em 0/10em 3em,
    linear-gradient(orange, orange) 5em 100%/10em calc(100% - 3em),
    linear-gradient(purple, purple) 15em 0/5em 5em,
    linear-gradient(#22eeff, #22eeff) 15em 100%/10em calc(100% - 5em);
  background-repeat:no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

 .-') _     ('-.    .-')    .-') _    
(  OO) )  _(  OO)  ( OO ). (  OO) )   
/     '._(,------.(_)---\_)/     '._  
|'--...__)|  .---'/    _ | |'--...__) 
'--.  .--'|  |    \  :` `. '--.  .--' 
   |  |  (|  '--.  '..`''.)   |  |    
   |  |   |  .--' .-._)   \   |  |    
   |  |   |  `---.\       /   |  |    
   `--'   `------' `-----'    `--'
.- ') _ (' -.. '' .- ') _(ОО)) _ (ОО) (ОО).(ОО))/ '._ (, ------. (_) --- \ _) /' ._| '--...__) |.--- '/ _ || '--...__)-..-- '||\: ``.-..--»||(| '-.' ..` ''.) |||||.-- '.-._) \ |||||`---. \ / ||`- '` ------' `----- '` -'
0 голосов
/ 01 декабря 2018

Умм ... Поскольку высота призраков и текстов была неодинаковой, это действительно трудно (просто невозможно) сделать.

Но вот (полу) решение, которое близко к вашим требованиям.

Используйте комбинацию linear-gradient и background-clip свойств.

Попробуйте это 

pre{background: -webkit-linear-gradient(blue 44px, red 10%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;}

 .-') _     ('-.    .-')    .-') _    
(  OO) )  _(  OO)  ( OO ). (  OO) )   
/     '._(,------.(_)---\_)/     '._  
|'--...__)|  .---'/    _ | |'--...__) 
'--.  .--'|  |    \  :` `. '--.  .--' 
   |  |  (|  '--.  '..`''.)   |  |    
   |  |   |  .--' .-._)   \   |  |    
   |  |   |  `---.\       /   |  |    
   `--'   `------' `-----'    `--'

Кодовая ручка: https://codepen.io/Ev1tw1n/pen/NEoxRe

...