Jon Mulholland -

Mastering CSS; Styling Design Elements - Smashing Magazine

CSS isn’t nearly as tricky as some people tend to believe. Below are fresh tips and techniques for creating and styling design elements with CSS. They’re a good place to start if you’re new to CSS but are valuable even if you’re a veteran designer. Not all the techniques are strictly CSS; some include integration with JavaScript or XHTML to extend the functionality of your site.

Great, bang up to date CSS tutorials covering layout & UI techniques, navigation & menus, galleries, typography and icons & buttons. Going to take some of these on holiday to do on the plane journey.

Loading mentions Retweet
Filed under  //   css   tips/tricks   webdesign  

Comments [0]

Useful HTML keyboard shortcuts for TextMate beginers

It's taken me a while to realise the full awesomeness of TextMate as a code editor...

I've used Coda for web development on my MacBook for ages - occasionally though I would hear someone raving about TextMate and take a quick look.  Unfortunalty I'd quickly get intimidated by the steep learning curve for mastering it's keyboard shortcuts and promptly delete it before the end of the trial period and go straight back to Coda.

Well last Sunday I installed TextMate again, and for some reason this time I've really stuck with it.  I've put some effort in this past few days to learn it's keyboard shortcuts and boy am I glad I have...

With a bit of effort TextMate becomes so useful it's almost Zen like.  It's such a great focused environment for working in, it just seems to help me get more done more quickly.  Training myself to use new key combinations will take a bit of doing, but I've seen enough in the past few days to know that it's going to be worth it - this time I'm sticking with it.

For others thinking about switching to TextMate the best advice I can give is to focus hard on shortcuts most related to whatever language it is you code in.  In my case it's HTML, so I thought I'd share some of the most useful shortcuts I've managed to learn this past few days:

Control + Shift + V  Opens a window and validates the document HTML with the W3C Markup Validation Service.

Control + Shift + <  Opens a pair of opening/closing HTML tags.  By default these are set to <p> but with the element value selected so that it can quickly be changed.  Hitting the Tab key jumps the cursor into the element content.

Control + Shift + W  Wraps selected text with HTML tags.  By default these are set to <p> but again the element value is highlighted so that it can quickly be changed.

Cmd + Shift + L  Selects the current line.  Very useful when used just before the Control + Shift + W shortcut!

Option + Tab  Indent selection, can be used to easily indent an entire line, paragraph or just a selected item.

Option + Shift + Tab  Un-indent selection, again can be used to un-indent a selected line, paragraph or just a single item.

I've also found this exaustive TextMate keyboard shortcut cheat sheet.  Clearly I've got quite a long way to go before I become a TextMate master, but I'm sticking with it.

Loading mentions Retweet
Filed under  //   apps   textmate   tips/tricks  

Comments [0]

Aspect ratio and scaling images CSS tip...

If you are making an image scalable using css, for example:

img { width: 100%; }

it is worth also setting the adjacent dimension to auto, overiding any previously defined value:

img { width: 100%; height: auto; }

This will maintain the aspect ratio of the image and stop it from being stretched or squashed.
via James Fenton from tipster.carsonified.com

What a handy little CSS tip.

Loading mentions Retweet
Filed under  //   css   tips/tricks   webdesign  

Comments [0]