[SOLVED] Linear Gradient

For general web development questions that are not specifically related to CSS HTML Validator. This includes (but is not limited to) general HTML, CSS, Accessibility, JavaScript, and SEO questions.
Post Reply
paulp575
Rank IV - Intermediate
Posts: 170
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

[SOLVED] Linear Gradient

Post 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>.
Attachments
zz - Screenshot.jpg
zz - Screenshot.jpg (14.58 KiB) Viewed 6959 times
Last edited by paulp575 on Thu May 13, 2021 10:37 am, edited 1 time in total.
paulp575
User avatar
Albert Wiersch
Site Admin
Posts: 3783
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Linear Gradient

Post 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. :)
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
paulp575
Rank IV - Intermediate
Posts: 170
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

Re: Linear Gradient

Post by paulp575 »

That did it - thanks!
Again, superior support from Albert (and crew?).
paulp575
User avatar
Albert Wiersch
Site Admin
Posts: 3783
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Linear Gradient

Post 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?
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
Post Reply