Speckyboy Design Magazine

Weekly Web Design and Development Inspiration – N.17

admin — Sat, 21 Nov 2009 08:29:00 +0000

This is our selection of reader recommended and sites that I have discovered in the past week. There is have been a lot of new high quality web designs around this week, I hope you like my favorites.
Send us a recommendation for next weeks Weekly Web Design and Development Inspiration (for our review), by clicking here: Submit News.

SiteCake – Site Editing Made Easy

Moxie Sozo

Mathieu Schatzler

Rebecca Barry

Kim Burgess

Inspire boranikolic.com

Amelia Earhart Book

Go Media

LBi Atlanta

72nd Ave.

Curb Innovative

Paradise in Motion

Railef Desarrollos Web

Toopi.in

Brad Colbow

Jack Cheng

EUROPE BY DESIGNERS

Flywheel Design

Aalt Design

Paravel

Mert Gutav

Murmuri Barcelona

You might like… previous Weekly Inspirations

10 Online Tools and Apps to Help Optimize and Format CSS

admin — Fri, 20 Nov 2009 18:07:10 +0000

Why would you ever need to optimize (or optimise, which ever spelling you prefer) or reFormat your CSS? Optimizing your CSS will not only allow your web page to load quicker, it also increases the durabilty and resilience of your site when there is a spike in visitors (i.e. the Digg effect) and, for me, the most important part is that it gives you more readable code.

Some of these tools are fairly basic, offering optimization and formatting without many options or user control, which are fine for coders with limited knowledge. For the CSS pros, there are some advanced tools and apps that will allow you to choose the level of compression and also offer many options regarding your optimized CSS. You can choose to eliminate unused selectors and properties, unwanted whitespace, tabs, comments and you can even change the longhand declaration to shorthand notations.

No one who codes there CSS has complete confidence that it is perfectly formatted, this is were these tools come in and help.
Please note, these tools are not CSS validation or error checkers, if you are looking for that try the The W3C CSS Validation Service.

flumpCakes Online CSS Optimiser/Optimizer

This feature rich tool takes your CSS file and parses and outputs a leaner version, removing any redundancies and attributes which are not needed. Here is a full list of what it can do:

Removes comments
Removes white space (such as excess spaces)
Converts RGB values to Hex (they’re smaller)
Converts Hex values in the format #RRBBGG to #RGB.
Changes zero values with a size specified to 0. (0px would change to 0)
Changes values such as border: 1px 2px 1px 2px; to border: 1px 2px;
Converts multiple background, font, margin, padding, list attributes into a single attribute
Converts multiple border values into single attributes
Option to convert absolute values (PX & PT) into relative values (EM)
Groups style attributes and values which appear mutliple times into a single style

This tool reads CSS just like a browser would. So using hacks which are browser specific will give random results, make sure any hacks are removed before use.

Styleneat – CSS Organizer

Styleneat organizes and standardizes your CSS – selectors, sub-selectors and properties – in a structure that makes it easier to define page areas making it easier to see how they relate to each other.
With this tool you have the option of sorting the properties alphabetically, sorting the selectors alphabetically and you have the choice of multi or single line formatting.

Clean CSS – Optmize and Format your CSS

CleanCSS is a CSS optimizer and formatter with a reasonable amount of options, that takes your CSS code and makes it cleaner and more concise.

CSS Compressor – Online Code Compressor

CSS Compressor, obviously compresses the CSS to reduce the code size and make your web pages load faster. You can select from four levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression.

Code Beautifier – CSS Formatter and Optimiser

This tool is based on the popular open-source CSS parser and optimizer, CSS Tidy. Code Beautifier offers the most options compared to all of the tools in this article.
You can sort and merge selectors and properties, compress colors and font-weights, choose between lower and uppercase formatting and even has the option to discard invalid properties.

CSS SuperScrub

CSS SuperScrub can significantly reduce the size and complexity of your CSS by stripping out unneeded content, stripping redundant calls, and intelligently grouping the remaining element names.
There are limited options with this tool, which is no bad thing, it works exactly as intended: It scrubs your CSS.

Online CSS Optimiser

Online CSS Optimizer/Optimiser is a web tool for reducing the file size of cascading style sheets. In order to save more space optimized files would be messy even so you may output it as a file. Non-valid or hacked (for certain browsers) CSS files may result in error.

CSS Compressor – CSS Drive

Use this utility to compress your CSS and increase the loading speed of a web page and save a little on bandwidth as well. You can choose from three levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression. The "Normal" mode should work well in most cases, creating a good balance between the two.
It also has the option of an Advanced Mode that gives you more compression options.

