Understanding CSS – Padding, Positioning and CSS3

Using CSS3 In Your Daily Coding!

As my first CreativityDen post I’ve decided to show you all, (mainly beginners to CSS), how to use it effectively in you designs. One of the most frustrating things when coding a website can be not having the skills to bring your .PSD file to life, it happens to most of us, (unless your like me and you learnt to code first), but it doesn’t have to be that way anymore.

These methods are trial and error, not every effect works in every design, which is why not every well done site has drop shadow and rounded corners everywhere, so be careful when and where you use them.

What Exactly Will This Post Do For You?

Please Note: All images in this article are screenshots taken directly from the browser window, no photoshoping here!

With the release of CSS3, which is now being used more frequently, I’ve put this little article together for more of a beginner. However you never know, there may be a few tricks you don’t know.

I’m also going to be giving advice on such things as Padding, Margin, Borders and Background Colors, and how to us them effectively.

It’s starting to annoy me when people are making something huge out CSS3, yes it is a big evolution in the world of styling a page. However it can be a bit intimidating, so just think of it as normal CSS that you’ve never used before, because that’s all it is.

So as my first post on Creativity Den I am going to cover the CSS tricks that’ll improve your designs. Taking them from pretty good to awesome! The first thing i would like to cover is the box-shadow effect. It’s just an easy way of using drop shadow in CSS without using messy background images.

The Box Shadow Effect

/*Here be the awesome drop shadow/box shadow effect for the web*/
#someRealyCoolDiv {
	width:500px;
	margin:0px auto;
	box-shadow:0px 0px 10px #000;
	-moz-box-shadow:0px 0px 10px #000;
	-webkit-box-shadow:0px 0px 10px #000;
}

Explanation:

box-shadow: This is the actual CSS3 specific code for implementing the shadow effect.

-moz-box-shadow: This targets FireFox which doesn’t understand the standard box-shadow.

-webkit-box-shadow: This targets Safari & Google Chrome mainly, it uses the -webkit- selector which is the advanced CSS3…let’s say ‘package’, that Safari uses.
Please Note: Goolge Chrome is terrible at rendering box-shdow effects!

The Box Shadow Effect

Using Margin, Padding, Borders & Background Colors Successfully

We’ve all made sites or seen sites that could be beautiful, but unfortunately aren’t because of one small issue: The overall CSS aesthetics. Here’s what some people will have:

/*POOR/LAZY WORK*/
#someRealyCoolDiv2 {
	width:500px;
	margin:0px auto;
	border:1px solid #000;
	background:#fff;
}

Poor Use Of Margin & Padding

Now as you can see, that’s just terrible, let’s make it allot better with really basic CSS:

/*AWESOME/VERY WELL PADDED WORK*/
#someRealyCoolDiv2 {
	width:500px;
	margin:0px auto;
	padding:30px;
	border:1px solid #ccc;
	background:#E6E6E6;
}

Good Use Of Margin & Padding.

There we have it, you see how much cleaner it looks already? – All I’ve done is basically add some padding, a little margin, lightened the border and made the background color slightly darker than it was. Which gives a more stylistic effect, but it’s mainly because you should, (almost), never use pure white or pure black in a design. The reason being that they’re both very powerful on the wide spectrum of colors, and strain the eyes when viewing.

The Text-Shadow Effect

Yes, this is practically the same as the box-shadow effect however the effect is for text and the code is written differently. Also the biggest difference is that this effect has two uses.

/*TEXT-SHADOW WITH A SHADOW LIKE EFFECT*/
#h2 {
	text-shadow:5px 5px 10px #000;
}

The Classic Drop Shadow Effect.

That’s the first way of using it, the two 5px values represent the position, the first is left and right and the second is up and down, then the 10px represents the amount of blur wanted. The second is my personal preference: The engraving effect. All you need to do is create a Div with a BG color of #333333 then add a H2 tag with a color of #000000, (you know when i said almost never? yeah, this is the exception), then to that H2 tag add the following code:

/*TEXT-SHADOW WITH AN ENGRAVE LIKE EFFECT*/
#h2 {
	color:#000000;
	text-shadow:-1px 1px #333;
}

I haven’t a added a blur amount so the drop shadow stays like the normal text but is moved slightly down, and slightly left, Now you should see something like the following, and by that i mean exactly like the following:

The Engrave Text Effect.

Working With Positioning

OK understanding this can be tricky at first, but just remember that each element is static to begin with and once changed to being relative, absolute or fixed you can accept four different parameters: Top, Right, Bottom and Left.

Relative Positioning

This is the easiest one to deal with, nothing to fancy going on here, HOWEVER, relative positioning is the base for the other two. A relatively positioned element means that it’s positioned relatively to it’s normal position. Don’t get it? yeah me neither, here’s a better explanation: All elements on a page are positioned static by default. Changing an elements positioning to relative means it can be moved around on top of other elements while it’s original position is kept, (like having it’s seat saved ).

Absolute Positioning

Now, this one seems to confuse people quite allot, it’s quite simple actually. Here we go: An absolutely positioned element is like a relative element BUT it doesn’t really notice the other elements around it. (you know, the whole “Having it’s seat saved thing…”). It just floats around on its merry way.

