Congrats if you made it this far, you've successfully created an HTML document that looks like dog balls. We all know you're creative and want to add a little bit of your own personality to this business. So let's get started learning CSS3, which is essentially the way we'll change nearly every single visual element of our web game and page containing it.
CSS3 is wicked powerful and is capable of doing animations and all kinds of stuff.
We're going to add a background gradient... and then some more pretty shit... so let's do this.
We'll start by looking at the thing we're trying to create:
CSS3 Gradient Tutorial :
And yes, I'm aware that it still looks like dog balls. But there is most definately a gradient on this page. So how did we do this?
<Style> Tag
The style tag is used to define (inside an html file) the style of the page. For this part of the tutorial, we'll use this method. So the first thing you'll need is to add <style></style> tags to your existing document (from the previous post, or whatever html document you're adding style to). This should make your document look like:
<!DOCTYPE HTML> <html>
<head>
<title>
Title of my project: A learning experience.
</title>
<style>
</style>
</head>
<body>
ANYTHING!!!
</body>
</html>
Now everything that you put between the <style> and </style> tag will be interpreted as CSS (cascading style sheet) data. You can google, "why they call it cascading style sheet" if you want, but it's not terribly interesting, and doesn't really provide you with any more information than the name itself does.
Changing Appearance of Page Elements
You can change nearly every visual aspect of your page with CSS. The only thing required is to know the "class" of the element as it is specified in the markup, script, or standard elements available through the DOM. (I think that's right). So basically if you want to change the background of the body of a page, you can do that. If you want to change the background of a paragraph you can do that. If you want to change the... you can do that.
But how?
Simply tell the CSS which element you want to change and add {} after it like so:
body{}
Now, everything between the {} will be interpreted as CSS for that specific element.
There are all kinds of things you can change about the element, but for this example we will stick to the background: attribute.
body{background: your-style-goes-here ;}
And "your-Style-Goes-here"; is not proper syntax for anything (duh). But there's some things to explain about syntax for CSS stuff. CSS is one of those things that isn't standardize across browsers yet. This is because the different browser venders haven't been able to agree on what the best way to do it would be (I think). But as soon as they do, this shit's all going to change. Personally, I'd think it would be pretty easy to get the shit standardized, but whatever, we'll talk about that another day.
The point is, when dealing with CSS3 you'll want to make sure you're putting CSS code in your style sheet to handle all the browsers you plan on supporting with your site, or at the very least a nice fallback for all browsers you don't want to worry about.
In the case of gradients, they are a relatively new addition to CSS and you basically have to do it twice for that reason... but luckily only once. When we're done with this tutorial you'll be able to make one style sheet for all your pages. This is how templates are made.
The Gradients
-moz-linear-gradient
-webkit-gradient
I'm sure there's different ways to do it in Opera and IE but fuck those browsers... they can use the fallback of a solid color. (basically I googled it, and it was way to difficult to explain and wasn't even CLOSE to the same way it's achieved in the cool browsers.)
-moz- basically says "Hey, CSS, this is a Mozilla specific joint, ignore for other browsers, and the same for -webkit- which is basically Safari and Chrome.
You're going to see this alot (until they all get their shit together)... these are referred to as different things, but mainly as vender specific markups (at least in my readings).
So now for the actual gradient. We'll do moz first, since It's my favourite browser.
-moz-linear-gradient(top,#ccc,#000);
The above line basically says, "hey mozilla, make a linear gradiant starting at the top and with the color of this crappy grey and go to black".
Sounds simple enough.
Then there's -webkit-
-webkit-gradient(linear,left top, left bottom, from(#ccc), to(#000));
This basically says the same thing, but says it like this...
"Yo, uhm... ok... look webkit browser... this is what I want you to do... i think.. Uhmm.. yeah.. so let's make a gradient. Ok... Uhh... linear.. yeah.. linear. And should we start it at the left corner? Sure... ok... left corner. Oh fuck.. that's right.. left top corner. Ok.. now uhhh.. go to the bottom left corner. Wait, what?... whatever... ok... let's make it start at a shitty grey... and go to ... black. Ok, cool.. yeah I think that'll do.. Thanks webkit browser!"
There's actually good reason the webkit version is more verbose. It's not easy to read, because it doesn't make sense to people, but it makes sense to the computer. This method of doing the gradient leaves room for scalability of the feature, as well as gives a more literal representation to the browser. (This is all assumption at this point, and should be interpreted as nothing more than bullshit... and you should probably have skipped to the next section by now).
So what does it look like now?
Still looks like dog balls huh? Hrmm... well let's look at our document.
<!DOCTYPE HTML> <html>
<head>
<title>
Title of my project: A learning experience.
</title>
<style>
body{
background:-moz-linear-gradient(top,#ccc,#000) ;
background:-webkit-gradient(linear,left top, left bottom, from(#ccc), to(#000));
}
</style>
</head>
<body>
ANYTHING!!!
</body>
</html>
Well, by now, you're noticing that the gradient is stopping after your content and repeating forever many times down the length of your document. This sucks. So to fix this you need to add "no-repeat" to your style. This is because your computer and the internet will assume nothing about the instructions you give it. This is the most valuable lesson I've learned... The computer will ASSUME NOTHING!...
so go ahead and change the gradient lines to include "no-repeat" after the last ) and before the ;
background:-moz-linear-gradient(top,#ccc,#000) no-repeat;
background:-webkit-gradient(linear,left top, left bottom, from(#ccc), to(#000)) no-repeat;
luckily, they've agreed on this part.
But it still looks terrible and is only covering the content...
That's because it's important to remember that the body of your page is only as long as the content within it. And in order to make sure your background fills the page, you need to give the thing that's wrapping around the entire document the style declarations. This wrapper would be the <html> tag.
So change body to be html.
<!DOCTYPE HTML> <html>
<head>
<title>
Title of my project: A learning experience.
</title>
<style>
html{
background:-moz-linear-gradient(top,#ccc,#000) no-repeat ;
background:-webkit-gradient(linear,left top, left bottom, from(#ccc), to(#000)) no-repeat;
}
</style>
</head>
<body>
ANYTHING!!!
</body>
</html>
And for good measure, we want to add a background color to these tags, and a fallback background color. This fallback background color should exist before the gradients, because we want the gradients to be the last thing applied.
<!DOCTYPE HTML> <html>
<head>
<title>
Title of my project: A learning experience.
</title>
<style>
html{background:#222222;background:-moz-linear-gradient(top,#ccc,#000) no-repeat #000;
background:-webkit-gradient(linear,left top, left bottom, from(#ccc), to(#000)) no-repeat #000;
}
</style>
</head>
<body>
ANYTHING!!!
</body>
</html>
And that should just about do it for the gradient. Try opening it in different browsers and changing the background colors to get a cool gradient you like.
And remember these lessons (I know I will):
- The browser assumes nothing
- There is always more than one way to skin a cat and no two venders will agree on which way is the correct way. -moz- vs -webkit- vs -ms- vs -o-
- The body element is only as long as is specified in the HTML or is defined by the content
- CSS3 is powerful shit. Start reading up on it.
No comments:
Post a Comment