CSS Analyser

The CSS Analyser is a small utilty that allows you to check the validity of your CSS against the W3C's validation service, along with a color contrast test, and a test to ensure that relevant sizes are specified in relative units of measurement.
If the CSS is specified by a URL, it will be loaded into the text area to offer an option to make changes for testing without having to re-upload.

CSS Redundancy Checker

CSS Redundancy Checker is a simple tool with one simple, yet useful function. It is a tool that finds CSS selectors that aren't used by any of your HTML files and any that are redundant it removes.

CSS Code Formatter and Optimizer – CSS Portal

Yet another code formatter and optimizer, basic, but one that is worth mentioning and trying.

You might also like…

CSS References, Tutorials, Cheat Sheets, Conversion Tables and Short Codes »
The Blueprint CSS Framework – Tutorials, How-to Guides and Tools »
50 Essential Web Typography Tutorials, Tips, Guides and Best Practices »
50 Useful Tools and Generators for Easy CSS Development »
20+ Resources and Tutorials for Creative Forms using CSS »
24 CSS (in some cases with jQuery) Navigation and Menu Tutorials »
22 CSS Button Styling Tutorials and Techniques »
15 Amazing jQuery Image Gallery/Slideshow Plugins and Tutorials »

50 Impressive Magazine and Newspaper Styled Web Designs

admin — Wed, 18 Nov 2009 15:15:19 +0000

It is wrong to define the magazine style in web design as magazine style (does that make sense?). It should have, perhaps, been called newspaper or tabloid styled, it does have that look and feel. To define it, the magazine style within web design are traditionally web sites that are content heavy, by content I mean text and not images, that display there content in blocks or columns of headings with a small excerpt that leads to the full article.
Unlike other web design styles that can use larger images to compliment the design, Magazine is limited to being designed within the parameters that the content (namely, the text and the occasional thumbnail) dictates, and that is were the problem lies. How do you design a web site that is purely text and make it visual eye candy?
Carrying on with our Web Design Styles Series, today we are looking at successfully designed and impressive Magazine style web sites.

This is part five of our ongoing Top 50 Web Design Styles, you can view the previous parts of the series here:
50 Inspirational and Fresh Minimally Designed Web Sites »
50 Creative and Inspirational Personal Portfolio Websites »
50 Inspiring Web Application and Service Web Site Designs »
50 Examples of Effective Uses of Typography Within Web Design »

Creative and Original Designs

Canvas Magazine

NewSugar Magazine

R.fm – The Finest Blend of Club Culture

CreativeDepart

Zaum & Brown

UX Magazine

Reform & Revolution

DesignersCouch

Web Design Ledger

Clean and Minimal Designs

Factory Magazine Dot Com

Lushpad

Creative Review

Typographica

SketchNorth

GOOD

San Diego Italian Film Festival

Design Taxi

Smoking Cow

MOYTOY

SPD.ORG

Dollar Dreadful

4Wall

Wired News

JPG: Your World in Pictures

Clutch Magazine

Global AIDS Alliance

Pitchfork

Life of my Story

The Post Family

Smashing Magazine

Dark Magazine Style

SpaceCollective

BlackBook Magazine

WWD.com

The Big Noob

Traditional Newspaper Style

Guardian.co.uk

The Sun Magazine

La Gazzetta dello Sport

Telegraph.co.uk

CNN.com

Graphically Enhanced Magazine Designs

Atari Video Games

Trongate 103

Bumbershoot

UGSMAG

Rua de Baixo

Jacksonville Landing

Loop – News and Nonsense

One Nation Magazine

Giant Magazine

Ecoki – The Eco-Lifestyle Community

The Nest

View more from the web design styles series

50 Inspirational and Fresh Minimally Designed Web Sites »
50 Creative and Inspirational Personal Portfolio Websites »
50 Inspiring Web Application and Service Web Site Designs »
50 Examples of Effective Uses of Typography Within Web Design »

You might also like…

A Showcase of 35 Beautiful Typographical Illustrations »
50 Essential Web Typography Tutorials, Tips, Guides and Best Practices »
45 Stylish and Creative Typographical Desktop Wallpapers »
29 Cool and Creative Text Effects Photoshop Tutorials »
50 Essential Web Typography Tutorials, Tips, Guides and Best Practices »
42 Amazing Resources for Inspirational Typography »
21 Typography and Font Web Apps You Can’t Live Without »
25 Creative Typography Wallpapers for your Desktop »
25 Examples of Amazingly Creative Typography Art »
6 Amazing Typography and Font PDF Magazines to Download »
Top 15 Inspirational Typograhy and Font Blogs »
20+ Free and Stylish Typography Wordpress Themes »

