Web design continues to grow and advance with new features constantly being brought forward through browsers, programming and markup languages. Being creative doesn’t necessarily being the first to use these new features but instead being the first one to experiment. Take a look at the border-radius property, on first glance it just just rounds off corners, but when you begin to delve deeper and experiment you realise that the property can do much more than just round off corners. To be creative you don’t have to magically spark new ideas all the time, sometimes its about working with what you have and ‘thinking outside the box’. In this post I shall be sharing and explaining a number of creative uses of transparency in web design.

This post has an autoplaying video for the example hinted above, be warned, I know some of you can hate autoplaying flash videos (including me) but this one is okay, just some relaxing music while you read.

The Principle

The principle is fairly simple. As with Photoshop if you imagine a website is divided into layers. One div will appear on top of another, whilst another div may appear below. If some areas of a div are transparent you will be able to see what is behind that div. You could have an animation going on in the background for example but only display a select area using transparency in the foreground.

The Showcase

Not many people have experimented with this concept. A few have played with opacity to reveal elements and/or a, background behind but few have used transparency for a specific purpose. Although there are a few creative uses out there.

FRESH01

The first website that demonstrates a creative use of transparency is FRESH01. Designed by Adii of WooThemes. The website features a fixed header navigation bar and two transparent circles either side of the main content. Inside these two circles various elements are displayed, from dates of posts and category icons to a dashed pattern which weaves left and right as you scroll.

Above you can see how the idea comes into play. There is a background and foreground and whatever you would like to be displayed in the foreground you place in the circles. Why use transparency for this? I guess it would be very hard to recreate the weaving dashed line any other way.

We Bleed Design

If there is one website that has appeared the most on CreativityDen it would have to be Bryan’s We Bleed Design. The clever concept gives the user such a fun experience that entices them to revisit the site again and again. By using a fixed image in the background and playing with transparency with foreground, scrolling down the website has never been so fun. With the addition of some jQuery and automatic scrolling you can enjoy browsing the website without even draggin the scrollbar down.

Below you will see a small portion of the website. It is an image with a number of transparent areas so whatever is displayed behind comes through. The image is quite large.

Massive Blue

Sam Brown has also used a little transparency in his new portfolio design. Alongside a CSS3 transition you will notice the background change colour but also the logo.

Think Geek

A final example of a creative use of transparency is ThinkGeek’s footer. The footer uses a transparent gradient image to replace the background image. A very cool effect indeed. If you are interested in seeing how this effect was achieved then head over to CSS Tricks. Chris did a wonderful screencast on the matter.

Is that it?

A question you should always ask yourself. The answer should always be no because there are no limits to how creative you can be. I have been no more creative then the above designers, I have simply used the same effect but with a video as the background. The transparent area could be anything you want but for this example I just set it as text.

Pretty cool eh?

The possibilities are endless when it comes to transparency. For a number of months now I have had the idea of achieving a similar effect as GrayScaleGorilla’s mask animation using jQuery. Maybe you could give it a go.

Today I will show how to create the above subscription box using simple HTML markup and a few advanced CSS3 properties. I believe CSS3 is the future and the sooner you can jump on the CSS3 band wagon the better. All the stylish shadows and gradients used are rendered using CSS properties which can be experimented with to produce some fantastic results.

The HTML

The following HTML was used to create the subscription box. Bear in mind this will have no function, I am merely showing you how to design rather than code.

<html>
<head>
	<title>CSS3 Subscription box</title>
</head>
<body>
	<div id="container">
		<h1>Subscribe</h1>
		<form name="input" action="#" method="post">
			<input type="text" name="email" value="Email Address" onclick="value=''"/>
			<input type="submit" value="Sign up" id="submit"/>
		</form>
	</div>
</body>
</html>

The beauty of CSS3

The main CSS3 properties I will be looking at today are the text-shadow property, the box-shadow property and the webkit/moz gradient property.

The above image gives a brief explanation to where some of the CSS3 properties have been used, just in case you thought any images were used.

The container

