This is our selection of our favorite web designs from the past week, some sites we discovered, but the most of them have been recommended by our readers.
Thanks for all your recommendations, and we hope you like the selection of sites as much as we do, feel free to comment and let us know what you think.
Send us your recommendation for next weeks Weekly Web Design and Development Inspiration (for our review), by clicking here: Submit News.

Minimalist Design Magazine

Jacob Lee – Web, Print & Brand

Bunton

Kohette WebDesign

Old Guard

keithar.com – Sebastian Witman

204 Beech Avenue

BountyBev

Monkeyworks

Wishpipe Studios

SUNDAY VISION

Rain Creative Lab

Synthview

bennyroth twentyten

You might like… previous Weekly Inspirations

Weekly Web Design and Development Inspiration – N.32 »
Weekly Web Design and Development Inspiration – N.31 »
Weekly Web Design and Development Inspiration – N.30 »
Weekly Web Design and Development Inspiration – N.29 »
Weekly Web Design and Development Inspiration – N.28 »
Weekly Web Design and Development Inspiration Archives »

There are a multitude of books (whether in digital format or print) that cover every possible aspect of web design, each one is unique and offers a personalized opportunity for the author to both educate, inspire, and guide the reader through there knowledge.
In this post rather than offer all of my favorite web design books, I have listed 12 books that I have either downloaded and read (or at least scanned through), or I have bookmarked with the whole-hearted intention of eventually reading it (Ruby Best Practices), and the best thing of all? All of these books are completely FREE, in digital format anyway (PDF or HTML).

I have not offered a critique of each book, as I feel that would not be fair on the author. If someone spends so much of there valuable time (in some cases months and months) and writes an entire book on web design, in my eyes they deserve only praise and appreciation.
I hope you find these books useful.

The Elements of Typographic Style Applied to the Web (HTML)

Author(s): Richard Rutter.
About the Book: For too long typographic style and its accompanying attention to detail have been overlooked by website designers, particularly in body copy. In years gone by this could have been put down to the technology, but now the web has caught up. The advent of much improved browsers, text rendering and high resolution screens, combine to negate technology as an excuse.
In order to allay some of the myths surrounding typography on the web, this website/book has been structured to step through Bringhurst’s working principles, explaining how to accomplish each using techniques available in HTML and CSS. The future is considered with coverage of CSS3, and practicality is ever present with workarounds, alternatives and compromises for less able browsers.
The Elements of Typographic Style: Full HTML version »
The Elements of Typographic Style: Chapters »

Integrating Accessibility Throughout Design (HTML)

Author(s): Shawn Lawton Henry.
About the Book: The Web is providing unprecedented access to information and interaction for people with disabilities. It provides opportunities to participate in society in ways otherwise not available. With accessible websites, people with disabilities can do ordinary things: children can learn, teenagers can flirt, adults can make a living, seniors can read about their grandchildren, and so on.
With the Web, people with disabilities can do more things themselves, without having to rely on others. People who are blind can read the newspaper (through screen readers that read aloud text from the computer), and so can people with cognitive disabilities who have trouble processing written information. People who are deaf can get up-to-the-minute news that was previously available only to those who could hear radio or TV, and so can people who are blind and deaf (through dynamic Braille displays). Web accessibility is about removing those barriers so that people with disabilities can use and contribute to the Web.
This book helps you improve your products—websites, software, hardware, and consumer products—to remove accessibility barriers and avoid adding new barriers. One guiding principle is: just ask people with disabilities.
Integrating Accessibility Throughout Design: HTML version »
Integrating Accessibility Throughout Design: Table of Contents »

Getting Real: The Book by 37signals (HTML)

Author(s): 37Signals Team.
About the Book: Want to build a successful web app? Then it's time to Get Real. Getting Real is a smaller, faster, better way to build software.
Getting Real delivers better results because it forces you to deal with the actual problems you're trying to solve instead of your ideas about those problems. It forces you to deal with reality.
Getting Real foregoes functional specs and other transitory documentation in favor of building real screens. A functional spec is make-believe, an illusion of agreement, while an actual web page is reality. That's what your customers are going to see and use. That's what matters. Getting Real gets you there faster. And that means you're making software decisions based on the real thing instead of abstract notions.
Finally, Getting Real is an approach ideally suited to web-based software. The old school model of shipping software in a box and then waiting a year or two to deliver an update is fading away. Unlike installed software, web apps can constantly evolve on a day-to-day basis. Getting Real leverages this advantage for all its worth.
Getting Real: HTML Version »
Getting Real: Chapters »

Access by Design Online (HTML)

Author(s): Sarah Horton.
About the Book: We design Web sites so people can use them. People doesn’t mean “some people” or “certain people.” With universal usability, our goal is to design Web sites that accommodate the diversity of people and the Web browsing devices that they use. To design Web sites that people can use, we must work within the flexible framework that the Web provides.
To this end, we must begin our process with a solid understanding of how the Web works. When we know its nature, we can make intelligent design decisions that uphold rather than impede its functionality. Whenever we face a decision that may impact function, we must look for other options.
Access by Design Online: HTML Version »
Access by Design Online: Table of Contents »

