Thursday, December 29, 2011

10 Resources for Creating Website Color Schemes

Choosing the right color scheme is one of the most important decisions of the website design process, and it can also be one of the most challenging. Fortunately, there are a number of great tools available to help with color selection.
Some of the resources mentioned in this post will allow you to browse through a variety of color palettes or schemes, many will allow you to create and save your own color schemes, and some are interactive, allowing you to quickly create an effective color scheme.

Kuler

Adobe’s Kuler includes a large library of user-submitted color schemes. You can view the color schemes online or download them to be used in Adobe Creative Suite products.
Kuler

Colour Lovers

Colour Lovers currently has almost 2 million color palettes created by its users. You can browse palettes by submission date, rating, views, and comments, or you can search by keyword.
Colour Lovers

ColoRotate

ColoRotate has a library of color schemes that you can browse, or you can create your own with their unique 3D tool. You can use it directly in Photoshop and Fireworks with the ColoRotate plugin.
ColoRotate

Color Scheme Designer

Color Scheme Designer allows you to choose the type of scheme that you want to use (mono, complement, triad, tetrad, analogic, or accented analogic). You then adjust one of the colors on the wheel and the other colors will adjust as well, helping to create an appropriate color scheme.
Color Scheme Designer

ColorSchemer Gallery

ColorSchemer has a large library of user-created color schemes. You can browse by submission date, rating, or number of downloads, or you can search by keyword.
ColorSchemer Gallery

Pictaculous

Pictaculous is a simple online tool for generating a color scheme. You can upload a photo and it will suggest colors to use with the photo. You can then download the Adobe swatch of the suggested colors.
Pictaculous

Color Spire

Color Spire is fairly simple to use. You select a starting color and it will suggest a palette of colors to use in combination. It also provides a basic preview to show how the colors would look on a sample website layout.
Color Spire

ColorExplorer

ColorExplorer includes a few different color tools. With the color picker you can select a color and see different variations. You can also view color libraries and use the color matching tool to help create a palette.
ColorExplorer

ColourGrab

ColourGrab is a simple tool that allows you to get colors from a picture that is online. Just enter the URL of the image and it will show which colors are used most in the photo.
ColourGrab

Sphere: Color Theory Visualizer

With Sphere you can adjust one of the colors in the scheme and the others will automatically adjust to match. You can try different types of color schemes like analogous, complementary, triadic, tetradic, and more.
Sphere: Color Theory Visualizer

Tuesday, December 27, 2011

Block Quotes and Pull Quotes: Examples and Good Practices

Quotes are used to emphasize excerpts of text. Since users almost never read but scan we need to provide them with some focus anchors to fix their attention to the most important parts of our articles. Furthermore, quotes are always used for testimonials and sometimes for blog comments. They can be styled using graphics, CSS and a little bit of JavaScript. Sometimes, creative dynamic solutions can be applied as well.
This post presents creative examples and best practices for design of pull quotes. We’ve tried to identify some common solutions and interesting approaches you may want to use or develop further in your projects.

Read More and take a look at the sample quotes designs >>

Few Samples :

Quotes and indentation

Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote

Lines and indentation

Screenshot Pullquote

Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote

Quotations highlighted with a color

Screenshot Pullquote
Natalie Jost displays a random quote from the Bible on her blog
Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote

Pull Quotes

Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote

Creative solutions

Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote

Quotations as a standalone element

Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote

Fish - Give feeds to fish by click on the animation area...



Watch them as they follow your mouse hoping you will feed them by clicking the surface of the water.


Monday, December 26, 2011

DropDown Menu using CSS3

Today, CSS3 has become a buzzword of modern web designers and developers around the globe. With its ground-breaking features, CSS3 has made a profound impact on the web designer community by making the lives of web designers easier and fun filled. Here in this post Deepu Balan going to explain such a cool CSS3 feature called :target Pseudo Class. By playing around and experimenting with the :target pseudo class, He have developed a cool looking pure CSS dropdown menu. This menu is developed wholly using CSS and HTML, no images or javascripts used. Hence it is easily customizable for anyone with very basic css/html knowledge.
DropDown Menu using CSS3

CSS3 Lightbox by Codrops


Today Codrops want to show you how to create a neat lightbox effect using only CSS. The idea is to have some thumbnails that are clickable, and once clicked, the respective large image is shown. Using CSS transitions and animations, we can make the large image appear in a fancy way. With the help of the pseudo-class :target, we will be able to show the lightbox images and navigate through them.
CSS3 Lightbox by Codrops