Web Design and Web Development

WEBSA is a web design company and web design firm that offers creative, professional and skilled web page design. Custom website designers and developers at our company focus on delivering our clients with customized and user-friendly designs. We are ready to promote your business.

http://www.websadubai.com/index.php

Advertisements

Web Design with CSS3’s Multiple Backgrounds

Web Design with CSS3’s Multiple Backgrounds

The main conclusion that will occur after watching this video is that IE really stops the development of modern web technologies including CSS3 because Multiple Background feature enlightens process of creating layout but compatibility issues ruin all positive influence of this CSS3 feature.

By sumerasblog Posted in Designs

Creativity at it’s best

A music video from the premiere mini album “Water Flavor EP”, from the Japanese band “Sour”, for the song “Hibi no Neiro” (Tone of everyday). The video was shot with webcams only, and the main protagonists are Sour fans from around the world.

Color Theory For Designers, Part 2: Understanding Concepts And Terminology

If you’re going to use color effectively in your designs, you’ll need to know some color concepts and color theory terminology. A thorough working knowledge of concepts like chroma, value and saturation is key to creating your own awesome color schemes. In Part 1: The Meaning of Color of our color theory series, we covered the meanings of different colors. Here, we’ll go over the basics of what affects a given color, such as adding gray, white or black to the pure hue, and its effect on a design, with examples of course.

[Offtopic: by the way, did you know that Smashing Magazine has one of the most influential and popular Twitter accounts? Join our discussions and get updates about useful tools and resources — follow us on Twitter.]

Hue

Hue is the most basic of color terms and basically denotes an object’s color. When we say “blue,” “green” or “red,” we’re talking about hue. The hues you use in your designs convey important messages to your website’s visitors. Read part 1 of this article for the meanings conveyed by various hues.

Examples

Happytwitmas in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
The primary hue of the background and some of the typography on the Happy Twitmas website is bright red.

Chapolito in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Using a lot of pure hues together can add a fun and playful look to a design, as done in the header and elsewhere on this website.

Estilorama in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Pure red is a very popular hue in Web design.

Mix in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Mix uses a number of pure hues in its header and logo.

Steveottenad in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Green in its purer forms is seen less often and so stands out more than some other colors.

Chroma

Chroma refers to the purity of a color. A hue with high chroma has no black, white or gray in it. Adding white, black or gray reduces its chroma. It’s similar to saturation but not quite the same. Chroma can be thought of as the brightness of a color in comparison to white.

In design, avoid using hues that have a very similar chroma. Opt instead for hues with chromas that are the same or a few steps away from each other.

Examples

Moviestills in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Cyan has a high chroma and so really stands out against black and white.

Canalconnection in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Another website with a high chroma blue, though it includes some tints and shades with somewhat lower chromas.

Philippdoms in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Combining high and low saturation in the same hue can make for a sophisticated and elegant design.

Fruehjahr in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Colors with very high chroma are best used in moderation, as done here.

Panelfly in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Differences in chroma can make for a visually pleasing gradient.

Saturation

Saturation refers to how a hue appears under particular lighting conditions. Think of saturation in terms of weak vs. strong or pale vs. pure hues.

In design, colors with similar saturation levels make for more cohesive-looking designs. As with chroma, colors with similar but not identical saturations can have a jarring effect on visitors.

Examples

Sifrvault in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
The saturation levels of many of the different hues used here are similar, adding a sense of unity to the overall design.

Rainbeaumars in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Combining colors with similar muted saturation levels creates a soft design, which is emphasized by the watercolor effects.

Disfrutasanjuan in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Hues with lower saturation levels aren’t necessarily lighter, as shown here.

Craftsale in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
An excellent example of how using a hue with a high saturation against a background with low saturation can make the former really stand out.

Sunrisesoya in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Aother example of how low saturation colors make nearby high saturation colors really stand out.

Value

Value could also be called “lightness.” It refers to how light or dark a color is. Ligher colors have higher values. For example, orange has a higher value than navy blue or dark purple. Black has the lowest value of any hue, and white the highest.

When applying color values to your designs, favor colors with different values, especially ones with high chroma. High contrast values generally result in more aesthetically pleasing designs.

Examples

Creativespark in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
The high value of the yellow used here really stands out against the lower-value black and gray.

Oysterdesign in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
This website combines blue hues with two different values. Because the different values have enough contrast, the overall look is visually appealing.

Copimaj in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Combining colors with similar values makes for an energetic and lively background (which is enhanced by the design itself).

Whoseview in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
The red here has a lower value than the light blue, which itself has a lower value than the white.

Colourpixel in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
The human eye can pick up differences in value even among such similar hues.

Tones

Tones are created when gray is added to a hue. Tones are generally duller or softer-looking than pure hues.

Tones are sometimes easier to use in designs. Tones with more gray can lend a certain vintage feel to websites. Depending on the hues, they can also add a sophisticated or elegant look.

Examples

Lakesideheritage in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Tones can give websites a sophisticated look while adding some vintage and antique flair.

Brightkite in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
This website combines blues in a variety of tones, shades and tints.

Mmuller in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Tones can be intensified by adding gray around them, as done here.

Redvelvetart in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
The tones used in the navigation and background design here give this website a vintage, hand-made feel.

Mergeweb in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
A great example of how a pure hue can really stand out against a background of tones.

Metalab in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Some colors that we might consider gray are actually tones of other colors. In this case, the background is a blue tone but with a lot of gray added.

Shades

A shade is created when black is added to a hue, making it darker. The word is often incorrectly used to describe tint or tone, but shade only applies to hues made darker by the addition of black.

In design, very dark shades are sometimes used instead of black and can serve as neutrals. Combining shades with tints is best to avoid too dark and heavy a look.

Examples

Jonathanmoore in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Jonathan Moore’s website has a variety of different shades of purple in the background (and a couple of tints in other parts).

Vuumedia in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Using different shades together works well, as long as sufficient contrast between them is maintained.

Alilot in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
An effective combination of shades and tints, particularly in the header.

Skipvine in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Another background design that has shades (and a few tints) in a textured gradient.

Stuffandnonsense in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Combining shades within textures adds interest to this website.

Tints

A tint is formed when white is added to a hue, lightening it. Very light tints are sometimes called pastels, but any pure hue with white added to it is a tint.

Tints are often used to create feminine or lighter designs. Pastel tints are especially used to make designs more feminine. They also work well in vintage designs and are popular on websites targeted at parents of babies and toddlers.

Examples

Caiocardoso in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Caio Cardoso’s website has a variety of green tints in the background and in other elements.

Fernandosilanes1 in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
The blue tint on Fernando Silanes’s website creates a soft and sophisticated look.

Duboutdesyeux in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Blue tints are popular for sky and nature motifs.

Smallwhitebear in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Tints are also popular in watercolor-based designs.

Iamgarth in Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Tints combined together make for a sophisticated gradient.

Conclusion

While you don’t necessarily have to remember all of these technical terms, you should be familiar with the actual concepts, especially if you want to master part 3 of this series (in which we create our own color schemes). To that end, here’s a cheat sheet to jog your memory:

  • Hue is color (blue, green, red, etc.).
  • Chroma is the purity of a color (a high chroma has no added black, white or gray).
  • Saturation refers to how strong or weak a color is (high saturation being strong).
  • Value refers to how light or dark a color is (light having a high value).
  • Tones are created by adding gray to a color, making it duller than the original.
  • Shades are created by adding black to a color, making it darker than the original.
  • Tints are created by adding white to a color, making it lighter than the original.

Further Resources

(al)

Cameron ChapmanCameron Chapman is a professional Web and graphic designer with over 6 years of experience. She writes for a number of blogs, including her own, Cameron Chapman On Writing. She’s also the author of Internet Famous: A Practical Guide to Becoming an Online Celebrity.

Color Theory for Designers, Part 1: The Meaning of Color

Color in design is very subjective. What evokes one reaction in one person may evoke a very different reaction in somone else. Sometimes this is due to personal preference, and other times due to cultural background. Color theory is a science in itself. Studying how colors affect different people, either individually or as a group, is something some people build their careers on. And there’s a lot to it. Something as simple as changing the exact hue or saturation of a color can evoke a completely different feeling. Cultural differences mean that something that’s happy and uplifting in one country can be depressing in another.

Colorstar in Color Theory for Designers, Part 1: The Meaning of Color

This is the first in a three-part series on color theory. Here we’ll discuss the meanings behind the different color families, and give some examples of how these colors are used (with a bit of analysis for each). In Part 2 we’ll talk about how hue, chroma, value, saturation, tones, tints and shades affect the way we perceive colors. And in Part 3 we’ll discuss how to create effective color palettes for your own designs.

[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]

Warm Colors

Warmcolors in Color Theory for Designers, Part 1: The Meaning of Color

Warm colors include red, orange, and yellow, and variations of those three colors. These are the colors of fire, of fall leaves, and of sunsets and sunrises, and are generally energizing, passionate, and positive.

