Moustache Mugs!

Visit Source: http://www.peteribruegger.com

Safe to say this is on my next to buy list! I will no doubt be the coolest kid at work! Just need help deciding which one to go for?

20 Super Clean Fonts Perfect for Minimal Style Design

Visit Source: http://webdesignledger.com

Web Design Ledger posted this great article showcasing 20 great font’s that are especially good for minimalistic designs. Another great point to make is they are all free! Go Nuts…

Chomp iPhone App

Visit Source: http://chompapps.com

A new iPhone App that attempts to take on Apple’s app store genius feature. Called Chomp, it is based around giving you app recommendations based on the reviews you give other apps. Probably not the best explanation their but its free so give it a try!

Nine Techniques for CSS Image Replacement

Visit Source: http://css-tricks.com

Chris Coyier wrote this great tutorial article I came across looking at nine techniques for CSS Image Replacement. I myself was only aware of a couple of these so its good read for anyone who actively uses this technique to freshen up on possibly better methods of doing the same thing.

Better html anchor, a jquery script to slide the scrollbar

Visit Source: http://www.position-absolute.com

Great jQuery script that gives you a smooth page jump anchor effect replacing the standard jump to links. This is really cool and you will probably have seen in on various sites around, well now you can use it on your site too.

50 Most Amazing Beautiful Blog Designs

Visit Source: http://creativenerds.co.uk

Creative Nerds posted this article showcasing 50 inspirational blog designs. Some great sites here and one to keep on record when your looking for some inspiration yourself!

30 Gorgeous iPhone App Interfaces & Icons

Visit Source: http://iphone.appstorm.net

The Appstorm guys posted this article last week and for an aspiring future iPhone app developer (nice title indeed) its a keeper! The post looks at 30 apps all look amazing! Not only good for inspiration but there are some good apps I didn’t know about here so take a look!

Right thats it for this week but be sure to check back next week! Tweet me @stugreenham if you find any interesting articles that I can use or you think is interesting and I will take a look!

Margin and Padding

You may currently be setting your margin/padding like this:

.class-name {
   margin-top: 10px;
   margin-bottom: 10px;
   margin-right: 10px;
   margin-left: 10px;
}

Shorthand allows you to shrink these four lines down to just one. Think of the margin as four values in clockwise order Top, Right, Bottom, Left. In the above code we have assigned a margin of 10px to each individual side of the element, but what you can do is change the four lines to just one line using the margin property and assign it four values in the clockwise order I mentioned just before (top, right, bottom, left) leaving us with this:

.class-name {
   margin: 10px 10px 10px 10px;
}

Taking this further we can again shrink this down even more depending on the margin values. We can group specific items together, such as Top / Bottom and Right / Left. Below are some examples of how you can shorthand margins in your css:

Example 1

• Top: 10px
• Right: 15px
• Bottom: 20px
• Left: 15px

This would be displayed using just three values because the left and right values are the same, so we just define top, right+left and bottom values, shown below:

.class-name {
   margin: 10px 15px 20px;
}

Example 2

• Top: 10px
• Right: 15px
• Bottom: 10px
• Left: 15px

This can be displayed using just two values because both the top+bottom and right+left values are the same, shown below:

.class-name {
   margin: 10px 15px;
}

Example 3

• Top: 10px
• Right: 15px
• Bottom: 10px
• Left: 20px

When in a situation where the top+bottom values are the same but the right+left values are different, we still have to display all four values as you cannot group the top and bottom values together because the left value would be read as if it was the bottom value. We can still use shorthand to display the css on one line, shown below:

.class-name {
   margin: 10px 15px 10px 20px;
}

Right that’s margin’s covered and for padding it is exactly the same method. All you have to remember is which order the four values go in then its pretty much common sense from there.

Backgrounds

Background’s are again a popular property that you are likely to assign at least once on each of your stylesheets, sometimes multiple times in which case this will come in handy. When assigning a background you may set an element any number of the following properties:

.class-name {
  background-color: #fff;
  background-image: url(image.gif);
  background-repeat: no-repeat;
  background-position: top left;
}

Again using shorthand we can combine all of these values into one using the background property. The order I usually put them in is as follows:

• color
• url (if required)
• position
• repeat / no-repeat / repeat-x / repeat-y

This means our code will now look like this:

.class-name {
  background: #fff url(image.jpg) top left no-repeat;
}

If you miss out a value then it will be rendered with the default, so if you don’t assign a background position then it will default to top left.

Fonts

Next up is fonts! Now I’ll have to admit that this is one I tend to just set line by line out of habit, but again there is a cool shorthand method to save you writing lines and lines of the same code.

Here are the more commonly declared font properties:

.class-name {
  font-size: 1em;
  line-height: 1.2em;
  font-weight: bold;
  font-style: normal;
  font-family: Arial;
}

We can take the five lines above and again make them into just one using shorthand. The main thing to note when shorthanding font properties is that you must declare both the font-size and the font-family or the whole thing will be ignored. Lets start by shortening just them two properties:

.class-name {
  font: 1em Arial;
  line-height: 1.2em;
  font-weight: bold;
  font-style: normal;
}

Within the font property we can also include line-height, font-weight and font-style. If you don’t declare these values then like the background property, the values will be set to the default values of normal.

Here is what the whole thing would look like going with the values above:

.class-name {
  font: 1em/1.2em bold normal Arial;
}

As you can see, using shorthand will save you having to write four extra lines of code and if you have a pretty major stylesheet this could cut it down dramtically!

List Styles

Lists are another property that can be shrunk down using shorthand. Typical List properties would include:

.class-name {
  list-style-type: disc;
  list-style-position: outside;
  list-style-image: url(image.jpg)
}

