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.

Sam Brown a freelance web designer and blogger has kindly given up a few minutes of his time to answer a few questions about web design and freelancing.

He talks about how he got his first freelance job to what his favorite color and font is. If you are a designer wishing to enter the freelance world, Sam offers a great insight into becoming a freelance web designer.

Let’s begin

Who are you Sam?

My name is Sam Brown, I am a freelance interface designer and web standards developer from Edinburgh Scotland.

When did you first become interested in design?

It was the mid ’90’s and I was just starting high school, my father brought home a HTML book from I don’t know where and I started tinkering with web sites in Notepad on my Win 95 machine. This was where it all started for me, I then took a Multimedia Design course at a Technology High School then moving on to Computer Graphics College and Uni before leaving to pursue my freelance career.

How did you teach yourself how to design?

Trial and error initially, the few years I spent at Uni helped me learn the fundamentals of design but for me it was all about actually getting out there, doing it and progressing my skills over time.

When and how did you get your first client?

My first real client that wasn’t a site of my own or a family friend had posted a message on my Uni noticeboard wanting a site design for his property business. I called, met and landed the job that same day. This was around 2003, I am still working with this client to date.

Would you rather have a full-time job or freelance?

Freelance, without a shadow of doubt. I worked at a boutique web design agency after leaving Uni in Sydney Australia for a year and while I enjoyed the experience and my time there it left me in doubt that I wanted to continue working as a freelancer thereafter. The flexibility and power of choice I have running my own business means I probably couldn’t go back to working for someone else.

How do you tackle design briefs?

By tearing them apart, I usually print them and end up scribbling notes all over them. Discussing them with the client after receiving them is always the best approach, making sure that we are both on the exact same page and that nothing is misinterpreted.

Do you feel qualifications are more important than experience?

Absolutely not, I completed high school and went to Uni for two years only to leave to do actual work. I had taught myself design and development from an early age and I spent two years at University learning the same things and worse still, not the right way – there is nothing better than actually getting out there and doing what you love to do. Experience over qualifications every time.

How has writing a blog affected your freelance career?

Perhaps by bolstering my name on the web, I started and continue to write my blog the way I want to write it – I never started it to gain new clients or reputation, simply as a place to write my thoughts and opinions. Lately however I do seem to get just as many requests for work through my personal blog as I do my actual portfolio site so in essence it has helped.

Where do you find inspiration?

Everywhere and anywhere that isn’t another web site – I fear to many people rely on gallery sites for inspiration, it’s magazines, books, architecture and physical design that inspires me most.

Is there anyone you look up to in the design community?

Everybody. It doesn’t matter if it’s a big name, or someone straight out of school. I admire everyone in our community, there is a serious wealth of talent out there. People are doing wonderful and amazing things and pushing our industry all the time, no-one should be overlooked.

Favorite colour and font/typeface?

Blue and FF DIN.

What are your top five favorite website designs?

That’s really tough. I absolutely love Simon Collison’s redesign , the new Panic blog is equally nice and the one site I wish I could steal the design of is Wilson Miner.

What’s your favorite style of website design and why?

Clean and simple aesthetics appeal to me most, it is my particular style of choice and I enjoy coming across other sites that pull off this minimalistic style well.

Are there any books or websites you’d recommend for designers?

Dan Cederholm’s new Handcrafted CSS is a real treat, and if you are in need of some inspiring images definitely check out FFFFound.

Where would you like to be in 5 years time?

I’m not sure where I would like to be in 5 months time, never mind 5 years. I’m all about here and now, I’ll worry about 5 years time in 5 years time!

Any last words for the aspiring designers trying to follow in your footsteps?

Work hard, never stop learning, stay on top of all the latest techniques and partake in the community you aspire to.

Thank you very much for taking the time to answer these questions Sam. If you have any questions for Sam, I am sure he would be more than willing to reply to them in the comment section.

I am proud to announce the redesign for CreativityDen is complete, it has been a crazy couple of weeks but I think I am finally done. The design is completely different from the last but not to worry I have explained every last detail. I hope you like the new CreativityDen and I look forward to any feedback you may give. Oh, and I am also giving away a free ticket to the Future of Web Design Conference to celebrate. Enjoy!

The design

A focus on content

Whilst redesigning CreativityDen I had a number of objectives that I wanted to achieve. The first was to reduce the number of static elements – areas that stay the same and usually contain some sort of navigation. After a couple of visits these areas just appear to become wasted space. Having a large space in your sidebar dedicated to Social Media seems unecessary if the reader will only use it once. I also came to realize that as the subscriber count grew, the static content on the actual website would seem less and less important as subscribers tend to just isolate themselves to their RSS Readers instead of visiting the website.