Red and yellow are both primary colors, with orange falling in the middle, which means warm colors are all truly warm and aren’t created by combining a warm color with a cool color. Use warm colors in your designs to reflect passion, happiness, enthusiasm, and energy.

Red (Primary Color)

Red in Color Theory for Designers, Part 1: The Meaning of Color

Red is a very hot color. It’s associated with fire, violence, and warfare. It’s also associated with love and passion. In history, it’s been associated with both the Devil and Cupid. Red can actually have a physical effect on people, raising blood pressure and respiration rates. It’s been shown to enhance human metabolism, too.

Red can be associated with anger, but is also associated with importance (think of the red carpet at awards shows and celebrity events). Red also indicates danger (the reason stop lights and signs are red, and that most warning labels are red).

Outside the western world, red has different associations. For example, in China, red is the color of prosperity and happiness. It can also be used to attract good luck. In other eastern cultures, red is worn by brides on their wedding days. In South Africa, however, red is the color of mourning. Red is also associated with communism. Red has become the color associated with AIDS awareness in Africa due to the popularity of the [RED] campaign.

In design, red can be a powerful accent color. It can have an overwhelming effect if it’s used too much in designs, especially in its purest form. It’s a great color to use when power or passion want to be portrayed in the design. Red can be very versatile, though, with brighter versions being more energetic and darker shades being more powerful and elegant.

Examples

Darkcrimson in Color Theory for Designers, Part 1: The Meaning of Color

The dark shades of red in this design give a powerful and elegant feel to the site.

Abstraktion in Color Theory for Designers, Part 1: The Meaning of Color

The true red accents stand out against the dark black background, and give a powerful and high-end feeling to the site.

Bureau347 in Color Theory for Designers, Part 1: The Meaning of Color

The very bright red accents on this site give a sense of energy and movement.

Crowebdesignets in Color Theory for Designers, Part 1: The Meaning of Color

The dark red on this site, because it’s combined with grunge elements, seems more like the color of blood.

1mcreative in Color Theory for Designers, Part 1: The Meaning of Color

Dark red, when combined with white and gray, gives a very elegant and professional impression.

Orange (Secondary Color)

Orange in Color Theory for Designers, Part 1: The Meaning of Color

Orange is a very vibrant and energetic color. In its muted forms, it can be associated with the earth and with autumn. Because of its association with the changing seasons, orange can represent change and movement in general.

Because orange is associated with the fruit of the same name, it can be associated with health and vitality. In designs, orange commands attention without being as overpowering as red. It’s often considered more friendly and inviting, and less in-your-face.

Examples

Curiousromain in Color Theory for Designers, Part 1: The Meaning of Color

The bright orange box draws attention to its contents, even with the other bright red elements on the page.

Alamofire in Color Theory for Designers, Part 1: The Meaning of Color

Orange is used here in its most obvious incarnation, to represent fire.

Webdots in Color Theory for Designers, Part 1: The Meaning of Color

The dark orange, when set against the lime green, almost acts as a neutral and grounding color here.

Neighborino in Color Theory for Designers, Part 1: The Meaning of Color

Orange is used here to give a friendly and inviting impression.

Theplant in Color Theory for Designers, Part 1: The Meaning of Color

The orange accents here add a lot of visual interest and bring attention to the call to action.

Yellow (Primary Color)

Yellow in Color Theory for Designers, Part 1: The Meaning of Color

Yellow is often considered the brightest and most energizing of the warm colors. It’s associated with happiness and sunshine. Yellow can also be associated with deceit and cowardice, though (calling someone yellow is calling them a coward).

Yellow is also associated with hope, as can be seen in some countries when yellow ribbons are displayed by families who have loved ones at war. Yellow is also associated with danger, though not as strongly as red.

In some countries, yellow has very different connotations. In Egypt, for example, yellow is for mourning. In Japan, it represents courage, and in India it’s a color for merchants.

In your designs, bright yellow can lend a sense of happiness and cheerfulness. Softer yellows are commonly used as a gender-neutral color for babies (rather than blue or pink) and young children. Light yellows also give a more calm feeling of happiness than bright yellows. Dark yellows and gold-hued yellows can sometimes look antique and be used in designs where a sense of permanence is desired.

Examples

Foodtease in Color Theory for Designers, Part 1: The Meaning of Color

The bright yellow header and graphics used throughout this site give a sense of energy and positivity.

Artvisiona in Color Theory for Designers, Part 1: The Meaning of Color

The light yellow is used almost as a neutral in the header here, and combined with the hand-drawn illustrations gives a very cheerful impresison.

Cabomba in Color Theory for Designers, Part 1: The Meaning of Color

The bright yellow accents bring attention to the most important parts of this site.

Pasikeitimai in Color Theory for Designers, Part 1: The Meaning of Color

The bright yellow sunflower reminds visitors of summer on this site, and combined with the antique-yellow background, it gives a homey and established feeling.

Tangram in Color Theory for Designers, Part 1: The Meaning of Color

The bright yellow header here adds a bit of extra energy to this design.

Cool Colors

Coolcolors in Color Theory for Designers, Part 1: The Meaning of Color

Cool colors include green, blue, and purple, are often more subdued than warm colors. They are the colors of night, of water, of nature, and are usually calming, relaxing, and somewhat reserved.

Blue is the only primary color within the cool spectrum, which means the other colors are created by combining blue with a warm color (yellow for green and red for purple). Greens take on some of the attributes of yellow, and purple takes on some of the attributes of red. Use cool colors in your designs to give a sense of calm or professionalism.

Green (Secondary Color)

Green in Color Theory for Designers, Part 1: The Meaning of Color

Green is a very down-to-earth color. It can represent new beginnings and growth. It also signifies renewal and abundance. Alternatively, green can also represent envy or jealousy, and a lack of experience.

Green has many of the same calming attributes that blue has, but it also incorporates some of the energy of yellow. In design, green can have a balancing and harmonizing effect, and is very stable. It’s appropriate for designs related to wealth, stability, renewal, and nature. Brighter greens are more energizing and vibrant, while olive greens are more representative of the natural world. Dark greens are the most stable and representative of affluence.

Examples

Rubberdesign in Color Theory for Designers, Part 1: The Meaning of Color

The extremely muted greens of this site give it a very down-to-earth and natural feeling.

Ligonier in Color Theory for Designers, Part 1: The Meaning of Color

The bright green header of this site mixed with the leaf motif gives it a very natural and vibrant feeling.

Plantwithpurpose in Color Theory for Designers, Part 1: The Meaning of Color

The more olive-toned green of this site gives it a natural feeling, which is very appropriate for the content.

Iavion in Color Theory for Designers, Part 1: The Meaning of Color

The brighter, more retro-looking greens of this site give it a very fresh, energized feeling.

Baynature in Color Theory for Designers, Part 1: The Meaning of Color

Another olive green site with a very natural feeling.

Blue (Primary Color)

Blue in Color Theory for Designers, Part 1: The Meaning of Color

Blue is often associated with sadness in the English language. Blue is also used extensively to represent calmness and responsibility. Light blues can be refreshing and friendly. Dark blues are more strong and reliable. Blue is also associated with peace, and has spiritual and religious connotations in many cultures and traditions (for example, the Virgin Mary is generally depicted wearing blue robes).

The meaning of blue is widely affected depending on the exact shade and hue. In design, the exact shade of blue you select will have a huge impact on how your designs are perceived. Light blues are often relaxed and calming. Bright blues can be energizing and refreshing. Dark blues are excellent for corporate sites or designs where strength and reliability are important.

Examples

Sman96 in Color Theory for Designers, Part 1: The Meaning of Color

The dark blues give this a feeling of reliability, while the brighter and lighter blues keep it from feeling staid.

Industrialmedia in Color Theory for Designers, Part 1: The Meaning of Color

The dark blue gives this a site a professional feeling, especially when combined with the white background. But the lighter blue accents add a bit more interest.

Aandesigners in Color Theory for Designers, Part 1: The Meaning of Color

The bright, sky blue of this site gives it a young and hip feeling, which is emphasized by the reddish accents.

Mightydream in Color Theory for Designers, Part 1: The Meaning of Color

This site combines a range of blues, which gives it a refreshing feeling overall.

Fernandosilanes in Color Theory for Designers, Part 1: The Meaning of Color

The light, muted blue of this site gives a very relaxed and calm impression.

Purple (Secondary Color)

Purple in Color Theory for Designers, Part 1: The Meaning of Color

Purple was long associated with royalty. It’s a combination of red and blue, and takes on some attributes of both. It’s associated with creativity and imagination, too.

In Thailand, purple is the color of mourning for widows. Dark purples are traditionally associated with wealth and royalty, while lighter purples (like lavendar) are considered more romantic.

In design, dark purples can give a sense wealth and luxury. Light purples are softer and are associated with spring and romance.

Asprey in Color Theory for Designers, Part 1: The Meaning of Color