Research-Based Web Design & Usability Guidelines (PDF)

About the Book: The Research-Based Web Design & Usability Guidelines (Guidelines) were developed by the U.S. Department of Health and Human Services (HHS), in partnership with the U.S. General Services Administration.
The Guidelines were developed to assist those involved in the creation of Web sites to base their decisions on the most current and best available evidence. The Guidelines are particularly relevant to the design of information-oriented sites, but can be applied across the wide spectrum of Web sites.
Research-Based Web Design & Usability Guidelines: Download Entire Book (PDF) »
Research-Based Web Design & Usability Guidelines: Chapters »

Search User Interfaces (HTML)

Author(s): Mart A. Hearst.
About the Book: This book outlines the human side of the information seeking process, and focuses on the aspects of this process that can best be supported by the user interface. It describes the methods behind user interface design generally, and search interface design in particular, with an emphasis on how best to evaluate search interfaces. It discusses research results and current practices surrounding user interfaces for query specification, display of retrieval results, grouping retrieval results, navigation of information collections, query reformulation, search personalization, and the broader tasks of sensemaking and text analysis. Much of the discussion pertains to Web search engines, but the book also covers the special considerations surrounding search of other information collections.
Search User Interfaces: HTML Version »
Search User Interfaces: Table of Contents »

Dive Into Accessibility (HTML & PDF)

Author(s): Mark Pilgrim.
About the Book: This book is entitled "Dive Into Accessibility: 30 days to a more accessible web site", and it will answer two questions. The first question is "Why should I make my web site more accessible?" If you do not have a web site, this book is not for you. The second question is "How can I make my web site more accessible?" If you are not convinced by the first answer, you will not be interested in the second.
To answer the second question,the book presents 25 tips that you can immediately apply to your own web site to make it more accessible. Although these concepts apply to all web sites, the focus is on implementation using popular weblogging tools. If you use some other publishing tool or template system, you will need to determine how to implement the tips in your tool of choice.
Dive Into Accessibility: HTML Version »
Dive Into Accessibility: PDF Version »
Dive Into Accessibility: Chapters »

Web Style Guide: Basic Design Principles for Creating Web Sites – 3rd Edition (HTML)

Author(s): Patrick J. Lynch and Sarah Horton.
About the Book: Written by Patrick J. Lynch and Sarah Horton for web site designers in corporations, government, nonprofit organizations, and academic institutions, the book explains established design principles and covers all aspects of web design—from planning to production to maintenance. The guide also shows how these principles apply in web design projects whose primary concerns are information design, interface design, and efficient search and navigation.
Web Style Guide 3rd Edition: HTML Version »
Web Style Guide 3rd Edition: Chapters »

The Woork Handbook (PDF)

Author(s): Antonio Lupetti.
About the Book: The Woork Handbook is a free eBook about CSS, HTML, Ajax, web programming, Mootools, Scriptaculous and other topics about web design.
This book is a miscellanea of articles written by Antonio Lupetti on his web design blogr. During the period form January to December 2008 “Woork” has been visited from over 4 millions visitors and has received a lot of requests to distribute a printable version of its contents.
The Woork Handbook: PDF Version »

Web Designers Success Guide (PDF)

Author(s):
About the Book: Web Designer's Success Guide is the definitive guide to starting your own freelance Web design business. In this book, Kevin Airgid gives designers a step-by-step instructions on how to achieve the following: Transition from full-time to self-employment, Freelance on the side to make additional income, Find new clients and keep them coming back for more, Market your freelance business, Manage your projects professionally and how to Price your services appropriately.
Web Designers Success Guide: PDF Version »

Eloquent JavaScript (HTML)

Author(s): Marijn Haverbeke.
About the Book: Eloquent JavaScript is a digital book providing a comprehensive introduction (tutorial) to the JavaScript programming language. Apart from a bookful of text, it contains plenty of example programs, and an environment to try them out and play with them.
The book is aimed at the beginning programmer ― people with prior programming experience might also get something out of it, but they should not read chapters 2 to 5 too closely, because most of the concepts discussed there will probably be nothing new to them. Do make sure you read the end of the first chapter, which has some essential information about the book itself.
Eloquent JavaScript: HTML Version »
Eloquent JavaScript: Chapters »

Ruby Best Practices (PDF)

Author(s): Gregory Brown.
About the Book: In 1993, when Ruby was born, Ruby had nothing. No user base except for Gregory and a few close friends. No tradition. No idioms except for a few inherited from Perl.
But the language forms the community. The community nourishes the culture. In the last decade, users increased—hundreds of thousands of programmers fell in love with Ruby. They put great effort into the language and its community. Projects were born. Idioms tailored for Ruby were invented and introduced. Ruby was influenced by Lisp and other functional programming languages. Ruby formed relationships between technologies and methodologies such as test-driven development and duck typing.
This book introduces a map of best practices of the language as of 2009.
Ruby Best Practices: PDF Version »

You might also like…

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

Earlier this week we published a post entitled 15 CSS3 Navigation and Menu Tutorials and Techniques, it is an exciting look at the possibilities and capabilities of CSS3 navigation in the near future. But, we did miss one tutorial from that list, and it is that tutorial that we publishing today.
This CSS3 tutorial was originally written in German by the Webstandard-Team, and they have kindly allowed us to translate it and publish it here. It certainly does deserve to be viewed by a wider audience.

Cool Animated CSS3 Menu Tutorial

This tutorial is about understanding, learning and mastering the some of the new features and properties of CSS3.
You will learn how to build a cool rounded navigation menu, with no images and no Javascript, and effectively make use of the new CSS3 properties border-radius and animation.

This menu works perfectly well with Chrome and Safari. With Firefox the border-radius works great but not the animation.

Step 1: The HTML structure of the Navigation

The basic HTML structure of the menu has three list items with the fictitious names “brand“, “promotion” and “event“.

1
2
3
4
5
6
7

<div class="css3Tutorial">
<ul>
<li id="brand"><a href="#">Brand</a></li>
<li id="promotion"><a href="#">Promotion</a></li>
<li id="event"><a href="#">Event</a></li>
</ul>
</div>

How the menu looks so far:

Step 2: Create the Background Color of the Menu

In this step we are going to give the main navigation area (.css3Tutorial) a dark background.
The width, height and padding are completely optional, they are only there for demonstartion purposes when viewing the demo.

1
2
3
4
5
6

.css3Tutorial {
background: #14080a;
width:506px;
height:260px;
padding:20px;
}

How the menu looks so far:

Step 3: Round Navigation with border-radius

Now we will make each .li (navigation item) rounded with some cool CSS3 magic, more specifically with the border-radius property:
So far, the navigation will work very well with Chrome, Safari and Firefox.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

ul {
list-style: none;
}
li {
float:left;
font: 14px/10px Arial, Verdana, sans-serif;
color:#FFF;
background-color: #b6f5fe;
width: 80px;
height: 80px;
padding:20px;
margin:0 30px 0 0;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
border-radius: 60px;
}

How the menu looks so far:

Step 4: Aligning the Navigation Points

In this fourth step, we will give each .li element (navigation item) a unique background-color and position:

1
2
3
4
5
6
7
8
9
10
11

li#brand {
background-color: #e1f5b8;
}
li#promotion {
background-color: #b6f5fe;
margin-top:100px;
}
li#event {
background-color: #f9bde6;
margin-top:50px;
}

How the menu looks so far:

Step 5: Aligning the Links within the Menu

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

li a {
color:#FFF;
text-decoration:none;
display:block;
width: 80px;
height: 45px;  text-align: center;
padding:35px 0 0 0;
margin:0 40px 0 0;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
}
li#brand a {
background-color: #afe43f;
}
li#promotion a {
background-color: #03aec7;
}
li#event a {
background-color: #ba1886;
}

How the menu looks so far:

Step 6: Define the Properties for the Hover Effect

In terms of a “good user experience” we will now add the hover effect for the “inner core” of our navigation:

1
2
3
4
5
6
7
8
9
10
11

li a:hover,
li a:focus,
li a:active {
width: 120px;
height:65px;
padding:55px 0 0 0;
margin:-20px 0 0 -20px;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
border-radius: 60px;
}

How the menu looks so far:

Step 7: Adding the animation to the Navigation

Now this were the navigation really comes alive. The animation property for this navigation works perfectly with Chrome anf Safari, but struggles with Firefox.

1
2
3
4
5
6
7
8
9
10
11

li a:hover,
li a:focus,
li a:active {
-webkit-animation-name:bounce;
-webkit-animation-duration:1s;
-webkit-animation-iteration-count:4;
-webkit-animation-direction:alternate;
}
@-webkit-keyframes bounce{from{margin:0 40px 0 0;}
to{margin:120px 40px 0 0;}
}

How the final menu looks:

Conclusion

So, there you have it, you have now learned how to build a cool Sliding Navigation, using no Javascript, no images and only powered by some really cool CSS3 properties.
Please remember this menu is only a concept, and has not be built for usage in the wild. We are going to have to wait, Chrome and Safari aside, for all browsers to catch-up to be able use all of the cool CSS3 features. I can’t wait!

About the Developers

The authors of this CSS3 tutorial have been the Webstandard-Team, a group of web developers from Berlin, Germany. You can follow them on Twitter and you can visit their excellent website Webstandard-Blog, a German written Blog about Web Design, Web Standards, Accessibility & Usability.

You might also like…

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

Adobe Illustrator can at first seem a little bit intimidating and daunting (speaking from first hand experience) to work with, whereas it is in many ways similar to working within Photoshop (or any other graphic editor), but in others very very different. And the thing is, quite often certain design techniques with Illustrator may seem at first complex, but in actual fact are very very simple – Its just about learning techniques.

There is no better way for learning new Illustrator techniques, for a beginner or an advanced user, than delving into a good high quality and detailed tutorial, which is exactly what you will find in the tutorials below.

How To Build a Vector Clock Graphic

Follow this walkthrough to learn by adding layer after layer of vector shapes, along with a range of gradients and a spot of texture can quickly create a great looking icon-style clock graphic.

Create Lady Birds Insect

Lady birds, is there any other insect that symbolize the prosperity and freshness of the nature more? In this tutorial you will be shown how to create a cool lady bird using Adobe Illustrator.

Vector Handphone Tutorial

In this tutorial, you'll be shown how to draw a vector mobile phone by using simple shapes and gradients.

How to Create a 3D Marker in Illustrator

There are many ways to create a marker in Adobe Illustrator, but this might be one of the quickest. It only takes three paths, some text for the imprint and a 3D effect to create a semi-realistic and freely rotatable marker.

Create a Stylized Avocado

In this tutorial, you'll how to create a cut avocado with simple shapes, blends, and textures. We’ll design both the outer skin, yummy light green avocado filling, and the inner core.

How to Create Stereo Headphone Plugs

How to draw an USB Flash Drive

In this advanced tutorial, you will be shown how to draw this amazing USB flash drive.

How to Create a Photorealistic iMac and Magic Mouse

This tutorial is about using Adobe Illustrator’s Mesh Tool (U) and several basic techniques to create a vector style monitor and mouse, with a similar design as Apple’s brand new iMac 27″ with magic mouse.

Create an old TDK Cassette

The retro style is always a popular style, and in this tutorial you'll be shown how to create a standard D-C60 TDk cassette in just a few minutes.

How to draw a delicious Burger

Create a Golden, Vector Compass

In this tutorial you will be taken through the steps and techniques for creating a golden compass.

How to Create A Realistic Chef’s Knife

If you love cooking, then this tutorial is just for you! Learn how to create a realistic chef’s knife by using simple paths and gradients. You’ll use relatively easy techniques to give an object volume, control the lighting, and make it look super sharp.

How To Create A Vector Wacom Tablet

In this tutorial, you will be shown how to create a vector Wacom tablet in Illustrator CS4 using some basic shapes, gradients, and effects. In order to follow this tutorial, you should have some prior experience with the Pen Tool and know how to manipulate preexisting points and curves.

Create An Awesome Space Rocket

You’ll draw a shiny, awesome-looking space rocket in Adobe Illustrator using advanced techniques such as gradient meshes, pattern brushes and opacity masks. You will then learn how to add a flare, smoke, clouds and sky to complete this fun illustration.

Realistic Orange Tutorial

In this step-by-step tutorial, you will learn how to make a photo realistic orange using Adobe Illustrator CS3.

Turn a Client Approved Snack Label into a 3D Looking Snack Pack

Often after approving the final label’s design, clients will want to see the design mocked-up as a package. Starting with a final label design, you’ll use Illustrators mesh tools to simulate a 3D package design.

How to Make an Icy Cocktail

How to Create a Cute Earth Illustration in Vector

In this tutorial, you'll be taken through the steps of creating a cute earth illustration. You’ll use basic shapes and some Illustrator knowhow to make this. It’s a fun look at the earth, as seen from space, and interpreted in a cartoon vector style.

Create A Realistic Pendrive

In this Adobe Illustrator tutorial you will be shown how to create a realistic pendrive only using shapes and gradients.

Drawing a Chinese Fan

In this tutorial you'll learn to draw a chinese fan in Illustrator using some simple but effective techniques.

How to Make Super-Sharp, Vector Swords

In this tutorial you’ll be shown how to draw a sword in Illustrator, using the Rectangle Tool, gradients, and other Illustrator tools.

How to Create Semi-Realistic Scissors

In this tutorial, you are going to create metallic scissors using some basic Illustrator tools, as well as simple shading and highlighting effects to create this illustration.

Drawing a Clock

In this tutorial you'll draw a cool looking clock with simulated 3D metallic look and lustre.

Draw A Realistic Vector Light Bulb From Scratch

In this tutorial, you'll be shown how to build a light bulb from scratch in Illustrator, using numerous shapes and effects to create this illustration.

How to Create Shiny, Vector Dice

In this tutorial, you will learn how to create a set of vector dice using Adobe Illustrator and the Gradient Mesh Tool. The Gradient Mesh Tool can be tricky to get the hang of, but hopefully with this tutorial it will shed some light on this great little tool.

Create a Rocketing, Vector Aircraft Shuttle

In this tutorial, you’ll be creating a illustration of a speeding aircraft shuttle. It’s going to be all vector, but along the way you’ll use blends, and other techniques that give this rocketing aircraft an interesting look.

How To Create A Slick IPod Icon

This is a great little illustrator tutorial form Creative Nerds, which shows you how to create an iPod icon using illustrator. This is s good tutorial for beginners learning their way around Illustrator simply because the entire iPod is created using only basic default illustrator shapes.

How to Create a Recycling, Paper Bag Icon

In this tutorial, you'll learn how to create an eco-friendly paper icon with simple shapes and gradients. This tutorial is great for beginners getting started with icon design, as this is a fairly simple icon to create.

Create a Vintage TV Set Icon

In this tutorial, you will create an open book mostly with Illustrator’s 3D Extrude & Bevel Tool and create the open pages with graphics and add a wavy background. The book can be easily customized by applying your own graphics to the pages.

Create an Open Book with Illustrator’s 3D Extrude & Bevel Tool

How to Make a Flat Screen HDTV

This tutorial is going to walk you through the process of making a nice flat-screen HDTV. This could be great for showing off images or videos, or just honing your Illustrator skills. It will cover a variety of tools including the Gradient Palette and the Pathfinder Palette.

Cute Retro-Flavored Teddy Bear with the Gradient Mesh Tool

In this tutorial, you’ll learn how to easily add a retro feeling to your creations and also cover techniques such as using gradient mesh tool to add inner shadows to your objects, which gives them a subtle rounding while keeping your artwork scalable.

How to Create an Electronic Piano

In this tutorial, you’ll be shown how to make your own realistic, electronic piano in Illustrator. You’ll create quite a few shapes and apply various gradients and blends to make this vector instrument. Even though it’s a bit of work to put all this together, the techniques used in this tutorial are fairly simple.

Creating a Toaster-Popping Illustration

With this tutorial, learn how to apply some effects not often used in Illustrator, like the Chrome effect, which is used to create metallic look with a realistic aspect. Also, notable in this tutorial is the use of Texturizer to create toast texture. You will also use 3D effect and the Mesh tool, which bring depth to the this illustration.

Create a Vector Tree with Custom Brushes and the Gradient Mesh Tool

In this tutorial you will learn how to create a leaf-filled, vector tree – step by step. Some of the techniques you’ll use are custom made brushes to create the leaves, and Gradient Mesh Tool for creating light and shadows.

Create a Candy Inspired Vector Snowboard Design

Learn how to put together a sweet candy inspired design in Illustrator by cutting, splitting and joining vector paths to produce an intricate weave of shapes. You’ll then add some finishing touches with subtle shading and a cool striped overlay to add depth to the design.

How to Turn Glasses into a Great Geek Icon

In this tutorial, you’ll be shown how to make a cool, or should we say geeky, glasses icon. You should be versed in Adobe Illustrator’s tools to complete this tutorial. You’ll learn how to take creative license and create an illustration that uses a photo reference, but differs a bit in the final design.

How to Create a Vector Safari Compass

The Safari browser from Apple has a great little icon that works well in small formats while also displaying quite a lot of intricate details when viewed in large format. Navigate through this Adobe Illustrator tutorial to draw up your own vector Safari inspired compass in Adobe Illustrator.

Create a Colorful Cocktail Icon

Create A Mouthwatering Chocolate Covered Strawberry

You can easily apply this illustration to your own greeting card, t-shirt, or anything else you can think of. Moreover, you can apply this tutorial to other illustrations and logos.

You might also like…

A Round-Up of 50 Fresh Photoshop Tutorials and Techniques »
40 Detailed and High Quality Mobile Phone .psd Source Files »
50 High Quality Free Icon Sets in PSD Format »
The Best 40 Photoshop Text Effects from 2009 »
49 Most Creative Photoshop Tutorials of 2009 »
30 Artistic and Creative Photoshop Poster Tutorials »
40 Amazing Photoshop Brush Directories and Collections »
50 Imaginative Fantasy Art Tutorials for Photoshop »
25 Cool Digital Photography Tutorials, Techniques and Effects »
30 Useful Photoshop Buttons and Badges Tutorials »
25 Photoshop Tutorials for Creating that Perfect Web Page Design »

This is our weekly Twitter Design News Round-Up, a collection of fresh design related resources that we have shared via Twitter in the past week.

Just in case you are not one of our Twitter followers, click here: twitter.com/speckyboy, and you’ll be kept up to date with loads of design news and resources.

As always, if you have any cool links that you would like to share, do not hesitate to share them here: Submit News. Thanks to everyone that has been emailing.

Inspirational CSS:
Opera Logo Rendered only with CSS, No Images ( from desandro.com )

Infographic:
Which Blogging Platform Should You Use? ( from wpbeginner.com )

Good Reading:
Top 8 Dreaded Favors Asked of Web Designers ( from webdesignledger.com )

Good Reading:
How to Choose the Right CSS Framework ( from designreviver.com )

Good Reading:
88 Tips to Make You a Productive Freelancer ( from freelanceapple.com )

Good Reading:
Algerian (The Font), The Worst Offender ( from cutelittlefactory.com )

Good Reading:
Common Questions About Design Professionalism ( from smashingmagazine.com )

Inspirational Showcase:
Fantastic Illustrations by Serge Birault ( from abduzeedo.com )

Inspirational Showcase:
40 Awesome Infographic Designs which Helping Analysts ( from dzinepress.com/ )

Inspirational Showcase:
75 Photo Manipulations Art That Will Blow Your Mind ( from splashnology.com )

Free Resources:
Free Bokeh Textures ( from aceinfowayindia.com )

Web Design Tutorial:
Uncovering jQuery's Hidden Features ( from net.tutsplus.com )

Web Design Tutorial:
Create A Floating Navigation Using HTML, CSS and jQuery ( from creativeurbia.com )

Web Design Tutorial:
How To Setup A Reusable Framework For Your Next Website ( from leemunroe.com )

Web Design Tutorial:
Making a Mosaic Slideshow With jQuery & CSS ( from tutorialzine.com )

Photoshop Tutorial:
Text-Face Graffiti On The Wall ( from tutmaze.com )

Photoshop Tutorial:
Underwater Content Box Design ( from devisefunction.com )

Photoshop and Web DesignTutorial:
Clean Textured Wordpress Style Layout ( from devisefunction.com )

Photoshop Tutorial:
Design an Epic Sci-Fi Style Urban City Scene ( from psdvault.com )

Freebie:
Great Web Button Set For Free Download ( from tuttoaster.com )

Freebie:
55 free user icons pixel by pixel ( from iconshock.com )

Freebie:
Free Poster ( from netdiver.net )

Previous Twitter News…

Twitter Design News Roundup N.27 »
Twitter Design News Roundup N.26 »
Twitter Design News Roundup N.25 »
Twitter Design News Roundup N.24 »
Twitter Design News Roundup N.23 »
Twitter Design News Roundup Archives »

CSS3 is slowly but surely creeping into mainstream web design, more and more designers are using it, albeit in small doses, but it is certainly gathering momentum. It really is an exciting time for web design.
A few weeks back we published an article called 20 CSS3 Tutorials and Techniques for Creating Buttons just to start the CSS3 ball rolling, this time around we focus on some menu and navigation techniques that make use of the wonderful new properties that CSS3 offers.
Please bare in mind that for the most part these tutorials have not been written for usage in the wild, they are more experimental, a demonstration of what can be achieved and will be used in the near future.
All of the demos from these tutorials render perfectly well with Chrome and Safari (albeit with minor discrepancies), Firefox struggles with a couple (especially Zurbs OS X Dock, which even look awful with 3.6) and IE, rather surprisingly, rendered most of the demos better than expected.

jQuery Style Vertical Menu with CSS3 – No Javascript

In this tutorial you will learn how to create an animated sliding vertical menu using some cool CSS3 properties, like ‘-webkit-transition:’ which will allow you to animate the ‘:hover’ state of a simple un-ordered list.
By adding styling to the anchor tags some fancy -webkit-border-radius and -webkit-box-shadow you will give the menu some shape and depth and complete it with a background image for each list item to enhance the interfaces effect – Basically, making them look like their coming from underneath the ridge.

CSS3 Dropdown Menu

In this tutorial you can learn how to create a Mac-like multi-level dropdown menu that uses CSS3s border-radius, box-shadow, and text-shadow.
It all renders perfectly with Firefox, Safari and Chrome. The dropdown also works on non-CSS3 compatible browsers such as IE7+, but the rounded corners and shadow will not be rendered.

CSS3-Only Horizontal Drop Line Tab Menu

Recently, WebDesignerWall posted a cool tutorial on creating a dropdown menu using only CSS3 (the tutorial above). This time, in this tutorial the author demonstrates a different approach to the same menu with an equally effective outcome.

Apple’s Navigation Bar Using only CSS

Basically this tutorial shows you how to build the current Apple web site top level navigation, but without any images at all – just 100% pure CSS.

Recreating the OS X Dock with CSS

This tutorial come from the cool people at Zurb, who created the Super Awesome Buttons, the Radiocative Buttons, the Polaroid Images with Only CSS3 tutorial and much more. Based on there experience you know you are in for something special with this CSS3 tut.
Using the the latest in CSS3 properties they take a basic list of links and turn them into an awesome looking OS X dock of icons. It all renders perfectly with Chrome and Safari, but not so well with Firefox.

CSS3-Only Tabbed Area

In this tutorial CSS Tricks tackles the traditionally JavaScript tabs with only CSS, more specifically CSS3.
The major empowering concept with this tut is the CSS pseudo selector :target. :target is used in conjunction with ID selectors. The selector will match when the current URL contains a hash-tag of that exact ID.
Everything works pretty well with all browsers, with, as expected, IE needs a little tweaking.

Create a Slick Menu using CSS3

In this article the developer attempts to mimic the navigation menu on the Dragon Interactive website using only CSS (no images, and no JavaScript).
As with most of the tutorials in this article, this is an experimental tutorial using the new features of CSS3. The effects can be seen in only the latest Webkit Browsers, as such, the gradients work in Firefox 3.6 but not the fade-in and fade-out transition.

Sweet Tabbed Navigation Bar using CSS3

In this tutorial, you will be using the following CSS3 properties to create this 'Sweet' tabbed nav bar: rgba; opacity, text-shadow, pseudo selectors, rounded corners, gradients and box-shadow.
There are not many tutorials that will use this many new CSS3 properties, so if you feel like rolling up your sleeves and learning as many new CSS3 features in one go, this tutorial is for you.

CSS3 Hover Tabs without JavaScript

With the new techniques in CSS3 accompanied by clever application of existing CSS, it is increasingly stepping on the toes of JavaScript.
With this tutorial you will learn how to build a basic CSS tabbed content section that changes on hover, powered by only CSS3.

Nicer Navigation with CSS Transitions

CSS Transitions are a very powerful effect that can eliminate the use of JavaScript for many common effects. There are three properties that make up the transition: -webkit-transition-property, -webkit-transition-duration, and -webkit-transition-timing-function. Additionally, there is a shorthand property that combines the three: -webkit-transition.
It is using these powerful transitions and traditional CSS that you can learn how to create the dropdown navigation menu from this tutorial.

Create an Advanced CSS3 Menu

Creating a nice looking menu no longer needs all the code and time it use to, thanks to CSS3. This is a tutorial explaining how to create great looking buttons using only CSS3.
This technique is not limited to creating a menu. The same CSS can be applied to regular links to create easy and great looking navigation menu, call to action buttons, submit buttons, or any other button you can think of!

Accordion Using Only CSS3

An accordion effect can be achieved by using CSS3’s :target pseudo-class, without requiring JavaScript.
Each part of the accordion has an ID, heading and content region. The header includes a link that matches the section’s ID, whilst the content is wrapped in a container which will control its display.

Create the Accordion Effect Using CSS3