#container
	{
		text-align: center;

		padding: 20px;

		background: -webkit-gradient(linear, left top, left bottom, from(#243d63), to(#1a2638));
		background: -moz-linear-gradient(top,  #243d63,  #1a2638);

		border-radius: 20px;
		-moz-border-radius: 20px;
		-webkit-border-radius: 20px;

		-webkit-box-shadow: 0px 1px 0px #000;

		border: 1px #1a2638 solid;
	}

The CSS3 properties used above will be explained individually later in this post

The header

	h1
	{
		font-size: 50px;

		margin: 0;
		padding: 0;
		color: #fff;
		font-family: Arial;

		text-shadow: 0px 2px 3px #000;
	}

The above CSS was used to style the header. Fairly simple stuff. The font size is 50 pixels high, the color is white (#fff) and the font is Arial. The first CSS3 property used is the text-shadow property. It has four attributes. The first two position the shadow. ’0px 2px’ would mean zero pixels down and 2 pixels right. These two values can also be negative to position the shadow to the left and up. the third value of ’3px’ is the size of the shadow or blurriness. Lastly, the final value is the colour.

The input box

	input
	{
		font-size: 16px;

		width: 350px;
		padding: 20px;

		border: none;

		border-radius: 10px;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;

		text-shadow: 1px 1px 0px #fff;

		-webkit-box-shadow: -1px -1px 0px #000;

		background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#efefef));
		background: -moz-linear-gradient(top,  #ffffff,  #efefef);
	}

There are a number of CSS3 properties used to style the input box. The first is border-radius which rounds off any corner of an element. The larger the value the more rounded the element. You can also round off individual corners by specifying four values, with the first being the top left corner and the last, the bottom left corner (clockwise motion).

The text shadow property we have seen before. The box-shadow has exactly the same attributes but is used to add a shadow to a specific area rather than text. By setting the blurriness to 0px, you are practically duplicating the area. I have positioned the shadow 1px above and to the left of the original area to create an inner shadow effect.

The last property adds a gradient between two specified colors. As the gradient property can be a bit extensive, feel free to read the official article regarding this property.

The Button

The button makes use of three CSS states. The normal state, the hover state and the active state.

Normal state

	input#submit
	{
		cursor: pointer;
		color: #fff;
		font-weight: bold;

		width: 140px;
		margin-left: 20px;

		text-shadow: 0px 1px 2px #000;

		-webkit-box-shadow: -1px -1px 0px #4bc824, 1px 1px 0px #000;

		background: -webkit-gradient(linear, left top, left bottom, from(#369a18), to(#205f0d));
		background: -moz-linear-gradient(top,  #369a18,  #205f0d);
	}

Nothing you haven’t seen before, however it is possible to have multiple shadows by adding a comma between attributes. I have used two shadows here to create a highlight and a drop shadow effect.

Hover state

	input#submit:hover
	{
		background: -webkit-gradient(linear, left top, left bottom, from(#46b725), to(#205f0d));
		background: -moz-linear-gradient(top,  #46b725,  #205f0d);
	}

The hover state just sees a lighter start color to the gradient.

Active state

	input#submit:active
	{
		-webkit-box-shadow: -1px -1px 0px #000;

		background: -webkit-gradient(linear, left top, left bottom, from(#46b725), to(#205f0d));
		background: -moz-linear-gradient(top,  #46b725,  #205f0d);
	}

The active state has an inner shadow effect giving the impression that the button has been pressed.

Personal mini-sites (or vCard sites) are simple one page websites that have become extremely popular over the last couple of years. They serve as brief personal introductions to the owner, and launch pads to their profiles and content on popular web sites and applications.

They typically share the following properties.

• A single page, with JavaScript often being used extensively to switch between sections
• A mini biography (sometimes as brief as just a few words describing where the owner’s job title and place of work)
• Lists of interests and hobbies
• Links to websites, social networks and profiles on various other popular websites
• Contact details (email addresses, phone numbers), and sometimes a contact form
• A personal touch to design aesthetics and navigation interaction

This article is more of a high-level overview of my design and build process when creating my own mini-site, rather than an in depth tutorial that goes line by line on technical details. If you’d like to find out more about a particular aspect of the site, jump straight into the code and take a look, and if you have any questions then you can either leave a comment here or get in touch with me directly.

A brief history

I produced my first personal mini site in 2005, in the form of a web based CV while I was seeking a full-time job. I wanted something that stood out from the crowd of template based Word document CVs, and as someone working with web technologies, what better medium for my CV than a website? It was a very basic site without any fancy JavaScript, and as it was effectively my CV, the content focused heavily on my skills and interests (all of which have since either evolved slightly or changed completely).

I landed a full-time job (with a little assistance from my site, although it was mostly my suave interview technique that won it for me), and I promptly forgot about the site altogether.

Fast forward a few years, and Tim Van Damme launched his mini-site that resembles a rolodex card. The look and feel of the site was and still is remarkable, and it spawned a huge wave of similar sites, ranging from inspired derivations to horrendous rip-offs. After being inspired by Tim’s site, and some of the amazing work that was listed on Tim’s Wall of Fame (now no longer being updated), I decided it was time to tear down my old mini-site and put something new together.

Concept Development

With the popularity of Tim’s design and the many hundreds of spin-offs based on his work which followed a similar structure, it was clear to me that the “card” metaphor had been done to death. I wanted something different, so I started planning.

I’m a strong believer that design work should always start on paper, and usually with words rather than graphical forms. My first step was to identify the content I’d have on my site, because of course you can’t expect to be able design something until you know what its purpose is. The content outline came out like this:

1. Mini biography, with a bit of personal background and covering my hobbies and interests
2. Photographs I’ve taken, since that’s a major hobby and I have a bunch of shots I’m really proud of on Flickr
3. Links to profiles and presences on other web sites and apps
4. Contact methods (probably email and Skype)

The Design

When designing, it’s always important to know your preferred aesthetic style and your specific areas of expertise, and to play to those strengths. I’m actually rather hopeless when it comes to conjuring up graphical interface wizardry in Photoshop, so I tend to rely on my weapons of choice:

• Clean, simple but well structured layouts
• Strong typography (let the type be the interface)
• Close attention to detail in visual hierarchy, spacing, colouration, and so on

Once you can identify your core strengths as a designer, you’ll know where your comfort zone is and where you can impress, and also where you might to practise a bit more (like me and graphical interface elements).

I then started to play around with some layout ideas, focusing mainly on how the navigation between content sections would work, since this was pretty much the main aspect of the site, and would probably be the only element (besides my name) on the page.

I was starting to settle on the idea of having really big type for the navigation, with the content for each section revealed when the relevant heading was clicked. JavaScript accordions are often mis-used, but I decided that if avoided the cliches of accordion headings wrapped in glossy bars and over-engineered transition effects, and turned almost the entire page into one big accordion, then it might be quite an interesting way of categorising my content.

The Process

For a design this straightforward, I pretty much bypassed Photoshop altogether, going from rough sketches on paper directly to TextMate and Firefox/Firebug. My workflow for starting a new project goes as follows:

1. Set up site folder structure, open up HTML templates and CSS Reset (I use a modified version of Eric Meyer’s Reset Reloaded).
2. Write the markup as cleanly as possible, entering content as I go
3. Write CSS, starting with the site’s layout and then working down from the top of the page
4. Refine and polish the CSS, making changes to the markup where necessary
5. Add any images required
6. More rounds of cleaning up

This got me to a stage where I had the content for the about section (which I liberally styled with some typographic treatment), the social networks and the contact sections sorted.  That just left the Photography section which is the most complex.

Rather than go for a more typical JavaScript image gallery with sideways scrolling between items, I wanted to make use of the excellent jQuery Masonry plugin to display a nicely tiled layout of image thumbnails, which are of varying sizes. With some help from Marc, the in-house development wizard at Neutron Creations who put together some jQuery to pull my photos with specific tags from the Flickr API, this eventually turned out almost exactly as I envisioned on paper.

Design refresh

After living with the design for a few months and continuing to work on other projects, I started getting bored of Helvetica. I’d been overusing it a bit, and was on the lookout for a replacement typeface for my site when I found FF Enzo Web on Typekit. It has a lovely technical, almost stencilled feel to it that’s reminiscent of architectural draftsman’s hand lettering which I’ve always admired.

You’ve created this really great design and everything looks just like the treatment the client approved in all other standards compliant browsers, but then they come back and say “By the way, it has to work in Internet Explorer 6 as well.” Great, here comes hours of debugging and a separate style sheet on top of that. And what are you supposed to do about all those 24bit PNGs with transparency you’ve used?

History

I have tried several solutions like using the AlphaImageLoader filter in an IE6 specific style sheet, TwinHelix’s IE PNG Fix, Unit Interactive’s Unit PNG Fix and a number of others, but none of the fixes worked for every situation. These solutions worked well except when used with background-position, background-repeat and elements with the a:hover pseudo-class.

A better solution

DD_belatedPNG, written by Drew Diller, is a Javascript library that uses Microsoft’s implementation of VML (Vector Markup Language) instead of Microsoft’s AlphaImageLoader filter. It works by adding a line of CSS to the document via the DOM which acts as a MSIE-proprietary behavior (Javascript expression) that gets bound to the elements on the fly.

I’ve used it on a number of sites and have found that transparent images used with background-position, background-repeat and a:hover behave and display identically to modern browsers.

Usage

Implementing the fix is pretty straightforward, albeit you’ll want to use a conditional comment to keep other browsers from loading unnecessary code.

1. Download a copy of the Javascript file.
2. Refer to the file in your code (see code example below). It’s good practice to put Javascript at the end of the document just before the closing </body> tag.
3. Next, add a function that calls to DD_belatedPNG.fix()
4. Replace your_argument with either a CSS selector ('.class'), DOM element ('a, div, ul') or even a group of selectors ('.class, .class-two, #id').

Code Example

<!--[if IE 6]>
<script type="text/javascript" src="DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('your_argument');
</script>
<![endif]-->

A little advice

I would caution against just using DOM elements as this triggers the fix() for every reference of the element in the HTML document, including elements that do not contain transparent PNGs. If you do decide to use them, absolutely do not use ('body') as an argument. Just don’t, Chicken Little, the sky is falling, the whole bad enchilada.

Last bit

There are still a few issues, like <tr>, <td> and <input type="image"/> not working, but for the most part this is the best solution to transparent images in IE6 that I have found to date.

In this article you will learn the two common methods used for creating isometric illustrations and how to create them in Illustrator.

There are two common methods to choose from when you want to create the feel of an isometric drawing; either truly accurate isometric, or the 2:1 pixel ratio.

Method 1: Truly Accurate Isometric

If you are creating a technical drawing or icon set this is probably the method for you, the final image will match the true isometric representation.

Step 1: Create 2D outlines

Step 2: Scale the design vertically by 86.602%.

Object > Transform > Scale

Step 3: Shear (or ‘skew’ in other programs) by 30 degrees.

Object > Transform > Shear

Step 4: Rotate the design by either 30 or -30 degrees.

Object > Transform > Rotate

Step 5: Add the details & finish the image.

Method 2: The 2:1 Pixel Ratio

If you are creating a piece of artwork or a media presentation then the 2:1 pixel ratio method provides the illusion of isometric even through it isn’t truly accurate, the major advantage if you decide to choose this route is that it is a far quicker technique to produce from.

I recently launched the World of TeleWare micro-site; an interactive cityscape where users can explore the companies solutions through a series of animations and illustrations. I used the 2:1 method to create this project due to the sheer scale of the project and the scheduled timescale.

Step 1: Create 2D outlines

Object > Transform > Rotate

Using the ‘Direct Selection Tool’

Step 2: Rotate the design by 45 degrees.

Step 3: Drag the top & bottom points on a 2:1 pixel ratio.

Step 4: Add the details & finish the image.

Comparing the Methods

Here is a side-by-side image showing the difference between the two methods.

I hope you have found this article useful. My next few entries will document how you can export illustrations to Flash and create eye-catching animations & interactive micro-sites.

The property

.round
{
    border-radius: 5px; /* all corners have a radius of 5px */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;

    border-radius: 5px 4px 3px 2px; /* corner values go clockwise so, first value is the top left, second, the top right, third, bottom right and fourth, bottom left */
}

Jean of Cats Who Code recently wrote an excellent article which included ways to achieve rounded corners in IE.

Circles

A filled circle

To render a circle using the border-radius property, simply set the border-radius value to half the width/height. Both width and height should be the same.

A beautifully rendered circle.

#circle
{
		width: 200px;
		height: 200px;
		background-color: #a72525;
		-webkit-border-radius: 100px;
}

A bordered circle

An unfilled circle with border

#circle
{
		width: 200px;
		height: 200px;
		background-color: #efefef; /* Can be set to transparent */
      	border: 3px #a72525 solid;
		-webkit-border-radius: 100px;
}

Due to the way border-radius doesn’t curve the filled area as well, values for border thickness work well up to 4-5px depending on the size of the circle.

Examples of circles with different borders

An unfilled circle with a dashed border

#circle
{
		width: 200px;
		height: 200px;
		background-color: #efefef; /* Can be set to transparent */
      	border: 3px #a72525 dashed;
		-webkit-border-radius: 100px 100px 100px 100px;
}

Semi Circles and Quarter Circles

Semi-circle

To create a semi circle, the width value most be half of the height value. The radius border for the top left and bottom left or top right and bottom right then have to have a value greater than that of the width. A semi-circle of the top and bottom section work much in the same way but with the height being half of the width and with the bottom right and bottom left or the top right and top left have values greater than the height

Look! A semi-circle

#semicircle
{
		width: 100px;
		height: 200px;
		background-color: #a72525;
		-webkit-border-radius: 200px 0 0 200px;
}

Quarter circle

Very simple to achieve, just set a corner value to the same value as the width/height.

A quarter circle.

#quartercircle
{
		width: 200px;
		height: 200px;
		background-color: #a72525;
		-webkit-border-radius: 200px 0 0 0;
}

With different borders

Same border techniques can be used.

Overlapping

By overlapping two circles you can create some interesting shapes. When overlapping make sure the shape on top has the same colour as the body background colour. You also need to use the position and z-index property to position one circle above the other. Z-index simply relates to layers. An element with a z-index of 1 will overlap an element with a z-index of 0 so long as they are positioned on top of each other.

Produce a wonderful arch effect

	#wrapper
	{
		width: 1000px;
		margin: auto;
		position: relative;
	}
	#circle
	{
		position: absolute;
		top: 100px;
		left: 0;
		z-index: 0;
		width: 200px;
		height: 200px;
		background-color: #a72525;
		-webkit-border-radius: 100px;
	}

	#circle1
	{
		position: absolute;
		top: 105px;
		left: 5px;
		z-index: 1;
		width: 200px;
		height: 200px;
		background-color: #efefef;
		-webkit-border-radius: 100px;
	}

Have some fun

These are just a couple effects that I managed to achieve. I am sure you could produce some exceptional art using these techniques. Why not give it a try?

Moon

A nice little crescent moon

Colour venn diagram

A Venn Diagram

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!

Step 1: Preparing the HTML

First we need to create a basic HTML structure. Here’s one example:

<html>
	<head>
		<title>Fluid grid</title>
		<script type="text/javascript" src="script/jquery-1.3.2.min.js"></script>
	</head>
	<body>
		<div class="box"><p><span>01</span>This is box number 1...</p></div>
		<div class="box alt"><p><span>02</span>This is box number 2...</p></div>
		<div class="box"><p><span>03</span>This is box number 3...</p></div>
		<div class="box alt"><p><span>04</span>This is box number 4...</p></div>
		<div class="box"><p><span>05</span>This is box number 5...</p></div>
		<div class="box alt"><p><span>06</span>This is box number 6...</p></div>
		<div class="box"><p><span>07</span>This is box number 7...</p></div>
		<div class="box alt"><p><span>08</span>This is box number 8...</p></div>
		<div class="box"><p><span>09</span>This is box number 9...</p></div>
	</body>
</html>

The divs will be our items, articles, posts, or whatever you call it.

For better understanding of the layout, it is recommended to replace the sample text ‘This is box number…’ with a longer one. Preferably varies in length between one box to another. The illustration images in this tutorial will be using randomly generated text for the box content.

Step 2: Style up a little bit

Then for each step, just write some text describing the step and provide an image which is less than 600px wide.

<link rel="stylesheet" type="text/css" href="style/reset.css" />
<style type="text/css">
	body {
		position: relative;
		width: 100%;
	}
	.box {
		background-color: #F0F0F0;
		color: #888;
		font-family: Arial, Tahoma, serif;
		font-size: 13px;
	}
	.box p {
				padding: 10px;
			}
	.box span {
		float: left;
		font-size: 26px;
		font-weight: bold;
	}
	div.alt {
		background-color: #CCC;
	}
</style>

At this point, the page will look like this:

With no jQuery

Step 3: The Javascript

3.1: The attributes

For the sake of usability, we will create a namespace to avoid conflicts with other scripts/libraries using the same variable names. Let’s use myFluidGrid as our namespace:

<script type="text/javascript">
	var myFluidGrid = {
		COLNUMBER : 2, // Minimum column number.
		COLMARGIN : 10, // Margin (in pixel) between columns/boxes.
		COLWIDTH : 240 // Fixed width of all columns.
	};
</script>

3.2: The method

doLayout : function() {
	var self = this;
	var pointer = 0;
	var arr = [];
	var columns = Math.max(this.COLNUMBER, parseInt($('body').innerWidth() / (this.COLWIDTH + this.COLMARGIN)));

	$('.box').css('position', 'absolute').css('width', this.COLWIDTH  + 'px');
	$('.box').each(function() {
		var tempLeft = (pointer * (self.COLWIDTH + self.COLMARGIN));
		$(this).css('left', tempLeft + 'px');

		var tempTop = 0;
		if (arr[pointer]) { tempTop = arr[pointer];	}
		$(this).css('top', tempTop + 'px');

		arr[pointer] = tempTop + $(this).outerHeight() + self.COLMARGIN;
		pointer++;
		if (pointer === columns) { pointer = 0; }
	});
}

What we do here is basically we grab all boxes and set their width value with the default setting (COLWIDTH). Then we do an iteration to process each boxes.

Inside the loop, we calculate the new left and top position for each box. Defining the left position is easy using the pointer variable. Pointer is our current column position. Just multiply pointer with the box’s width (plus margin). Don’t forget to increase pointer at the end of each iteration (or reset it when it reaches the maximum column number).

Setting the top position is the tricky one. That’s where arr variable comes in handy. It basically stores the bottom position of the last box put on each column. For example: if we put box 1 in column 1 with left=0 and top=0, and box 1 has 80px height. Then arr[0] will be 80 + box margin. This arr[0] is then used as a top position for the box under box 1. See illustration below for details:

Calculating positions

At this point the value of arr will be [0]=>(80 + box margin), [1]=>(69 + margin), [2]=>(81 + margin). The next box (box 4) will use arr[0] as its top position. And it goes on until the very last box.

Finally, we attach doLayout function to window onload and onresize event using this piece of code:

$(window).ready(function() {
	myFluidGrid.doLayout();
}).resize(function() {
	myFluidGrid.doLayout();
});

Step 4: Putting it all together

Here’s the final code:

<html>
	<head>
		<title>Fluid grid</title>
		<link rel="stylesheet" type="text/css" href="style/reset.css" />
		<style type="text/css">
			body {
				position: relative;
				width: 100%;
			}
			.box {
				background-color: #F0F0F0;
				color: #888;
				font-family: Arial, Tahoma, serif;
				font-size: 13px;
			}
			.box p {
				padding: 10px;
			}
			.box span {
				float: left;
				font-size: 26px;
				font-weight: bold;
			}
			div.alt {
				background-color: #CCC;
			}
		</style>
		<script type="text/javascript" src="script/jquery-1.3.2.min.js"></script>
		<script type="text/javascript">
			var myFluidGrid = {
				COLNUMBER : 2, // Minimum column number.
				COLMARGIN : 10, // Margin (in pixel) between columns/boxes.
				COLWIDTH : 240, // Fixed width of all columns.
				doLayout : function() {
					var self = this;
					var pointer = 0;
					var arr = [];
					var columns = Math.max(this.COLNUMBER, parseInt($('body').innerWidth() / (this.COLWIDTH + this.COLMARGIN)));

					$('.box').css('position', 'absolute').css('width', this.COLWIDTH  + 'px');
					$('.box').each(function() {
						var tempLeft = (pointer * (self.COLWIDTH + self.COLMARGIN));
						$(this).css('left', tempLeft + 'px');

						var tempTop = 0;
						if (arr[pointer]) { tempTop = arr[pointer];	}
						$(this).css('top', tempTop + 'px');

						arr[pointer] = tempTop + $(this).outerHeight() + self.COLMARGIN;
						pointer++;
						if (pointer === columns) { pointer = 0; }
					});
				}
			};
			$(window).ready(function() {
				myFluidGrid.doLayout();
			}).resize(function() {
				myFluidGrid.doLayout();
			});
		</script>
	</head>
	<body>
		<div class="box"><p><span>01</span>This is box number 1...</p></div>
		<div class="box alt"><p><span>02</span>This is box number 2...</p></div>
		<div class="box"><p><span>03</span>This is box number 3...</p></div>
		<div class="box alt"><p><span>04</span>This is box number 4...</p></div>
		<div class="box"><p><span>05</span>This is box number 5...</p></div>
		<div class="box alt"><p><span>06</span>This is box number 6...</p></div>
		<div class="box"><p><span>07</span>This is box number 7...</p></div>
		<div class="box alt"><p><span>08</span>This is box number 8...</p></div>
		<div class="box"><p><span>09</span>This is box number 9...</p></div>
	</body>
</html>

At the end, your page will look pretty much like this illustration below: (try resizing the browser window to see how the fluidity works)

Demo

End result, nice and fluid!

Final words

Hopefully this tutorial will give you better understanding on how to create a very simple fluid grid layout. Later on you can make modification such as using dynamic box width instead of static. That’s it for now. Any suggestions, comments, and critics are welcomed.

Colorful comment section

The colorful comment section developed and designed for wordpress blogs.

Colourful comments

Querying and displaying the most commented posts

The code is fairly simple. Firstly, it queries the database, finding the x most commented posts between two given dates. It then loops through the posts calculating the width and color of each post. I have tried to make the code as readable as possible, but if you have any problems do not hesitate to leave a comment. I am currently learning php myself so anyone who can improve this code, please share your improved version

My Version

My attempt is referred to as ‘spaghetti code’ – don’t use it! Instead use Dylan’s improved version below mine. I shall leave my version up so you can see the mistakes I made and how Dylan cleaned my mess up.

<h2>Most commented</h2>

<ul id="most_commented">

<?php

#Fetch the five most commented posts between the 1st of January 2009 to the 31st of December 2009
$result = $wpdb->get_results("SELECT comment_count,ID,post_title, post_date FROM $wpdb->posts WHERE post_date BETWEEN '2009-01-01' AND '2009-12-31' ORDER BY comment_count DESC LIMIT 0 , 5");

#Declare counter variable
$i = 1;

#Loop through each post
foreach ($result as $topfive)
{
    $postid = $topfive->ID;
    $title = $topfive->post_title;
    $commentcount = $topfive->comment_count;

    #My hacky way of finding the number of comments on the most commented post
    if ($i == 1) {$mostcomments = $commentcount;}

    if ($commentcount != 0)
    {

    #Display our results
    echo '<li style="width:';
    #Determine the width for each post, the width of my sidebar was 260px, you will need to change this value to the width of sidebar (don't forget padding etc).
    echo round((260/$mostcomments)*$commentcount,1).'px; '; 

    #Change the color for each post - hex values - change these values to have different colors
    echo 'background-color:#';
    if ($i == 1) echo 'c32a2a';
    elseif ($i == 2) echo 'c37d2a';
    elseif ($i == 3) echo 'bac32a';
    elseif ($i == 4) echo '8fc32a';
    elseif ($i == 5) echo '4ec32a';

    echo ' ;"> ';

    #Display the post title with a link to the post
    echo '<a href=" ';
    echo get_permalink($postid);
    echo ' "> ';
    echo $title;
    echo '</a>';

    #Display the comment number
    echo '<div class="comment_no">';
    echo $commentcount;
    echo '</div></li>';

    }

$i++;

}

?>

</ul>

Dylan’s much improved version

<h2>Most commented</h2>

<ul id="most_commented">

<?php

# Fetch the five most commented posts in the last 12 months
$result = $wpdb->get_results("SELECT comment_count,ID,post_title, post_date FROM $wpdb->posts WHERE post_date BETWEEN NOW() AND DATE_SUB(NOW(), INTERVAL 12 MONTH) ORDER BY comment_count DESC LIMIT 5");

# Initialize $mostcomments
$mostcomments = FALSE;

# Initialize the colors.  Change these values to have different colours
$colors = array(
	'#c32a2a',
	'#c37d2a',
	'#bac32a',
	'#8fc32a',
	'#4ec32a');

#Loop through each post
foreach ($result as $i=>$topfive)
{
    $postid = $topfive->ID;
    $title = $topfive->post_title;
    $commentcount = $topfive->comment_count;

	# store the most comments in the first iteration, as a non-zero value evaluates to TRUE
	$mostcomments = ($mostcomments) ? $mostcomments : $commentcount;

    if ($commentcount != 0)
    {
		#Determine the width for each post, the width of my sidebar was 260px, you will need to change this value to the width of sidebar (don't forget padding etc).
		$width = round((260/$mostcomments)*$commentcount,1).'px; ';

		# use $i to correlate to an element in $colors rather than 5 if() statements
		$background_color = $colors[$i];

		# Get the permalink for this post
		$permalink = get_permalink($postid);

		# Use heredocs to output, to save on 1001 echo statements
		# Closing COUNT; is intentionally indented weird (see docs for why)
		echo <<<COUNT
			<li style = "width:$width;background-color:$background_color;">
				<a href = "$permalink">$title</a>
				<div class = "comment_no">$commentcount</div>
			</li>
COUNT;
    }
}

?>

</ul>

I decided to insert this code into my sidebar, however you can put it anywhere on your blog.

Add a little CSS

#most_commented a {
        color: #000;
        font-size: 14px;
}

#most_commented a:hover {
        color: #fff;
}

#most_commented li {
        position: relative;
        min-height: 40px;
        opacity: 0.9;
        margin: 0 0 -15px 0 !important;
        padding: 15px 10px 15px 10px !important;
}

#most_commented li .comment_no {
        position: absolute;
        top: 12px;
        right: -11px;
        padding: 5px;
        color: #efefef;
        background-color: #101010;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
}

Done! Easy as pie

Stay tuned! I plan on implementing this for most viewed posts and most tweeted/dugg posts

Step 1

Let’s get started! Boot up photoshop and create a new canvas. Set width to 550px and height to 250px. Press OK and you should have a brand spanking new canvas ready to draw your pixel perfect menu. If the canvas doesn’t have a background then go ahead and press Shift + F5 and fill the layer to white. I added a radial blur to spice mine up a bit.

Start off with a nice background

Step 2

Grab the marquee tool (M) and draw a rectangle from one side two the other. Create a new layer by pressing Ctrl + Shift + N and fill the area with any colour. Double click the newly create layer and add a gradient overlay. I chose a linear gradient with a dark and lighter shade of red. Also add a black outer stroke, and set opacity to 90ish percent (if you used different colours for your gradient overlay then you may have to lower this).

Add a background for our menu

Step 3

To add a shine to any object in photoshop is fairly simple. Hover your cursor over the thumbnail of the menu background layer whilst holding Ctrl. The cursor should change to a one with a dashed box on top of it. Left click to select the area of the menu background.Now grab the marquee tool, hold alt and draw a rectangle that covers the bottom half of the menu background. You should now just have the top section selected. Create a new layer, fill the selection with white and reduce opacity to 2%.

Add a shine

Step 4

Now onto the menu itself, select the rounded rectangle tool (U) and draw a button onto your menu background. The colour of the rectangle is up to you. I just made mine a lighter shade of red. Now to add some crisp borders. Double click on the rounded rectangle layer and add a white outer stroke and reduce opacity down to around 20%. Now add a black inner glow with the opacity set to 80% (again, play with these values until you’re satisfied). Set the choke to 100% and size to 1. I also added a gradient overlay, from dark to light red (very subtle).

Add a pixel perfect button

Step 5

To make the selected/pressed state you just add a black inner shadow with an opacity of 60%, angle of 90 degrees, distance of 3 and size of 3. Add some text with a black drop shadow, an opacity of 20%, distance of 1, spread of 100 and size of 1.

Add an inner shadow

Step 6

To make the normal state, select the area of the button using the method in step 3. With the button selected click on select from the top menu, choose modify and then contract. Contract the selection by 1px. With the gradient tool (G), select or create a gradient that starts from white with 100% opacity to white with 0% opacity. In a new layer, draw this gradient from the top to the bottom of the selection. Now contract the selection again by 1px and press the delete key. Set the layer to overlay and reduce the opacity until you are happy.

Add another pixel perfect button, this time with a shiny edge

Step 7

Repeat steps 4,5 and 6 to add more buttons to the menu and that’s it! Easy I hope you enjoyed this tutorial. If you have any queries then please feel free to leave a comment. I will try to respond as soon as possible.

Continue to add buttons for each link