- 2,096
- Posts
- 15
- Years
- Him/Them
- «UK»
- Seen May 6, 2024
[css-div=" width:80%; height:80%; padding:10%; font-size:16px; background-color:#006064; color:#ffffff;"][css-div=" text-align:center; text-transform:capitalize; letter-spacing:-5px; font-size:40px; text-shadow: black 0.1em 0.1em 0.2em; color:#FF9840; font-family:Arial Black;"]css tutorial
[css-div=" text-align:center; text-transform:capitalize; letter-spacing:-2px; font-size:25px; text-shadow: black 0.1em 0.1em 0.2em; color:#FFB473; font-family:Arial Black;"]Intermediate[/css-div][/css-div]
I'm pretty sure everyone here has seen at least one thread or signature or even post that has been made with at least some CSS coding. And lately I've been getting a few requests to show some members a couple of tricks. After a quick look through the CSS thread i came to the conclusion that, as informative as it was, it does seem quite confusing. So here is my attempt at a CSS tutorial!
[css-div=" width:18px; height:18px; border-radius:20px; background-color:#34C6CD; float:left; box-shadow: black 0.1em 0.1em 0.2em;"][/css-div][css-div=" text-indent:10px; font-size:18px;"]Background - Continued[/css-div]
In the last lesson i covered basic background colours and background images. This time I'll be showing you how to add to the background image code by adding repeat codes other such. The first additional code you should know is the repeat code, this one will be used for things like gradient backgrounds. The code for this one is background-repeat:repeat-x; this is where all that axis stuff you learnt in math class can be put to good use. x will go horizontally and y will go vertically, but there is also the no-repeat code which will keep it in one spot and that's it.
The coding will look a little something like this
And the actual CSS will look like this
Can you see how in the first one there's a gradient along the top, and the second has a gradient in the top left hand corner? That's what you can do with that little code. But you have to remember to put in a background colour code, otherwise you'll have that one image on a transparent background. But sometimes it's good though, its all depends on what effect your trying to pull off.
[css-div=" width:18px; height:18px; border-radius:20px; background-color:#34C6CD; float:left; box-shadow: black 0.1em 0.1em 0.2em;"][/css-div][css-div=" text-indent:10px; font-size:18px;"]Borders[/css-div]
Time to make your boxes look pretty with borders! Border codes pretty much just do things with the edges, this means to curve the corners or add a pretty effect to go around the edges or even both if you feel up for it. The most common of the two is to add a border, for that you will use the code border-style:solid; this will pick what border style you want. There are a lot of different border styles so i'll just list them all here without giving examples:
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
Try and experiment with them to see which you like best. along with that code there are also the border-color and the border-width codes, if you've read the other parts of this tutorial it is pretty obvious as to what they do, but a tip for using them is if your making a signature try not to make it too thick or it could push it over the limits. Oh and one last little variation for that, you can use multiple border styles by using border-left-style or border-right-style. Those variations come in handy with the other part of border codes.
But first its time for some examples!
First off the coding:
And now for the actual css:
Now onto the second border code, this one is known as border radius and the code looks like, you guessed it, border-radius. This code changes the boxes pointed edges into a nice round curve. Also before i get into it it's best to know that for this to work on internet explorer you will need an additional code (check Google). So to put this to work you'll need to have put in border-radius:*px; the maximum amount of curve you can have depends on the height and width of your box. For example if you have a 200x200 box and you set your border radius as 200 your box will become a circle. If it were to be set any higher your box would over lap and become deformed so it automatically disables it. Also there is another code which is border-top-left-radius:200px; which will only effect the top left corner of the box.
[css-div=" width:18px; height:18px; border-radius:20px; background-color:#34C6CD; float:left; box-shadow: black 0.1em 0.1em 0.2em;"][/css-div][css-div=" text-indent:10px; font-size:18px;"]Text - Continued[/css-div]
[css-div=" width:18px; height:18px; border-radius:20px; background-color:#34C6CD; float:left; box-shadow: black 0.1em 0.1em 0.2em;"][/css-div][css-div=" text-indent:10px; font-size:18px;"]Cursors[/css-div]
[css-div=" text-align:left; float:left;"][css-div=" display:inline; text-transform:capitalize; letter-spacing:-1px; text-shadow: black 0.1em 0.1em 0.2em; color:#FFB473; font-family:Arial Black;"]Click here for the[/css-div] [css-div=" display:inline; text-transform:capitalize; letter-spacing:-0.5px; text-shadow: black 0.1em 0.1em 0.2em; color:#FF9840; font-family:Arial Black;"]Last Tutorial[/css-div]
[/css-div][css-div=" text-align:right; float:right;"][css-div=" display:inline; text-transform:capitalize; letter-spacing:-1px; text-shadow: black 0.1em 0.1em 0.2em; color:#FFB473; font-family:Arial Black;"]Click here for the[/css-div] [css-div=" display:inline; text-transform:capitalize; letter-spacing:-0.5px; text-shadow: black 0.1em 0.1em 0.2em; color:#FF9840; font-family:Arial Black;"]Next Tutorial[/css-div]
[/css-div][/css-div]
[css-div=" text-align:center; text-transform:capitalize; letter-spacing:-2px; font-size:25px; text-shadow: black 0.1em 0.1em 0.2em; color:#FFB473; font-family:Arial Black;"]Intermediate[/css-div][/css-div]
I'm pretty sure everyone here has seen at least one thread or signature or even post that has been made with at least some CSS coding. And lately I've been getting a few requests to show some members a couple of tricks. After a quick look through the CSS thread i came to the conclusion that, as informative as it was, it does seem quite confusing. So here is my attempt at a CSS tutorial!
[css-div=" width:18px; height:18px; border-radius:20px; background-color:#34C6CD; float:left; box-shadow: black 0.1em 0.1em 0.2em;"][/css-div][css-div=" text-indent:10px; font-size:18px;"]Background - Continued[/css-div]
In the last lesson i covered basic background colours and background images. This time I'll be showing you how to add to the background image code by adding repeat codes other such. The first additional code you should know is the repeat code, this one will be used for things like gradient backgrounds. The code for this one is background-repeat:repeat-x; this is where all that axis stuff you learnt in math class can be put to good use. x will go horizontally and y will go vertically, but there is also the no-repeat code which will keep it in one spot and that's it.
The coding will look a little something like this
Spoiler:
And the actual CSS will look like this
Spoiler:
Can you see how in the first one there's a gradient along the top, and the second has a gradient in the top left hand corner? That's what you can do with that little code. But you have to remember to put in a background colour code, otherwise you'll have that one image on a transparent background. But sometimes it's good though, its all depends on what effect your trying to pull off.
[css-div=" width:18px; height:18px; border-radius:20px; background-color:#34C6CD; float:left; box-shadow: black 0.1em 0.1em 0.2em;"][/css-div][css-div=" text-indent:10px; font-size:18px;"]Borders[/css-div]
Time to make your boxes look pretty with borders! Border codes pretty much just do things with the edges, this means to curve the corners or add a pretty effect to go around the edges or even both if you feel up for it. The most common of the two is to add a border, for that you will use the code border-style:solid; this will pick what border style you want. There are a lot of different border styles so i'll just list them all here without giving examples:
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
Try and experiment with them to see which you like best. along with that code there are also the border-color and the border-width codes, if you've read the other parts of this tutorial it is pretty obvious as to what they do, but a tip for using them is if your making a signature try not to make it too thick or it could push it over the limits. Oh and one last little variation for that, you can use multiple border styles by using border-left-style or border-right-style. Those variations come in handy with the other part of border codes.
But first its time for some examples!
First off the coding:
Spoiler:
And now for the actual css:
Spoiler:
Now onto the second border code, this one is known as border radius and the code looks like, you guessed it, border-radius. This code changes the boxes pointed edges into a nice round curve. Also before i get into it it's best to know that for this to work on internet explorer you will need an additional code (check Google). So to put this to work you'll need to have put in border-radius:*px; the maximum amount of curve you can have depends on the height and width of your box. For example if you have a 200x200 box and you set your border radius as 200 your box will become a circle. If it were to be set any higher your box would over lap and become deformed so it automatically disables it. Also there is another code which is border-top-left-radius:200px; which will only effect the top left corner of the box.
[css-div=" width:18px; height:18px; border-radius:20px; background-color:#34C6CD; float:left; box-shadow: black 0.1em 0.1em 0.2em;"][/css-div][css-div=" text-indent:10px; font-size:18px;"]Text - Continued[/css-div]
[css-div=" width:18px; height:18px; border-radius:20px; background-color:#34C6CD; float:left; box-shadow: black 0.1em 0.1em 0.2em;"][/css-div][css-div=" text-indent:10px; font-size:18px;"]Cursors[/css-div]
[css-div=" text-align:left; float:left;"][css-div=" display:inline; text-transform:capitalize; letter-spacing:-1px; text-shadow: black 0.1em 0.1em 0.2em; color:#FFB473; font-family:Arial Black;"]Click here for the[/css-div] [css-div=" display:inline; text-transform:capitalize; letter-spacing:-0.5px; text-shadow: black 0.1em 0.1em 0.2em; color:#FF9840; font-family:Arial Black;"]Last Tutorial[/css-div]
[/css-div][css-div=" text-align:right; float:right;"][css-div=" display:inline; text-transform:capitalize; letter-spacing:-1px; text-shadow: black 0.1em 0.1em 0.2em; color:#FFB473; font-family:Arial Black;"]Click here for the[/css-div] [css-div=" display:inline; text-transform:capitalize; letter-spacing:-0.5px; text-shadow: black 0.1em 0.1em 0.2em; color:#FF9840; font-family:Arial Black;"]Next Tutorial[/css-div]
[/css-div][/css-div]