This time last year, the world lost a hot-tempered manager who unashamedly hogs credit, threw tantrums and was kicked out of the company he founded. And the world cried at this loss, because despite his unorthodox management styles, he was also the impetus for some of the world’s most advanced leaps in technological gadgetry. And that promise about changing the world? Well, let’s just say he redefined a lot of things.

Steve Jobs redefined user experience, design, technology and the way many things work. He had a hand in making tech users trade clicks for swipes, changing the way music was sold, reinventing animated films, and created the app industry with the App Store. Smartphones and tablets (Apple and non) became necessities, and stories of crazy queues filled with obssessed fans at product launches dominate tech news worldwide. And that’s the short of it.

With the deepest admiration for this legendary icon, we have chosen 40 artworks depicting the man himself, as a tribute to the first anniversary of the day we went Jobs-less. Each artwork is carefully crafted with extreme attention to detail, very much like how Steve approaches every Apple product he had a hand in.

His mark on the world is still felt today as impressive artworks of tribute to his name continue to turn up, even a year after he had left us. And to that, I say, "Oh Wow. Oh Wow. Oh Wow."

Read also: A Tribute to Steve Jobs (1955-2011)

1955-2011. (Image Source: WarrenLouw)

Apple Man. (Image Source: jardorocks)

Colored the World. (Image Source: Haychel)

Creator of Apples. (Image Source: wiener-online)

Dominating Confidence. (Image Source: Stanbos)

Founder of Magical Apple. (Image Source: mohammed elhussieny)

Good Bye Steve. (Image Source: artupida)

Great Steve Jobs. (Image Source: SubhrajitDatta)

He Made Tech Beautiful. (Image Source: auroraink)

He Who Inspired. (Image Source: gregbo)

Homage To The Genius. (Image Source: fungila)

Inspirational Person. (Image Source: TimWitherow)

Joyful Moment. (Image Source: Tsevis Visual Design)

Steve and Macs. (Image Source: Tsevis Visual Design)

The Man In The Products. (Image Source: Tsevis Visual Design)

Master of Innovator. (Image Source: sanjun)

The Man. (Image Source: Aakreit Sachdeva)

RIP Steve Jobs. (Image Source: michael152)

Memory. (Image Source: eNyDesigner)

Perceiving Innovation. (Image Source: turk1672)

Presenting iPhone 4. (Image Source: MosiKashi)

Steve. (Image Source: Fruksion)

Steve Jobs – Coffee Painting. (Image Source: Dirceu Veiga)

Steve Jobs – Painted Portrait. (Image Source: Adobe of Chaos)

Steve Jobs from Disassembled MacBook Pro. (Image Source: Genis Carreras)

Steven Paul Jobs. (Image Source: dylanroscover)

Steve Jobs Portrait. (Image Source: iTrixia)

Thank You Steve. (Image Source: CrazyNalin)

Thanks For The Magic. (Image Source: februarymoon)

The Innovator. (Image Source: Richard Davies)

The Smile. (Image Source: Speeddrawingitalia)

The Third Was For Steve Jobs. (Image Source: Devilicious-Pink)

Visionary of Technology. (Image Source: ThatCrookedMind)

Think Different. (Image Source: DagoDesign)

Steve and Apple. (Image Source: TomRutjens)

What He Has Done. (Image Source: Cayasha)

The Magic Creator. (Image Source: Liyin the Creative-Extraordinaire)

Steve “Moses” Jobs. (Image Source: Dale Stephanos Illustration)

True Visionary. (Image Source: markdraws)

Great Steve. (Image Source: koinoi)

Reflection

Words can mean as much as the artworks, so if you would like to, please share your thoughts about Steve Jobs in our comments section, or send an email about their former CEO to Apple. Lastly, if you have more awesome artworks about the man who also redefined brand loyalty and black turtlenecks, the floor is yours.

Related posts:

1. Tribute to Steve Jobs (1955 – 2011)
2. 20 Awesome “Battle of the Browsers” Artworks
3. 26 Adorable & Cute Doodle Artwork For Your Inspiration
4. Evolution of Apple Products (2001-2011) [Infographic]