The dark shade used here evokes the royal heritage of purple, which is very appropriate for the Asprey luxury goods brand.

Avantgrape in Color Theory for Designers, Part 1: The Meaning of Color

The light and medium purples here work well to convey a sense of creativity.

Monumentmall in Color Theory for Designers, Part 1: The Meaning of Color

The brighter, more reddish purple of this site gives it both a rich and energetic look.

Ianjamescox in Color Theory for Designers, Part 1: The Meaning of Color

The dark purple background here adds to the creative feeling of the overall site.

Alice in Color Theory for Designers, Part 1: The Meaning of Color

The dark purple accents on this site give a sense of luxury and refinement.

Neutrals

Neutralcolors in Color Theory for Designers, Part 1: The Meaning of Color

Neutral colors often serve as the backdrop in design. They’re commonly combined with brighter accent colors. But they can also be used on their own in designs, and can create very sophisticated layouts. The meanings and impressions of neutral colors are much more affected by the colors that surround them than are warm and cool colors.

Black

Black in Color Theory for Designers, Part 1: The Meaning of Color

Black is the strongest of the neutral colors. On the positive side, it’s commonly associated with power, elegance, and formality. On the negative side, it can be associated with evil, death, and mystery. Black is the traditional color of mourning in many Western countries. It’s also associated with rebellion in some cultures, and is associated with Halloween and the occult.

Black is commonly used in edgier designs, as well as in very elegant designs. It can be either conservative or modern, traditional or unconventional, depending on the colors it’s combined with. In design, black is commonly used for typography and other functional parts, because of it’s neutrality. Black can make it easier to convey a sense of sophistication and mystery in a design.

Examples

Djalexander in Color Theory for Designers, Part 1: The Meaning of Color

The black accents, mixed with the brighter colors and very dark brown background add an edgier look to the overall design.

Reducetuhuella in Color Theory for Designers, Part 1: The Meaning of Color

Black, when mixed with icy blues, looks colder.

Mediasoldier in Color Theory for Designers, Part 1: The Meaning of Color

The black here, mixed with dark grays and lime green, and an overall grungy theme, adds to the edginess of the design.

Markwallis in Color Theory for Designers, Part 1: The Meaning of Color

The black accents here add an extra layer of sophistication and modernity to the site.

Theswishlife in Color Theory for Designers, Part 1: The Meaning of Color

The strong black accents on this site add to the overall sophistication of the design.

White

White in Color Theory for Designers, Part 1: The Meaning of Color

White is at the opposite end of the spectrum from black, but like black, it can work well with just about any other color. White is often associated with purity, cleanliness, and virtue. In the West, white is commonly worn by brides on their wedding day. It’s also associated with the health care industry, especially with doctors, nurses and dentists. White is associated with goodness, and angels are often depicted in white.

In design, white is generally considered a neutral backdrop that lets other colors in a design have a larger voice. It can help to convey cleanliness and simplicity, though, and is popular in minimalist designs. White in designs can also portray either winter or summer, depending on the other design motifs and colors that surround it.

Examples

Fuelhaus in Color Theory for Designers, Part 1: The Meaning of Color

The white on the Fuelhaus site is used to contrast against the electric blue.

Chamainc in Color Theory for Designers, Part 1: The Meaning of Color

White backgrounds are very popular on minimalistic sites, and provide great contrast to black typography.

Clearleft in Color Theory for Designers, Part 1: The Meaning of Color

Here, white is used as an accent color, which lightens the overall effect of the site.

Timeger in Color Theory for Designers, Part 1: The Meaning of Color

Articles / Tutorials on lists, menus, navigations and tabs.

Articles / Tutorials on lists, menus, navigations and tabs.

  1. 11 CSS navigation menus : at Exploding Boy
  2. 12 more CSS Navigation Menus. : at Exploding Boy
  3. 14 Free Vertical CSS Menus : at Exploding Boy
  4. 2-level horizontal navigation : demo at Duoh
  5. Absolute Lists: Alternatives to Divs : An approach of using lists instead of divs at evolt
  6. Accessible Image-Tab Rollovers : demo at Simplebits
  7. ADxMenu : multiple menu examples at aPlus
  8. A drop-down theme : at CSS Play
  9. Bookend Lists: Using CSS to Float a Masthead : at WebSiteOptimization
  10. Bulletproof Slants : demo at Simplebits
  11. Centered Tabs with CSS : at 24ways
  12. Clickable Link Backgrounds : A bulletproof unordered list of links, each with a unique (purely decorative) left-aligned icon that is referenced with CSS ; but that is also clickable.
  13. Create a Teaser Thumbnail List Using CSS: Part 1 : lists of items made up of a title, short description, and thumbnail.
  14. Creating Indented Navigation Lists : A multi-level indented list
  15. Creating Multicolumn Lists : at Builder.com
  16. cssMenus – 4 Level Deep List Menu : at SolarDreamStudios
  17. CSS and Round Corners: Build Accessible Menu Tabs : at SitePoint
  18. CSS-Based Tabbed Menu : a simple tabbed menu.
  19. CSS-based Navigation : demo at Nundroo
  20. CSS: Double Lists : A single list that appears in two columns
  21. CSS Mini Tabs (the UN-tab, tab) : demo at Simplebits
  22. CSS only dropdown menu : at CSS Play
  23. CSS only flyout menus : at CSS Play
  24. CSS only flyout/dropdown menu : at CSS Play
  25. CSS only flyout menu with transparency : at CSS Play
  26. CSS only vertical sliding menu : at CSS Play
  27. CSS Swag: Multi-Column Lists : at A List Apart
  28. CSS Tabs : tabs without any images
  29. CSS Tabs : list of various tab solutions
  30. CSS tabs with Submenus : at Kalsey.
  31. dTree Navigation Menu : Javascripts Tree at Destroydrop
  32. Definition lists – misused or misunderstood? : appropriate uses of definition lists
  33. Do You Want To Do That With CSS? – Multiple Column Lists : multi-column lists.
  34. Drop-Down Menus, Horizontal Style : at A List Apart
  35. Float Mini tabs : at Web-Graphics
  36. Flowing a List Across Multiple Columns : A table without using tables.
  37. Free Menu Designs V 1.1 : ready-to-download block menusat e-lusion
  38. FreeStyle Menus : XHTML compliant, CSS-formatted menu script at TwinHelix
  39. Hidden tab menu : at CSS Play
  40. How to Style a Definition List with CSS : at WebReference
  41. How to Style an Unordered List with CSS : at WebReference
  42. How to Use CSS to Position Horizontal Unordered Lists : at WebReference
  43. Hybrid CSS Dropdowns : at a List Apart
  44. Inline Mini Tabs : at Web-Graphics
  45. Intelligent Menus : CSS and PHP menu at PhotoMatt.net
  46. Inverted Sliding Doors Tabs : at 456BereaStreet
  47. Light Weight Multi Level Menu : at CssCreator
  48. List Display Problems In Explorer For Windows : list hack for IE
  49. Listamatic : simple lists; various styles.
  50. Listamatic2 : nexted lists; various styles
  51. Menus galleries in CSS and XHTML : multiple examples and downloads at Alsacreations
  52. Mini-Tab Shapes : demo at Simplebits
  53. Mini-Tab Shapes 2 : demo at Simplebits
  54. More than Just Bullets : at W3.org
  55. Multiple Column Lists : at css-discuss
  56. A Navbar Using Lists : A lightweight nav bar at WestCiv
  57. Navigation Matrix Reloaded : at SuperfluousBanter
  58. Remote Control CSS : examples of lists styled differently
  59. Remote Control CSS Revisited – Caving in to peer pressure : multi-column remote control
  60. Rounding Tab Corners : by Eric A. Meyer.
  61. Simple CSS Tabs : at SilverOrange
  62. Simplified CSS Tabs : demo at Simplebits
  63. Sliding Doors : at A List Apart
  64. Spruced-Up Site Maps : sitemaps as lists
  65. Styling Nested List : at SimpleBits
  66. Suckerfish Dropdowns : at HTMLDog
  67. Tabtastic : Gavin Kistner.
  68. Tabs Tutorial at BrainJar
  69. Taming Lists : at A List Apart
  70. Turning a List into a Navigation Bar : at 456BereaStreet
  71. Ultimate css only dropdown menu : at CSS Play

Free CSS navigation menus

These eleven CSS navigation menus are created using the Sliding Doors technique, and will even work in everyone’s favorite browser Internet Explorer. You may download the entire set and use any way you see fit. You may want to clean up the stylesheet, or alter the menu graphics to suit your needs. All the menus can be used for commercial or private use.

See all the menus.
Download the entire menu set.

50 New CSS Techniques For Your Next Web Design

CSS is almost certainly one of the best developments in web design since the first graphical web browsers were adopted on a wide scale. Where tables created clunky, slow-loading pages, CSS created much more streamlined and usable web pages. Plus, CSS has allowed designers to achieve a number of different styles that used to only be possible with images.