This Weeks Twitter Design News Roundup N.11

admin — Tue, 17 Nov 2009 15:47:32 +0000

Again, we have another selection of cool resources that we have tweeted about in the past week.
If you have any cool links that you would like to share, do not hesitate to send them to us here: Submit News.
You can follow us (if you like) via Twitter here: twitter.com/speckyboy.

Freebies: Social Media Icons for Your Blog

Google Chrome OS To Launch Within A Week

Google’s Chrome OS project, first announced in July, will become available for download within a week, Techcrunch has heard from a reliable source. Google had previously said to expect an early version of the OS in the fall, keep an eye out for it.

10 Ways for Designers to Boost Productivity

All designers who wish to succeed at one point or another aim for ways to boost their productivity levels. Many of us spend a great deal of time searching for the right tools, and a lot of these end up setting you back one way or another. Part of being a designer also means you’ll have to deal with criticism. And as you begin to gain more experience you’ll soon realize that you’re your best critic. In order to boost your level of production you’ll need to asses the areas in which you need to improve on.

Print Design to Web Design: Comparative Analogies

In some ways working in InDesign is similar to CSS, and in some of the ways it’s not. In this article from CSS Tricks, they explore the similarities and the differences.

The Best Free Icon Sets of 2009

In 2009 we’ve witnessed many talented and generous designers creating tons of amazing stuff and giving it away for us to use. There were plenty of free sets created this year, and this collection from WDL does a damn good job in bringing the best all together.

15 Top Tips for Band Photography

This simple 15 step guide aims to give you an insight into the world or music photography, both for promo portrait shots and in a live setting.

50 Sketchy Vector Drawings Made with Vibrant Lines

We commonly think of vector graphics as super clean lines made up of simple geometric shapes. This is far from the limit to what you can do with vectors though. There are lots of inspirational artists creating sketchy vector work made up of high energy vibrant lines. If you like your vectors rough, then check this post out.

Why is Social Interaction Important For a Website

This article discusses the importance of social interaction for a web site. It asks the question, Why is Social Interaction Important For a Website? And discusses the Advantages of Social Interaction. Good reading.

How to Create a XML and HTML Sitemap for WordPress

If you are a webmaster and know a thing or two about SEO, then you should know that having a Sitemap on a website can be very helpful. There are two types of sitemap that you can make. One is a XML sitemap and then there is an HTML Sitemap. In this article theyl share the WordPress plugins youwill need to create an XML and HTML Sitemap.

20 Free Mac Apps For Web Designer’s Toolkit

60 Trendy Web Design Interfaces Created In October

This article has a great round-up of the best interface mockups found on Deviantart in October.

Color: The Next Limited Resource?

As a designer, it is important to be aware of the trending colors, and how they are being applied in products and work produced today. What really isn’t being discussed by the design world at large though are the limitations being set on color. Color is as free for us to use as the air we breathe… or is it?

40 Free High-Quality WordPress Themes

Simply-Buttons v2

Cyclo.ps – Royalty Free Stock Photography Search Engine

Previous Twitter News…

Twitter Design News Roundup N.09 »
Twitter Design News Roundup N.08 »
Twitter Design News Roundup N.07 »
Twitter Design News Roundup N.06 »
Twitter Design News Roundup N.05 »
Twitter Design News Roundup N.04 »
Twitter Design News Roundup N.03 »
Twitter Design News Roundup N.02 »
Twitter Design News Roundup N.01 »

20+ Easy to Use jQuery Text Effects and Animations

admin — Mon, 16 Nov 2009 16:04:28 +0000

You don’t need to be a hardcore coder or developer to use jQuery, it is an easy and useful JavaScript library and with basic knowledge you can easily insert jQuery plugins and spruce up your next web project.
Font Embedding Services are all the rage at the moment, and for some, maybe a little bit overblown. What if you wanted something simpler, a little drop-shadow here, a simple text animation or even dynamically resize text. In this post we have collected 20+ simple and easy to use jQuery text effects and animations.

FontEffect jQuery Plugin

The Font Effect plugin uses no images to add an Outline, Shadow, Gradient or Mirror effect to your html text and no additional CSS is necessary. All effects are contained in the plugin (only 7k minified) and do not interfere with page rendering in older browser or browser with javascript disabled.

Demo and Download

Textgrad – A jQuery Text Gradient Plugin

This simple, yet effective adds a basic gradient effect to text. It contains four functions appliable to a selection, they are: spanize, unspanize, textgrad and textscan.