These three lines can be made into one simple line by defining the type, position and image source under the property list-style. Please note, if any of the values are not defined then they will display as the default. Here is what the shorthand will look like:

.class-name {
  list-style: disc outside url(image.jpg);
}

Fairly straight forward and thats about it for List Styles.

Borders

Border’s can be defined in several ways, if you are currently defining a width, color and style on seperate lines in your stylesheet (which is unlikely) then you can quickly edit this into one nice clean line of code, taking this:

.class-name {
  border-width: 5px;
  border-color: #000;
  border-style: solid;
}

and ending up with this instead:

.class-name {
  border: 5px solid #000;
}

If you want to define several sides of the element with different values then you can do so like this:

.class-name {
  border-top: 5px solid #000;
  border-right: 10px solid #000;
  border-bottom: 5px solid #000;
  border-left: 10px solid #000;
}

The example above contains four lines, which could have been twelve had you defined seperate style, width and color values. You can (if you want to) get the same effect as the above example by using the following:

.class-name {
  border: 1px solid #000;
  border-width: 5px 10px 5px 10px;
  border-color: #000;
}

Although this will achieve the same effect, personally I prefer the first method as I find it easier and quicker to type as it requires less thinking lol.

Conclusion

Whether you use it or not, you must agree using CSS Shorthand does make sense when thinking you can cut down the number of lines you have to code, as well as making your CSS Stylesheet smaller in size (maybe a little but still!) then it’s the obvious choice. Let me know what you think and which one’s you use or if I have missed anything!

New Growl Styles

Visit Source: http://fixedgear.ca

Christopher Lobay has posted two new notification styles for the popular Mac app Growl which can be downloaded for free.

10 Fresh Must Read Blogs For Creatives

Visit Source: http://www.inspiredm.com

InspiredMag have posted a great article showcasing 10 ‘Must Read’ blogs that are great for us ‘Creatives’. There are some great reads here and lots of useful resources worth bookmarking.

Exobotics

Visit Source: www.exopolis.com

A very clever site built in Flash that lets you build a robot (Cool I know) and then bust some moves with it to a nice dance beat. Give it a try, very cooly designed!

35 CSS-based Layouts that Look Awesome

Visit Source: http://net.tutsplus.com

Nettuts+ posted a article showcasing 35 awsum CSS based websites! Another great article to bookmark for inspiration at a later date. There is a whole range of differently styled sites here so something for everyone.

Outstanding Website Background Guide: 60+ Impressive Resources

Visit Source: http://www.noupe.com

Noupe’s article on Website Background’s offers tonnes of great links and resources for getting the perfect website background. There are plenty of Tutorials, Texture Packs and Links where you can get loads of free background tiles/images.

30 Website Navigations that Make You Wanna Click It

Visit Source: http://webdesignledger.com

Web Design Ledger (One of my favourite subscribed to websites) posted this awesome article showcasing 30 Websites with class Navigation menu’s. A great post and really good source of inspiration when building a design concept.

Hacked STOP Signs

Visit Source: http://www.urlesque.com

Great set of Stop Sign’s that have been modified and there are some funny ones! My favourite is “STOP! Hammertime!”.

Rio Ferdinand Online Magazine

Visit Source: http://www.rioferdinand.com

Not design related but a cool site anyways. Footballer Rio Ferdinand has started an online magazine which is a great read. He interviews different celebs each edition and covers alot of general stuff.

24 Ways: CSS Animations

Visit Source: http://24ways.org

Tim Van Damme posted this cool article on 24ways about CSS Animations, showing you how to create one yourself. A great read and this is definately going to be something that we will start to see more and more of.

7 Open Source And Free URL Shortener Scripts To Create Your Own

Visit Source: http://www.webresourcesdepot.com

Web Resource Depot posted this article reviewing 7 open source URL Shortener scripts that are all free. I went for Yourls myself but a handy link for anyone else wanting to get on the URL Shortening bandwagon :)

Creattica (Visit Website)

CSS Mania (Visit Website)

Web Creme (Visit Website)

Unmatchedstyle (Visit Website)

Design Shack (Visit Website)

Haystack (Visit Website)

Design Fridge (Visit Website)

Nice Stylesheet (Visit Website)

CSSREMIX (Visit Website)

CSS Import (Visit Website)

Best Web Gallery (Visit Website)

Delicious CSS (Visit Website)

Inspiration Up (Visit Website)

CSS Leak (Visit Website)

CSS Beauty (Visit Website)

Best CSS Design (Visit Website)

Design Meltdown (Visit Website)

CSS Dsgn (Visit Website)

CSS Bag (Visit Website)

CSS Luxury (Visit Website)

CSSLine (Visit Website)

If you have any further recommendations then comment and I will be sure to add them to my post. Thanks for reading!

This is a cheeky little tip that will help preventing ‘spam bots’ getting hold of your email address. Next time you have to display your Email on your website, use the following code….

CSS:

span.test {
  direction: rtl; unicode-bidi:bidi-override;
}

HTML:

<p><span class="test">moc.tset@tset</span></p>

The CSS reverses the direction of the text, so you write your email backwards, the CSS sorts it out so it displays fine on your website, but this way, ‘spam bots’ can’t read your email! woop!

To remove this border, all you need to do is add the two lines of code shown below to your sites Stylesheet and wahlaaa, gone! Many of the big sites haven’t even bothered to do this, a few to mention are Microsoft, Twitter and YouTube.

Anyways, here is the code…

a:active { outline: none; }
a:focus { -moz-outline-style: none; }

I would be greatful if you could take a second to help promote my blog and share this link with any of your favoured networking sites using the link below…