One of the best parts of CSS is that it’s so simple once you know the basics. Where tables used to make incredibly complex and sometimes impossible-to-decipher code, CSS keeps things clean and simple. Add a few comments to keep everything organized and it becomes an absolute dream to work with.

Below are 50 fresh CSS tricks, techniques and tutorials that will help you to improve the quality of your next web design. Be sure to check out our previous article: 53 CSS-Techniques You Couldn’t Live Without.

[Offtopic: by the way, have you already visited Smashing Magazine’s Facebook fan page? Join the community for a stream of useful resources, updates and giveaways!]

1. Security and Performance

While CSS is often thought of as merely a styling language, there are ways you can use it to add security to your site. There are also ways you can optimize your CSS to improve page load times. Both are discussed below.

Make your pages load faster by combining and compressing javascript and css files

This tutorial shows you how to create a PHP script to compress and combine multiple CSS and/or JavaScript files with gzip when they’re called for by a browser. It speeds up the page load times while making it possible to still edit the individual CSS or JavaScript files without having to combine and re-compress everything each times.

Informal testing showed that a group of JavaScript files were reduced from 168Kb (and 1905 ms to transfer) to 37Kb (and 400 ms). There wasn’t any data available for the effect it had on CSS files, but I’d guess it’s probably pretty similar.

Makeyourpagesloadfaster in 50 New CSS Techniques For Your Next Web Design

The Definitive Post on Gzipping Your CSS

This post covers the best and most recent methods for using GZIP to compress your CSS. It currently covers two different methods, both equally effective. One involves adding a bit of PHP to your CSS file (and renaming the file with a PHP extension instead of CSS) while the other method involves using the same PHP code with some additions but in a separate file.

Definitivecssgzipmethod in 50 New CSS Techniques For Your Next Web Design

Clickjane.css: A CSS User Style Sheet to Help Detect and Avoid Clickjacking Attacks

This post covers how to use clickjane.css to prevent clickjacking, a class of security vulnerabilities kind of like phishing scams and more formally referred to as user interface redressing. It’s cross-browser compatible but, admittedly, probably only covers a small range of potential clickjacking vulnerabilities. It’s still a good place to start, though.

Clickjanecsshelpdetectandav in 50 New CSS Techniques For Your Next Web Design

5 Step Style Sheet Weight Loss Program

This post shows five different ways to trim the size of your style sheets. Techniques range from learning how to group selectors to using CSS shorthand. Each technique is thoroughly explained and includes related resources.

5stepcssweightlossprogram in 50 New CSS Techniques For Your Next Web Design

2. Page Layout

This is what CSS was built for. The options are almost endless, especially as CSS3 becomes the new standard.

Aligning Inline Images with the Vertical-Align Property

The default vertical alignment for inline images in text sometimes looks not-so-great. This tutorial shows you how to better align inline images with your site’s type. It goes over the different types of vertical alignment and what they mean in relation to type.

Aligningimageswithverticala in 50 New CSS Techniques For Your Next Web Design

CSS Centering

This post includes instructions for centering liquid layouts with CSS. It’s very simple and straight-forward and works in virtually all browsers. Basically, it just uses left and right margins combined with some additional code to make it cross-browser compatible.

Csscentering in 50 New CSS Techniques For Your Next Web Design

Making Your Footer Stay Put with CSS

Keeping footers at the bottom of your pages can be a real hassle with CSS, depending on how the rest of your page is set up. This tutorial shows exactly how to keep your footer where it should be—below the rest of your content! It’s a very thorough post, with complete, step-by-step instructions.

Makingyourfooterstayputwith in 50 New CSS Techniques For Your Next Web Design

Vertical Centering with CSS

This post covers five excellent ways to center your content vertically. It includes the good and bad for each method along with complete instructions for implementing them. The methods range from using divs that act like tables to using absolute positions.

Verticalcenteringwithcss in 50 New CSS Techniques For Your Next Web Design

Handy Tips for Creating a Print CSS Stylesheet

This post is filled with great tips for creating better print stylesheets. It includes instructions for everything from including link destinations after the link text to splitting comments onto a new page. Pick and choose from the techniques offered or copy the whole stylesheet.

Handytipsforcreatingaprintc in 50 New CSS Techniques For Your Next Web Design

Fluid Images

Fluid layouts are great. They generally look and function just fine until you start introducing fixed-width elements within them—like images. This post shows how to make your images fluid, too. And it works for most embedded video. And while the basic technique includes just one CSS property, there is a workaround necessary to make it work on Windows machines.

Fluidimages in 50 New CSS Techniques For Your Next Web Design

Flexible Equal Height Columns

This tutorial shows how to create completely versatile equal height columns using valid and semantic markup. It’s cross-browser compatible and works with both fixed, fluid, and even elastic designs. It’s a very complete tutorial but not at all complicated.

Flexibleequalheightcolumns in 50 New CSS Techniques For Your Next Web Design

CSS Columns with Borders

This is a technique for creating equal-height columns with CSS that have borders. It uses a series of nested divs to achieve the effect instead of images. The end result is fantastic.

Csscolumnswithborders in 50 New CSS Techniques For Your Next Web Design

Creating a Polaroid Photo Viewer with CSS3 and jQuery

The photo gallery created with this technique is absolutely awesome. The HTML and CSS aren’t super-complicated, and everything is explained really well. While CSS3 isn’t supported by every browser, this does appear to degrade gracefully, making it perfectly fine to use as long as you don’t mind some visitors not getting the full effect.

Polaroidphotoviewer in 50 New CSS Techniques For Your Next Web Design

A Killer Collection of Global CSS Reset Styles

An incredibly complete collection of global resets, this post covers pretty much every reset you could possibly need. Some are short and sweet, consisting of only a couple of properties, while others are very complete and reset everything you might consider resetting.

Akillercollectionofglobalcs in 50 New CSS Techniques For Your Next Web Design

Making Module Layout Systems

This tutorial gives complete instructions for creating modular layout systems using CSS. This makes it practical to use different grid-based divs as needed for individual content elements. The end result provides tons of flexibility for dealing with everything from images to text while keeping everything uniform and balanced.

Makingmodularlayoutsystems in 50 New CSS Techniques For Your Next Web Design

Multiple Backgrounds (CSS3)

This tutorial shows how to implement multiple backgrounds using CSS3. It’s currently only supported by Safari, but the tutorial includes tricks to make it work in non-supported browsers. Currently, it doesn’t validate, but once the CSS3 standard is completed it’s likely it will.

Multiplebackgroundscss3 in 50 New CSS Techniques For Your Next Web Design

CSS3 Multiple Columns

Here’s a tutorial for creating multi-column layouts with CSS3. The CSS is pretty simple and straight-forward, much easier than most current solutions to multi-column layouts. Unfortunately, this only works with Firefox, Safari and Chrome at the moment.

Css3multiplecolumns in 50 New CSS Techniques For Your Next Web Design

Smart Columns with CSS and jQuery

This tutorial shows how to create smart columns inside liquid layouts using a combination of CSS and jQuery. Basically, it fits as many columns into the base column size as possible and then distributes any leftover white space among the columns there. A very elegant solution if you want to allow for a variable number of columns without ending up with a bunch of leftover white space in your design.

Smartcolumnswithcssjquery in 50 New CSS Techniques For Your Next Web Design

CSS Hack for Chrome, Safari and Internet Explorer

This tutorial shows how to apply different style sheets based on the browser your visitors are using (at least in IE5-8, Google Chrome, and Safari 1-4). A very valuable technique if you want to use styles only supported in certain browsers without making your site look bad in unsupported browsers.

3. Menu and Navigation Customizations

Menu and navigation styles can really set your site apart if done well. Just remember, menus need to remain usable and functional no matter how they look.

Overlap That Menu!

Have you ever wanted to create menu items that overlap? This relatively-simple tutorial shows you how to do just that using unique classes for your menu items. It also tells how to reorder the navigation items using the z-index. It’s a nice effect that isn’t difficult to achieve.

Overlapthatmenu in 50 New CSS Techniques For Your Next Web Design

Super Awesome Buttons with CSS3 and RGBA

With a little CSS3 magic, you can created a scalable set of sexy buttons with nearly half the CSS it would have taken with hex colors. Give it a go in your next project and see how it can help add that extra polish you want without huge impact on your code.

56 in 50 New CSS Techniques For Your Next Web Design

Custom Buttons 3.0

This page shows a variety of rounded-corner (1px radius) buttons that don’t use images (other than for the optional background gradient). Just look at the source code for the page to see how it’s done.

Custombuttons30 in 50 New CSS Techniques For Your Next Web Design

Centered Tabs with CSS

This tutorial provides an alternative to the sliding doors method of creating tabs in CSS that allows tabs to be centered instead of only right- or left-aligned. It’s a multi-step tutorial but isn’t complicated.

Centeredtabswithcss in 50 New CSS Techniques For Your Next Web Design