Demo and Download

jQuery Label Effects

The Label Effects is a plugin that can apply highlight and shadow effects to anything that contains text. Several preset effects can be invoked via a single option that provides values for most of the other settings, they are: Raised, Sunken, Echoed, Floating and Shadow.
There is also a useful generator that allows you to select the style of text you want and it generates the code for you. (Click on the the plugins 'Custom' tab for the generator).

Demo and Download

Text-shadow in IE with jQuery

Most of major browsers support text-shadow, yes, you guessed it, IE doesn't. This handy jQuery plugin helps you get around that.
A handy little thing of Internet Explorer is that it gives you access to CSS declarations it does not understand, so this plugin simply requests the text-shadow value of a given element and processes that.

Demo and Download

jQuery Grab Bag – Text Effects Plugin

This plugin offers a wide array of text effects, they include Scrambled Writer, Unscramble, Rot-13 and a Typewriter effect.

Demo and Download

jQuery Approach

Approach is a jQuery plugin that allows you to animate style properties based on the cursor’s proximity to an object. This plugin is not strictly limited to text effects, it can also be used for images.
Note: The plugin accepts any CSS property that is accepted by jQuery animate, and also accepts color-based parameters, if you are using the jQuery UI Effects Core.

Demo and Download

jTicker – Typing Text Effect using jQuery

jTicker is a jQuery plugin that can be used for creating the typewriter effect without the use of flash. This effect comes in handy when you want to force the visitor to read the text, but should be used only when necessary, as the usability suffers. jTicker can be declared on any element and can be stylized using CSS. You can also use event buttons to play, stop and control the speed of the effect.

Demo and Download

Effects jTypeWriter v1.1

Similiar in effects to the plugin above, jTypeWriter is a useful plugin for re-creating the effect of a typewriter in any number of HTML text nodes. jTypeWriter can handle the type writing of more than one nodes, and type the characters in sequential order.

Demo and Download

3D Flying Text in jQuery

In this tutorial you will learn how to animate text with jQuery. You will build a jQuery component that takes the text from a

Demo and Download

Airport – Information Board Text Effect

Airport is a rather simple text effect plugin that emulates the style of those flickering information boards you sometime find on airports and train stations.
Airtport is very easy to use, all you have to do is create an element, give it an ID and throw airport on it. The values, moscow, berlin and stockholm, are the words it will flick through.

Demo and Download

jQuery: Flying Text With Fade Effect

In this tutorial you will learn how to create a very simple flying and fading text effect using jQuery.

Demo and Download

Codename Rainbows

Codename Rainbows allows you to effortlessly apply gradients, shadows and highlights to text.
The gradient in this plugin is comprised of a series of one-pixel-high slices of text. These slices are arranged vertically. Every slice is a slightly different shade, and when the slices are positioned via CSS the result is a smooth gradient created entirely without images.
Awesome plugin!

Demo and Download

Fade colors using jQuery

This tutorial, from Janko at Warp Speed, will explain how to, using two methods, fade a color in an array of elements using jQuery.

Demo and Download

Fading Color Effect for Inline Text Links using jQuery

In this article you can read about a simple UX trick that can be easily implemented into your web sites. With a few lines of jQuery it will make your text links fade to another color on rollover.
This useful effect has been tested in FF, IE7 and Opera on Win and FF, Safari on Mac.

Demo and Download

Playing with jQuery Color Plugin and Color Animation

In this tutorial you will learn four different methods to create some nice text effects for menus and buttons using the jQuery Color Plugin.

Demo and Download

Color Changing Text and Backgrounds w/ jQuery

Normally you would define the text color in the CSS and that would be the end of it. In this tut, you will learn how to be able to adjust colors after the page has loaded, and not just once either – you’re aiming for continuous adjustments.

Demo and Download

jQuote Plugin

jQuote is a plugin which allows for semantic blockquotes created on the fly with just one line of jQuery code.
The really handy thing about jQuote is that If javascript is not enabled, jQuote does not run and those with javascript disabled don't see duplicated text – which is what would happen if you did the usual method of copying and pasting text to create quotes.
One of the useful extras with this plugin is the option to add a person's name to the quote – for example if quoting a famous person it is always good to credit them. Nice.

Demo and Download

Search And Share

Search and Share makes highlighting text a more functional action by attempting to understand the intention of a user’s text selection and present a variety of options accordingly. The criteria for understanding the intention is the character length of the selection, and the interpreted actions are copying, searching and sharing.

Demo and Download

Set Font Size Based On Word Count

Demo and Download

