Solved

ASP.net VB.net simple panel with a gradient

Posted on 2012-04-10
4
874 Views
Last Modified: 2012-04-26
Hi

Does anyone know of a simple example of how to get a gradient effect on a panel in an ASP.net WebForm. Not C# please, just VB.net

Thanks
0
Comment
Question by:Murray Brown
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 42

Accepted Solution

by:
sedgwick earned 250 total points
ID: 37831273
take a look at gradient generators using css3:
http://gradients.glrzad.com/
0
 

Author Comment

by:Murray Brown
ID: 37831466
Thanks. Where do I put the code?
background-image: linear-gradient(bottom, rgb(223,240,242) 21%, rgb(163,205,240) 61%, rgb(99,167,219) 81%);
background-image: -o-linear-gradient(bottom, rgb(223,240,242) 21%, rgb(163,205,240) 61%, rgb(99,167,219) 81%);
background-image: -moz-linear-gradient(bottom, rgb(223,240,242) 21%, rgb(163,205,240) 61%, rgb(99,167,219) 81%);
background-image: -webkit-linear-gradient(bottom, rgb(223,240,242) 21%, rgb(163,205,240) 61%, rgb(99,167,219) 81%);
background-image: -ms-linear-gradient(bottom, rgb(223,240,242) 21%, rgb(163,205,240) 61%, rgb(99,167,219) 81%);

background-image: -webkit-gradient(
      linear,
      left bottom,
      left top,
      color-stop(0.21, rgb(223,240,242)),
      color-stop(0.61, rgb(163,205,240)),
      color-stop(0.81, rgb(99,167,219))
);
0
 
LVL 7

Assisted Solution

by:vbigham
vbigham earned 250 total points
ID: 37834426
I prefer this one: http://www.colorzilla.com/gradient-editor/

You should put the resulting code in your css file (maybe Site.css) in a selector for the element that should use the gradient.

For example maybe you have a div element where you want a gradient background like this:
    <div class="MyGradientBackground" />

Open in new window


You might have a css style selector like this:
.MyGradientBackground 
{
    background: rgb(174,188,191); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(174,188,191,1) 0%, rgba(110,119,116,1) 50%, rgba(10,14,10,1) 51%, rgba(10,8,9,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(174,188,191,1)), color-stop(50%,rgba(110,119,116,1)), color-stop(51%,rgba(10,14,10,1)), color-stop(100%,rgba(10,8,9,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(174,188,191,1) 0%,rgba(110,119,116,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(174,188,191,1) 0%,rgba(110,119,116,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(174,188,191,1) 0%,rgba(110,119,116,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%); /* IE10+ */
    background: linear-gradient(top, rgba(174,188,191,1) 0%,rgba(110,119,116,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 ); /* IE6-8 */
}

Open in new window

0
 

Author Closing Comment

by:Murray Brown
ID: 37899103
thanks
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

If you need to start windows update installation remotely or as a scheduled task you will find this very helpful.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
If you're a developer or IT admin, you’re probably tasked with managing multiple websites, servers, applications, and levels of security on a daily basis. While this can be extremely time consuming, it can also be frustrating when systems aren't wor…
Michael from AdRem Software explains how to view the most utilized and worst performing nodes in your network, by accessing the Top Charts view in NetCrunch network monitor (https://www.adremsoft.com/). Top Charts is a view in which you can set seve…

691 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question