Styling the Button Element with CSS Sliding Doors

An updated tutorial on sliding doors buttons that now includes creating them with CSS image sprites. It’s also been simplified to work with a single block of CSS in all the major browsers (including IE 6-8). The markup is simple and straight-forward and the end result is perfect.

Stylingbuttonelementsliding in 50 New CSS Techniques For Your Next Web Design

Styling Buttons to Look Like Links

Sometimes you have to use a button (like with forms), but realize your design would look so much better with just a simple text link. This tutorial gives a complete overview of how to make your buttons look like text links using CSS.

Stylingbuttonsaslinks in 50 New CSS Techniques For Your Next Web Design

Simple, Scalable CSS Based Breadcrumbs

Breadcrumbs can be a great addition to your site’s navigation and can really improve your site’s usability. This tutorial shows you how to create breadcrumbs with CSS. The code used is simple (the HTML portion is just an unordered list) and there are only six CSS styles defined.

Simplescalablecssbreadcrumb in 50 New CSS Techniques For Your Next Web Design

Recreating the Button

This article covers how to make a button that look very similar to regular HTML input buttons but can handle multiple types of interaction (like dropdowns or toggle functions). These buttons were originally developed at Google and are skinnable with just a few lines of CSS. The buttons created are entirely CSS-based, including the gradient background.

Recreatingthebutton in 50 New CSS Techniques For Your Next Web Design

List of 10+ Usability-Conscious Link Styles

This page offers a good overview of different effects you can use for links, including color and underline, backgrounds, and animations. It’s a good starting place if you’re trying to figure out exactly how your links should look and act to make them more user-friendly.

Listof10usabilityconsciousl in 50 New CSS Techniques For Your Next Web Design

Create Vimeo-Like Top Navigation

Here’s a tutorial to create a drop-down top navigation bar similar to the one Vimeo.com uses. It’s all done with images, CSS and HTML and isn’t particularly difficult, though it is a bit complex. It’s explained really well, with images illustrating the structure and very well-written CSS.

Createvimeoliketopnav in 50 New CSS Techniques For Your Next Web Design

Beautifully Horizontal Centered Menus/Tabs/List

This tutorial explains how to create cross-browser compatible, centered menus or other items in CSS with no hacks and no JavaScript It’s compatible with liquid layouts, too. Not only does it give the code to achieve the effect, but it also fully explains exactly how and why it works.

4. Typography

Here are a few tutorials and tricks for creating advanced typographic styles using CSS. There’s everything from line-wrap functions to faux anti-aliasing to adding gradients and shadows.

Wrapping Text Inside Pre Tags

This tutorial shows how to wrap text within pre html tags. It’s useful for displaying code on your site, especially when lines of code are quite long and end up breaking your site’s layout (especially in IE). It’s a relatively simple and there are a few different options presented.

Wrappingtextinpretags in 50 New CSS Techniques For Your Next Web Design

Make Cool and Clever Text Effects with CSS Text-Shadow

Creating text effects without the use of images is a big advantage in terms of both file size and the time required for maintenance. This tutorial shows how to take advantage of the text-shadow property in CSS to style your text. While this effect doesn’t work in IE, it does in most other browsers. And it looks incredibly cool if done well (I’m a big fan of the “milky text” example).

Coolandclevertexteffectscss in 50 New CSS Techniques For Your Next Web Design

Safari’s Text-Shadowing Anti-Aliasing CSS Hack

This tutorial shows how to use the text-shadow CSS property to create an anti-aliasing effect on your text. It only works in browsers that support text-shadow (so not IE), but the look is pretty awesome. It can definitely make text more readable, just don’t overdo it or you end up with text that’s blurry.

Safaristextshadowantialiasi in 50 New CSS Techniques For Your Next Web Design

Safari’s Text-Shadowing Anti-Aliasing CSS Hack Revision

This is a revised version of the technique above to create a slightly different anti-aliasing effect, especially useful for light text on dark backgrounds. It uses an extremely transparent black background to force Safari to render the text more legibly.

Safaritextshadowantialiasin in 50 New CSS Techniques For Your Next Web Design

Snazzy Pullquotes for Your Blog

If you have a blog or other site that’s text-heavy, using pull quotes to highlight important bits can look really awesome while also making your content more scannable. This tutorial shows how to format those pull quotes with CSS. It shows how to create both left and right aligned pull quotes while also preserving your regular blockquote style.

Snazzypullquotesforyourblog in 50 New CSS Techniques For Your Next Web Design

Codename Rainbows

Here’s a technique for creating two-color gradients for text using a combination of JavaScript and CSS. It also works to apply shadows and highlights to text. The possibilities for the use of this technique are pretty endless. Of course, this is also one of those things where a little bit goes a long way (ie, limit gradients to your headers, titles, and other text you want to stand out—not your site’s body copy).

Codenamerainbows in 50 New CSS Techniques For Your Next Web Design

Build Better CSS Font Stacks

This article gives some great guidelines for creating better CSS font stacks. It includes information on the most common font stacks currently used and then goes on to cover Tuck’s Definitive Font Stacks and Ford’s Better Font Stacks. It’s a great resource when you’re determining a site’s typography, with the information presented in a very scannable, well-organized format.

Buildbettercssfontstacks in 50 New CSS Techniques For Your Next Web Design

CSS3 Embedding a Font Face

Here’s a great tutorial on how to embed fonts using CSS3. While it’s still not widely supported, this technique makes it much easier to embed special fonts into a site without having to resort to images.

Css3embedafontface in 50 New CSS Techniques For Your Next Web Design

CSS Gradient Text Effect

This little trick makes it easy to create gradient text by applying a 1 pixel gradient PNG to it. It’s a quick and easy way to create gradient text pretty much anywhere on your site. There’s even a fix to make it work in IE6 included.

Cssgradienttexteffect in 50 New CSS Techniques For Your Next Web Design

5. Other Cool Techniques, Tips, and Tricks

Below are a ton of other techniques and tricks you can use to really make your CSS stand out.

3D Cube Using CSS Transformations

This is probably one of the coolest CSS techniques I’ve seen. This tutorial shows how to build a 3D cube with text or other content on each side of the cube. It does it entirely with CSS; there’s no canvas, SVG, imagery, or JavaScript. There’s even instructions for creating multiple shaded cubes on a single page. The only real drawback is that it’s only supported in recent WebKit and Gecko browsers.

3dcubeusingcsstransformatio in 50 New CSS Techniques For Your Next Web Design

Nine Ways to Obfuscate E-mail addresses compared

This article gives two different methods for obfuscating email addresses with CSS. One involves using the display:none attribute while the other involves reversing the code. Both supposedly cut the amount of spam received to zero.

Waystoobfuscateemailaddress in 50 New CSS Techniques For Your Next Web Design

Forms Markup and CSS – Revisited

Here is a CSS template for form styling. The markup of the form is based on the Accessible Forms Markup from Derek Featherstone. The template is semantically correct, flexible and accessible.

Formsmarkupandcssrevisited in 50 New CSS Techniques For Your Next Web Design

iPhone CSS

A very short and simple tutorial on how to make certain elements of you CSS render differently on the iPhone. It’s surprisingly simple and easy to implement.

Iphonecss in 50 New CSS Techniques For Your Next Web Design

Improving Your Process: Faster Front End Development

While this post offers plenty of information on things other than CSS, it also offers some great advice for improving your efficiency with CSS: mainly, write your CSS in blocks. This technique is usually done progressively as you get used to coding in this manner. The steps are simple, though, and it’s sure to make you a much faster designer.

Improvingyourprocessfasterf in 50 New CSS Techniques For Your Next Web Design

Image-Free CSS Tooltip Pointers – A Use for Polygonal CSS?

This tutorial explains how to create triangles (to be used for pointers) using CSS, without the need for any images. The end result is great, though it only works for single-color images. The CSS used is incredibly simple while still being really versatile. You can create a triangle of almost any size using just a single div.

Imagefreecsstooltippointers in 50 New CSS Techniques For Your Next Web Design

How I Implemented My Cookie-Based Switcher

While not strictly a CSS trick, this post shows how to create a cookie-based CSS theme switcher for WordPress. It allows users to choose to use a different theme when they visit the blog while allowing new users to see a nice, simple, easy-to-read theme that puts the primary focus on the content.

Howiimplementedmycookiebase in 50 New CSS Techniques For Your Next Web Design

CSS Swap Hover Effect

This great technique will replace any image with another image when you hover over it. The tutorial shows it applied to a portfolio site, but the possibilities are endless. It’s very slick and cross-browser compatible (though IE6 does require a bit of a workaround, as usual).

Cssswaphovereffect in 50 New CSS Techniques For Your Next Web Design

CSS Stacked Bar Graphs

Here’s a tutorial for creating stacked bar graphs using CSS and some images. It’s a pretty in-depth process, but the result looks fantastic.

Cssstackedbargraphs in 50 New CSS Techniques For Your Next Web Design