Zooming with jQuery and CSS

In this article you will learn how to develop Text Zooming using jQuery and CSS. This is basic level tutorial for changing styles easily with a jQuery script. A very useful tutorial for zooming website content.

Demo and Download

Use the jQuery UI to Control the Size of Your Text

In this tutorial you will learn how to use a slider to control the text size of an article on a page, allowing the user to control exactly the size that suits them.

Demo and Download

Simple jQuery Text Resizer

The idea of this plugin is very simple: you click on the text size you want, and a class is added to the body to indicate which size the user has selected. Then, it will take advantage of that body class when you are writing your CSS to size the different elements appropriately.

Demo and Download

You might also like…

25 Useful jQuery Tooltip Plugins and Tutorials »
20 jQuery Plugins and Tutorials to Enhance Forms »
30 Tutorials Combining Both Wordpress and jQuery »
25 Fresh and New jQuery Plugins and Tutorials »
50 Useful Tools and Generators for Easy CSS Development »
20+ Resources and Tutorials for Creative Forms using CSS » »
24 CSS (in some cases with jQuery) Navigation and Menu Tutorials » »
22 CSS Button Styling Tutorials and Techniques » »
15 Amazing jQuery Image Gallery/Slideshow Plugins and Tutorials » »

Weekly Web Design and Development Inspiration – N.16

admin — Sat, 14 Nov 2009 07:42:19 +0000

The single page portfolio/bio sites is becoming more and more popular, a trend started by Tim Van Damme, with Marvin Y. Thomas and Oscar Barbers sites excelling in this style, this week. Overall, it has been a strong week for great web designs, keep them coming. Oh, happy fifth birthday Firefox!
Send us a recommendation for next weeks Weekly Web Design and Development Inspiration (for our review), by clicking here: Submit News.

Five Years of Firefox

Burciaga

San Diego Italian Film Festival

Bottled Sky

Creative Spark

Medicon Media

IDRAWALLDAY

Marvin Y. Thomas

Fourfather

Oscar Barber

pips à la carte

Jack Cheng

The Art Institutes

Alex Carabi

Design View – Andy Rutledge

The Pixel Blog

You might like… previous Weekly Inspirations

30 Artistic and Creative Photoshop Poster Tutorials

admin — Fri, 13 Nov 2009 12:40:49 +0000

Although posters as a concept have been used for many centuries, in traditional art years, poster design is a relatively new. It has only been in the last 100 years that poster design has been elevated and recognized as an art-form, and has gained the kind of popularity that no other design category can rival.
Below we have rounded-up the our favorite Photoshop Poster Design Tutorials, ranging from, movie posters, adverts and events in a variety of styles.

Design a Vintage Film Poster

Intense Movie Poster

Trendy Galactic Poster

Create B-Movie Poster Art

Vintage Horror Movie Poster

Design a Quick Perfume Ad

Kill Bill Poster

Vintage Horror Movie Poster

Sleek Nature Themed Phone Advert

Celebrate the Passing of Spring

Recreating The Dark Knight Poster

Create a ‘Neo-Constructivist’ Poster

Create A Ripping And Tearing Poster Effect

Space Invaders Poster

Retro Boxing Poster

Texture Based Vintage TV Poster

Illustration with Floating Floral Elements

Vintage Radio Poster

Abstract Watercolor

Soul Rebel Poster

War Movie Poster

Retro Game Boy Poster

Space-Helmeted Future Retro Illustration

Old-Collage Effect Poster

Event Poster with C4D and Photoshop

Create an Amazing Nike Ad

Create a Constructivist Inspired Poster

Make an Inspiring Artistic Poster with Drawn Elements

Amazing Typographic Portrait

Supersize Poster Creation

You might also like…

20 Beautiful HDR Photographs of the Marvels and Mysteries of Iceland »
50 Beautiful HDR Images from 50 World Cities »
20 Beautiful Examples of Photoshopped Smoke Art and Technique Tutorials »
30 Creative Photography Examples using the Polar Panorama Effect »
24 Examples of Stylish Sabatier (or Solarised) Effect Photography »
20 Amazing Images That Could Be HDR – But are definitely Not »

50 Inspirational and Fresh Minimally Designed Web Sites

admin — Wed, 11 Nov 2009 15:00:19 +0000

