Page 1 of 1

[SOLVED] Linear Gradient

Posted: Wed May 12, 2021 9:41 pm
by paulp575
Trying to use background-image with linear gradient and getting error in HTML Validator v21.02.

What this is supposed to do is create a font that displays in HTML as a key on a keyboard (I am creating a chart showing a game's keyboard shortcuts). See screenshot.

I was given the following HTML code:

Code: Select all

<kbd style="border: 1px solid #aaaaaa; border-radius: 2px; box-shadow: 1px 2px 2px #dddddd; background-color: #f9f9f9; background-image: linear-gradient(top, #eeeeee, #f9f9f9, #eeeeee); padding: 1px 3px; font-family: inherit; font-size: 0.85em;">B</kbd>
Want to convert it to CSS. Created the following CSS:

Code: Select all

  *.TEXT-KEY
  {
    BORDER: 1px solid #aaaaaa;
    BORDER-RADIUS: 2px;
    BOX-SHADOW: 1px 2px 2px #dddddd;
    BACKGROUND-COLOR: #f9f9f9;
    BACKGROUND-IMAGE: linear-gradient(top, #eeeeee, #f9f9f9, #eeeeee);
    PADDING: 1px 3px;
    FONT-FAMILY: inherit;
    FONT-SIZE: 0.85em;
  }
HTML Validator is giving me the following error - which I don't understand:
The linear-gradient() syntax is invalid. The syntax for linear-gradient() is linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop-list> ), where <side-or-corner> is "[ left | right ] || [ top | bottom ]", <color-stop-list> is "<linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#", <linear-color-stop> is "<color> && <color-stop-length>?", <linear-color-hint> is <length-percentage>, and <color-stop-length> is <length-percentage>{1,2}. Note the required "to" keyword before <side-or-corner>.
---
(Styles) Expected a valid <color-stop-list> starting here. Check that all colors, lengths, and percentages in the <color-stop-list> are valid. <color-stop-list> is "<linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#", <linear-color-stop> is "<color> && <length-percentage>?", and <linear-color-hint> is <length-percentage>.

Re: Linear Gradient

Posted: Thu May 13, 2021 9:19 am
by Albert Wiersch
Hello,

It looks like the "to" keyword is missing.

Instead of:

Code: Select all

linear-gradient(top, #eeeeee, #f9f9f9, #eeeeee)
Please try:

Code: Select all

linear-gradient(to top, #eeeeee, #f9f9f9, #eeeeee)
I hope this helps. :)

Re: Linear Gradient

Posted: Thu May 13, 2021 10:36 am
by paulp575
That did it - thanks!
Again, superior support from Albert (and crew?).

Re: Linear Gradient

Posted: Thu May 13, 2021 11:46 am
by Albert Wiersch
paulp575 wrote: Thu May 13, 2021 10:36 am That did it - thanks!
Again, superior support from Albert (and crew?).
Great!

It's just me, myself, and I. :D

UPDATE: The next update (v21.03) will generate this error message that should make this issue more clear:
Is the "to" keyword missing before this <side-or-corner> value?