The design that emerged was one of simplicity. The term ‘Content is king’ has haunted my mind for a number of weeks now. Everyone visits a website for it’s content, even if the design is terrible, you still want to read the latest news! The design is unlikely to prevent but can distract you from reading the latest headlines. With that said, a design that removes any distractions will let the content be King.

Typography

After Andrew redesigned MyInkBlog I was impressed by the beautiful typography. After he mentioned Typekit in his launch post I just had to get my hands on it. Originally I wanted to use Blue highway for the logo and heading type however as this font wasn’t available I instead chose the hugely popular (and free!) Museo and Museo Sans. I’m glad I did! After staring it for over a week now, I can’t understand why I didn’t choose it in the first place. I also tried to improve the post typography, with more defined headings and a spacious line height.

After joining Typekit I was given 5 invitations, refer to the end of the post for your chance to win one.

jQuery

After fiddling about with jQuery for a couple of months I wanted to see if I could implement it into the design. jQuery was by no minds a requirement but it adds character. Smooth fades and animations worked wonders with the design. I found that the animations seemed to compliment the roundness of the design.

CSS3

As well as including some jQuery I also made use of a of couple of the excellent new properties available with CSS3. The border-radius property allowed me to round every area easily and the text shadow worked great for aliasing the Museo type (for the Windows users).

Comments

After reading design blogs for the past couple of months, I noticed that comment sections tend to be neglected. For the owner of the design blog, a comment tends to mean your website is being read and that its popularity is increasing. This may be true but it is important to read and reply to readers who have taken the time to leave an in-depth comment.

Even when they have, the design of the comment section can sometimes degrade these types of comments. A comment can be just as good, if not better than the post you have written. I therefore wanted to make sure that any reader wanting to leave a comment has the space to do so. The new and improved comment section is simple but allows the commentor to be heard with the given space they deserve.

Navigation

In my opinion the navigation on the previous design was appalling. Two menus, one above the logo and one below. The logo was suffocating. However, now the logo has been separated from the navigation. In my experience people tend to scroll and browse the page they are on before they navigate to another page. I decided that the most important navigation element that the new design required, was to be able to filter or browse through the available posts. The navigation would include all categories. As CreativityDen has quite a few categories, in an attempt to stick to my aim of reducing static areas, I decided to implement a drop down menu with the name “Filter by category”. Other navigation can be found when needed.

The network

Not only did I want to redesign CreativityDen, I wanted to expand and develop it. I had a number of options or directions to choose from. I always wanted to add a gallery of the finest web designs, so that was the first to be made. I also had another idea, which was to add a chat area. A place where designers can come and discuss the problems they’ve been having with their design, to get feedback on their latest piece of work or to simply chat and unwind. I have also decided to have scheduled talks and perhaps live interviews, so stay tuned!

The CreativityDen network therefore currently consists of three sites: the Blog, the Gallery and the experimental Chat. I tried to make navigation between each site effortless. When loading any CreativityDen page you should notice the two arrows next to the site name in the logo. Hover over this to reveal a link to the other sites on the network.

Connect with CreativityDen

CreativityDen has now invaded a number of websites. If you have a Facebook or Flickr account why not connect with us and receive updates on the latest design news and inspiring designs.

• Twitter – Follow CD on twitter to receive regular updates on the latest web design news as well as general banter from yours truly.
• Tumblr – You can also follow CD on Tumblr, a website that makes micro blogging easy. Looked like fun so I thought I’d give it a go.
• Facebook – Everyone, well a lot of people have a facebook account. If your one of the 350 million people that do then feel free to check out CD’s fan page.
• Flickr – I don’t know why I hadn’t joined Flickr earlier. Will definitely look forward to showcasing your work on CreativityDen.
• Ember – Similar to Flickr, Ember allows you to upload images and also has a great community. Can’t wait to get involved!

To celebrate, a competition

Future of Web Design

In light of the relaunch of CreativityDen I have an awesome competition to announce. I currently have a student conference ticket for the hugely popular Future of web design Conference in London. I have spoken with the Carsonfied team and then have let me change the name on the ticket, so anyone has the chance to go!

For your chance to win this ticket all you have to do is leave a comment saying why you would like to go.

Typekit

Along with a ticket to the FOWD conference I also have five invitations for Typekit. For your chance to win an invite, all you have to do is fan CreativityDen on it’s facebook page and leave a comment on the wall.

Each competition will last until Friday 12th of March .The winners will be chosen using random.org and announced later than day. Good luck!

Final Words

I just wanted to say this has been the most thrilling two weeks of my life in a long time! I have enjoyed every bit of the redesign and just hope you love it. Stay tuned for some awesome guest posts and well as interviews with some top designers!

Love ya! Liam McCabe

Background