Changing HTML Images on Hover / A Quick CSS Trick

Here’s a quick and easy CSS technique for swapping out images on hover. It’s pure CSS, no JavaScript required. The biggest issue this technique solves is that when the page is printed, the base image is the only one that shows up.

Changinghtmlimagesonhover in 50 New CSS Techniques For Your Next Web Design

10 Properties that Were Impossible to Implement in IE6

This collection of CSS tricks shows how to implement a number of styles that were supposedly impossible in Internet Explorer 6. It includes tricks for opacity, fixed positions, and text shadow, among others.

Propertiesimpossibletoimple in 50 New CSS Techniques For Your Next Web Design

10 Challenging But Awesome CSS Techniques

Sometimes the coolest things just take a bit more effort. This collection of tutorials covers ten different CSS techniques that aren’t exactly easy to achieve, but the end results are well worth the extra effort. Techniques include pull quotes, dynamic variables, and style changes based on the time of day or even the weather, among other awesome examples.

10challengingbutawesomecsst in 50 New CSS Techniques For Your Next Web Design

source

http://www.smashingmagazine.com/2009/07/20/50-new-css-techniques-for-your-next-web-design/

Difference between Web and Graphic Design

Designing for web and print are two different experiences. Just because a designer is good at one doesn’t mean they’ll be good at the other. It’s necessary to understand that web and print share many similarities, but they also have many differences.
Below is a list of things to consider when going from print design to web design:

Resolution
Resolution is the quality of an image. It’s measured in terms of pixels. If you see an image listed as “72 ppi”, for visit to:-www.automatic-content.comthat means the image has 72 pixels per inch (ppi). Because web graphics are viewed on screen, they should be no larger than 72 ppi. A large ppi image will load slower, and won’t necessarily look any better.

Image Files – Gifs and Jpegs
JPEG stands for Joint Photographers Experts Group. It’s a great format that retains color and detail found in photographs and graphics with lots of color blends. JPEGs can display millions of colors so it’s ideal for print work.

GIF stands for Graphics Interchange Format. Most web pages use this format because it’s supported by all web browsers, can display up to 256 colors, and can include transparent backgrounds. GIFS are appropriate for image files with little color variation, and for images that will only be viewed on screen.

Photographs saved as GIFs may appear grainy. Single color images saved as JPEGs may appear fuzzy. When you save a graphic image, consider what type of file it is. Remember, GIFs work best with images having few colors or color variations. JPEGs work best with photographs or images to be printed.

Fonts

There is a major difference between choosing fonts for web as opposed to print. With print design, your completed piece will display the font specified during the design process. You don’t have to worry that a reader will open your brochure and not have the proper fonts displayed. However, more visit to;-www.google-friendly-page.com web designers never know for sure if their fonts will display properly.
Unlike with print, web fonts differ based on the web browser being used. Your audience can only view the same font you’re viewing if it’s installed on their computer. If you design a beautiful website using Chaucer Bold, and none of your viewers have that font, their browsers will have to find a substitute.

This is why it’s good to be conservative when it comes to web fonts. Your beautifully designed page can look horrible when displayed on someone else’s browser. Don’t let your hard work go to waste. Stick to fonts such as Helvetica, Arial, Times New Roman, or Verdana. All web browsers are capable of displaying these fonts. However, if you do want to use a creative font, you can include it in a graphic file. But this will cause your page to load slower.

If you’re a print designer faced with designing a web page, take time to study the subject. You will be able to create a pleasing and effective site if you recognize the differences between print and web design.

Designing for web and print are two different experiences. Just because a designer is good at one doesn’t mean they’ll be good at the other. It’s necessary to understand that web and print share many similarities, but they also have many differences.
Below is a list of things to consider when going from print design to web design:

Resolution

Resolution is the quality of an image. It’s measured in terms of pixels. If you see an image listed as “72 ppi”, for visit to:-www.automatic-content.comthat means the image has 72 pixels per inch (ppi). Because web graphics are viewed on screen, they should be no larger than 72 ppi. A large ppi image will load slower, and won’t necessarily look any better.

Image Files – Gifs and Jpegs
JPEG stands for Joint Photographers Experts Group. It’s a great format that retains color and detail found in photographs and graphics with lots of color blends. JPEGs can display millions of colors so it’s ideal for print work.

GIF stands for Graphics Interchange Format. Most web pages use this format because it’s supported by all web browsers, can display up to 256 colors, and can include transparent backgrounds. GIFS are appropriate for image files with little color variation, and for images that will only be viewed on screen.

Photographs saved as GIFs may appear grainy. Single color images saved as JPEGs may appear fuzzy. When you save a graphic image, consider what type of file it is. Remember, GIFs work best with images having few colors or color variations. JPEGs work best with photographs or images to be printed.

Fonts
There is a major difference between choosing fonts for web as opposed to print. With print design, your completed piece will display the font specified during the design process. You don’t have to worry that a reader will open your brochure and not have the proper fonts displayed. However, more visit to;-www.google-friendly-page.com web designers never know for sure if their fonts will display properly.
Unlike with print, web fonts differ based on the web browser being used. Your audience can only view the same font you’re viewing if it’s installed on their computer. If you design a beautiful website using Chaucer Bold, and none of your viewers have that font, their browsers will have to find a substitute.

This is why it’s good to be conservative when it comes to web fonts. Your beautifully designed page can look horrible when displayed on someone else’s browser. Don’t let your hard work go to waste. Stick to fonts such as Helvetica, Arial, Times New Roman, or Verdana. All web browsers are capable of displaying these fonts. However, if you do want to use a creative font, you can include it in a graphic file. But this will cause your page to load slower.

If you’re a print designer faced with designing a web page, take time to study the subject. You will be able to create a pleasing and effective site if you recognize the differences between print and web design.

Website Development – Six Reasons to avoid Flash

Recently one of my reader commented on my Post Web Standards and described how some Company in his knowledge suffered due to fully Flash Website.

Flash is a great interactive tool and really has changed Web Contents but in my view, it is not a good choice for most commercial web sites. Its great to use Flash as part of website, but in no way a prudent choice for full website. Flash being a proprietary technology breaks most web standards and conventions.

Here are six reasons, why we should avoid to use Flash.
1. Search Engine Optimization (SEO) Problems:

Although recently Google has announced that with collaboration of Adobe, now they are able to read through Flash contents but still Information embedded in Flash is often invisible to many other large search engines like MSN.

Search engines scan information on a web site, process and retrieving the best match for each user query. Robots (Small Software, used by Search Engines to scan a website) usually cannot process text embedded in Flash and graphic files. Sites designed completely in Flash often offer very little textual information completely ignoring different type of SEO Basics and fully contravene with most of rules given in Google Web Master Guide.

Tip: From SEO point of view, don’t use fancy flash buttons and navigation bars. Search engines track and love text links.

2. Statistics; An Important feature of Today’s Web; is missing

Web Statistics helps to evaluate website success and provide important information about visitor’s behavior, that help professional Web Developers, Designers and Marketer to come with more better and user oriented web solutions.

Some of important questions, web statistics answers are: Visitors came from, the pages visited and from where visitors left a site. Web Statistics are able to track when a Flash object, typically a swf file, is viewed. They are not able to track navigation within a Flash object – so if a site is composed of one Flash object which contains multiple site sections, the web analytic system will see a swf download, but will have no idea which parts of the site a visitor viewed nor where the visitor left the site.

3. Flash breaks web usability standards

Flash Breaks some of most important Web Usability Standards. Few examples are:

Browser Back Button do not work.
You cannot copy-paste important information like contact information.
Important Accessibility Features of browsers like Zoom In, Zoom our and Font Size change are not available.
You can’t book mark some page form site for future review. (As Flash Site has only one page as per Browser Eye)
4. Lack of consistent cross platform support

One of the keystones of the web is that a website should work in any browser on any computer – it is openness and standardization which has made the Internet universal. Flash breaks the basic tenets of website design. While most Internet users have Flash installed – they don’t necessarily have the right version installed. Indeed version 8 wasn’t even released for the Linux platform, locking those users out of sites developed for Flash 8 and 9 (Flash 9 for Linux has finally been released, months after the Windows version).

5. Some users disable Flash to avoid flash based advertising.

Savvier web users have learned to disable Flash in web pages to avoid animated advertising and / or to improve page-loading times on dial-up connections.

6. Website updates continually require Flash skills
Although now Flash based photo galleries and some other content management features are available but either that higly expensive or have limited features. Usually for sites developed in flash need high level flash skills for updation. (Khuram)

Unique and Creative Table Designs

mutabledesigns25

Collection of unique and creative table designs from around the world.

Orange Slice Table

Creative Table in the form of an orange slice.

mutabledesigns1

The Periodic Coffee Table