Hot on the heels of last weeks web design inspiration post, 50 Examples of Effective Uses of Typography Within Web Design, we have 50 fresh minimally designed web sites. Quite often the two web design styles work well together, as you may notice from both posts.
The most important factor for minimal to work well, as it should be with all design styles (but, not always the case), is the content. Without good writing or a strong portfolio, the style has no impact and the web design looks cheap. And that is the key to minimal, in the hands of a skilled web designer, they know that the site design has to accentuate the content, and the content, in return, accentuates the web design.
Creating an effective minimal web design, at first thought, would seem to be the cheaper, easier and quicker option to merely throw up a site That is most definitely not the case. Knowing what elements to strip out of a page while still maintaining usability, is just one of the the many skills you will need to successfully build a minimal web design.
The collection of sites below, are great examples of recent successfully designed minimal websites.

This is part four of our ongoing Top 50 Web Design Styles, you can view the others here:
50 Creative and Inspirational Personal Portfolio Websites »
50 Inspiring Web Application and Service Web Site Designs »
50 Examples of Effective Uses of Typography Within Web Design »

Minimal Personal Blog

Mark Boulton

Inkcover Blog

Alexander Limi

Trent Walton

Siimple

Ultra Minimal

Åh Studio

Julia Rothman

Hello Keepa

Remake

Minimal Personal Portfolio Light

super8 – Portfolio of Andrew Cross

Ignacio Ricci – Designer+Developer

Camtessa Design

Iconwerk

Klim Type Foundry

Lovers Town

Brilliancy

James Chambers

James Joyce

Tudinh Duong

Bunton

Minimal Personal Portfolio Dark

Espen Espelund

GraphicDZNR – Jesse Dodds

Arnaud Alves

Point&Anchor

Sveinn Davíðsson

Jeffrey Docherty

Jason MAYØ

Pierrick Calvez

Minimal Magazine Style

Life of My Story

ONE International

The Post Family

BB – Bisgrafic Blog

Corporate and Commercial Minimal Designs

Bespoke Kitchen Furniture

Bertelli – Biciclette Assemblate

Hair Ott

Miguel Buckenmeyer & Co.

Chaussettes Archiduchesse

HARTEN

Counter-Print.co.uk

Design Companies

Mark Boulton Design

Landor – Strategic Brand Consulting and Design

Paravel

Nordenswan & Siirilä

Zip Design

YCN

Onetwentysix

A Minimal Splash of Color

Fastlikerabbit

The Bigger Design, Inc.

Cubedroute

Second And Park

Minimalism and Flash

JØSHUA SERBÜS – Interactive Designer

Toy NY

Revolver Creative

Branch

Eleven Six

Yacht Associates

OurType Fine Type from Europe

Vincent Lamarche

View more from the web design styles series

50 Creative and Inspirational Personal Portfolio Websites »
50 Inspiring Web Application and Service Web Site Designs »
50 Examples of Effective Uses of Typography Within Web Design »

This Weeks Twitter Design News Roundup N.10

admin — Tue, 10 Nov 2009 09:48:45 +0000

As per usual, in this weeks Twitter Design News Round-Up we have some great web design tips, tutorials and resources, including a magnificent HTML5 reference. We also have a couple of great Photoshop tutorials and a few odd-ball resources which should amuse you.
If you have any cool links that you would like to share, do not hesitate to send them to us here: Submit News.
You can follow us (if you like) via Twitter here: twitter.com/speckyboy.

What Does It All Mean? – Dive Into HTML5

Artistic Expression: Logo Design from Start to Finish

Logo design in today’s world is totally underrated. People don’t understand how important a good logo is and how valuable it is to their business. This article will guide you through the basics of what makes a good logo, while also walking you through the process of creating the identity and logo design

10 stunning 3D buildings made with Google SketchUp

Among all the free tools that Google produces, Google's 3D modeling software, SketchUp, has to be one of the best and most addicting. These 10 models were selected from Google's 3D Warehouse, its online library of thousands of models created by SketchUp users.

Insane Gadgets or Genius: You Be The Judge

So many times you see or hear about a new gadget that makes you say, “Why didn’t I think of that?” And then there are times when we hear about a new gadget and say, “What the heck were they thinking?”
Some of these gadgets seem crazy, silly and downright insane; yet, some seem quite ingenious.

50+ Useful CSS Professional Techniques

How To Create Great Typographic Wallpaper In Photoshop

This tutorial will teach you how to create a really interesting and unique typographic wallpaper in a few easy steps.

13 Really Useful Online CSS Tools to Streamline Development

CSS is almost always used on every modern website design. However, having to write and structure CSS code from scratch every time you have a project can be extremely time consuming. In this post there are 13 amazingly useful CSS tools to be more productive with development.

Learn how to AJAXify Comment Forms

In this tutorial you will build a simple, boring contact form and add some animations and an AJAX post request to submit the form to your MySQL database asynchronously.