Slab serif printing type was first introduced around 1815 and was used primarily with advertisements, posters and flyers. Vincent Figgins designed a typeface called Antique that soon encouraged others to follow similar patterns in serif design.

An excellent discussion regarding slab serif typography.

Clarendon model

Clarendon

Have some bracketing and contrast in size in the actual serif. Examples include Clarendon and Egyptienne.

Neo-grotesque model

Tutsplus

The Neo-grotesque model is currently the most popular type of slab serif type. Neo-grotesque have no bracketing and evenly weighted stems and serifs. The letterforms are similar to neo-grotesque or realist sans-serif fonts. Examples include Rockwell and Lubal Graph(as seen on the Tutsplus network).

Italienne model

Playbill

The Italienne model has a distinct difference, with the serifs being even heavier than the stems. This creates a sense of dominance as well as an attention-drawing effect. Some Italienne slab serifs, such as Playbill, have a characteristic Western appearance.

Typewriter typefaces

Typewriter typefaces, this one isn't slab serif but it's a fantastic photo!

Typewriter slab serif typefaces are named for their use in strike-on typewriting. These faces originated in monospaced format with fixed-width, meaning that every character takes up the same amount of horizontal space. Examples include Courier and Courier New (both Neo-grotesque model) and Prestige Elite (Clarendon model).

A collection of the best

Below I have collected a few of my favorite slab serif fonts both free and paid. If you have the money, I would thoroughly recommend the paid fonts. Some authors kindly supply a couple of free typefaces from their paid fonts.

Free Slab Serif Fonts

There a number of great sites where you can download free fonts, these include: Dafont, Fontsquirrel, Urban Fonts, Fontspace.

Nilland

Street Corner Slab

Alexandria

Chunk

Museo

Tertre

College

TypoSlabSerif

Paid Slab Serif Fonts

Many authors like to release their work on their personal sites, however many also like to use websites such as MyFonts and LinoType to sell their fonts

Archer

Trilby

Sentinel

Stymie

FF Tisa

Giza

FF Nexus Mix

Morgan

FF Unit Slab

I <3 New York

Showcase

Slab serif type is becoming more and more popular everyday. Since I started collecting examples of effective use of slab serif type, there has been a number of new websites that have launched using this type. A couple of them have been added to the end of the web design showcase.

Slab Serif Type in web design

Pallian Creative

Breezy Baby

Philadelphia

The Sew Weekly

Brian Hoff

Osmond Interactive

Envira Media

CreativeHunt

Festival Boreal

Edgepoint Church

Mutant Labs

Blue Sky Resumes

DesignWise

Mark Boulton Design

Day to day life

Not only are slab serif typefaces and fonts used in websites but they are also used in logos, brochures, magazines, packaging and much more. If I had a decent camera this showcase would have probably been twice as long.

Kim Florist

Nábytek

London County Council

HuntsVille

House of hoops

Golden Nugget

Bonanza

Launderette

Delicious

Love Ballads

ABCDE

Motel

One Sunday in December

Slab serif in Video

Beelieve

Bee

Efficient Design

Leditbee

Roklee

B

Nectar

BeeFlow

Beeheart

Onbuzz

This time we went down unda, all the way to Perth, Australia to talk with the well known logo designer Fabian Marchinko, better known by his alias Brandsimplicity. Let’s ask him is it really ’simple’ to ‘brand’ things when it comes to inspirational element such as this small insect that inspired me for this article.

1) Hello, Fabian! How and when did you decide to use an ‘bee inspired’ element for this brand, Onbuzz?

Currently I’m working with Brandbucket.com, redesigning some of their logos. This one caught my eye as the subject matter involved online chat, this name had that special hook that I look for…something I can bounce off and get the creative juices flowing. I tend to like a lot of Hollywood gossip chat sites and how they are sometimes very cutting or what I call “ With a sting in the tail” …see where I’m going…yep…cool! The “O” from the name in an abstract speech bubble, add a sting… to sell the message and we are home and hosed. Onbuzz is born, which is now available with the domain on brandbucket.com.

2) Can you pick out 2 or 3 more logos from this selection and tell us why do you like them?

This one by Alex is extremely clever, it works on so many levels. Using the swarming bee’s to form the “B” is outstanding, this whole concept is a brander’s dream… I’m also seeing a cool motion animation in my head for this one. What’s not to like about this next one, B by William. Cute to boot and beautifully executed by a very talented designer.

3) What do you think, why is this element so inspirational: is it the shape, color scheme, metaphor?

What I believe to be the most inspiring thing about the bee is they are tireless workers, always slogging away. Personally I feel they are a metaphor for life and how we are day in day out trying to make the honey for our families…too deep eh! Hey, they look cool!