It is positioned according to which element that surrounds it is set to relative, i.e. If the surrounding Div is set to relative then it’ll go 50px from the left of that Div – If no relative value is set in any Div that surrounds it, it’ll go 50px from the browser window edge.

Fixed Positioning – The Evil Child Of Positioning!

Yes, you read correctly, fixed positioning is the hardest to grasp for most. It’s this simple: A fixed element can sit on top of everything else, (try and stick to one fixed element per page!), here’s a perfect example of fixed positioning in action, by the master of web development, Jeffrey Way! – look at the huge bar along the bottom of the screen.

Positioning Examples:

#container {
	width:500px;
	position:relative;
	border:1px solid #ccc;
	background:#e6e6e6;
}

.awesomeDiv1 {
	width:250px;
	position:relative;
	left:50px;
	top:0px;
	border:1px solid #666;
	background:#999;
}

.awesomeDiv2 {
	width:250px;
	position:absolute;
	top:100px;
	left:50px;
	border:1px solid #666;
	background:#999;
}

.awesomeDiv3 {
	width:100%;
	position:fixed;
	left:0px;
	bottom:0px;
	border:1px solid #666;
	background:#999;
}

Explaining Needed!

OK, pretty basic code going on here, just a #container Div holding three smaller Div’s, .awesomeDiv1, .awesomeDiv2 and .awesomeDiv3.

What you’ll see if you attempt to use this code is that the first two will be pretty much one after the other in the container Div. You’ll also notice that the #container Div is only wrapping around the first Div, why? Well as i said earlier, the Absolute positioning is basically in a world of its own, so it doesn’t see any other elements, hence no other elements see it!

Then the bar at the bottom, if you make the #container Div 1000px high you’ll see that the fixed Div, .awesomeDiv3, is still in its position and hasn’t moved.

Rounded Corners – Border Radius

Yes i do realize that this has been posted many times over but I thought it was worth adding. Border-radius is a way making the corners of a div, input, textarea etc… Have a rounded corners effect like in photoshop. Here’s how:

/*BORDER-RADIUS - PHPTOSHOP LIKE EFFECT*/
#awesomeDiv {
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
}
/*THE OTHER METHOD*/
#awesomeDiv2 {
	border-radius:0px 10px 0px 10px;
	-moz-border-radius:0px 10px 0px 10px;
	-webkit-border-radius:0px 10px 0px 10px;
}

Rounded Corners With Some CSS3.

If your wondering what the difference is, here’s an explanation: Each 10px/0px value is equal to one corner of the div, it goes like this, Top, Right, Bottom and Left. As you can see it goes round in a clockwise motion. So in my example the top left corner will be straight, the top right will be rounded, the bottom right will be straight and the bottom left will be rounded.

If your finding it difficult to remember what each value is for just start at the top left corner, (which seems like the most logical corner to start with anyway), and then just go around in a clockwise motion.

Header & Paragraph Typography

This is an area that I’ve seen many people struggle with, mainly because most designers/developers don’t take much notice of typography…or they just don’t care. Either way, I see sites on a regular basis that could be awesome, (yes, even with good Margin, Padding, Borders & Background Color), which lack in one very important area Typography.

Crappy Web Page Typography:

/*This is a little crappy by my standards*/
h1 {
	font-family:Arial;
	font-size:40px;
	color:#000;
}

h2 {
	font-family:Arial;
	font-size:30px;
	color:#000;
}

h3 {
	font-family:Arial;
	font-size:20px;
	color:#000;
}

p {
	font-family:Arial;
	font-size:14px;
	color:#000;
}

Good Page Typography:

/*This is a pretty good by my standards*/
h1 {
	margin:10px 0px 10px 0px;
	font-family:Arial;
	font-size:2.5em;
	color:#252525;
}

h2 {
	margin:10px 0px 10px 0px;
	font-family:Arial;
	font-size:1.88em;
	color:#333;
}

h3 {
	margin:10px 0px 10px 0px;
	font-family:Arial;
	font-size:1.25em;
	color:#4c4c4c;
}

p {
	margin:0px 0px 20px 0px;
	font-family:Arial;
	font-size:0.88;
	color:#4c4c4c;
	line-height:1.6em;
}

Explanation:

First off we’ve said goodbye to the Pixel values for all the elements, this is something you’ll hear alot: Use EM’s instead of Pixels for text elements, It’s one of those best practices. (I actually use both from time to time, but never on the same project).

Now i know how some people feel about using Margin inside of text elements as i have done, however i ask you this, if it makes your website look awesome and it validates then why not?

Conclusion Time

I hope you’ve enjoyed my little article, it should have shown you that taking your time with each and every project is a very valued idea, be sure to spread the word by doing some Re-Tweeting, Digging & Bumping!

  

Written by KayRoseDesign

Hello!, i'm KayRose, (as you probably guessed it's not my real name ), i'm one of the editors over at BeCreative Magazine, i also coded the entire thing for my friend and fellow web enthusiast Patrick Larsson, hqmStudios, who designed it. I love all things Wordpress, jQuery, HTML and CSS. You can also catch me on twitter @KayRoseDesign.