43 New Typography Wallpapers For Type Fanatics

Drawingclouds

Nice selection of tutorials, resources and a host of freebies for developers and designers from Drawingclouds.

Best Practices for 6 Common User Interface Elements

This article discusses some best practices and usability traits of six user interface elements and the conventions for each, so that developers can create user experiences that are both beautiful and simple.

A Collection of 120+ Plugins, Clips, Snippets and Tuts For Designers and Developers

Ten Tips for Becoming a Better WordPress Developer

Invoice Like A Pro: Examples and Best Practices

So here are some general guidelines, best practices and examples that will help you make sure your invoices are up to spec.

30 Photo Effect Photoshop Tutorials Every Designer Will Love

Today I hired a new designer, this is how we set him up ….

Practical Guide to 404 Error Pages: What WordPress is Missing

Instead of just identifying the problem, your 404 page needs to offer a solution. The goal of a good 404 page is simple: to make sure visitors landing on it continue browsing your site, and find the content they came for. This article offers solutions.

6 Ways To Take Your Webdesign From Good To Great

The difference between good and great webdesign is relatively small. The average person may not be able to explain the tangible differences that make up great design, but they can usually spot a design they like. By examining some awesome sites, this article attempts to put my finger on some of the small details that make up the difference.

Web Typography: Font Embedding Services

There are a lot of options out there for using other-than-websafe fonts in your website designs. Dynamic text replacement methods or resorting to very long fontstacks (where most of your visitors won’t see the font you wanted anyway) have long been the standard for using anything other than websafe fonts.
But the @font-face function changes all that. With most major, modern browsers now compatible with it, services are cropping up all over for providing the fonts you want to embed on your site without eating up your bandwidth and server space.

Previous Twitter News…

CSS References, Tutorials, Cheat Sheets, Conversion Tables and Short Codes

admin — Mon, 09 Nov 2009 11:03:17 +0000

Werther you are a CSS guru or a CSS novice you will always need some help, some resources, some tutorials, some references and, of course, some cheat sheets. In this article we have collected the best resources for answering all possible CSS questions as well as how to understand CSS and how to use it properly. There are also CSS property references, cheat sheets, not only typical cheat sheets, but also cheat sheets for CSS frameworks, conversion tables and CSS short hand.

CSS Reference and Learning

Core CSS: Part I

Most people have learned CSS the same way they’ve learned HTML—by viewing source, copying template codes, reading books and articles. While this “bootstrap” method of learning is often the best way to find great techniques, it may not be the best for knowing how to manage, debug, customize and even advance those techniques.
What our training hasn’t necessarily provided are the core concepts within CSS. This is why the Core CSS series may contain simple examples of things you already know. In this foundational reference card, you’ll find not only a bit of history and rationale for use, rule structure and syntax, but also a thorough resource as to the Cascade, inheritance and specificity – core principles of CSS that will expand and strengthen your professional ability to work with CSS.

Core CSS: Part II

Core CSS: Part II covers CSS 2.0/2.1 selectors. To assist in visualizing how these selectors actually match, for each example you’ll see an element, the corresponding CSS, and a document tree that visualizes what is selected within a sample document. Also provided are some useful examples.

Core CSS: Part III

To understand and manage attractive design and layouts, gaining an appreciation for the how to manage the CSS Box Model, Floats and Positioning is paramount. In this third and final refcard in the Core CSS series you will learn all about the visual models that exist within CSS, you’ll also learn not only about how visual models work, but how to troubleshoot and repair common problems too.

SitePoint CSS Reference

CSS Basics

CSS Basics is a fantastic CSS learning and reference resource. It is split into 18 chapters, from An Introduction to CSS all the way down to the tricky CSS Pseudo Elements. Each chapter is downloadable and printable, you also have the option to download the entire series in a single PDF file.
Below we have listed all the available chapters, all can be viewed in HTML format or you can download each individual chapter in PDF.

16 CSS Beginner Tutorials from HTML.net

Theis resource, from HTML.net, offers 16 basic lessons for learning CSS. It is not as polished as CSS Basics (above) nor can you download each chapters. It is still a fairly easy read that explains what CSS is, how it works and how to use it.