Every month there are dozens of free stuff that are shared by very generous people in the web design and web development community; it’s almost impossible to keep up with all these new stuff. Nonetheless, you should not worry; in this post we have selected 10 useful ‘stuff’ ranging from code snippets to tools, frameworks to plugins to make your work and life as web designers and developers easier.

Let’s check them out.

Recommended Reading: 30 Dribbble Freebies For Web Designers

CSSS

CSSS which stands for "CSS-based SlideShow System" is a framework created by Lea Verou (known as the CSS guru). In essence, this framework allows you to create presentation slides with HTML and CSS web standards. This slideshow supports keyboard shortcuts like ←, →, ↓ and ↑ to navigate through the slides.

If you do CSS and HTML, this framework is I think a (better) replacement for high-priced softwares like MS PowerPoint.

BonsaiJS

Bonsai is a lightweight JavaScript graphic library with an intuitive API. We can use this library to draw simple shapes such as a rectangle, triangle, circle, or a graphic with deep complexity. This library can also be used to deliver Scalable Vector Graphic (SVG) rendering in unsupported browsers as a fallback.

In addition, Bonsai also provides a few features including Animation, Event and Filters to make these graphics act more interactively.

Responsive Pattern

Responsive Patterns is a collection of patterns that you can use to build a responsive website. This collection includes some examples of responsive layout and navigation with a few other responsive patterns of common web components such as images, video, tables and forms.

Effin Toolsets

This probably is all you need to help develop your website. Effin Toolsets is a collection of a dozen useful tools for web developers, packed all in one place.

One of the tools in this collection that I personally find extremely useful is the Entifier, this tool will change these characters, < and >, into their HTML code so that your code snippet will render correctly inside the <pre> tag.

Susy

Susy is a responsive grid for Compass. Like any other responsive grid framework out there, it consists of several pre-defined styles but since it is built with Sass and Compass this framework is much more configurable.

Susy allows you to customize the column number, column width, gutter and the grid padding, making it your own grid that fits your website. Susy will do all the hard work: calculation. If you are a super-geek who enjoys working with Sass and Compass, this extension is definitely for you.

Infinite dropdown navigation

A dropdown menu is a common component we found on a website. Yet, creating a dropdown navigation is not as easy as it looks. Harry Roberts of CSS Wizardry, fortunately, has shared his “magic code” to create an infinite dropdown navigation (which is awesome).

Bourbon Neat

Neat is a responsive grid framework that helps you run a responsive website easily. It is built upon Sass and Bourbon, a collection of useful mixins for Sass. This framework is a Ruby gem, it can be installed through Terminal or Command Prompt with this command line gem install neat.

Typicons

There won’t be enough for icons. Typicons are a set of font icons that consist around 88 characters. You can add these icons through @font-face rule and apply them to your website with the CSS pseudo-elements or embed them directly with their HTML character.

By using webfont to deliver your icons, you can have the advantages of having no need to deploy CSS sprite and adjusting background position to display the icons, high-resolution screen ready and technically it reduces http requests and consumes lower bandwidth than bitmap icons.

Annotator

This library allows you to add comments, tags and markdowns to your web content and along with AnnotateIt you can store your annotations for free.

Airport

When you are at the airport, you wil see the flight information board with flipping text all over it. With this jQuery plugin, Airport, we are able to create the same filpping text effect.

Conclusion

That’s all for this month. Have you tried any of these stuff? Which one is your favourite? Did you find any other cool stuff for web designers/developers that we had missed from this list?.

Feel free to share them in the comment box below, and we would like to hear your thoughts as well.

Related posts:

1. 20 Useful iPhone Apps for Developers & Designers
2. 50 Useful Responsive Web Design Tools For Designers
3. Cheatsheets Wallpapers for Web Designers and Developers
4. Web Developer Resources: A Mega-Compilation

In general, people will lose track when reading extremely long content. That is why, in print media like magazines and newspapers, the content is divided into multiple columns for easy reading.

