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

View previous topic View next topic Go down

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

Post by Lonin on Mon Feb 25, 2013 5:14 am

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 Wink

Now we move on!

We'll be working with the vertical gradient, if you want the horizontal just change a bit of the coding Wink (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 Wink 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 Wink
avatar
Lonin
Community Advisor
Community Advisor

Posts : 139
Beak Points : 1839
Reputation : 3
Join date : 2013-02-25
Age : 104
Location : Lonin is a Lonin, therefore lives in a cave >;3 Hehehe. - That's cool :D

View user profile

Back to top Go down

View previous topic View next topic Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum