All categories

• Coding
• Design
• Graphics
• Inspiration
• CSS
• Freebies
• HTML5
• JavaScript
• Photoshop
• Typography
• Usability
• Wallpapers
• WordPress

Smashing Magazine

-->

Free Icon Set For Web Designers: Aroma (250+ PNG Icons)

• By Smashing Editorial
• November 17th, 2011
• Freebies
• 2 Comments

Advertisement

Today we are delighted to release another freebie for our design community. There are many free icon sets out there, and there are quite many commercial ones as well. Yet a good, consistently designed icon set is always a welcome addition to any designer’s toolbox. Oliver Twardowski had released the Ultimate Free Web Designer’s Icon Set (750 icons, including PSD sources) in the past, and this time he has prepared a fresh, new icon set which contains over 250 original high quality PNGs. Please notice that some icons may be similar to the ones released in the previous set.

Download the Collection for Free!

The elements contained in this collection are free for personal and commercial use. Please link to this article if you want to spread the word or give it a tweet or share it on Facebook! You may modify the file as you wish but please do not redistribute them elsewhere without written permission from Smashing Magazine and Oliver Twardowski.

• A High Resolution Preview
• Download The Set For Free (.zip, 1.7 Mb)

Behind the Design

As always, here are some insights from the designer:

“This set was started out in January 2011, so the whole design process took me nearly a year to finish. Including all the tiny, little, shy transparent PNGs and keys, the set is build out of 145.728 pixels. All icons were made with love in Cologne, Germany.

If you think that some icons are missing in this set, feel free to share your thoughts and ideas in the comments section below, contact me at aroma[at]addictedtocoffee[dot]de or find me via twitter at @mywayhome. Oh and did I mention: I’m always available for exciting freelance projects :)

Stay tuned! You never know  —  there might be a second part of the set coming out quite soon!”

Thank you, Oliver Twardowski. We appreciate your work and your good intentions!

(il) (vf)

Smashing Editorial

The team here at Smashing Magazine. Mostly Vitaly (vf), Sven (sl) and Iris (il).

Best of Design:

• Responsive Design
• Photoshop
• Typography
• Mobile Design
• Usability and UX
• Design Legacy and Art

Best of Coding:

• JavaScript & jQuery
• WordPress Techniques
• Back-End & Administration
• HTML5 Tutorials
• CSS, CSS3
• Bored?

Tags: freebies

Advertising

• 2 Comments
• Best Comments

Leave a Comment

Make sure you enter the * required information where indicated. Please also rate the article as it will help us decide future content and posts. Comments are moderated – and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!

30 Beautiful Dark-themed Web Designs for Inspiration

Nov 17 2011 by Jacob Gube | No Comments | Stumble Bookmark

Using a dark color theme in a website can convey many types of feelings and emotions towards its visitors. Edginess, elegance, modernity — these are just a handful of things that can be associated with dark colors.

There are countless of gorgeous dark-themed web designs on the Web. In this web design showcase, you’ll find 30 hand-picked websites that use a primarily dark color palette.

1. Jet Cooper

2. La Bubbly

3. Designers.MX

4. Thismanslife

5. Michael Korstick

6. Fueled by Design

7. Youzee

8. DonQ Rum

9. Cuban Council

10. workdiary.de

11. James Garner

12. McCormack & Morrison

13. Société Perrier

14. Rogge & Pott

15. The Weather Digital & Print

16. Skewed Icons

17. Alien Bikes

18. 42Angels

19. Justdot

20. Designer Gleb

21. simó

22. Kansas City CreepFest

23. The Kennedys

24. Team Viget

25. Cafundó

26. Boudin & Beer

27. Michelle Carrillo

28. Sullivan NYC

29. Hollister Co.

30. Kettle

Related Content

• 50 Beautifully Dark Web Designs
• 30 Inspiring Dark and Sleek Web Designs
• Create a Dark and Sleek Web Layout Using Photoshop
• Related categories: Design Inspiration and Web Design

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

Leave a Comment

Some of them are really stunning.

•  0

Having a well-designed and demonstrative portfolio is crucial especially if being an artist is your only livelihood. It often happens that talented designers can come up with a fantastic design but don’t know how to turn it into a functional website. And it’s the other way around for developers. What to do if you’re a photographer who needs to show of his work but have no clue about websites and don’t want to pay through the nose for a portfolio? This is another niche where theme marketplaces come in aid. At theme marketplaces you can purchase fully-functional, well-designed high-quality portfolio themes dirt cheap and not worry about all the coding stuff. This article presents 40 incredible premium WordPress themes to make you and your work stand out.

•  0

Year 2011 is rolling forward swiftly and middle of the summer is nearly here. Some of you might unwittingly note that the end of the summer is inevitable while for others that remaining month and half is fairly enough to fully enjoy the benefits that summer offers. Here in the virtual world the time is running even faster and we can already see some of the changes this year has brought to us. Imperceptibly and subtly yet compelling the new web design trends are conquering the scene. Because of the immense traffic and user count Deviantart can definitely be considered as a trendsetter.

This article takes a peek at past half-year and presents 50 splendid and trendy web designs from Deviantart spring and summer 2011. Can you spot the new potential trends? Are big headlines and patterned backgrounds still present? Share your thoughts in the comments below.

10 Excellent Tools for Responsive Web Design

Aug 3 2011 by Jason Gross | No Comments | Stumble Bookmark

Follow Six Revisions on Dribbble!

So, you’ve decided to venture into the creation of responsive web designs. Wonderful! With the browsing landscape diversifying into mobile devices, netbooks, desktops and so forth, responsive web designs allow web designers to provide different layouts for specific devices (based on screen size and browser features) giving site visitors an optimal user experience.

So now, you’ve determined that it would be beneficial to create responsive web designs. What tools can help you get the job done?

Tools have started to spring up to provide us with shortcuts and helpers for common responsive web design tasks. Let’s take a look at just  few that I find the most useful.

I divided the tools in this list into four categories:

• Responsive typography
• Flexible images
• Responsive web page layouts
• Testing and cross-browser support

Responsive Typography

First, let’s look at two tools (out of the many out there) that allow us to create beautiful, adaptive typography.

1. Lettering.js

Lettering.js, a jQuery plugin for controlling the appearance of your web type, is a great tool to help designers get a chokehold on their typography. Whether you’re working with a responsive web design or not, having this kind of control over your web type can help you craft a truly creative look without resorting to image-based solutions.

In the context of responsive design, Lettering.js gives designers precise control over typography characteristics such as spacing, leading and kerning in order to produce an optimal reading experience in various visual spaces.

2. FitText

Another jQuery plugin, FitText helps you make your headlines responsive. FitText make sure your display text appears optimally on various devices. This plugin may be simple, but its flexibility leaves the creativity in your hands and is easy to implement.

Flexible Images

After setting type, we can move on to tackling the issue of placing images in our responsive web designs. There’s one tool that should be a part of every responsive web designer’s arsenal.

3. imgSizer.js

Before heading straight to the code of imgSizer.js, make sure to read through Ethan Marcotte’s breakdown of what role this script plays in your responsive web designs. Essentially, this script was designed to make sure your images render cleanly in Microsoft Windows. Marcotte’s script does a pretty nice job of cleaning up images that have been sized down automatically by the browser.

Responsive Web Page Layouts

At the core of every responsive web design is a fluid and flexible layout that adapts itself to the screen size and features of the user’s browser. Let’s move on to resources related to layout, where most of the action happens in responsive web designs.

4. Fluid 960 Grid System

If you’ve been using the ubiquitous 960 Grid System by Nathan Smith (plenty of us have probably used it for projects or experimentation at some point), check out this fluid adaptation of the original project. If you’re comfortable with the original 960.gs, then you already know how to use Fluid 960 Grid System.

5. Gridless

If a grid system for web page layouts seems too restrictive to you, check out Gridless. Gridless is built to be leaner than other grid systems and was constructed with responsive designs in mind. The Gridless code bases its philosophy on the much-discussed mobile first method for crafting websites that must be delivered to a multitude of device environments.

For designers seeking more of a barebones, content-focused approach to responsive web design, you may find yourself quite at home with Gridless.

6. PXtoEM

A tedious mathematical process associated with converting fixed-width design work to a fluid layout is converting absolute units of measurements (i.e. px and pt) into relative units of measurement such as ems and percent (%) for typography, spacing, container widths, etc.

PXtoEM is a tool that provides users with a simple conversion tool to help them with all the math. The site also allows designers the ability to quickly and easily change the base font size of their layout to something that leads to more manageable math.

For example, in your HTML document, setting your body element’s font-size to 62.5% gives you the more convenient conversion ratio of 1em is to 10px, making unit conversion a little easier to do.

Testing and Cross-Browser Support

Finally, as we create our responsive web design, we’ll come to the point where our web type is clean and adaptive, our images are flexible and our layout is fluid.

Now we need to make sure that our site works in as many browsing environments as possible.

7. Adobe Device Central

The best way to test your website on different devices is to actually test it from within the devices themselves; nothing compares to seeing how your website actually looks and behaves within a particular mobile gadget or computer.

However, for those of us who don’t have the budget for hundreds of new gadgets, the solution comes in the form of Adobe Device Central. Device Central is one of the better pieces of software I’ve used for testing a site out on different devices.

If it’s variety and range you seek, Device Central won’t leave you disappointed. With an actively growing device library to choose from, users will find pretty much every major device on the market, ready to load in and test.

Testing websites has been made easy as well: Simply input the URI of the web page (local or remote) and then you can freely switch between the devices you want to test it in.

8. Web Developer

While Device Central (above) is cheaper than purchasing a bunch of devices, it still may be outside the price range of some designers’ pocketbooks.

A fantastic alternative (or additional tool alongside Device Central) is the Web Developer browser extension. Available for Firefox and Chrome, this extension provides designers with several tools that come in handy when developing responsive or fluid websites.

Most notable is the built-in ability to resize your browser window with the click of a button. New size presets can be saved and used instantly.

Other helpful features include viewing CSS by media type and outlining your containing elements, which I find useful for quickly identifying break points (or potential break points) in a design.

9. Respond.js

One of the glaring disadvantages of using media queries is that they are part of the CSS3 specifications and therefore is an absent feature in older browsers, such as in IE8 and below.

Of course, one might argue that we don’t see a lot of mobile devices running IE6. But one thing to note is that responsive web design isn’t just about mobile devices, it’s a way of developing sites that become optimized for all types of browsing situations. For example, IE7 or IE8 users might still benefit from a site that renders a different layout on large, widescreen monitors versus a small-screen netbook.

Fortunately, we have Respond.js, a lightweight, open source script that gives us more options for executing media-query-driven responsive web designs in IE6, 7 and 8.

The script is small — only 1KB when served gzipped to site users — and is unobtrusive, so there’s little excuse not to use it!

10. Modernizr

Much like Respond.js, Modernizr is here to bring designers the power of HTML5 and CSS3, even in older browsers. While it’s not as lightweight as Respond.js, it does give you media-query-like abilities in older browsers.

The other exciting capability Modernizr brings us, as it relates to responsive web design, is some added support for the very intriguing — but currently problematic and tumultuous — W3C specifications of the Flexbox model that allows for easier and more robust web page layouts.

Modernizr also provides conditional loading features. If you’re concerned about loading many resources because of page speed concerns, Modernizr allows you to conditionally load certain resources based on the user’s browsing circumstances.

Responsibly Responsive

Not every responsive web design project is going to require all of the resources mentioned here. As always, restrict your design projects to only the components that are required to achieve the goals desired. And then, when appropriate, sprinkle in features that can enhance the user experience for as many users as possible without degrading it for anyone else.

These resources were chosen based on their ability to help you complete your responsive web designs more efficiently.

Adaptive and responsive web design practices are still in its beginning stages, but they are important because the diversification of browsing devices and viewing methods — like 3D on the Web, for example — is going to continue as our industry progresses into the future.

If you know a tool that can help in building responsive web designs, share them in the comments!

Related Content

• 10 Excellent Tools for Testing Your Site on Mobile Devices
• A Quick Look at Mobile Web Designs
• Building Mobile Web Apps the Right Way: Tips and Techniques
• Related categories: Tools and Web Design

About the Author

Jason Gross is a freelance web designer focused on creating clean and user friendly websites. Jason currently lives in Indiana and can be found on Twitter as @JasonAGross or on the web at his personal blog and portfolio.

Leave a Comment

•  0

Whether you’re a motion designer, front-end developer or economy student – you have to keep up with the times and constantly increase your knowledge and broaden your professional viewpoint. One of the best ways to do that is by watching videos from professionals and experts in your field. Videos don’t have to be strictly instructive. A good and gripping video can inspire you for the rest of the day. In this article you’ll find a compilation of 40 awesome, inspiring and valuable videos varying from entrepreneurship to web design and self-motivation which will help you to develop new skills, gain a bunch of inspiration and simply look at things from a different perspective.

By Akhter on July 26, 2011

40 Useful CSS Tutorials, Techniques And Resources

The Ultimate (Fresh) Collection Of High-Quality Free Social Media Icon Sets--> Don't Forget to participate in a contest where you can Win Your UberTags' 1 Year Free (Worth $600) Subscription Trust us! It may REALLY help you to become a Mobile Design Rockstar.
We highly recommend you to check out Mobile App Design Starter Kit which includes over 300 custom and standard design elements for iPhone, iPad & Android devices.

--> Do You Know That We Are Givingaway Premium Wordpress Themes Of Your Choice?
Yes, Don't forget to participate in contest where you can Take A Chance To Win Premium Wordpress Theme From TemplateMonster.

--> featured at Wordpress Showcase. If you like Smashing Apps and would like to share your love with us so you can click here to rate us.-->

We have previously posted many articles on CSS tutorials and resources you can learn CSS from. Today, again we come up with yet another great list of 40 CSS tutorials, techniques and resources that you will enjoy exploring. Every developer knows very well how important it is to learn and use CSS effectively. Therefore, tall the developers keep themselves updated with the latest development and advancement in the technology.

Below is the list of 40 useful CSS tutorials and resources you cannot afford to miss. We hope this broad list will train you something innovative, or moreover jog your memory and help you recall some methods you haven’t used for a while.

Minimalistic Navigation Menu

In this tutorial we are making something practical, a simple CSS3 animated navigation menu, which degrades gracefully in older browsers and is future-proofed to work with the next generation of browsers.

Sleek Card Pockets using CSS Only

In this CSS3 tutorial, you’ll learn how to create web card pockets using some great new CSS3 techniques.

CSS Absolute Positioning: Create A Fancy Link Block

Absolute position is a feature of the CSS2 specification that is supported by all of web browsers. If you posit an element (an image, a table, or whatever) absolutely on your page, it will appear at the exact pixel you specify. In this tutorial, we will use some tricks to create a fancy link block that make our links more attractive.

Create a Button with Hover and Active States using CSS Sprites

Too many designers neglect the click state (active: property in CSS) in web design, either because they’re unaware of it, underestimate the importance of it or are plain lazy. It’s a simple effect that improves usability by giving the user some feedback as to what they’ve clicked on but can also add depth to a design.

How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3

In this tutorial will will create a Sexy Vertical Sliding Panel Using jQuery And CSS3.

Style a List with One Pixel

A one-pixel background image can be a pretty versatile thing. With repeat-x it can be a horizontal line, repeat-y makes a vertical line, and repeat makes it a fill color. Just as a little fun proof of concept, we can use that to create a depth-chart looking unordered list.

Pushing Your Buttons With Practical CSS3

Calls to action are critical for any website, and a compelling, attention-grabbing, clickable button goes a long way toward driving that engagement. In the past, really awesome buttons needed extra markup, sliding doors or other trickery. We’ll show you here how to create nice button styles without any hacks or cheats.

Build Multi-level Multi-column Multi Menus with pure CSS

In this tutorial we will learn how to build multi-level multi-column multi Menus with pure CSS.

Elegant Drop Menu with CSS only

In this tutorial, you will see a simplest way to build a same effect by using CSS only. With some CSS make-up, your menu will be elegant. Not sure which one is easiest, but for sure it’s the simplest menu comes with drop effect: horizontal and vertical navigation.

HOW TO CREATE A BEAUTIFUL DROPDOWN BLOGROLL WITHOUT JAVASCRIPT

In this tutorial author is going to walk you through how he have set up the blogroll in our upcoming redesign. Load up the example page to see how our final product will look.

How to Build a Simple Button with CSS Image Sprites

Let’s take a look at building a simple button using CSS image sprites, starting right at the beginning in Photoshop and finishing with the complete coded example. This one’s a good one for anyone getting started with CSS!

CSS3 Hover Tabs without JavaScript

A quick tip on CSS3 Hover Tabs without JavaScript.

How To Use Pure CSS To Style Web Form Dynamically Plus 12 Awesome JavaScript Plugins

In this article you will learn how to use pure CSS To Style Web Form Dynamically Plus 12 Awesome JavaScript Plugins.

Horizontal Subnav with CSS

In this tutorial author would like to go over how to create a simple navigation with a horizontal subnav.

CSS3 Speech Bubble

In this tutorial you will learn how to create CSS3 Speech Bubble.

How to Create Nice Scalable CSS Based Breadcrumbs

In this tutorial author will teach you how to create nice scalable CSS Based Breadcrumbs. Author is using only one simple graphic. The rest is basic CSS styling with an unordered list as HTML code.

Fluid searchbox

Creating a fluid search box when you only have a single element next to it is trivial. What you do is wrap the input in an element and use padding to create space for the fixed element, then position the fixed element absolutely (or relatively) in the space created by the padding.

Using Rounded Corners with CSS3

As CSS3 gets closer to becoming the new standard for mainstream design, the days of rounded corners through elaborate background images is fading. This means less headache and time spent working out alternatives for each browser.

6 Ways To Improve Your Web Typography

Typography on the web is anything but simple, and for many, it is a troubling mystery. In this tutorial we’re going to review six ways that web designers and developers can improve the typography of the sites they create.

Create a Letterpress Effect with CSS Text-Shadow

The letterpress effect is becoming hugely popular in web design, and with a couple of modern browsers now showing support for the text-shadow CSS3 property it’s now simple and easy to create the effect with pure CSS. No Photoshop trickery here!

3 Easy and Fast CSS Techniques for Faux Image Cropping

These techniques can be very helpful if you need to keep images at a certain size, i.e. thumbnails in the news section or something similar. Being able to use CSS to control which portion of image to display is a great bonus.

How to Create a Fancy Image Gallery with CSS3

Here author have prepared a tutorial about how to use CSS3 to make an image gallery with animation. He recommend to use one of these browsers to see the animations; however, the gallery is going to be usable in browsers without support of the animation.

Creating an Animated CSS3 Horizontal Menu

This tutorial shows us how powerful CSS3 can be and how we can save some JavaScript code to achieve the same result. As you know, right know the transition property is only supported by Safari and Chrome.

How to Create a Cool Anaglyphic Text Effect with CSS

Let’s take a look at how a similar style can be created for sprucing up your web designs, while taking into consideration semantics and avoiding the repetition of any markup.

How To Create Depth And Nice 3D Ribbons Only Using CSS3

In this tutorial you will learn How To Create Depth And Nice 3D Ribbons Only Using CSS3.

How To Create Simple, Stylish and Swappable Image Captions

In this tutorial you will learn How To Create Simple, Stylish and Swappable Image Captions.

CSS Polaroid Picture Tutorial

Polaroid pictures (or fake ones anyway) can be created using Photoshop or a similar graphics package but author aim to create the same kind of look by using CSS.

Advanced CSS Menu

In this tutorial author will show you how to slice up the menu design (step by step) and put them together with CSS.

CSS Techniques: Using Sliding Doors with WordPress Navigation

This sliding doors CSS hack allows you to create sophisticated tabs for your navigation bar.

CSS Dock Menu

This tutorial is really very helpful, very nice and useful tip on creating Mac’s Dock menu.

Sexy Drop Down Menu CSS

In this tutorial author would like to go over how to create a sexy drop down menu that can also degrade gracefully.

Coding Apple’s Navigation Bar Using CSS Sprites

This tutorial is not going to go in depth about all the benefits of sprites, but will show you how to use the technique correctly.

CSS Sprite Navigation Tutorial

This tutorial teaches how to build a css navigation using sprite images. With the mobile web becoming more important than ever before, load time and the size of a web site are some of the biggest factors to consider when developing a site for mobile users.

Breaking Out of the Box With CSS Layouts

It’s true that CSS is heavily reliant upon a grid — everything flows on x and y axes (and can be positioned as such, much like designs built in Photoshop). However, this doesn’t mean that your design has to be boring. If you understand how the grid works, you can fracture or abstract that grid to make your layout more dynamic and interesting.

CSS Guide

The Ultimate Guide to Creating a Design and Converting it to HTML and CSS

Minimal and Modern Layout: PSD to XHTML/CSS Conversion

In this web design tutorial, you’ll see a process for converting a Photoshop mockup to working HTML/CSS template. This is Part 2 of a tutorial series that will show you how to create the design, and then convert it to an HTML/CSS template.

Create YouTube-like adaptable view using CSS and jQuery

In this tutorial you will learn how to create YouTube-like adaptable view using CSS and jQuery.

How to distribute elements horizontally using CSS

In this tutorial we will learn how to distribute elements horizontally using CSS.

Sticky (Fixed) SideNav Layout with CSS

In this tutorial author would like to go over how to create a fixed sidenav layout for your blog or website.

Useful CSS Tricks You Should Know

Here are 25 incredibly useful CSS tricks that will help you design great web interfaces. You might be aware of some or all of these techniques, but this can be your handy resource to nifty CSS tricks that you should know.

11 Classic CSS Techniques Made Simple with CSS3

In this tutorial, author will show you eleven different time-consuming effects that can be achieved quite easily with CSS3.

Tags: css designs, CSS Tutorials
-->

Best of the Web, Codes and Scripts, CSS/Style Sheets, Education and Learning, Tips and Tricks, Web Design

Don't Forget to participate in contest because Webyog Is Giving Away 5 Single User licenses Of SQLyog Enterprise Of Worth $99 Each - Just Comment Now And Win

-->

--> You May be Interested In More Interesting Free Resources -->

Related Articles You Will Definitely Find Worth Checking Out

1. 

   23 Ultimate Collection Of Useful Ajax Tutorials & Resources

2. 

   85+ Excellent Resources And Tutorials Especially For Designers To Discover The Best Of The Web In January

3. 

   70+ Promising Resources and Tutorials Especially For Designers To Discover The Best Of The Web In December

4. 

   80+ Incredible Collection Of Inspirations, Tutorials And Resources For Designers To Discover The Best Of The Web In February

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.

Comments

Comment by شات الطائف on July 27, 2011 @ 5:00 pm

Thanks for sharing these cool

Leave a comment