In yet another variation of the popular “accordion effect”, in this tutorial you will learn how to recreate an accordion effect that makes use of webkits CSS transitions. It uses the CSS3 :target pseudo class to know which item to show based on the URI fragment identifier (the # in the url).

Use CSS3 to Create a Dynamic Stack of Index Cards

In this tutorial you will learn how to create a dynamic stack of index cards, that could be easily used as a menu, with HTML and CSS3, and use such CSS3 features as transform and transition (for the dynamic effects) and @font-face, box-shadow and border-radius (for the styling).

Build a Chunky CSS3 Menu

You might also like…

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

This is our selection of our favorite web designs from the past week, some sites we discovered, but the most of them have been recommended by our readers.
Thanks for all your recommendations, and we hope you like the selection of sites as much as we do, feel free to comment and let us know what you think.
Send us your recommendation for next weeks Weekly Web Design and Development Inspiration (for our review), by clicking here: Submit News.

Royale – Showcase of Ole Kristian Masdal Svendsen

BountyBev – Bringing the Reward of American Craft Beer

The Black Harbor – A Collective Exploration of Art & Design

Browns Portfolio – Creativity is my 6th Sense

LivingDesign by Asif R Naqvi

SUNDAY VISION

Made by Many goes SouthWest

SodaraPulpLabs

Carl Rosekilly

Eastpoint Community Church

Rain Creative Lab

You might like… previous Weekly Inspirations

Weekly Web Design and Development Inspiration – N.31 »
Weekly Web Design and Development Inspiration – N.30 »
Weekly Web Design and Development Inspiration – N.29 »
Weekly Web Design and Development Inspiration – N.28 »
Weekly Web Design and Development Inspiration – N.27 »
Weekly Web Design and Development Inspiration Archives »

Roughly 3-4% of our readers view this site via a mobile device and that percentage is growing week-to-week. They aren’t very high percentages but it was certainly high enough to prompt me into action – I started considering a mobile version of this site.

Let me start by saying that I didn’t want it look like an entirely stripped down version of the full site. I did want to keep the overall layout of the hompage (thumbnails and excerpt), I wanted the internal post images to be re-sized per screen rather than cropped, and most importantly, I wanted the essence of the site, albeit in smaller mode, to reflect on the mobile version.
I experimented with a few Wordpress plugins, for some sites these plugins may be powerful enough, but not for me, I wanted more functionality. I also tried a few web services, I wasn’t too happy with them either.

Eventually I chanced upon the solution while browsing WebDesigner Depot on my HTC Hero (much better than the iPhone!), and there mobile site just looked amazing. It has the appearance of a mobile app while still maintaining the integrity and functionality of the full site. I went digging and found out that they were using Mobify, a web service were you can design a mobile layout for your website exactly how you want.

I since discovered that a lot of design blogs were also using Mobify (Smashing Magazine and Abduzeedo to name a couple), so I jumped in and tried it. You can see from the screenshot below what I have built, and it actually wasn’t that hard nor did it test the patience. Speckyboy-Lite looks not too bad:

Mobify Overview

In case you were wondering what Mobify is all about, have a look at this short video below.

Abduzeedo

Smashing Magazine

SitePoint

Veerle's blog 2.0

Webdesigner Depot

Yanko Design

A List Apart

TheDieline

I love Typography

Jeffrey Way

Six Revisions

Avatar NY

DesignM.ag

WebmasterRadio.FM

kristarella.com

CSS-Tricks

Just Creative Design

Amy Stoddard

MyInkBlog

You might also like…

49 Free Windows Mobile 6+ Smartphone Apps and Services »
45+ Cool Google Android Apps – The Perfect iPhone Replacement »

There are two ways you can go when designing a 404 page for your website – you could go the sensible route and make it usable and try to help the reader find exactly what they were looking for or, you could design a 404 page that not only defines the character of the web site or the designer, but also makes it a pleasure and surprise. Its amazing the effect a sprinkle of humor and some creativity can have on someone and it will certainly make your site that little bit more memorable.

Below, we have a collection of sites with original, creative and generally humorous 404 pages. You may notice that some do not meet even the most basic usability guidelines, but who cares, they make us smile! Hope you enjoy them.

This article has been written by Richie Thimmaiah.

50 Creative 404 Pages

South Park Studios

Dilbert Website

Blizzard Entertainment

Future of Web Design London

Popscreen

GDZLLA SMASH PAGE (NOT FOUND)

Carsonified 404

Chris Jennings 404

Twurn

Houston, we have a problem! Abduzeedo

Henrik Hedegaard – WOOPSIE DAISY! Something went wrong!!!

Wufoo Page Not Found

Jamie Huskisson 404

Tele2 404

TattooSales.com – Page Not Found

What the Dickens…?

Suspended Animations

Oops! You bwoke it

YouCastr – Woops!

Acro Media Inc – Dude, we can't find that page!

< scythe.net 404 Error >

Content Not Found : The New Yorker

Frye/Wiles 404 – Whoops

Pattern Tap 404

Limp Fish – file not found

TinSanity 404

LILEKS – uh oh

Page Not Found – d20srd.org

dawdle.com

Blue Daniel 404 File Not Found

CSS Tricks – Nothing found for Thispagedoesntexist

arbitraryconstant – 404 (missing)

Shelfworthy

Laughing Squid – Page not found

VintFalken.com

Springload: Error 404

Error Finding Page

Expansion Broadcast – Page not found

Bits of Magic – PAGE FAULT ERROR #404

Error – GeekSquad

moock.org >> operation failure >> code 404

Open Adventure – 404!

Site Sketch 101

Bi Bakar mısınız? Sayfayı Bulunamadı!

404 – Casino Lemonade

404 › rbardini.com

404: Lost in the aether

ZEITWENDE

webtressdesign.com – OOPS Wrong Turn

The Web Motel – ERROR!

404 Best Practice Resources

404 Best Practices from CSS-Tricks
Tips for Creating an Informative 404 Error Page
Pimp Your 404: Presentation and Functionality from Perishable Press
How To Customise Your 404 Page from Sitepoint
Turning 404 not found random visitors to blog readers from Tech Snacks
404 Page Management Your Grandma Can Use
404s and WordPress Server Load from alexking.org
The Perfect 404 from A List Apart
5 Tips to Make Your 404 Page More Usable from UX Booth
Why You Should Keep an Eye on Your 404 Stats
How to Find and Fix 404 Errors
A Better 404 – Redux from urbanmainframe.com

About the Author

This post has been written by Richie Thimmaiah. You can visit his personal design blog RichWorks, which is brimming with Photoshop tutorials, daily inspirations and all round great resources. You can also follow him on Twitter here: @richbugger

You might also like…

A Showcase of 50 Amazing Personal Blog Web Designs »
50 Creative Examples of Illustrations in Web Design »
50 Professional Web Design Agency Web Sites »
50 Bright and Vibrant Web Designs – Color Inspiration »
50 Impressive Magazine and Newspaper Styled Web Designs »
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 »
50 Beautifully Crafted Corporate Ecommerce Web Designs »
50 Creative Examples of Vintage and Retro in Web Design »

Once in a while a new design resource arrives that looks so good you simply have to shout about it from the rooftops and make sure everybody knows about it. And today such a resource has launched, it is called Media Loot – a lowly priced subscription-based online toolbox of premium design resources. It is your one-stop resource for the coolest icons, the highest quality Photoshop brushes, the perfect textures, the best vectors, professional print templates, and much much more.

And the coolest thing of all? We have 5 free one-year licenses up for grabs (valued at $168 each!).
All you have to do to win a subscription is leave a comment below and tell us what resources you would like to see on MediaLoot.

About MediaLoot

Media Loot has been founded with one basic idea — to somehow provide better design resources for a lot less money. The best way to do that, they have found out, was to offer a subscription membership where designers could band together in a larger community. They can then buy tons of awesome designs together, distribute the cost, and everyone gets more for less. Now, how cool an idea is that?

The goal of the site has been to eliminate the need for pay-per-use sites by offering a subscription-based service and offer royalty-free resources designers that you could use on your own or commercial projects.

What cool resources does Media Loot offer?

Have a look a below at some of the cool resources that MediaLoot offer, and remember this is only the tip of the iceberg, and more much will be available soon.

You can browse more resources here: MediaLoot Resources.

How to win this competition

To win one of the 5 free one-year licenses all you have to do is leave a comment below telling us what you kind of resources you would like to see on MediaLoot.
The competition will end on the 9th of April 2010, so get your comments in as quickly as you can. Good luck!
Even if you don’t win this competition, you can join MediaLoot for only $14 per month (Join Medialoot), it would be money well spent.