A visually stunning presentation of the periodic table suitable for reception areas, board rooms or wherever scientists meet and works of art might be displayed. Each element sample is individually embedded inside a solid acrylic block. The blocks are arranged in the familiar grid of the periodic table, carefully illuminated and beautifully presented beneath a sheet of toughened glass. The coffee table itself is manufactured by British Craftsmen in burred oak.

mutabledesigns181

Greca Table

Lacquered wood structure with chrome metal insert

mutabledesigns11

Endless Nile Table

Creative table designed by Karim Rashid.

mutabledesigns13

Reform Bedworks Laptop Table

Designed for those who want a hard surface while working on the floor or in bed, the Bedworks Laptop Platform houses a storage compartment for gadgets, papers and magazines

mutabledesigns12

SwiTCh Table

SwiTCh is a new concept in design. It is a chair and a table, a relaxing seat and a small working place in one. It switches instantly and effortlessly.

mutabledesigns17

Cirrus Table

Beautiful table design by Stuart Melrose.

mutabledesigns3

Creative Tables by Reiss f.d.

All tables in this collection utilize the technique of bending thin layers of wood veneer into a desired shape.  A method which yields 8-10 times more usable wood from a log than solid timber.

mutabledesigns5

Flintstone Table

Low table on wheels. Frame and top in bent natural sheet steel

mutabledesigns9

Breathing Light Tables

Tables that react to sounds in their environment and to each other through the “breathing” of LED lights

mutabledesigns22

mutabledesigns6

Changing DPI

Changing the DPI
If you’ve come here after reading my article “The Myth of DPI” you’ll already know that DPI has nothing to do with digital image resolution or quality. However, some people and places who are still ignorant of that fact (many graphics designers, magazines and print shops) still insist of getting a photo of ___DPI (usually 300 DPI) even when the photo’s pixel resolution is sufficient to print the photo at the required PPI. The easy solution (rather than trying to educate them about real digital photo resolution) is to simply change the DPI of your image to whatever they want and send it along to them.

You may also wish to change the DPI so that the image will default size to the intended print dimensions when loaded into a word processor or desk top publishing program. For instance, if you want to set a 1500 pixel wide photo so that it will default to a 4 inch print dimension, then change the DPI setting of the photo to 375 DPI (1500 pixels divided by 4 inches = 375 pixels per inch).

The trick when changing the DPI is to do it without resizing (resampling) your image in the process. You want to change the DPI while retaining the original pixel dimensions (the real digital resolution) of the photo. I’ll provide two examples, one using Adobe Photoshop and the other using the free photo program Irfanview.

Note that this procedure will not change the digital photo in any way other than to alter the internal DPI setting. The size and resolution of the digital image will be unchanged.

Adobe Photoshop Method

    adobe - change dpi
    note that the “Resample Image” box is UNCHECKED
    and that the “Resolution” has been set to 300

  1. Load your image into Adobe Photoshop (or Photoshop Elements).
  2. Select the “Image > Image Size” menu option (may be “Image > Resize > Image Size” in Photoshop Elements).
  3. In the image size dialog window, deselect the “Resample Image” checkbox (make sure there is no checkmark in that box).
  4. In the “Resolution” box type in 300 (or whatever DPI you want)
  5. Click the “OK” button
  6. Your image DPI has now been set to whatever you want (leaving the pixel dimensions of the image unchanged).
  7. Save this photo with a new name – I suggest adding a -300dpi extender (i.e. “345-2365-300dpi.jpg”) to identify this new DPI image.
  8. See note below when saving to JPEG format


Irfanview Resize Image Dialog Box
Irfanview Method

  1. Load your image into Irfanview
  2. Select the “Image > Resize/Resample” option
  3. In that dialog window you’ll see a specific DPI data box
  4. Simply enter whatever DPI you want without adjusting anything else in that dialog window.
  5. Click on the “OK” button
  6. Your image DPI has now been set to whatever you want (leaving the pixel dimensions of the image unchanged).
  7. Use “Save As” to save this photo with a new name – I suggest adding a -300dpi extender (i.e. “345-2365-300dpi.jpg”) to identify this new DPI image.
  8. See note below when saving to JPEG format


Saving to JPEG – please note that JPEG is a digital photo format that uses variable compression – that is, you can change the compression. Your camera should (if you have it set correctly) be using low compression (highest quality). To emulate this when doing a “save as” from a photo program, choose a compression of about 95 (Adobe Quality 10+).

So, using Irfanview, when you do a “Save As” in JPEG format, note the dialog box with the JPEG options – move the slider to 95 (or higher if you wish) for best image quality. With Adobe Photoshop (incl. Elements) – choose quality 10 or higher in the dialog box that comes up when you do a Save As in JPEG format.

A verification is to check the image filesize (in kilobytes or megabytes) of your copy of the photo against the original digital photo. They probably won’t be identical, but should be close. If there is a big discrepancy in filesize then you’ve done something wrong.

Other Programs

Other photo programs are going to have a similar process. The key is to make sure that the image IS NOT being resampled (pixel resized) when the DPI is changed. As long as the pixel dimensions remain unchanged, your new DPI photo will be identical to your original photo, only the internal DPI setting of the photo will have been changed. Your print shop, graphics designer or magazine should be happy campers with your “new higher DPI” image.

mujhe gale se lagaa lo, bahut udaas hoon main

Aasha:

the death

the death

nazar mein teer se chubhate hain ab nazaaron se
main thak gai hoon sabhi tootate sahaaron se
ab aur bojh na daalo

Rafi:
bahut sahi, gam-e-duniyaa, magar udaas na ho
kareeb hai shab-e-gam ki, sahar udaas na ho
bahut sahi

sitam ke haath ki talavaar toot jaayegi
ye uunch-neech ki deewaar toot jaayegi
tujhe kasam hai meri hamasafar udaas na ho

Aasha:
na jaane kab ye tarika ye taur badlega
sitam ka gam kab musibat ka daur badlega
mujhe jahaan se uthaa lo, bahut udaas huun main

Bachpan Ka Zamana Hota Tha,

Bachpan Ka Zamana Hota Tha,
Khushio.N Ka Khazana Hota Tha.

Chahat Chaand Ko Paane Ki,
Dil Titli Ka Deewana Hota Tha.

Rone Ki Wajha Na Hoti Thi,
Hasne Ka Bahana Hota Tha.

Khaber Na Thai Kuch Subho Ki,
Na Shamo Ka Thikana Hota Tha.

Daadi Ki Kahani Hoti Thi,
Pariuon Ka Fasana Hota Tha.

Pedho Ki Shakhe Chutey They,
Mitti Ka Khilona Hota Tha.

Gam Ki Zuban Na Hoti Thi,
Na Zakhmo Ka Paymana Hota Tha.

Barish Mein Kagaz Ki Kashti,
Har Mousam Suhana Hota Tha.

Wo Khel Wo Sathi Hotey They,
Har Rishta Nibhana Hota Tha.

illustrator blending gradient

illustrator 's blending gradient

“Love Does Not Fail For You When You Are Rejected or Betrayed or Apparently Not Loved. Love Fails For You When You Reject, Betray, and Do Not Love”.  Adi Da

How To Make 3D Vector Vintage Stars

How to Make A 3D Vector Vintage Star

1. Make your star shape

Use the Star tool and hold Shift to make a Star shape (or any shape you want, really) on the artboard. (everything you see here is exact size).

How to Make A 3D Vector Vintage Star

2. Extrude your shape

With your Star selected, in the Effect menu go to 3D > Extrude and Bevel.

How to Make A 3D Vector Vintage Star

Check the ‘Preview’ option so you can see what you’re working with.

How to Make A 3D Vector Vintage Star

Now you should see something like this:

How to Make A 3D Vector Vintage Star

Now take the ‘Perspective’ setting all the way to the right (160 degrees)

How to Make A 3D Vector Vintage Star
How to Make A 3D Vector Vintage Star

Now make your Extrude depth something like 900 or so.

How to Make A 3D Vector Vintage Star
How to Make A 3D Vector Vintage Star

Click on the blue box and drag to get your desired rotation.

How to Make A 3D Vector Vintage Star

Click OK, and you should have something like this:

How to Make A 3D Vector Vintage Star

3. Expand Appearance

Now that we have our 3D shape, we will most likely want to have a little more control over it. Go to Object > Expand Appearance and click OK to get rid of the effect and separate our effect into individual shapes that we can edit.

How to Make A 3D Vector Vintage Star

You’ll notice that we now have individual shapes for each side of the 3D star shape (and the effect s gone as well, which is good). Great! Now lets make a few more changes.

How to Make A 3D Vector Vintage Star

4. Fill the Sides with a Gradient.

To do this, you can either ungroup (about 3 times) until you can select the individual shapes, or you can use the Direct Select Tool (white arrow) to select the individual shapes and fill them with a gradient.

How to Make A 3D Vector Vintage Star
How to Make A 3D Vector Vintage Star

Do the same for all of the sides.

How to Make A 3D Vector Vintage Star

This is pretty much a 3D Vintage Star already, but there are a few extra touches we can add to take it a step further.

