HTML Gradient effects

Hi

I was kindly given the following link by an expert on gradient effects

http://coboldinosaur.com/pages/scripts-hta.html

I want to use the "grad1" class but am not sure where to find the source code

for the "grad1" class
Murray BrownMicrosoft Cloud Azure/Excel Solution DeveloperAsked:
Who is Participating?
 
Tom BeckCommented:
The direct link would be:

http://coboldinosaur.com/pages/gradients-without-images.html

The css is:
#grad1  {
                color:yellow;
                background: linear-gradient(to bottom, lightskyblue,navy);
           }

Open in new window


You can play with gradients here:

http://www.w3schools.com/css/tryit.asp?filename=trycss3_gradient-linear
0
 
Murray BrownMicrosoft Cloud Azure/Excel Solution DeveloperAuthor Commented:
I tried the following and it didn't work

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        #grad1  {
                color:yellow;
                background: linear-gradient(to bottom, lightskyblue,navy);
           }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="grad1">
    Nello Yello
    </div>
    </form>
</body>
</html>
0
 
Dave BaldwinFixer of ProblemsCommented:
You need 'id' instead of 'class' since #grad1 is an 'id'.  Also, 'runat="server" ' means nothing in HTML.  It only used server-side in ASP.NET.
<!DOCTYPE html>

<html>
<head>
    <title></title>
    <style>
        #grad1  {
                color:yellow;
                background: linear-gradient(to bottom, lightskyblue,navy);
           }
    </style>
</head>
<body>
    <form id="form1">
    <div id="grad1">
    Nello Yello
    </div>
    </form>
</body>
</html> 

Open in new window

0
 
Murray BrownMicrosoft Cloud Azure/Excel Solution DeveloperAuthor Commented:
Thank you both
0
 
Dave BaldwinFixer of ProblemsCommented:
You're welcome, glad to help.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.