Introduction »
A brief overall introduction to the tutorial series and what you can expect to learn.
Lesson 1: What is CSS? »
A little on why CSS came in to the world, and why it is clever to choose CSS over HTML for layout and design.
Lesson 2: How does CSS work? »
Learn the basic syntax of CSS and have to create your first stylesheet.
Lesson 3: Colors and backgrounds »
Learn how to apply colors and background colors to your website and how to use background images.
Lesson 4: Fonts »
In this lesson you will learn about fonts and how they are applied using CSS.
Lesson 5: Text »
In this lesson you will be introduced to the amazing opportunities CSS gives you to add layout to text.
Lesson 6: Links »
About how you can add fancy and useful effects to links and work with pseudo-classes.
Lesson 7: Identification and grouping of elements (class and id) »
A closer look at how you can use class and id to specify properties for selected elements.
Lesson 8: Grouping of elements (span and div) »
A closer look at the use of span and div as exactly these two HTML elements are of central importance with regards to CSS
Lesson 9: The box model »
The box model in CSS describes the boxes which are being generated for HTML-elements.
Lesson 10: The box model – margin & padding »
Change the presentation of elements by setting the margin and padding properties.
Lesson 11: The box model – borders »
Learn about the endless options when using borders in your pages with CSS
Lesson 12: The Box model – Height and width »
In this lesson, we will take a look at how you easily can define the height and width of an element.
Lesson 13: Floating elements (floats) »
An element can be floated to the right or to left by using the property float
Lesson 14: Positioning of elements »
With CSS positioning, you can place an element exactly where you want it on your page.
Lesson 15: Layer on layer with z-index (Layers) »
In this lesson, we will learn how to let different elements overlapping one another using layers.
Lesson 16: Web-standards and validation »
This last lesson is about the W3C-standards and how to check your CSS is correct.

CSS Introduction from W3 Schools

W3 schools is another great resource for learning CSS, you will not learn the basics of how to use CSS to control the style and layout of multiple Web pages, it also offers an indepth look at all CSS values and how to use them.

Cheat Sheets

CSS 3 Cheat Sheet (PDF) from Smashing Magazine

This cheat sheet contains a complete listing of all the properties, selectors types and allowed values in the current CSS 3 specification from the W3C. Each property is provided in a section that attempts to match it with the section (module) that it is most actively associated within the W3C specification. Next to each property is a listing of the expected values that that property takes (normal text shows named values it accepts and italics shows value types it will accept).

Cascading Style Sheet Level 2 Visual Cheat Sheet from woorkup.com

This cheat sheet (3 pages) contains an essential reference to CSS2 properties with detailed descriptions and some sample code. The simple visual style used to design this sheet allows you to find anything you need at a glance.

CSS2.1 Quick Reference Card/Cheatsheet

This quick reference card summarizes the core features of version 2.1 of the cascading stylesheets standard.

CSS2 Cheat Sheet from Refcards

CSS Cheat Sheet (V2) from Added Bytes

The CSS cheat sheet is a one-page reference sheet, listing all selectors (as of CSS 2.1) and properties. It includes a visual example of the box model, unit reference for CSS units and the various media types CSS makes allowance for.

CSS Help Sheet from gosquared.com

CSS Cheat Sheet (V1) from Added Bytes

CSS1 Cheat Sheet from Refcards

CSS Cheat Sheet Wallpaper in Helvetica

CSS (Cascading Style Sheets) All on One Page

CSS Short Hand

CSS Shorthand Cheat Sheet from leigeber.com

CSS Shorthand Cheat Sheet from Catch My Fame

CSS Shorthand Guide from Dustin Diaz

Properties Indexes

CSS Properties Index from Jens Meiert

This fantastic resource is a continuously updated index of all properties specified in CSS 1, CSS 2, CSS 2.1, and even CSS 3, including all initial values as well.

All CSS Properties Listed Alphabetically from blooberry.com

CSS Framework Cheat Sheets

YUI Library: CSS Reset, Base, Fonts, and Grids Cheat Sheet

Blueprint Cheat Sheet

Specific Cheat Sheet

Ultimate IE6 Cheatsheet

You're a web developer and you're ready to tear your hair out because you have to support Internet Explorer 6, but, to put it tactfully, IE6 doesn't support you. The author of this cheat sheet has scoured the web for resources and also included some of his own fixes for IE6 and put it all together in this cheatsheet/reference manual as a resource for anyone who has to deal with Internet Explorer 6.

You might also like…

The Blueprint CSS Framework – Tutorials, How-to Guides and Tools »
50 Essential Web Typography Tutorials, Tips, Guides and Best Practices »
50 Useful Tools and Generators for Easy CSS Development »
20+ Resources and Tutorials for Creative Forms using CSS »
24 CSS (in some cases with jQuery) Navigation and Menu Tutorials »
22 CSS Button Styling Tutorials and Techniques »
15 Amazing jQuery Image Gallery/Slideshow Plugins and Tutorials »