5. Offset the Front Face of the Star

To do this you will, again, either have to ungroup everything until you can select an individual shape, or use the Direct Select Tool (white arrow).

How to Make A 3D Vector Vintage Star

Select the face of the Star.

How to Make A 3D Vector Vintage Star

In the menu, go to Object > Path > Offset Path.

How to Make A 3D Vector Vintage Star

Choose a negative value for the offset. (Negative = Smaller/Inside the Selected Shape) I chose -8px.

How to Make A 3D Vector Vintage Star

Click OK and you will see your original Star face, and the new offset one.

How to Make A 3D Vector Vintage Star

Click once on the blank artboard to deselect everything, then use the Direct Select Tool to select the new (smaller) star.

How to Make A 3D Vector Vintage Star
How to Make A 3D Vector Vintage Star

Fill this smaller star with a different color to add something a little extra to your vintage star design.

How to Make A 3D Vector Vintage Star

Take it a step further:

6. Add a stroke around the entire group.

Hit Command/Control + A to select everything, then hold Option/Alt, click, drag and release to duplicate your shape. (or you can copy and paste if you like)

How to Make A 3D Vector Vintage Star

Now, select the NEW group of shapes and if they are grouped, you must ungroup them until you can select individual shapes with the black arrow. DON”T SKIP THIS STEP.

How to Make A 3D Vector Vintage Star

Now, with all of the new (individual) shapes selected, in the Pathfinder palette (Window > Pathfinder) hit the “Add to Shape Area” button.

How to Make A 3D Vector Vintage Star

Keep everything selected the way it is and immediately hit the “Expand” button in the Pathfinder palette.

How to Make A 3D Vector Vintage Star

Sweetness! Now we have a single vector path that is an exact copy of our 3d Star shape. Now all we have to do is add a Stroke and Align. You can change the fill if you want, but you won’t be able to see it anyway. It’s up to you. I chose a dark 3px Stroke.

How to Make A 3D Vector Vintage Star

7. Align Your 2 Shapes

IMPORTANT: To align, first, make sure your shape on the left (the ‘3d’ shape is grouped). Then select both of your shapes like below, and hit these two buttons in the Align palette (Window > Align) in any order. (you probably want to uncheck ‘align to artboard’ in the palette options first).

How to Make A 3D Vector Vintage Star

If your shape with the stroke is on top it will look like this. So all you have to do to get it behind the 3d shape is (with the black arrow) click on the blank artboard once to deselect everything. Then select your top shape with the stroke on it, and hit Command/Control + { until it gets behind your 3d star shape.

How to Make A 3D Vector Vintage Star

Now it should look something like this!

How to Make A 3D Vector Vintage Star

That should be enough to get you started, but I have one extra tip for you before you go…

Extra Bling

You can literally do anything you want from this point, but here is a quick tip to take it one more step:

You can easily make the front of your vintage star appear to be ‘inset’ by simply duplicating the smaller star shape, filling it with a dark color, and nudging it up and over. Like this:

How to Make A 3D Vector Vintage Star
How to Make A 3D Vector Vintage Star

Illustrator Tutorial: How To Make 3D Vector Vintage Stars

Illustrator Tutorial: How To Make 3D Vector Vintage Stars

I’m going to walk you through a technique to create vintage looking 3d stars in Illustrator. You guessed it, 100% vector. By the time we’re done, there will be 0 (zero) effects, or filters. You will have a very useful vintage star vector on your artboard, and a new skill to go with it. With vector art gaining ground every day because of its long-term value and versatility, new vector art styles are constantly emerging. I’ve seen quite a few of these 3D style shapes that seem to ‘pop’ out at you being used in many different applications. As always, it’s not quite as hard as you would think. You might just need a little shove in the right direction. Ok, lets make one ourselves!

How to Make A 3D Vector Vintage Star

1. Make your star shape

Use the Star tool and hold Shift to make a Star shape (or any shape you want, really) on the artboard. (everything you see here is exact size).

How to Make A 3D Vector Vintage Star

2. Extrude your shape

With your Star selected, in the Effect menu go to 3D > Extrude and Bevel.

How to Make A 3D Vector Vintage Star

Check the ‘Preview’ option so you can see what you’re working with.

How to Make A 3D Vector Vintage Star

Now you should see something like this:

How to Make A 3D Vector Vintage Star

Now take the ‘Perspective’ setting all the way to the right (160 degrees)

How to Make A 3D Vector Vintage Star
How to Make A 3D Vector Vintage Star

Now make your Extrude depth something like 900 or so.

How to Make A 3D Vector Vintage Star
How to Make A 3D Vector Vintage Star

Click on the blue box and drag to get your desired rotation.

How to Make A 3D Vector Vintage Star

Click OK, and you should have something like this:

How to Make A 3D Vector Vintage Star

3. Expand Appearance

Now that we have our 3D shape, we will most likely want to have a little more control over it. Go to Object > Expand Appearance and click OK to get rid of the effect and separate our effect into individual shapes that we can edit.

How to Make A 3D Vector Vintage Star

You’ll notice that we now have individual shapes for each side of the 3D star shape (and the effect s gone as well, which is good). Great! Now lets make a few more changes.

How to Make A 3D Vector Vintage Star

4. Fill the Sides with a Gradient.

To do this, you can either ungroup (about 3 times) until you can select the individual shapes, or you can use the Direct Select Tool (white arrow) to select the individual shapes and fill them with a gradient.

How to Make A 3D Vector Vintage Star
How to Make A 3D Vector Vintage Star

Do the same for all of the sides.

How to Make A 3D Vector Vintage Star

This is pretty much a 3D Vintage Star already, but there are a few extra touches we can add to take it a step further.

5. Offset the Front Face of the Star

To do this you will, again, either have to ungroup everything until you can select an individual shape, or use the Direct Select Tool (white arrow).

How to Make A 3D Vector Vintage Star

Select the face of the Star.

How to Make A 3D Vector Vintage Star

In the menu, go to Object > Path > Offset Path.

How to Make A 3D Vector Vintage Star

Choose a negative value for the offset. (Negative = Smaller/Inside the Selected Shape) I chose -8px.

How to Make A 3D Vector Vintage Star

Click OK and you will see your original Star face, and the new offset one.

How to Make A 3D Vector Vintage Star

Click once on the blank artboard to deselect everything, then use the Direct Select Tool to select the new (smaller) star.

How to Make A 3D Vector Vintage Star
How to Make A 3D Vector Vintage Star

Fill this smaller star with a different color to add something a little extra to your vintage star design.

How to Make A 3D Vector Vintage Star

Take it a step further:

6. Add a stroke around the entire group.

Hit Command/Control + A to select everything, then hold Option/Alt, click, drag and release to duplicate your shape. (or you can copy and paste if you like)

How to Make A 3D Vector Vintage Star

Now, select the NEW group of shapes and if they are grouped, you must ungroup them until you can select individual shapes with the black arrow. DON”T SKIP THIS STEP.

How to Make A 3D Vector Vintage Star

Now, with all of the new (individual) shapes selected, in the Pathfinder palette (Window > Pathfinder) hit the “Add to Shape Area” button.

How to Make A 3D Vector Vintage Star

Keep everything selected the way it is and immediately hit the “Expand” button in the Pathfinder palette.

How to Make A 3D Vector Vintage Star

Sweetness! Now we have a single vector path that is an exact copy of our 3d Star shape. Now all we have to do is add a Stroke and Align. You can change the fill if you want, but you won’t be able to see it anyway. It’s up to you. I chose a dark 3px Stroke.

How to Make A 3D Vector Vintage Star

7. Align Your 2 Shapes

IMPORTANT: To align, first, make sure your shape on the left (the ‘3d’ shape is grouped). Then select both of your shapes like below, and hit these two buttons in the Align palette (Window > Align) in any order. (you probably want to uncheck ‘align to artboard’ in the palette options first).

How to Make A 3D Vector Vintage Star

If your shape with the stroke is on top it will look like this. So all you have to do to get it behind the 3d shape is (with the black arrow) click on the blank artboard once to deselect everything. Then select your top shape with the stroke on it, and hit Command/Control + { until it gets behind your 3d star shape.

How to Make A 3D Vector Vintage Star

Now it should look something like this!

How to Make A 3D Vector Vintage Star

That should be enough to get you started, but I have one extra tip for you before you go…

Extra Bling

You can literally do anything you want from this point, but here is a quick tip to take it one more step:

You can easily make the front of your vintage star appear to be ‘inset’ by simply duplicating the smaller star shape, filling it with a dark color, and nudging it up and over. Like this:

How to Make A 3D Vector Vintage Star
How to Make A 3D Vector Vintage Star

Bonus Freebie:

You can download the file I used to make the Cover Image at the beginning of this tutorial! (vector)

How to Make A 3D Vector Vintage Star

Download EPS (Ill version 8 eps)

Includes: – EPS (1)