4) Do you maybe know of some global brands that use the same inspiration for their own logo?

Beeline, mobile communication company from Russia.

5) Feel free to share here some interesting ways of using a bee in the logo design, especially if you had some other ideas for Onbuzz during the process?

At one stage I was going to explore the concept of a microphone sting, but at smaller sizes it did not reproduce well…so it got kicked to the curb.

Cheers for the interview Alen!

Fortune Film

Georgian Film

Filmaps

BananasFilms

Bryant Karnes

Carousel Media

Half Less

Filmlab

Accelerated PS Training

Cinema Cafe

We have an expert from this field, logo designer Muamer Adilovich from Bosnia and Herzegovina, a designer of this beautiful ‘Cinema Cafe’ piece but also a winner of Wolda award for a film industry
related logo. Let’s ask him a few questions about this element.

1) Hello, Muamer! Tell us please what inspired you to make this interesting fusion of coffee cup and a film role?

Hi everybody! Well I was thinking a lot about this name, Cinema Cafe, and remembered how I was playing with the used film roles from the old photo cameras as a kid. Interesting thing was pulling them out from their package which made them twirl into nice spiral forms: you all probably know what I am talking about and I’m sure most of you tried to play that way with them. So when I started to work on this logo I remembered that play and that spiral forms and I grabbed the nearest piece of paper and started drawing first sketches of it. After that it was a familiar process, from digitalization to stylization, etc. As a matter of fact, this logo looks pretty simple now when you look at it, but trust you me, it was technically really complicated to pull off.

2) Can you pick out 2 or 3 more logos from this selection and tell us why do you like them?

All of these logos are interesting in their way, but if I really have to I would pick the one of them: it is Filmaps by Siah Design. Logo is simple, original, it tells the story and reflects well the purpose of the company it represents.

3) What do you think, why is this element so inspirational and a bit trendy lately?

Film strip is an interesting form by itself, it has a kind of retro feel to it yet it’s still very contemporary and always actual, including the entire story behind it: the analogies, frames, light effects, movement, projection, the feeling. A lot of things can be inspirational if you are really looking around and learn, explore. When it comes to trendy I wouldn’t agree with that statement because it was in use before in a lot of interesting design forms such as business cards, posters, brochures. It has been here since day one representing companies that come from a field of movie production and movie industry. It can be used for other things as well, photography for example, but my first association when I see a film strip will always be a film/movie.

4) Do you maybe know of some ‘huge players’ in the movie industry that successfully used this element for their own branding needs?

New Line Cinema and MGM for example.

5) Can you share some quick tips about how to make logos of this kind to be original and interesting?

Making logos with film strips takes a lot of exploration, effort, time and experience. To make them original, good and interesting you really have to give your best in the means of conceptual thinking and execution skills as well. Quick tip: be good to people and respect others!

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!

Texas Longhorns Hockey

Boston Bruins Concept Logo

Timberwolves

Vancouver Canucks

Fresno Fuego FC

Mineros de parral

Nighthawks

S.H. United

OLMC Raider

RedDogs

This time we have a logo designer Milosh Radojevic from Serbia, better known as Geniuslogo. His ‘Red Dogs’ logo is featured here amongst 10 picked for the subject so let’s ask him a few questions about it.

1) Hi, Milosh! Tell us please what was the idea behind this logo and why did you do it in such an abstract way?

I did this logo for a hockey team from Austria but unfortunately the team had some structural problems and it never hit the league at the end so they didn’t use it after all. My idea was to use a bit different abstract style and to draw an original dog shape. Many people think that I did a good job here so I hope that they are right.

2) Can you pick out 2 more logos from this selection and tell us why do you like them?

Boston Bruins, incredible job, who wouldn’t love to have a T shirt with this logo on it? Matt is one of the best in this field out there! And the second one would be Canucks by John Slabyk, brilliant execution, he is also a master of the sport team logos.

3) What is your general opinion on sport team logos and what is the hardest part of creating one?

I am a big fan of this logo area and the hardest point is probably being original enough, which is nowadays truly hard in the entire logo design field. Sport team logo design takes a totally different approach because it ‘walks’ somewhere between the classic logo and an illustration so only a lot of experience can make you draw that line. I also consider myself to be a beginner here and still have a lot to learn from much better designers then me.

4) Can you tell us which sports do you like the most and who’s logos impress you by quality?

I am a huge fan of NFL and a classic football. Those sports are extremely popular in my country. If I had to pick out a few I would say Atlantic Falcons, Denver Broncos and Wisconsin-Milwaukee Panthers. I just love them!

5) Can you share some quick tips to fresh designers out there that might do a sport team logo soon?

Well, not any special tips here, it takes a lot of talent and just practice, practice, practice, as much as you can.