[SOLVED] Linear Gradient

Discussion about CSS related issues.
Post Reply
paulp575
Rank IV - Intermediate
Rank IV - Intermediate
Posts: 107
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 371 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
Site Admin
Posts: 3609
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. :)
paulp575
Rank IV - Intermediate
Rank IV - Intermediate
Posts: 107
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
Site Admin
Posts: 3609
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?
Post Reply