Magazine layout by: Ronel van Heerden.

Creating a column on the Web is a totally different story. It’s quite difficult. In fact, not too long ago you may need to divide the content manually into some divs and float it to the right or left, then specify the width, padding, margin, borders and so on.

But, things are now much simplified with the CSS3 Multi Column Module. As the name clearly implies, this module allows us to divide content into the columned layout we see in newspapers or magazines.

Browser Support

Multiple columns are currently supported in all browsers – Firefox 2+, Chrome 4+, Safari 3.1+ and Opera 11.1 – except, as predicted, Internet Explorer, but the next version, IE10, seems to have started providing support for this Module.

For the rest of the browsers, in order for it to work, Firefox still needs the -moz- prefix, while Chrome and Safari need the -webkit- prefix. Opera doesn’t require any prefixes, so we can just using the official properties.

Source: When can I use CSS3 Multiple column layout?

Create Multiple Column

Before we create the columns, we have prepared some text paragraphs for the demonstration, wrapped inside the HTML5 <article> tag, as follow;

  <article>  	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et,  	rutrum in augue. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse non nulla tortor.  	Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Integer bibendum convallis sapien, sit  	amet tincidunt orci placerat in. Integer vitae consequat augue.    	//and so on  </article>  

…and specify the width for 600px from the style sheet, that’s it.

Now, let’s start creating the columns.

In the example below, we will divide the content into two columns with the column-count property. This property will tell the browser to render the content into columns by the specified number and let the browser decide the proper width for each column.

  article {  	-webkit-column-count:2;  	-moz-column-count:2;  	column-count:2;  }  

• Column Count Demo

Apart from being defined by the count, columns can be created by specifying the width using the column-width property and leaving the browser to decide how many columns should be generated in place.

In this example, we specify the column width for 150px, which resulted in the content to be divided into three columns.

  article {  	-moz-column-width: 150px;  	-webkit-column-width: 150px;   	column-width: 150px;  }  

As stated in the spec. the actual width of the column may be wider or narrower than the specified column width depending on available space. Also, if the width value is not explicitly specified, the “auto” will be taken as the default, which could also means “no column”.

• Column Width Demo

Column Gap

Column Gap define the spaces that separate each column. The gap value can be stated in em or px, but as stated in the spec the value cannot be negative. In the example below we specify the gap for 30px, so the spaces between the columns look a little wider.

  article {	  	-webkit-column-gap: 30px;  	-moz-column-gap: 30px;  	column-gap: 30px;  }  

• Column Gap Demo

Column Rule

Should you want to add borders between the column, you can use the column-rule property, which works very similar to the border property. So, let’s say, if we want to put a dotted border between the column, we can write;

  article {  	-moz-column-rule: 1px dotted #ccc;  	-webkit-column-rule: 1px dotted #ccc;  	column-rule: 1px dotted #ccc;  }  

• Column Rule Demo

Column Span

This property works quite similar to the colspan in table tag. The common implementation of this property is to span the content’s headline across all columns. Here is an example.

  article h1 {  	-webkit-column-span: all;  	column-span:all;  }  

In the example above we defined the h1 to span across all columns, and if the column span is specified, 1 will be taken as the default. Unfortunately this property, at the time of this writing, only works in Opera and Chrome.

• Column Span Demo

Final Words

That’s all for now, we have come through all the essential stuff to create multiple columns with CSS3, and as we have mentioned in the beginning, this module works very well in modern browsers but it doesn’t work yet in Internet Explorer, but should you insist to apply Multiple Column in unsupported browsers, you can use this JavaScript library to mimic this Module functionality.

Ultimately, we hope that you now have a fairly good understanding on how to create columns with CSS3, and if you have time for experiments, feel free to share your methods and results in the comment box below. Thank you for reading this post and have fun.

• Demo
• Download Source

Related posts:

1. CSS3 Border-Image Property: Making Photos Really Cool!
2. A Look Into: CSS3 2D Transformations
3. How to Create Gmail logo with CSS3
4. A Look Into: CSS3 Box-sizing