[CSS] Gradient Backgrounds w/ No Images! [PTGigi]

[Lonin]

Created by PTGigi

Found a neat trick while looking around, seems you can easily make a nice gradient with no images needed! Makes it so you don't have to mess around with the images or CSS to get it just right depending on the user's screen resolution.

Firstly I cannot take credit for this, I must link you to the original website I found it on to give proper credits

Now we move on!

We'll be working with the vertical gradient, if you want the horizontal just change a bit of the coding (see above link for the code you'll need to swap in)

So this is what we got for starters:

Code:

      /* For WebKit (Safari, Google Chrome etc) */
      background: -webkit-gradient(linear, left top, left bottom, from(#00f), to(#fff));
      /* For Mozilla/Gecko (Firefox etc) */
      background: -moz-linear-gradient(top, #00f, #fff);
      /* For Internet Explorer 5.5 - 7 */
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF);
      /* For Internet Explorer 8 */
      -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF)";


Place this where ever you want the gradient, ie if you want a gradient background place it here: (my CSS is different from yours most likely, I believe you need to have NO BG images (unless it is slightly or completely transparent)

Code:

body {
    background:url() repeat-x top center #b1b3e2;
    font-family:"Trebuchet MS" Arial, Helvetica, sans-serif;
    font-size:62.5%; /* Sets default font size to 10px */
    color:#52017e;
      /* For WebKit (Safari, Google Chrome etc) */
      background: -webkit-gradient(linear, left top, left bottom, from(#b1b3e2), to(#52017e));
      /* For Mozilla/Gecko (Firefox etc) */
      background: -moz-linear-gradient(top, #b1b3e2, #52017e);
      /* For Internet Explorer 5.5 - 7 */
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b1b3e2, endColorstr=#52017e);
      /* For Internet Explorer 8 */
      -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#b1b3e2, endColorstr=#52017e)";

    }


It's as easy as that! But surely you want to set whatever colors you want? Here's the break down:

/* For WebKit (Safari, Google Chrome etc) */
background: -webkit-gradient(linear, left top, left bottom, from(#00f), to(#fff));
/* For Mozilla/Gecko (Firefox etc) */
background: -moz-linear-gradient(top, #00f, #fff);
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF);
/* For Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF)";

The bolded above is the TOP color. This is the color that will start the gradient from the top of your screen

/* For WebKit (Safari, Google Chrome etc) */
background: -webkit-gradient(linear, left top, left bottom, from(#00f), to(#fff));
/* For Mozilla/Gecko (Firefox etc) */
background: -moz-linear-gradient(top, #00f, #fff);
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF);
/* For Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF)";

The bolded above is the BOTTOM color. This is the color that will be at the bottom of your screen. You probably should keep all these the same for each browser so no one is confused.

Can this be put other places than the Background? Why sure! Just be sure to put it in the main section for each feature ie for the sidebar (my main coding is probably different from yours):

Code:

#sidebar {
    float:right;
        background: #f1e7f3;
        padding-right: 5px;
        height: 400px;
max-width: 182px;
overflow: auto;
      /* For WebKit (Safari, Google Chrome etc) */
      background: -webkit-gradient(linear, left top, left bottom, from(#f1e7f3), to(#dcc9ee));
      /* For Mozilla/Gecko (Firefox etc) */
      background: -moz-linear-gradient(top, #f1e7f3, #dcc9ee);
      /* For Internet Explorer 5.5 - 7 */
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f1e7f3, endColorstr=#dcc9ee);
      /* For Internet Explorer 8 */
      -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#f1e7f3, endColorstr=#dcc9ee)";
    }


And so on! Have fun