Latest Entries »

I hear this phrase quite often when I meet older business owners for the first time, “I wish I started my business at your age.” While being a Gen Y entrepreneur has it’s fair share of pros and cons, I can understand why most people would think that. Starting a business in your twenties affords you opportunities that clients and colleagues will appreciate when working with you. Many of today’s best-known entrepreneurs started their business when they were very young including Bill Gates, Richard Branson, and Mark Zuckerberg. Below are five major attributes that can be helpful for young entrepreneurs in growing their business.

Passionate

Younger entrepreneurs are still at an age where they are seeing the world quite differently than older counterparts. Our generation views the idea of “work” somewhat differently and instead focuses on what we can contribute to society through our interests and talents. For example, Part of Richard Branson’s passion lies in his insatiable appetite for starting companies. Founded in 1970, the Virgin Group has expanded to more than 200 companies. Branson is famous for his adventurous streak and zest for life, making him one of the most admired entrepreneurs for his ability to have a successful work/life balance.

Risk Taker

Being a risk taker is one of the most important qualities in being an entrepreneur. Starting almost any business is risky, even if it is a calculated risk. Younger entrepreneurs can tend to roll with the punches and remain fairly optimistic about their startup. Also, younger entrepreneurs don’t have the financial responsibilities older counterparts do which can allow them to take a fair amount of risk. This will give you have a better chance of succeeding as an entrepreneur.

Desire to Innovate

All entrepreneurs have a passionate desire to do things better and to improve their products or service. I’ve found though younger entrepreneurs are open to experimentation and not bogged down with traditional mindset. This could be attributed to Gen Y entrepreneurs not being exposed to corporate structure for a long period of time.

Perseverance

Entrepreneurs are climbing a wall of opposition as they struggle to manage the many goals, tasks and constantly evolving problems of the new organization. Furthermore, many entrepreneurs fail many times when trying to start a small business, and the ones who succeed are the ones who can persevere through failure and try again. While younger entrepreneurs sometimes has the disadvantage of lack of experience, the most driven ones will find ways around that through a willingness to learn new tools or find people who can do that particular task.

Fearless

Projects will fail no matter how many times you may try to work with a particular idea. Many young entrepreneurs get upset when their first idea does not instantly begin making them millions of dollars, or even if the project never really gets off the ground. While some ideas will be a big success, a major part of becoming a successful entrepreneur is luck. Being an entrepreneur requires a certain amount of fearlessness to chase after a dream.

Given by

Andrea Walker is CEO of W. Social Marketing, an interactive marketing solutions & management firm for small businesses. Focused on B2B & B2C social media marketing, online community management and new media development.

Marketing should be known as, and synonymous to, relationship management. When a potential, or existing, client calls you, your answers to his questions can make or break a deal. If you don’t have the answer, you need to find it. If you don’t have the time, you need to make it. Be willing to work that much harder for your client: even if you aren’t the biggest, the client needs to know that you are most committed to their success. Commitment is their key.

When trying to sell some sort of product, the best entrepreneurs are focused on the goal, they are focused on the why that drives them to connect to customers. It is not the how that one must be concerned with, but only their why. There is no right or wrong way to sell: all you need is passion and enthusiasm for your product. Even if you do not know the answer to a question, your drive to promptly find the answer will be what impacts the client, not the initial stutter. This passion will ignite the minds of your potential client, facilitating connections, and connections between will be made. Your passion and enthusiasm for your product will be what encourages the sale—not the rote duplication of someone else’s selling system. Reach out to as many different people in as many different ways, with as much energy as you can, and discover what feels comfortable for you. What you do to sell and promote your business has to be a reflection of what you are already willing to stay up late for and get up early for. It has to connect to your why and be a part of your own experience.

Always keep in mind: entrepreneurs are their own companies. Selling and marketing the company is personality driven. With this hugely personal element, one finds it an impossibility to adopt the methods of another. Don’t try to sound like someone else. Take advantage of your personality! Use the force of your person—in the early stages, this will take the form of a personal guarantee from you to the prospect. Be who you are and use that to sell.

In order for you to become a successful entrepreneur, it is essential that you are the person who is willing to pick up the phone and call people to talk about making deals and doing business. The phone is a simple, powerful and flexible tool that easily adapts to your personality and your why for starting a business. It is one of the most uncomplicated, cost-effective, measurable strategies available to you. When you make this phone call, make sure you are absolutely certain about the product that you are selling. With this certainty, you can use confidence to build up a network of contacts. The network cannot be established overnight—it is going to take a lot of phone calls. You cannot just wave your magic wand over a corporation and change them into a profitable client.

The idea of reaching out and talking to people about what you do must excite you! If you are not excited and looking forward to Monday, then you have not found your why and are not ready to become a successful entrepreneur. Your why should motivate you to chat with people: talk to them about what they do and allow the conversation to change directions and come to what you do. Who knows whom you can make connections with on the airplane, in the bar, at the racquet club. Make conversation!

To satisfy your drive to become a fearless and successful entrepreneur, these are the things you must do. Find out why you are doing what you are doing—what your motivation, your driving force is. Stick to your own style as it is only your personality that you can sell. Finally, talk! Call people on the phone; make connections in your social life. You will be surprised to see how any discomfort decreases as your client network base increases in direct proportion to your profits.

Take your time: the most successful men and women in the end are those who have come upon success as result of steady accretion. Step-by-step, network becoming wider and wider—progressively advancing your product, your field, your corporation—preserving in what you know is practical and what you know works, and concentrating on this. Follow this and find success in the greatest degree.

Melanie Pinola — An Android personal data leakage epidemic has just been revealed. The vulnerability affects 99% of Android phones and may allow hackers to steal your Facebook, Google Calendar, or other personal data if you use a rogue open Wi-Fi network. Here’s how to protect yourself.

The vulnerability affects apps that use an authentication protocol known as ClientLogin in Android 2.3.3 and earlier. The ClientLogin API is supposed to tighten security and improve performance of apps, because Google’s servers only need to validate your login information once, and your username and password are sent only once; afterwards, the app uses a token instead.

However, unless your device is one of the 1% with Android 2.3.4, those credentials—for Google Calendar, Twitter, Facebook, and other accounts—are submitted in the clear. This can give attackers access to those accounts if you unwittingly connect to an unencrypted wireless network set up by the atttacker.

An attacker only needs to set up a Wi-Fi access point with a common SSID name, such as “starbucks” or “attwifi” (an evil twin network), and when your Android phone tries to automatically connect, the hacker can capture the authentication tokens for your accounts.

The best recourse here is to turn off automatic Wi-Fi connections and use 3G or 4G mobile service rather than an unsecured wireless network. If you do need to use Wi-Fi at a hotspot for some reason (e.g., you have a Wi-Fi only tablet), use something like the recently covered SSH Tunnel app, which creates a secure connection between your device and a server to keep data safe from prying eyes. As a very last resort, manually connect to an open Wi-Fi network only after verifying it’s the real deal.

Today we have collected a list of more than 15 tools where you can get the desired information. Some of these websites also provide you with additional information like the current registrar of the domain name you are looking for, its expiry date, similar domain name with other extensions, page ranks on different platforms of current sites working wit similar names and so on. Check out this post and grab your favorite domain name at the earliest before its gone.

Once you have registered your domain, next step will be creating a beautiful blog. Some can develop a site themselves and other needs some tips and tricks for developing a eye catchy site. You may also want some knowledge on Firefox Addons For Power BloggingPSD to HTML Tutorials and Landing Page Optimization Tips. Stay tuned for getting more interesting information everyday.

Domain Typer

Along with providing domain namecheck they also provide page rank check.

Domain Typer

More Information on Domain Typer

DomBuddy

Use it to find available domain names for multiple extensions, use word lists, the dictionary or use web search results to generate creative domain names.

DomBuddy

More Information on DomBuddy

Dot-o-mator

Use Dot-o-mator to create domain name suggestions along with combinations.

Dot-o-mator

More Information on Dot-o-mator

Bust A Name

BustAName is a tool to help find domain names.

Bust A Name

More Information on Bust A Name

Domize

Domize is the place to find your next domain name whether you’re a first-time buyer or a seasoned collector.

Domize

More Information on Domize

NameStation

Create random names. Enter a keyword and try different search types for more name ideas

NameStation

More Information on NameStation

Nameboy

Nameboy has been called the ultimate domain name generator, website name generator and the best way to search domain names. Domain name search to find a domain name and register domain names.

Nameboy

More Information on Nameboy

Domainr

When you want a short URL or something big, Domainr will find it, fast.

Domainr

More Information on Domainr

DNSugar

DNSugar is not a registrar, it’s an easy way to manage your portfolio of domains with many features helping you to develop a profitable business.

DNSugar

More Information on DNSugar

StuckDomains

Check out this tool for Free Expired Domains and Domain Ideas Search.

StuckDomains

More Information on StuckDomains

DomainsBot

The Domain Suggestion services are created for anyone who offers domain registration as a service.

DomainsBot

More Information on DomainsBot

dnScoop

You can check domain names along with its current value, history & stats.

dnScoop

More Information on dnScoop

Dotster

This tool provides fast information on domain names along with nearest name suggestions.

Dotster

More Information on Dotster

Dyyo

They provide tool here to search for four letter domain names.

Dyyo

More Information on Dyyo

Ajax Whois

This tool also provides fast information on domain names.

Ajax Whois

More Information on Ajax Whois

Domain Tools

In addition to the popular Generic TLDs like .COM, .NET, .ORG, etc., they also support hundreds of Country Code TLDs (ccTLDs).

Domain Tools

More Information on Domain Tools

Instant Domain Search

This is a free service that instantly checks .com, .net, and .org domain name availability.

Instant Domain Search

The Author

Sunalini Rana

CSS3 solutions internet!

CSS3 is probably the hottest trend in web design right now, allowing developers the opportunity to implement a number of solutions into their projects with some very straightforward CSS while avoiding having to resort to nonsemantic markup, extra images, and complex JavaScript. Unfortunately, it’s not a surprise that Internet Explorer, even in its most recent version, still does not support2 the majority of the properties and features introduced in CSS3.

Experienced developers understand that CSS3 can be added to new projects with progressive enhancement in mind3. This ensures that content is accessible while non-supportive browsers fall back to a less-enhanced experience for the user.

Ie in CSS3 Solutions for Internet Explorer

But developers could face a situation where a client insists that the enhancements work cross-browser, demanding support even for IE6. In that case, I’ve collected together a number of options that developers can consider for those circumstances where support for a CSS3 feature is required for all versions of Internet Explorer (IE6, IE7, & IE8 — all of which are still currently in significant use).

Opacity / Transparency

I think all developers are baffled at why Internet Explorer still fails to support this very popular (albeit troublesome) property. It’s been around so long, that we often forget that it’s actually a CSS3 property. Although IE doesn’t offer support for the opacity property, it does offer similar transparency settings via the proprietary filter property:

The Syntax

1 #myElement {
2 opacity: .4; /* other browsers */
3 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* this works in IE6, IE7, and IE8 */
4 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* this works in IE8 only */
5 }

You really only need the second line, which works in all three versions of Internet Explorer. But if for some reason you needed the opacity setting to apply only to IE8, and not to IE6/7, then you can use the third line, which the older versions don’t recognize.

The opacity value at the end of each IE line works basically the same way that the opacity property does, taking a number from 0 to 100 (the opacity property takes a two-digit number from 0 to 1, so “44″ for IE would be “0.44″ for the others). Also, as many have experienced when using opacity (even when using the standard method), the opacity settings will be inherited by all child elements, for which there is no easy workaround.

The Drawbacks

  • The filter property is a Microsoft-only property, so your CSS won’t validate
  • As is the case for the opacity property, the IE filter causes all child elements to inherit the opacity

 

Rounded Corners (border-radius)

The border-radius property (more commonly referred to as CSS3 rounded corners) is another popular CSS3 enhancement. This property has allowed developers to avoid the headache of bloated JavaScript or extra positioned elements to achieve the same effect. But once again, Microsoft doesn’t want to cooperate, so IE doesn’t have any support for this property.

Fortunately, at least one person has come up with a very usable workaround that can be used in an IE-only stylesheet. Remiz Rahnas4 of HTML Remix5 has created an HTC file6 called CSS Curved Corner7 that can be downloaded off Google Code8.

The great thing about this piece of code is that it doesn’t require any extra maintenance if you adjust the amount of radius on your rounded corners. You just link to the file in your CSS, and the script will automatically parse your CSS to find the correct radius value from the standard border-radius property.

The Syntax

Here’s what your code might look like:

1 .box-radius {
2 border-radius: 15px;
3 behavior: url(border-radius.htc);
4 }

The way it works is pretty straightforward, as shown above. Ideally, however, you would apply the behavior property in an IE-only stylesheet, using the same selector in your CSS, so the code knows where to get the radius value from.

The Demonstration

Because this technique requires use of an external HTC file, you can view the demo at this location9.

The Drawbacks

  • The HTC file is 142 lines (minifying or GZipping would help, but it’s still extra bloat)
  • The behavior property will make your CSS invalid
  • Your server needs to be able to load HTC files for this technique to work
  • IE8 seems to have some trouble in some circumstances when the HTC file forces the curved element to have a negative z-index value

Box Shadow

The box-shadow property is another useful CSS3 feature that will even add a curved box shadow naturally to an element that uses the border-radius property. IE doesn’t support box-shadow, but a filter is available that offers a close replication.

It should be noted that the box-shadow property has been removed from the CSS3 Backgrounds and Borders Module10, so its future in CSS3 seems to be a little uncertain right now.

The Syntax

1 .box-shadow {
2 -moz-box-shadow: 2px 2px 3px #969696; /* for Firefox 3.5+ */
3 -webkit-box-shadow: 2px 2px 3px #969696; /* for Safari and Chrome */
4 filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3);
5 }

As shown above, in addition to the proprietary WebKit and Mozilla properties, you can add a shadow filter that works in all versions of Internet Explorer.

The Demonstration

This element has a drop shadow that works in Internet Explorer.

The Drawbacks

  • The settings for the IE shadow filter do not match those of the other proprietary properties, so in order to make it look the same, you have to fiddle with the values until you get it right, which can cause maintenance headaches
  • The filter property doesn’t validate, but neither do the WebKit and Mozilla properties, so this is a drawback in all browsers

Text Shadow

Adding drop shadows to text elements has been practiced in both print and web design for years. On the web, this is normally done with images and occasionally with text duplication combined with positioning. CSS3 allows developers to easily add shadows to text using a simple and flexible text-shadow property.

Unfortunately, there doesn’t seem to be an easy way to add a text shadow in Internet Explorer — even with the use of proprietary filters. To deal with this problem, a Dutch front-end developer named Kilian Valkhof11 has written a jQuery plugin12 that implements text shadows in Internet Explorer.

The Syntax

First, in your CSS, you would set the text-shadow property:

The values specify the shadow color, position on the horizontal axis, position on the vertical axis, and the amount of blur.

After including the jQuery library and the plugin in your document, you can call the plugin with jQuery:

1 // include jQuery library in your page
2 // include link to plugin in your page
3
4 $(document).ready(function(){
5 $(".text-shadow").textShadow();
6 });

The plugin also allows the use of parameters to override the CSS. See the plugin author’s original web page for more details on the parameters.

Although there is a cross-browser jQuery plugin that applies drop shadows13, the one I’m demonstrating above actually utilizes the CSS3 value that’s already set in your CSS, so it has the advantage of working along with the standard CSS setting for text shadows, whereas the other plugin needs to be set independently.

The Demonstration

Because this technique requires use of the jQuery library and an external plugin file, you can view the demo at this location14.

The Drawbacks

There are some significant drawbacks to this method that make it very unlikely to ever be practical. You’re probably better off creating an image to replace the text for IE instead.

  • In order to make the shadow look almost the same in IE, you need to use different settings in an IE-only stylesheet, adding to development and maintenance time
  • Requires that you add the jQuery library, in addition to a 61-line plugin file (GZipping or minifying would help)
  • The IE version of the shadow never looks exactly the same as the other browsers
  • When using the overriding parameters, the plugin seems to be rendered somewhat useless, displaying a big ugly shadow that won’t change with new values
  • Unlike the CSS3 version, the plugin doesn’t support multiple shadows
  • For some reason, in order to get it to work in IE8, you need to give the element a z-index value

Gradients

Another practical and time-saving technique introduced in CSS3 is the ability to create custom gradients as backgrounds. Although Internet Explorer doesn’t support gradients of the CSS3 variety, it’s pretty easy to implement them for the IE family using proprietary syntax.

The Syntax

To declare a gradient that looks the same in all browsers, including all versions of Internet Explorer, use the CSS shown below (the last two lines are for IE):

1 #gradient {
2 background-image: -moz-linear-gradient(top, #81a8cb, #4477a1); /* Firefox 3.6 */
3 background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1, #81a8cb)); /* Safari & Chrome */
4 filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1'); /* IE6 & IE7 */
5 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')"; /* IE8 */
6 }

For the IE filters, the GradientType can be set to “1″ (horizontal) or “0″ (vertical).

The Drawbacks

Some of the usual drawbacks apply to gradients created with the IE-only filter, along with some other problems.

  • Your CSS won’t validate, although that’s also true for the WebKit and Mozilla values
  • Different code is needed for IE8, adding to maintenance time
  • The WebKit and Mozilla gradients allow for “stops” to be declared; this doesn’t seem to be possible with the IE gradient, limiting its flexibility
  • IE’s filter doesn’t seem to have a way to declare “radial” gradients, which WebKit and Mozilla support
  • For a gradient to be visible in IE, the element with the gradient must have layout

 

Transparent Background Colors (RGBA)

CSS3 offers another method to implement transparency, doing so through an alpha channel that’s specified on a background color. Internet Explorer offers no support for this, but this can be worked around.

The Syntax

For the CSS3-compliant browsers, here’s the syntax to set an alpha channel on the background of an element:

With the above CSS, the background color will be set to the RGB values shown, plus the optional “alpha” value of “.4″. To mimic this in Internet Explorer, you can use the proprietary filter property to create a gradient with the same start and end color, along with an alpha transparency value. This would be included in an IE-only stylesheet, which would override the previous setting.

1 #rgba p {
2 filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#886287a7', endColorstr='#886287a7');
3 }

The “gradient” will look exactly the same in IE as in other browsers, duplicating the RGBA transparency effect.

The Demonstration

This first example below will work in browsers that support RGBA colors. The second example will only work in Internet Explorer.

This paragraph has a background color with a 40% opacity setting declared using RGBA (doesn’t work in IE).

This paragraph has an IE-only filter applied to mimic RGBA transparency (only works in IE).

The Drawbacks

  • The filter property is not valid CSS
  • Requires an extra line of CSS in an IE-only stylesheet
  • The element needs to have layout

Note: Initially, I had used a PNG image method to achieve this effect, but apparently it was working only partially in IE7 and IE8, and required a PNG-hack for IE6, so I tried the method given by Liam16 and Matias17 in the comments and this seems to work better. The PNG method is another option, but seems to be more troublesome, and has more drawbacks.

Multiple Backgrounds

This is another CSS3 technique that, when widely supported, could prove to be a very practical addition to CSS development. Currently, IE and Opera are the only browsers that don’t support this feature. But interestingly, IE as far back as version 5.5 has allowed the ability to implement multiple backgrounds on the same element using a filter.

The Syntax

You might recall trying to hack a PNG in IE6 and noticing the image you were trying to hack appearing twice, which you had to remove by adding background: none, then applying the filter. Well, using the same principle, IE allows two background images to be declared on the same element.

To use multiple backgrounds in Firefox, Safari, and Chrome, here’s the CSS:

1 #multi-bg {
2 background: url(images/bg-image-1.gif) center center no-repeat, url(images/bg-image-2.gif) top left repeat;
3 }

To apply two backgrounds to the same element in IE, use the following in an IE-only stylesheet:

1 #multi-bg {
2 background: transparent url(images/bg-image-1.gif) top left repeat;
3 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/bg-image-2.gif', sizingMethod='crop'); /* IE6-8 */
4 -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg-image-2.gif', sizingMethod='crop')"; /* IE8 only */

The Drawbacks

  • Your CSS will be invalid
  • The second background image applied using the filter property will always be in the top left, and cannot repeat, so this method is extremely inflexible and can probably only be used in a limited number of circumstances
  • In order to get the element to center (as in other browsers), you have to create an image with the exact amount of whitespace around it, to mimic the centering, as I’ve done in the demonstration above
  • The AlphaImageLoader filter causes performance issues, as outlined here

Over the last years we’ve got a pretty good understanding of what CSS does, how it works and how we can use it for our layouts, typography and visual presentation of the content. However, there are still some attributes that are not so well-known; also, CSS3 offers us new possibilities and tools that need to be understood, learned and then applied in the right context to the right effect.

In this round-up we present fresh useful articles about less-known CSS 2.1 and CSS3 properties as well as an overview of recently published CSS techniques, tools and tips for designers and web-developers. Please stay tuned: next week we will present the second part of this article, featuring fresh CSS3 techniques, tools and resources.

Learn About Obscure CSS Properties

The Little Known font-size-adjust Property1
Ever wanted to use fallback fonts on your CSS with different aspect ratios without them looking huge (or tiny)? The sparkling new CSS3 font-size-adjust property could do just that.

Css3-07 in 50 New Useful CSS Techniques, Tools and Tutorials1

Demystifying CSS At-Rules 2
CSS at-rules (or @rules) are so-named because they utilize the ‘@’-character. They aren’t used as often as other CSS elements, and so it may be easy to overlook their function. If you’ve ever been confused about CSS at-rules, here’s a quick guide.

Css3-123 in 50 New Useful CSS Techniques, Tools and Tutorials2

The CSS white-space Property Explained3
CSS has a pretty useful property called white-space that often goes unnoticed among CSS beginners. You can probably live without this property for quite some time, but once you learn how to use it, it will come in very handy and you’ll find yourself going back to it over and over again.

Css3-05 in 50 New Useful CSS Techniques, Tools and Tutorials3

How nth-child Works 4
nth-child is one of those rather unfortunate CSS attributes that is caught between nearly full cross-browser compatibility, except for completely zero support in IE, even IE 8. By Chris Coyier.

Css3-09 in 50 New Useful CSS Techniques, Tools and Tutorials4

The CSS3 :target Pseudo-class And CSS Animations5
There are so many underused techniques that we could be applying to our designs as an enhancement layer. Let’s take a brief look into the :target pseudo-class and a very simple CSS animation.

Css3-12 in 50 New Useful CSS Techniques, Tools and Tutorials5

The space combinator 6
Combinators are an overlooked part of CSS development. Most juniors don’t even know they are making use of them, others are unaware of their full potential and let’s face it, even most professionals don’t really know about the ins and outs of css combinators. It’s all connected to that little piece of nothingness in between class names, so let’s start by taking a good look at the space (descendant) combinator.

Css3-216 in 50 New Useful CSS Techniques, Tools and Tutorials6

Cross-Browser Inline-Block 7
Ah, inline-block, that elusive and oh so tempting display declaration that promises so much, yet delivers so little. An article explaining what inline-block is, how it works and what it is good for.

Css3-13 in 50 New Useful CSS Techniques, Tools and Tutorials7

The Skinny on CSS Attribute Selectors 8
Single element has three attributes: ID, class, and rel. To select the element in CSS, you could use and ID selector (#first-title) or a class selector (.magical). But did you know you can select it based on that rel attribute as well? That is what is known as an attribute selector.

Css3-10 in 50 New Useful CSS Techniques, Tools and Tutorials8

The Mysterious Pseudo Class in CSS9
Pseudo classes let you control the CSS of stuff in different forms, states and places easily and efficiently, without taking up too much room. CSS3 is going to introduce many new pseudo classes, and they’re going to make our lives a lot easier (if you take browser compatibility out of the equation). They help both aesthetics and usability, and can make things that were once hard easier than ever before.

Css3-11 in 50 New Useful CSS Techniques, Tools and Tutorials9

CSS Opacity: A Comprehensive Reference10
This reference is going to provide a detailed overview of CSS opacity, along with some code examples and explanations to help you implement this useful CSS technique in your projects equally across all browsers. One thing that should be noted about CSS opacity is that, although it’s been in use for a number of years now, it has never been, and is currently not a standard property. It’s a non-standard technique that is supposed to be part of the CSS3 specification.

Css3-220 in 50 New Useful CSS Techniques, Tools and Tutorials10

Visual Walkthrough of @font-face CSS Code11
In step-by-step visual format, this article will show you what the code is doing and how to use it with your own custom fonts.

Css3-18 in 50 New Useful CSS Techniques, Tools and Tutorials11

Taming Advanced CSS Selectors 12
The best way to avoid plagues spreading in your markup and keep it clean and semantic, is by using more complex CSS selectors, ones that can target specific elements without the need of a class or an id, and by doing that keep our code and our stylesheets flexible.

A Look at Some of the New Selectors Introduced in CSS313
Here is a run-down of just some of the things that is possible with CSS3 selectors. Of course, CSS3 isn’t supported at all by any IE browsers including IE8; but all latest versions of Safari, Firefox and Opera support most, if not all of them.

Useful CSS Techniques

Deal-breaker problems with CSS3 multi-columns14
“I’ve been playing around with the new multi-column properties of CSS3 (column-count, column-width, and so forth), and I’ve come to the conclusion that they’re sadly not ready to really use. I found that there’s not enough control over how the content is distributed between columns to make them reliable. I’m not sure if the browser behavior I’ve been seeing is correct or not; the spec is unfortunately not well defined enough to make it clear—at least to me—of how browsers ought to be handling some of the problems I ran across.”

Css3-115 in 50 New Useful CSS Techniques, Tools and Tutorials14

Correcting Orphans with Overflow15
“The overflow property in CSS can be used in various ways and comes in handy when correcting bugs. Below are some tutorials that demonstrate how to clear up some common issues using the overflow property.”

Css3-25 in 50 New Useful CSS Techniques, Tools and Tutorials15

CSS Sprites without Using Background Images16
” The first approach in my mind was to do the typical CSS Sprites but this requires CSS work which my client did not know much of. I wanted to give him the access to update his affiliate banners using WordPress, and the simplest thing was to let him just upload his own images and put the URL in a custom field. No CSS tweaks involved, just what he needed.”

Css3-26 in 50 New Useful CSS Techniques, Tools and Tutorials16

Center Multiple DIVs with CSS17
At some point, you may have a situation where you want to center multiple elements (maybe <div> elements, or other block elements) on a single line in a fixed-width area. Centering a single element in a fixed area is easy. Just add margin: auto and a fixed width to the element you want to center, and the margins will force the element to center.

Css3-06 in 50 New Useful CSS Techniques, Tools and Tutorials17

Different Stylesheets for Differently Sized Browser Windows18
Otherwise known as “resolution dependent layouts”. Single website, different CSS files for rearranging a website to take advantage of the size available. There is a W3C standard way of declaring them.

Css3-20 in 50 New Useful CSS Techniques, Tools and Tutorials18

The New Clearfix Method19
The clearfix hack, or “easy-clearing” hack, is a useful method of clearing floats. The original clearfix hack works great, but the browsers that it targets are either obsolete or well on their way.

Css3-19 in 50 New Useful CSS Techniques, Tools and Tutorials19

Preload Images with CSS, JavaScript, or Ajax20
“Preloading images definitely helps users without broadband enjoy a better experience when viewing your content. In this article, we’ll explore three different preloading techniques to enhance the performance and usability of your site.”

How to Center an Absolutely Positioned Element Using CSS21
“Centering an absolutely positioned element is a CSS challenge that occurs now and then. The solutions seem obvious once I’ve done it, but I still find myself googling the problem every few months.”

Wrapping Long URLs and Text Content with CSS22
To wrap long URLs, strings of text, and other content, just apply this carefully crafted chunk of CSS code to any block-level element (e.g., perfect for <pre> tags).

Css3-08 in 50 New Useful CSS Techniques, Tools and Tutorials22

Unconventional: CSS3 Link Checking 23
An interesting solution of finding empty links on a web page. Only CSS3 in use.

Getting Buggy CSS Selectors to Work Cross-Browser via jQuery24
Although the lack of cross-browser CSS selector support has caused a number of useful CSS selectors to go almost unnoticed, developers can still manipulate styles on their pages using some of these little-used selectors through jQuery.

Css3-201 in 50 New Useful CSS Techniques, Tools and Tutorials24

“Checkmark” Your Visited Links with Pure CSS 25
The goal of this tutorial is to get a check mark preceding visited links for a nice visual indicator. The article will be targeting the a:visited pseudo class, but it also includes information on the other anchor pseudo classes.

Css3-140 in 50 New Useful CSS Techniques, Tools and Tutorials25

Reorganize visited links with CSS3 flexible box model26
An interesting technique that uses flexible box model (box, box-flex, box-ordinal-group), generated content (:before, :after) and :not and :first-of-type selectors to reorganize visited links on the page.

Vertical Centering 27
Vertical centering with CSS seems to be a large obsticle in the Web design world and I notice a lot of people favor <table>-based layouts when the need for vertical center arises. That’s too bad. Whilst CSS vertical center can get [very] complicated at times, I believe that learning various techniques for archiving it is beneficial and once you get a hang of it, you’ll do it just as anything else with CSS.

Robust Vertical Text Layout28
Few formatting systems today can handle vertical text layout, and most of those only lay out text in right-to-left columns. This document outlines a system that can not only handle common scripts in vertical right-to-left columns, but that can gracefully accept uncommon script combinations and left-to-right text columns. The model is described here as a CSS system, but the concepts can apply to non-CSS systems as well.

iPad Orientation CSS29
For the most part, Mobile Safari on the iPad is the same as that on the iPhone. One difference is that Webkit on the iPad honors CSS media query declarations based on orientation.

How to keep footers at the bottom of the page30
When an HTML page contains a small amount of content, the footer can sometimes sit halfway up the page leaving a blank space underneath. This can look bad, particularly on a large screen. Web designers are often asked to push footers down to the bottom of the viewport, but it’s not immediately obvious how this can be done.

Sexy CSS Buttons 31
CSS is getting quite powerful these days. It can even take the place of images in many ways, giving you a more flexible design and fewer files to work with. Imagine being able to make an ultra sexy button with just CSS, giving you complete control through code. Well, you can! And it’s not too difficult, really.

Css3-131 in 50 New Useful CSS Techniques, Tools and Tutorials31

CSS Image Maps: A Beginner’s Guide32
While they may not be used as often as they once were in the heyday of table based web design, image maps can still be quite useful in situations that call for it. Unfortunately, for beginners, achieving this with CSS alone, can be a difficult concept to grasp. In this tutorial, we’re not only going to get you up to speed on how to create a CSS image map, but, we’re also going to take it a couple steps further and add hover states to our image map using a CSS background image sprite, as well as a “tooltip” like popup.

Css3-136 in 50 New Useful CSS Techniques, Tools and Tutorials32

Make All Links Feel Subtly More Button-Like 33
On this current design of CSS-Tricks, you may have noticed how all links bump themselves down one pixel as you click them. This tutorial displays how to implement this technique.

Css3-124 in 50 New Useful CSS Techniques, Tools and Tutorials33

Footnotes34
“I figured that it would be a good idea to show the content of a footnote as soon as you indicate that you are interested in the footnote. Namely, when you move the cursor over the footnote symbol. This allows footnotes to work on devices that don’t support mouse hovering, because you can still jump to a footnote via its link, but it removes the necessity of having to click on a footnote link for most people.”

Css3-135 in 50 New Useful CSS Techniques, Tools and Tutorials34

Progressive enhancement: pure CSS speech bubbles 35
Speech bubbles are a popular effect but many tutorials rely on presentational HTML or JavaScript. This tutorial contains various forms of speech bubble effect created with CSS2.1 and enhanced with CSS3. No images, no JavaScript and it can be applied to your existing semantic HTML.

Css3-138 in 50 New Useful CSS Techniques, Tools and Tutorials35

IE CSS Bugs That’ll Get You Every Time36
A comprehensive guide for developers hunting for solutions to take care of the nasty Internet Explorer bugs.

Css3-183 in 50 New Useful CSS Techniques, Tools and Tutorials36

Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs37
Only if you must: an extensive article featuring common problems, issue and solutions for dealing with Internet Explorer 6.

Css3-17 in 50 New Useful CSS Techniques, Tools and Tutorials37

Useful CSS Tools, Tips and Advice

CSS deployment: combine CSS files into a master file 38
A handy PHP script which reads a directory with css files and combines them automatically into one master stylesheet. No matter how many files you add while developing, before launch you can use a build script that merges them all so you can save HTTP requests.

Css3-188 in 50 New Useful CSS Techniques, Tools and Tutorials38

CSS efficiency tip: use a single stylesheet file for multiple media39
The way most people link CSS intended for different media types, such as screen, print, or handheld, is to use multiple files. The files are then linked either through link elements with a media attribute or through @import statements with one or more media types specified.

Css3-196 in 50 New Useful CSS Techniques, Tools and Tutorials39

Efficiently Rendering CSS 40
How efficient is the CSS that we write, in terms of how quickly the browser can render it? This is definitely something that browser vendors care about (the faster pages load the happier people are using their products). Let’s cover some of the big ideas they present, and then discuss the practicalities of it all.

JSCSSP, a CSS parser in JavaScript41
JSCSSP is a CSS parser written in cross-browser JavaScript. It parses a string containing CSS styles and outputs a CSS Object Model (warning: not the CSS Object Model). It can preserve some comments, at-rules and style rules that your browser does not recognize and trashes, and even whitespaces if you absolutely need to preserve indentation and blank lines. It’s very simple to use and manipulate, and can be used to write a CSS validator, filters or even CSS extensions for a given browser.

CSSDesk: A CSS Playground42
A playground where you put in HTML and CSS, and see a live preview (via Ajaxian43).

Css3-16 in 50 New Useful CSS Techniques, Tools and Tutorials42

CSS Buttons is the Plug and Play Solution for Web Designers and Developers 44
CSS Buttons will allow designers to quickly implement consistently looking, cross-browser, buttons regardless of the element used. CSS Buttons is a plug n’ play solution for Multilingual, CMS, Blogs, and similar web sites faced with dynamic content challenges.

Css3-231 in 50 New Useful CSS Techniques, Tools and Tutorials44

Website Colors Finder45
This neat little tool extracts any color information, no matter if inline CSS, CSS files via import or link, and even if you have a master CSS file with references to other css files – mooColorFinder reads it out.

Css3-225 in 50 New Useful CSS Techniques, Tools and Tutorials45

CSS Inliner Tool46
If you’ve ever sent an email campaign, you know that if your CSS is not coded inline, it is likely to get stripped out by email clients, which can make your email design pretty funky looking. Writing CSS inline can be time consuming, and repetitive. MailChimp has a CSS inline conversion tool built right in that will automatically transform all of your local styles into inline styles.

Css3-229 in 50 New Useful CSS Techniques, Tools and Tutorials46

HTML5/CSS3 Framework47
CSS3 is one of the coolest thing in the web designer world and has been a long time coming. With CSS3 you can save time designing and slicing fancy layouts. CSS3 has features like text/box shadow, rounded corners,and animations. These just a few of the many CSS3 features has to offer you.

Css3-240 in 50 New Useful CSS Techniques, Tools and Tutorials47

CSS Buttons Generator48

Css3-169 in 50 New Useful CSS Techniques, Tools and Tutorials48

CSS Border Radius Generator49

Css3-197 in 50 New Useful CSS Techniques, Tools and Tutorials49

CSS Corners Generator50

Css3-27 in 50 New Useful CSS Techniques, Tools and Tutorials50

CSS3 Generator51
This online tool generates cross-browser CSS3 snippets that you can use right away on your website. You can also preview the code in a sandbox.

Css3-28 in 50 New Useful CSS Techniques, Tools and Tutorials51

CSS 3, Please!52
Another generator and tester of CSS3 rules on the fly.

Css3-29 in 50 New Useful CSS Techniques, Tools and Tutorials52

CSS Linear Gradients Generator53
This little helper generates the code for CSS3 linear gradients online. Handy.

Css3-30 in 50 New Useful CSS Techniques, Tools and Tutorials54

CSS Border Image Generator55

Css3-23 in 50 New Useful CSS Techniques, Tools and Tutorials55

minify 56
Minify is a PHP5 app that helps you follow several of Yahoo!’s Rules for High Performance Web Sites. It combines multiple CSS or Javascript files, removes unnecessary whitespace and comments, and serves them with gzip encoding and optimal client-side cache headers.

Css3-128 in 50 New Useful CSS Techniques, Tools and Tutorials56

Rendera57
Rendera makes learning HTML5 and CSS3 easy. Type in your HTML and CSS to see it rendered. Each time you press the Enter key, the live preview will update. Some examples are already provided.

HTML5 and CSS3 Web App Prototyping58
Web developers often tweak style according to the device (desktop, tablet, mobile) in use. ProtoFluid makes intial tweaking much quicker.ProtoFluid requires a freshly updated, standards compliant, modern browser.

Css3-154 in 50 New Useful CSS Techniques, Tools and Tutorials58

HTML5 Readiness59
An interactive table featuring the support of HTML5 and CSS3 in browsers.

Css3-155 in 50 New Useful CSS Techniques, Tools and Tutorials59

CSS 2.1 and CSS 3 Help Cheat Sheets (PDF)60
Smashing Magazine’s cheat sheets that will help you quickly look up the right CSS 2.1-property or an obscure CSS 3 property. The style sheets contain most important properties, explanations and keywords for each property. The help sheets were created by GoSquared and released for Smashing Magazine and its readers.

Css3-156 in 50 New Useful CSS Techniques, Tools and Tutorials60

Which email clients support CSS3? 61
“In this update to our existing guide to CSS support, we tested both widely implemented and experimental CSS3 properties across 24 popular desktop, web and mobile email clients. The results were mixed, but certainly surprising! If you’re planning to introduce CSS3 to email campaigns, read on: we’ve not only got a summary of which email clients display what properties, but observations and hand-picked recommendations for the style-savvy email designer.” Also check Guide to CSS support in email clients62.

Css3-161 in 50 New Useful CSS Techniques, Tools and Tutorials61

Brosho Plugin: Design from built-in element selector and CSS editor63
With this Brosho Plugin you can design your markup in the browser. It is a jQuery Plugin designs with the help of a build-in element selector and CSS editor. The CSS code of the altered elements can be generated with just one click. This can be further used in your own stylesheet.

Css3-178 in 50 New Useful CSS Techniques, Tools and Tutorials63

When can I use…64
Compatibility tables for features in HTML5, CSS3, SVG and other web standards.

Css3-182 in 50 New Useful CSS Techniques, Tools and Tutorials64

PrimerCSS65
Primer undercoats your CSS by pulling out all of your classes and ID’s and placing them into a starter stylesheet. Paste your HTML in to get started.

Css3-202 in 50 New Useful CSS Techniques, Tools and Tutorials65

CSS Infos66
A comprehensive reference table for all 243 CSS properties. Also, the page contains a full list of CSS properties supported by Safari and Firefox.

Css3-162 in 50 New Useful CSS Techniques, Tools and Tutorials66

CSS font stacks67
A quick presentation on Font stacks including a basic explanation and a step-by-step example.

Css3-147 in 50 New Useful CSS Techniques, Tools and Tutorials67

CSS Reset, a simpler option 68
A quick presentation on CSS Reset including a basic explanation, an outline of some of the advantages and disadvantages, as well as a simpler reset option.

Css3-148 in 50 New Useful CSS Techniques, Tools and Tutorials68

Last Click

Webble69
Webble is fun. It was written using HTML, JavaScript and CSS and does not make use of the HTML5 canvas element. The goal of Webble is to make horizontal or vertical lines of three or more tiles.

Css3-170 in 50 New Useful CSS Techniques, Tools and Tutorials

For designers approaching a deadline, coffee is a delicious necessity. Lucky for us, having a coffee break is not really difficult. But it’s more than just a 3am fix. With every late-night run to the local coffee house, we contribute to a populous network of coffee trading, sales and experience.

And in fact, coffee houses and suppliers are quite a business, with online presences ranging from simple layouts with striking typography to advanced layouts with remarkable photography. Coffee websites: what do they look like? What do they have in common? What metaphors, visuals and typography are they using? Well, this is where this showcase comes handy; let’s take a closer look at tasty coffee websites and examine their distinctive features and peculiarities.

Showcase

Far Coast2
Rustic oranges and blues are at play Far Coast’s website, with hints of distressed textures for an even more vintage vibe. The top navigation bar complements the large images that span the bottom, and the size of the centered text balances these for a pleasing look. Contrasting the richness of imagery is a neutral background, as well as low-opacity shots on either side.

Coffee54 in Showcase Of Delicious Coffee Websites2

Gorilla Coffee3
Thick lines, a dark two-toned palette, heavy shapes and an urban setting remind the user that coffee can be just as enjoyable when sipped in a fast-paced city as in the mountains. Flash in use.

Coffee501 in Showcase Of Delicious Coffee Websites3

Ipsento Coffee4
Instead of working with generic templates, Ipsento Coffee provides truly professional photography, displaying various navigation options in a quite unusual but attractive way. No links, no pages, no frustration with poor navigation. Ipsento shows that you can be complex and professional in design without having to indulge in equally complex development.

Coffee8 in Showcase Of Delicious Coffee Websites4

Coffee Club5
It’s no accident that the word “Indulge” emphasized in this design. With the aerial view of the natural setting, multiple areas of primary and secondary focus and beautiful balance of features, you’ll be indulging in this design as much as the Coffee Club’s menu.

Coffee47 in Showcase Of Delicious Coffee Websites5

America’s Best Coffee Roasting Company6
Balance is key in this design, and in many ways. America’s Best balances the abundance of gray tones in the big background image with a few shots of bright blues and rusty reds. In the same vein, the small text on the right side of the text area is balanced by the large focal text on the left. Overall, this text and link area is centered in the design. There are subtle balances as well: the “heavy” part of the picture is the top right, balancing the logo on the left.

Coffee48 in Showcase Of Delicious Coffee Websites6

Pura Vida7
Lime green isn’t an obvious tone to associate with coffee, nor with a website. But Pura Vida uses it to embody the qualities of its coffee: fair-trade certified, organic and shade-grown. The tone is cooled down by the rich browns, crisp whites and suede neutrals.

Coffee18 in Showcase Of Delicious Coffee Websites7

Seattle’s Best Coffee8
The most interesting part about Seattle’s Best Coffee website is its interactivity. You can rotate the cup to reveal different information about the company, its partners and the coffee. As the website says, “Go ahead. Take it for a spin.” Your design taste buds will be satisfied.

Coffee17 in Showcase Of Delicious Coffee Websites8

Café Henrici9
With a simple “flip” of the menu, you get all the information you need about Café Henrici. Café Henrici’s use of perspective in the layout image draws users into the scene, making them feel as though they are sitting at a round table in the Café, sipping a steamy cup.

Coffee42 in Showcase Of Delicious Coffee Websites9

Sweet Sallie’s Bakery & Cafe10
Though Sweet Sallie is as much a cafe as a bakery, its website exemplifies the cute-cupcake vibe found in many bakeries. With various blues, lavenders and teals and a feminine background pattern and type, this website’s all about baked-goods deliciousness. The cafe is simply the cherry on top.

Coffee14 in Showcase Of Delicious Coffee Websites10

Influx Café11
With a design as modern as the furniture in the photo, the Influx website is sure to please. On the home page, we are first presented with a sped-up video of goings-on in the cafe, giving us a fly-on-the-wall look at the cafe… and some tasty-looking muffins. From there, users can navigate to the sub-pages, which continue the clean palette.

Coffee9 in Showcase Of Delicious Coffee Websites11

Tapped & Packed Coffee12
The Tapped & Packed website combines the beauty and simplicity of modern design with traditional charm. A simple yet elegant palette of deep grays, crisp whites and soft yellows is combined with crisp lines to give a modern touch, while the serif fonts and roman numerals lend traditionalism.

Coffee6 in Showcase Of Delicious Coffee Websites12

Caravan13
Caravan’s website (or rather “Coming Soon” page) is decadent in rich grays and browns. Crisp whites bounce off the dark tones in both serif and sans-serif fonts, giving the typography a professional look. The background image gives us a view of its modern product design, which reflects the website itself, with its sparse text and neutral color choices.

Coffee10 in Showcase Of Delicious Coffee Websites13

Cilantro Café14
With drawn images dancing about a meditating man, impulsive swathes of paint and a variety of colors and objects, Cilantro Café reminds us that coffee can be both impulsive and relaxing. Reinforcing this contradiction is the radial balance of links that are off-kilter.

Coffee49 in Showcase Of Delicious Coffee Websites14

Kicking Horse Coffee15
The classic black and white palette of this website reflects the product design of Kicking Horse Coffee’s cups. The website uses splashes of bright tones to (ahem) kick it up a notch, and it adds slight textural elements for intrigue. The large focal point anchors the design, allowing the designer to make the links and text area large. It’s big, in your face and effective.

Coffee37 in Showcase Of Delicious Coffee Websites15

Robust-ah!16
Robust-ah’s large photo could have easily overwhelmed this space, becoming a distraction from the information featured below. Instead, the design actually benefits from the large photo, which anchors the rest of the information by giving the structure clean lines and the information a hierarchy. Robust-ah’s design is not what you would expect from a coffee website, with its deep-purple and light-blue tones. However, some things need to be improved here: larger font-size would help, and so would removing text-shadow from some parts of the text.

Coffee1 in Showcase Of Delicious Coffee Websites16

1369 Coffee House17
This coffee house website may look generic and simple, and that’s because it is. But the generic vibe and simplicity ensure that the large photo and generous information remain clean and organized.

Coffee5 in Showcase Of Delicious Coffee Websites17

Park Avenue Coffee18
Park Avenue Coffee gives a playful feel with all the vintage charm of its busy patterns, whimsical logos and strong color palettes.

Coffee7 in Showcase Of Delicious Coffee Websites18

Greyhouse Coffee & Supply Co.19
Greyhouse Coffee emphasizes its menu so much that you have to hover around the bottom or top for the sleek sub-navigation bars to float into view. Design-wise, the menu’s cork background lends organic relief to the modern feel of the other pages.

Coffee11 in Showcase Of Delicious Coffee Websites19

Tre Amici20
Reminiscent of I Spy books, Tre Amici’s links are scattered across the various photos of its coffee house. With images that skate in and out upon link clicks, Tre Amici shows an interesting, interactive take on the stagnant photo tours of other websites. The transitions in the Flash-based navigation could be certainly improved, though.

Coffee13 in Showcase Of Delicious Coffee Websites20

Dunn Bros Coffee21
The Dunn Bros Coffee website has multiple textures, including burlap, paper, and photography, to exude a cozy vibe. The aerial view is also quite nice, giving us a few extra textures to enjoy: the blackness of the coffee, the shininess of the mug and the roughness of the coffee bean.

Coffee16 in Showcase Of Delicious Coffee Websites21

Marley Coffee22
Marley Coffee’s website is aesthetically pleasing, with a simple yet modern palette, lovely Flash and a simple point of focus. But don’t be so quick to click, not until you see Mr. Marley close up, sipping a cup of coffee and peering over the mountains and wilderness.

Coffee19 in Showcase Of Delicious Coffee Websites22

Jones Coffee Roasters23
Jones Coffee Roasters has a simple website with a simple layout, but the colors are bold and comfortable, and the textures add coziness and warmth. Easy navigation and a homey feel: a workable, beautiful combination.

Coffee20 in Showcase Of Delicious Coffee Websites23

Blaser Café24
Blaser Café’s website features crisp whites and a no-nonsense, user-friendly structure, which reminds us that coffee isn’t just about sipping brew and enjoying a break. It’s a business. But we all know what all work and no play leads to, and so Blaser Café adds a fun touch, too, with whimsical image transitions on the home page.

Coffee21 in Showcase Of Delicious Coffee Websites24

A Chacun Sa Tasse25
A Chacun Se Tasse lets us take in rich screen-wide images of its coffee house while reading information in an elegant gray information box. Sifting through images requires only a quick hover on the right side of the page, with no jolting image or page transitions.

Coffee23 in Showcase Of Delicious Coffee Websites25

Turquoise Coffee26
At the opposite end of the color spectrum is Turquoise Coffee, which uses calm neutrals, muted turquoises and subtle splashes of unexpected tones to grab the user’s attention. The website may not be as flashy or inspirational as some others we’ve seen, but it’s pleasant, easy on the eyes and user-friendly, and it gets the job done. It reminds us that simple isn’t so bad. The line-height and padding could be increased though.

Coffee27 in Showcase Of Delicious Coffee Websites26

Looney Bean Roasting Company27
Nothing says decadence quite like red. And nothing is a more perfect match than red and subtle khaki neutrals. Reds and beiges may not be the go-to colors for coffee products, but here they play off the large coffee-swirl background to emphasize the coffee’s creamy delectability, rather than its high-energy potency.

Coffee28 in Showcase Of Delicious Coffee Websites27

Storyville Coffee Company28
This website is tasty enough on the low bandwidth option, but go high bandwidth if possible. Here, everything says rich: the warm tones of the large transitional images, the rich grain in the borders, the page transitions, the balance of information on the secondary pages, the decoration upon link-hover and the elegant, deep-toned pattern background. The coffee is “artfully roasted,” and the website is certainly artfully crafted.

Coffee291 in Showcase Of Delicious Coffee Websites28

Bean Exchange Coffee House29
History comes alive on the website for this old Philadelphia coffee hub. The coffee house communicates its rich history in the look and feel of the website, with every bit of ornateness, palette and structure contributing to the theme.

Coffee30 in Showcase Of Delicious Coffee Websites29

Java Cabana30
There is such a thing as too much of a good thing, and certainly in the case of color. But Java Cabana’s heavy use of brown—typical of coffee websites—isn’t overbearing, thanks in part to the texturing of most of the brown elements, which help to break up the monotony. In addition, the steel accents bring a gray neutral that breaks up the brown without becoming an overt accent tone. Add in some great illusions of dimension, and you’ve got yourself a delicious website. Flashy transition effects in the footer of the page could be achieved with CSS3; you don’t really need Flash for that any more.

Coffee38 in Showcase Of Delicious Coffee Websites30

Cuvée Coffee Roasting Company31
This company boasts, “We take our coffee seriously. But we don’t take ourselves seriously.” It may sound like a cliché, but if its design is any indication, Cuvée Coffee is being honest. With fun cheesy yellows, handwritten fonts and playful graphics, the website feels as whimsical as it is professional. The palette stays grounded in warm hues, helping to maintain professionalism and hint at Cuvée’s birthplace: the arid state of Texas.

Coffee26 in Showcase Of Delicious Coffee Websites31

Café Britt32
An abundance of imagery is on Café Britt’s website to stimulates several of the senses. The stainless steel logo against the rich gray background convey the professionalism of the company. The wood and plant imagery in the navigation bar and footer brings a natural aura. We also get an intimate feel from scrapbook-like elements such as the handwritten fonts, old-paper textures and painted scenery on sub-pages. The website is wide, but that helps to accommodate the abundance of content.

Coffee39 in Showcase Of Delicious Coffee Websites32

Paul Dequidt Torrefacteur33
Soft plays on opacity and drop-shadows give texture to the large white information areas at the center of the page. The large background contains the palette from which all tones are pulled. The dimensions could be overwhelming, stifling any smaller images in the text area, but the large image in the white section maintains equal proportions. In addition, we get a definitive sidebar and two-column balance, adding stability to the layout.

Coffee40 in Showcase Of Delicious Coffee Websites33

Starbucks Coffee at Home34
Starbucks uses a chalkboard as it’s background, providing an instant means for texture. The dark hue of the board helps anchor the bright colors that appear upon link-over. Balance is kept centered; this simplistic form of balance keeps the intricate links and unique coffee navigation in check.

Coffee61 in Showcase Of Delicious Coffee Websites35

Cafeshop Especial36
Dimension, texture and the colors in the links and sidebar ensure instant recognition of important sections, while the soft background adds a neutral base and subtle interest.

Coffee43 in Showcase Of Delicious Coffee Websites36

Swiss Water37
In the rotating pictures, you’ll find women talking to one another over a cup of coffee, women enjoying a solitary cup of coffee, women sipping coffee while working. These scenes highlight coffee’s status as both a vehicle for social interaction and an occasion for brief solitude, and they form the largest part of the website, above the fold and in your face. The soft blues and whites minimize the distraction of the top links, search box and the like. Even the logo takes a back seat to the driving concept: coffee’s friendliness and warmth.

Coffee44 in Showcase Of Delicious Coffee Websites37

Café Théâtre de la Marionnette38
It’s not often that a torso with a coffee-cup head descends from above on strings and slides down the page, but with a name like Café Théâtre de la Marionnette, the sight is not surprising. Neither are the rustic textures and intriguing images (such as the doll-like dresses). But what keeps this website in the modern era is the beautiful development, which gives us a realistic bounce as each page loads.

Coffee45 in Showcase Of Delicious Coffee Websites38

First Colony Coffee and Tea39
Using a mix of old and new design, First Colony Coffee and Tea definitely breathes new life into tradition. The serif fonts, black and white imagery and crest in the logo create a colonial vibe and take the edge off the stark modern yellow in the image and background. With the expansive space along the right side and abundance of text, this website could easily have been boring at first glance; but the focal point comes to the rescue, with the smooth sway of steam from the coffee cup and the soft scrolling of the background image.

Coffee46 in Showcase Of Delicious Coffee Websites39

Juan Valdez40
This website gives us more than a warm welcome. Here, we are personally greeted by Juan Valdez, we traverse the rich countryside scene, and we enjoy all the animated goodness that this design has to offer. And if you don’t have time to take it all in, you’re in luck: the easy navigation makes the content extremely accessible, an advantage that many heavy websites don’t have.

Coffee32 in Showcase Of Delicious Coffee Websites40

Lavazza41
Lavazza’s neutral brown background emphasizes the big links of rotating coffee cups that occupy most of the page. The neutral background also accommodates bright tones that run the spectrum. These whimsical touches are balanced by a simple white font for navigation and darker browns for drop-shadows and highlights.

Coffee33 in Showcase Of Delicious Coffee Websites41

Café Rouge42
Various textures create a warm, entertaining vibe on Café Rouge’s website. The textured background, rough paper, old stickers and supple light are just a few of the touches that make this website cozy. The movement in the photos and scrolling images below add flare.

Coffee51 in Showcase Of Delicious Coffee Websites42

Anodyne Coffee43
Anodyne’s website is simple. Its coding is basic, and its design is line-based and simple, which might cause some designers and developers to cringe. However, with the Web now so obsessed with bells and whistles, seeing a simply coded, simply designed website is a breath of fresh air. The traditional serif fonts hearken back to simpler times. What would be really necessary, though, is to replace an image used under the header to display opening times and the address with simple text that would have higher contrast against the background.

Coffee3 in Showcase Of Delicious Coffee Websites43

Dôme Café44
Like Café Rouge, Dôme Café uses a variety of textures to make the user feel cozy. The rotating images add excitement, and elements such as the white ribbon in the logo and the trim around the links instill tradition.

Coffee52 in Showcase Of Delicious Coffee Websites44

Double Coffee45
Double Coffee matches its big imagery with big text, big text areas and bold white fonts, achieving proper balance. Red runs rampant across the website in different hues and tones, bringing consistency and cohesion to the website. Adding to the cohesion are white cups, dishes and creamers that mirror the font. It’s proportionately spot-on and features interesting touches, such as a credit card. The consideration for all of these basic design principles make the website appealing and make us want to stay for one more page.

Coffee53 in Showcase Of Delicious Coffee Websites45

Kaffebrenneriet46
Like the Far Coast website, Kaffebrenneriet balances big rich imagery at the top with a neutral brown and taupe bottom, as well as focused images and simple fonts. Shadows set off the logo and two navigation bars, and the play on opacity and light make for an overall professional feel.

Coffee55 in Showcase Of Delicious Coffee Websites46

Mugg & Bean47
The dominance of one color, the balance of the large imagery and text areas, the traditional white font and the accent tones make this website easy on the eyes. Drop-shadows, reflection effects and beautiful image movement make it look even more professional.

Coffee56 in Showcase Of Delicious Coffee Websites47

Old Town48
Old Town plays up its name in this design, with its yellow-sepia blend in the background, the old village nestled in the countryside, the italic serif fonts and the flock of birds in the sky. We also get a touch of modern, with scrolling videos on the billboard and an animated delivery truck. The heaviness of the billboard is balanced by the town, and together they are balanced by the six links along the bottom, which reveal sub-navigation in white boxes upon hover.

Coffee57 in Showcase Of Delicious Coffee Websites48

Copper Door Coffee Roasters49
A multitude of textures, along with paper, wood and nails, give this website its natural look. The nice handwritten font for links and page headers and the drawn lines under hovered links punctuate the naturalness. Warm greens and oranges bring out the equally warm hues in the textures.

Coffee59 in Showcase Of Delicious Coffee Websites49

ROM Coffee Bar50
The circle of ROM Coffee Bar’s logo is reflected throughout the website, providing continuity and visual interest and giving the crisp whites and steel blues a softer feel.

Coffee31 in Showcase Of Delicious Coffee Websites50

Quills Coffee51
Big images, fonts and links provide balance, while the contrast of font types adds variety to this big neutral design.

Coffee34 in Showcase Of Delicious Coffee Websites51

Melitta52
There’s no better way to involve a user in your product than by simply throwing them into the scene. Most coffee websites do this with a close-up of coffee or a large static image of customers enjoying the atmosphere. Not Melitta. Melitta puts us at eye level with the rest of the coffee shop’s patrons, making us feel as if we too are sitting and sipping. We get a large view of the coffee shop’s charming exterior, and we can even watch as the patrons move, change and enjoy the experience. What’s best is how large the graphic is, giving us a full-on view of the perfect Melitta experience.

Coffee35 in Showcase Of Delicious Coffee Websites

Everyone is always looking for interesting and effective ways to organize their website and allow users to move about and find things. But there’s a fine line between unexpected and unusable. Three points to consider in any navigation scheme are consistency, user expectations and contextual clues.

If page is long and provides different levels of navigation, will users be able to find their way through the site and use proper navigation quickly? Forcing visitors to use certain keystrokes to navigate, rather than what they’re used to, might be novel, but is that effective if you have to explain instructions prominently on your home page? Here are some examples for your reading pleasure.

Made by Water

A JavaScript-Powered Vertical Fun

The large bold headings and modern color palette on Made by Water1 feel fresh and fun. The grid layout is nice and clear, while the background texture is subtle but interesting. The icons at the top are visually appealing, and the animation makes them fun to click. It’s not immediately apparent what they are for, though. Some text would help to clarify that they are for navigation.

Running in Showcase of Interesting Navigation Designs1
Vertical navigation buttons with icons.

The other problem with the navigation is the yellow “up” arrow that is displayed in the footer of the page. One would expect it to bring you back to the top of the page, but it leaves you more in the middle. The circle of stripes that follows you down as you scroll doesn’t match the background pattern, but we can’t tell if it’s part of the navigation. At any rate, we clicked it to no effect.

Finally, while the text at the top is fun and exciting, finding the “Who am I” section is a bit hard. It’s not immediately clear what the website is about.

Made in Haus

Horizontal Slideshow as Navigation

The large page keeps Made in Haus2 from feeling unoriginal, and the smooth motion is a bit different from many of the sliders we’ve seen. Bumping the accompanying text up into the body of each slide is a good way to keep it above the fold and visible as the user flips through the slides. The sliders on the sub-pages are also effective, being an easy way to skim through a fair amount of content. Also, nice hover-effects under the slideshow look attractive and give an insight into the work of the agency.

Haus in Showcase of Interesting Navigation Designs2
Bold horizontal navigation.

One drawback is that the triangle on the far right of the upper navigation menu is a bit confusing. It appears to link to the home page, as a logo would, but we’re not quite sure why. Also, the arrow on the right side of the slideshow may be a bit too tiny, making it a bit difficult for users to navigate the slideshow. We’ve seen a similar navigation earlier, on Weightshift3 which is a nice example of an alternative implementation of this technique.

Foundation Six

Animated Text Scrolls Down With the User

Foundation Six4 features a few big bold screenshots at the center of the page, giving us the impression that they were interactive in some way. The first thing that we did was try to click on the screenshots, but nothing happened (except for the central one which links to the description of the project featured in the center of the page), which was a little frustrating.

Beauty1 in Showcase of Interesting Navigation Designs4
Text moves instead of images.

The headings are large and very clear, and the type is handled nicely throughout. The color palette is very soft and clean, and it nicely matches the atmosphere of the site. The call-to-actions buttons are large and easy to find, read and click. The subtle hover effects in the upper navigation enhance the user experience, making it smooth. Additionally, the contact form tracks well and is nicely laid out, while the map is a nice touch. The company scores bonus points for linking to Bring Down IE65.

On the projects page, the way the explanatory text slides down instead of the images is original. But being so unexpected, it could be a little disorienting, which may or may not be a good thing: is explanatory text really the best place to make a statement with moving parts?

Word Refuge

Textual Content in a Horizontal Slider

Word Refuge6 features an old-fashioned bookish vibe. Because it is a copywriting service, this seems appropriate. The contact form is prominent, easy to find and easy to use. The logo is also nicely done, and the color palette is rich and regal.

Wordrefuge in Showcase of Interesting Navigation Designs6
Various arguments for the company are organized into slides.

One small point is that the tag lines in the main navigation are effective under some of the menu items but not under others. Some of them feel redundant, as if they’re there only to balance things out. As a rule, if text doesn’t add any explanation, it shouldn’t be there. That said, the text throughout the website is nicely kerned, and while the page is wordy, the text is easy to skim through and read.

Relogik

Animated Horizontal Slideshow Navigation

Relogik7 is another example of minimalism done well. The logo is understated and sophisticated. Most design elements are semi-transparent and appear on hover. The close-up images are bold and make the content the focal point of the page. The code is clean and well-structured and uses a solid grid layout with pulls to keep everything squared up.

Relogik in Showcase of Interesting Navigation Designs7
Sliding horizontal navigation.

The classic numeric navigation makes it easy to navigate the slideshow. One weakness is that the contact information has a very low contrast against the background. A darker color would help to highlight it. The project detail pages do a good job of showing rather than telling and of displaying each piece in a real-world context.

Drexler

Horizontal Navigation… If the User Follows Instructions

The horizontal navigation on Drexler8 works both with the arrow keys and mouse clicks. On the first glance, it’s not clear how to navigate the site: you need to either read the hint in the upper area of the site (“User your arrows”) or experiment with the design to figure it out. To browse blog posts, users need to click on the illustration of the post or use keyboard arrows. The design itself is visually appealing, but the navigation scheme isn’t straightforward.

Drexler1 in Showcase of Interesting Navigation Designs8
“Use your arrows” to navigate.

The retro color palette and big bold fonts make the website colorful and energetic, but they also might be a little overpowering. The “t” for Twitter in the upper right is an interesting break from the usual little bird, but the downside of breaking with convention is that you might lose clarity. We didn’t know what the icon was for until we clicked it, and we probably wouldn’t have clicked it if we were merely visiting the website as a normal user. The contact button is amazing indeed, as it claims. The multi-column contact form is an interesting take on the email form. It seems effective, and it tracks very well. This is a design that needs to be explored to be understood — but maybe it was the intention of the designer in the first place?

The logo is simple and clean, but again, it adds a note of confusion. The yellow underline on mouse-over feels unbalanced, because the rest of the logo isn’t highlighted. One other thing to note is that the page changes color to match the project being displayed. This is an unusual take on the portfolio. Usually, projects are displayed uniformly, sometimes to the point of being indistinguishable. This approach makes the projects stand out, in a good way.

Komrade

Vertical Navigation With a Twist

This page allows users to forge their own path through the website. Komrade9 features original illustrations, a fresh color palette and an original “Choose Your Own Adventure”-style navigation scheme. The navigation has the following cracks in it, though:

  1. The light blue text looks like it’s hyperlinked. One of the first things a user sees upon loading the page is the blue “Who’s Komrade” heading. The first thing we did was click it, but nothing happened. This started the user experience off on the wrong foot. With this unusual scrolling navigation, distinguishing the clickable from the unclickable is extremely important.
  2. The numbered navigation for Komrade’s past work does not stand out enough. The red circles look like yet more flowers, which caused us to pass over them several times before figuring out that they were the navigation. This goes back to the clickable/unclickable issue. Well-placed labels would go a long way here.

Komrade1 in Showcase of Interesting Navigation Designs9
“Choose Your Own Adventure”-style navigation.

All For Design

Scrolling Navigation and “Shelf”-Navigation

All For Design10 feels light and airy, with its crisp woodcut headings and subtle effects such as the Twitter icon that flies on hover. The design os single projects pages is especially nice, making clear exactly what was involved in each project. The section “some inspiration” nicely puts books, useful websites and articles on a “shelf” and has subtle shadow- and hover-effects. The only problem is that the title-attribute is displayed on hover together with the screenshot which makes it a bit difficult to focus on one of them.

Inspiration in Showcase of Interesting Navigation Designs10
“Shelf”-navigation.

Calendar in Showcase of Interesting Navigation Designs10
Calendar next to the contact form.

The calendar next to the contact form is also a great idea: it sets expectations and makes it easy for potential clients to plot a timeline. While the font is scannable, it still feels a bit too wordy overall, although the shadow effects, subtle borders and custom icons keep the eye flowing down the page.

Digital Labs

Horizontal or Vertical Navigation?

With the prominent screenshots on this website, one would think the page would have horizontal navigation; in fact, the page is static. Digital Labs11 uses a wide layout, with a nice textured background. The dark colors make it feel spacious without being too spacey. One issue, though, is that the orange ribbon on the right looks like it should be clickable, but it isn’t. The text-based social media widget, which responds to mouse-over, is an interesting touch. The web design scene is full of social media icons, so a text-based widget stands out.

Digital-labs in Showcase of Interesting Navigation Designs11
The static screenshots above look like a slideshow.

The other issue is that the “Are you ready to get started?” link at the bottom is a mailto: link, rather than a link to a contact form. This is acceptable, but a drop-down form in that space would really kick things up a notch.

Calobee Doodles

Classic Thumbnail and Lightbox Combination

Calobee Doodles12, an illustration-based portfolio website, has fun details, such as the objects and people falling from the sky. The cloud menu items could be clearer, though. At first, we were not sure what “Custom” stands for (it stands for custom design and illustration work). However, the menu benefits from descriptive tooltips and appear on hover. Still, a different wording, for instance “Work”, would have been clearer.

Calobee in Showcase of Interesting Navigation Designs12
The website uses the classic thumbnail and lightbox navigation.

A thumbnail gallery is a common way to display work, but in this case illustration thumbnails are a bit too small, and they are linked to images. A lightbox may work better in this context. The bottom-up-navigation may be useful for some readers, and the footer is truly remarkable. Also, it would be nice to remove dotted lines appearing on click in the navigation menu. A simple outline: none; for links with proper styles for :focus and :active states would suffice.

Build

Classic Top-Level Navigation

While the overall layout of Build13 is clean and modern, the content could stand to be more easily scannable, for two reasons for this. A look at that code suggests that the margins and padding are a bit arbitrary. The padding for the main body conforms to a design pattern, but the major content elements do not. Maybe it would be a good idea to use multiples of a set base number for the margins, padding and borders, so that there is a consistent ratio throughout.

Build in Showcase of Interesting Navigation Designs13
Classic top-level navigation.

Secondly, the contrast of the text in the content sections has some problems. The contrast between strong white and strong grey background is very striking, and maybe a bit too strong. The second part of the page looks a bit busy and a bit difficult to scan, probably because the colors of the headings and descriptions are very similar. Maybe if the headings were kept as a serif, the content blocks could be distinguished a bit by making the text lighter and using a sans-serif font. Some textual variation or typographic work might add visual interest as well. Subtle hover effects for links are attractive and fun to click on: nice touch!

We liked the listserv sign-up widget in the footer of the page. A sample email in the relevant field, along with more space on the line, could be a helpful, though. Also, an explanation of what exactly users are meant to type here would be great — for instance, a sample e-mail in the input field. Also, the mouse pointer should change after you click on the submit-button, but in this case it doesn’t. We fumbled a bit at first until we looked at the code.

Mail Chimp

Graphics-Heavy Vertical Page With No Navigation Other Than Browser Scroll Bar

Mailchimp’s promo page14 is a visually appealing website with a lot of interesting vintage graphics. Some real strengths of this website are the many interesting textures and patterns. The color scheme is modern and appealing. There are, however, a few usability problems. First, there is actually no navigation. We’re as big a fan of shedding unnecessary conventions as the next guy, but if we were an existing customer visiting this website, we would have no idea what to do. The “Sign in” link is obscured at the bottom of the page, with few visual cues to reward the user’s patience as they scroll down. Even a few small links at the top would add some structure and provide some cues for navigation, which would make the whole website make more sense.

Mailchimp in Showcase of Interesting Navigation Designs14
Graphics-heavy vertical website.

Secondly, the edgy graphics, while fun and visually interesting, don’t give much sense of what the main point of the page actually is (if you are visiting the site for the first time). The primary message is only delivered in the paragraph towards the middle, and even it is a bit hard to read, with the small white text over the shades of gray. The paragraph would be more effective if it were bigger and had more contrast. The promotional videos are really great and remarkable, though.

Pline Studios

Minimalism in Vertical JavaScript-Based Navigation

Pline studios15 is an architecture firm, so it makes sense for it to have a spacious vertical layout with graphic touches that are reminiscent of CADD drawings. The big headings are clean and visually appealing and do a great job of leading the eye around. In an unconventional navigation scheme, making it clear where to click is critical, and this website makes it extremely clear. The navigation is repeated in each section, so the user is never stranded and left to scroll.

One problem, though, is the project descriptions; so much focus is on the images and animations that there’s actually very little explanation about the projects themselves.

Pline in Showcase of Interesting Navigation Designs15
Minimal vertical navigation.

Transformology

Persistent Toolbar-Navigation

Transformology16 shows another way to handle navigation on a vertical page. When the user scrolls the page, the navigation menu at the top of the site changes accordingly. The elaborate headings in the text blocks are visually appealing, but almost to the disadvantage of the content that should be showcased. The headings make the content easy to see but more difficult to read. The website has a clean, solid grid layout, but it may not always do an effective job of displaying the content, which sometimes feels overpowering.

Transform in Showcase of Interesting Navigation Designs

Burton

Sliding Captions and Tabbed Boxes in a Vertical Layout

The first thing we noticed about Burton17 is the nice visual details, such as the animated eyes on the “Search and Destroy” search box, and the animated GIF on the mouse-over logo. The jigsaw layout is clean, bold and easy to scan. The mouse-over labels are a good way to display details without overwhelming users with text, and the mini-tabbed layouts inside the content blocks keep things clean and minimal. All of the content is available without being visible all at once.

Restricted in Showcase of Interesting Navigation Designs17
The scrolling vertical navigation is aided by the jigsaw sections with sliding captions.

A problem with the navigation, though, is the up and down arrows on the side of site’s pages. We expected that they would allow us to move up and down the page; instead, they pop out a text-based navigation menu. Not knowing what sections of the page correspond to the labels (for instance, when you visit the page for the first time), this isn’t very useful. Still, overall very nice, original and memorable design.

New Adventures in Web Design

Fun Shapes That Feel Like Navigation

At the first sight, the interactive shapes in the middle of the New Adventures18 page feel a bit like navigation, in that they change as you move through the website, providing cues that the page has changed. New Adventures is an example of a clean and solidly structured design. The rainbow of dynamically transforming shapes is fun and original. Adding more color could make the design a bit stronger; the brown palette is calm and professional, but it probably could have been be more interesting with some accent colors.

NewAdventures in Showcase of Interesting Navigation Designs18
The shapes move all over the place!

The typography overall is effective, and the line heights and margins make the information very clear and concise. An interesting touch of the design would be to highlight the speaker’s photo when a user hovers over his or her name in the list of speakers. Also, when trying to return to the front page, we clicked on the text logo in the left upper corner (“New Adventures in Web Design”), but it isn’t clickable which is a bit confusing. We had to use the small “Home”-link in the upper left corner instead.

Christopher Kaufman

Wide Horizontal Slider With a Difference

On Christopher Kaufman’s page19, the sub-content panels slide up as the slider moves left to right. The layout is clean and organized, the background is colorful and unique, and the slideshow adds plenty of eye candy. The logo is minimal but detailed, and the top-level navigation is clear and effective. One drawback is that the background image is a pretty big file; as it loads, it creates a flashing effect that can be disorienting. One could argue that the height of the slideshow is optimized for larger screens; but scrolling through the slideshow content, some users can see that the content below has changed, yet have to scroll down to read all of it. This isn’t necessarily a big issue, but the slideshow panels could be a bit shorter.

ChristopherKaufman in Showcase of Interesting Navigation Designs19
The wide horizontal navigation forces users with small screens to scroll.

Chapolito

Another Example of Tabbed Navigation

Chapolito20 is really a unique website. The footer animation catches the eye right away, and the abstract shapes in the top-level navigation are original, as is the way the logo is integrated in the navigation, which keeps the brand as a focal point. We do have a suggestion for the sub-navigation in the portfolio section, though. The circles-as-progress indicator probably works best for slideshows of about five pieces of content or fewer. With such an extensive showcase, the user might get lost and not be able to find a particular project again. If numbers were in the circles, that would help.

Chapolito in Showcase of Interesting Navigation Designs20
Interesting top navigation.

Flywheel Design

Sliders and Graphic Tiles That Flip on Mouse-Over

Flywheel Design21 gives a good overview of its work right on the home page. The hover-over navigation is fun and gives users an incentive to mouse around and explore. The background is simple without being boring, making this a good example of minimal design. One problem for us was the slider navigation on project sub-pages: almost too minimal, because it took us a while to figure out it was there. Making it a little bigger or adding a splash of color might help.

Flywheel in Showcase of Interesting Navigation Designs21
Flip-tile style navigation.

Wishbone Design

Flash-Based Animated Navigation

Wishbone Design22 is created for kids and parents, so it makes sense for it to be fun and full of Flash animations. The navigation is entertaining but a little hard to use. Having the sub-elements open on hover seems to be the root of the problem; changing it to a click might give users a greater sense of control. Hover navigation should be as speedy as possible. The main slideshow is eye-catching, but you really have to dig to figure out that this is actually a company manufacturing bicycles (among other things). An explanatory blurb or even some slides would help new visitors. Another problem: if you’re going to have audio, please give users a way to turn it off! Overall, the site is truly remarkable, with attention to details. Nice work, this is what Flash is supposed to be used for!

Wishbone in Showcase of Interesting Navigation Designs22
Flash-based navigation.

Basmatitree

Flash-Based Animation That Could Be Navigation

We can’t lie: on first arriving on 60 mq missione casa23, we were really hoping that the spoons were the navigation. We were sad to find out they aren’t. That said, this is a pretty fun layout for a food blog. The typography could benefit from some more variation, though. Also, the posts would be easier to scan if some texture or color variation were added to the columns.

Basmatitree in Showcase of Interesting Navigation Designs23
Flash-animated spoons are fun!

Minus Five

An Entirely Horizontal Sliding Website

Horizontal navigation can be problematic. In this case, though, Minus Five 24is larger than life and colorful. The hover-over “Forth” and “Back” controls are large and easy to see, making it abundantly clear where you can click and what you are supposed to do, and avoiding one of the common drawbacks of unconventional navigation.

Minusfive in Showcase of Interesting Navigation Designs24
Entirely horizontal navigation.

For a portfolio, one thing that could confuse users is that the featured websites are not linked to anything. Using images embedded in a Mac frame to convey that they are websites is a good idea, but they make it a little hard to see the details in the designs. Another questionable design choice is positioning the portfolio pieces to the right of the background image. This makes it feel as though the background is the focus, instead of the portfolio pieces themselves. Also, the page is difficult to browse if you don’t have a proper wide screen display, because you see only small chunks of the site at once.

Retinart

Completely Text-Based Navigation

Retinart25 is a lovely example of a typography-focused website. The nice, even gutters and margins are relaxing on the eyes. One thing that’s a little unexpected is that the “Feedback” tab on the left side doesn’t pop out from the side (as most users would expect), but rather opens a modal window.

Reintart in Showcase of Interesting Navigation Designs25
The beautiful typography goes well with imaginative language.

Notice the careful attention to language. In conjunction with beautiful type, a designer can really take it to the next level by using beautiful language to emphasize the quailty of the site.

Collision Labs

Classic Tabbed Navigation

Collision Labs26 is energetic. We immediately wanted to take this design firm’s advice and fasten our seat belts! The large header block is exciting without being overpowering. The portfolio sub-pages are clear and do a good job of both telling and showing what the projects were about. The typography, though, is a little uniform. One thing that confused us was the Twitter icon in the footer navigation: the bird flips upside down on hover. We couldn’t really see the reason for this, so it felt vaguely unsettling. Overall, though, an effective website, and a good example of judicious and not excessive icon usage.

Collision in Showcase of Interesting Navigation Designs26
Bold color and traditional navigation.

How to Add Decorative Glamour to Your Ordinary Script Font

//

Sometimes you need to go a little bit wild with your typography. In these cases, you can either take the easy way and choose a fancy font from some of the free font site like Dafont or Urban Fonts, or get creative and give some extra sparkle to your ordinary font, creating a typographic design which can stand by itself. This tutorial, discusses this later option. Beware of the following boolean operations galore!

 

Final Image Preview

Below is the final image we will be working towards, as well as a few color variations. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.

For this tutorial, I used CorelDRAW but the techniques discussed apply for most vector editing software.

Step 1 – Type, Organize, and Choose the Font

Find the relationships in your copy and organize the text accordingly. For this tutorial, I’ve chosen a calligraphic font called Old Script from dafont.com, but any script font will do.

Step 2 – Convert to Curves and Break Apart

To modify the font we will need curves. Select your text and press Command + Q (convert to curves) and then press Command + K or use the Break Apart icon form the Property Bar, to break apart the components of the font. Since inner parts are separate elements we need to trim them from the rest of the character.

Step 3 – Trim Inner Parts

Shift-select the inner (I’ve altered their color to orange) and the outer parts of a character and press trim on the Property Bar. If you want to have more control over boolean operations, then you can turn on the Shaping docker from the Window menu. Then select the source object, press Trim, and select the target object with the special cursor.

Sometimes after the break apart operation the inner parts go behind the outer parts. In this case, select the outer part and press Shift + Page Down to send it to the back. It is always a good idea to have two different colors for boolean operations.

Step 4 – Give Some Flesh to the Characters

Select an individual letter and drag away. Before releasing your button, click with the right button and you will get a copy of the original shape. Repeat the copy operation, but this time move the copy to the left a little bit to have two overlapping shapes.

Step 5 – Trim and Break

Select the two overlapping copies and click the Trim icon on the toolbar. Select the resulting shape and press Command + K to break apart.

Step 6 – Weld

Move away some of the resulting shapes to the right and weld the rest. The goal is to achieve a more dynamic look by increasing the difference between the thick and thin parts of the character. I find steps 4-6 the easiest way, but you can use any other techniques to achieve the desired alteration.

Step 7 – Clean Up Messy Curves

Remove unneeded nodes to have a clean flowing curve. Select the Shape Tool (F10) and right-click on a point, then select Delete from the context menu, or simply double-click the node with the Shape Tool. After a boolean operations, always check for stray segment and undesired nodes.

// //

Step 8 – Glamorizing Begins

Make a copy of the character by moving it to the left, but just a tiny bit. Select the resulting shapes and press trim in the Property Bar. Repeat the copy and trim operation to the right, up and down.

Always move away the resulting chips and break them apart (Command + K). These small shapes will be the building bricks of the look we’re creating.

Step 9 – The Creative Part

Arrange the chips so that they overlap the original object. Rotate, scale, or duplicate them in a creative way, until you’re satisfied with the outcome.

Make an extra copy of the original shape for later use. Select the original shape and the chips and weld them by pressing the Weld icon on the Property Bar.

Step 10 – Let There Be Highlight

Pick the Interactive Contour Tool by pressing longer on the Effects Tool on the toolbar. In the properties bar, choose Inner contour, Number of steps 1, and a small offset depending on the size of your character. From the Arrange menu choose Break Contour Group Apart.

Step 11 – Finishing the Highlight

Pick the resulting object, clean it up, and position somewhere towards the top-left part of your character.

We are almost there. Make one more highlight if you wish following Steps 11-12.

Step 12 – The Tedious Part

Repeat Steps 4-12 on all the characters.

Step 13 – Bring it All Together

Using the original text as a template move the modified characters to their place.

Get creative on the initials and use swirls and swashes derived from the characters to make the design coherent.

Step 14 – Experiment with Color Setups

When finished, group the characters and highlights in two separate groups to make the color experimentation easier. The ideal color setup would be something like a darker base color and a lighter shade of it for the highlight.

To Sum Up

In this tutorial, we created a typography effect by using only parts of the original type, which makes the whole thing work together. Using this trim and weld technique, you can always give some extra details to your type treatments or vectors.

How to Create Glass Effect Text in Photoshop

 

In this tutorial we will create a glass effect on editable text using only blending modes. We will also work with gray tones, so the text will grab its colors from the background and adjustment layers.

Difficulty: Intermediate – Advanced
Completion time: 2 hours
Tools: Photoshop CS3

Resources: Minion Pro font – generic, any font will do.

What you will be creating

final2 designioustimes glass text effect tutorial How to Create Glass Effect Text in Photoshop

STEP 1

Create a new document of 600×600 px in RGB color mode at 72 dpi (File > New…).

1 designioustimes glass text effect tutorial How to Create Glass Effect Text in Photoshop

STEP 2

Grab the Type Tool (T), draw a rectangle large enough to fit a letter. Then type a letter of your choice. If you want a longer text, just create a larger document in STEP 1 (e.g. 1608×1050 px).
Set it to Minion Pro, 370 px and Sharp. For color, set it to #e5e5e5 – a light gray tone.

2 designioustimes glass text effect tutorial How to Create Glass Effect Text in Photoshop

STEP 3

Open the Layers palette (F7) and set Fill to 0%. Select the Type layer (the thumb with a “T” in the center) and click the “fx” button. Select Blending Options.

3 designioustimes glass text effect tutorial How to Create Glass Effect Text in Photoshop

STEP 4

In this window, check the boxes shown below. It will look nasty at the moment, but don’t worry. We’ll fix it.

4 designioustimes glass text effect tutorial How to Create Glass Effect Text in Photoshop

STEP 5

Click on each line and use the settings below. To see better what your results look like, select the “Background” layer, grab the Paint Bucket Tool (G) and fill it with a dark gray.

5 designioustimes glass text effect tutorial How to Create Glass Effect Text in Photoshop

5.1 designioustimes glass text effect tutorial How to Create Glass Effect Text in Photoshop

5.2 designioustimes glass text effect tutorial How to Create Glass Effect Text in Photoshop

5.3 designioustimes glass text effect tutorial How to Create Glass Effect Text in Photoshop

5.4 designioustimes glass text effect tutorial How to Create Glass Effect Text in Photoshop

5.5 designioustimes glass text effect tutorial How to Create Glass Effect Text in Photoshop

5.6 designioustimes glass text effect tutorial How to Create Glass Effect Text in Photoshop

5.7 designioustimes glass text effect tutorial How to Create Glass Effect Text in Photoshop

5.8 designioustimes glass text effect tutorial How to Create Glass Effect Text in Photoshop

5.9 designioustimes glass text effect tutorial How to Create Glass Effect Text in Photoshop

5.10 designioustimes glass text effect tutorial How to Create Glass Effect Text in Photoshop

STEP 6

Go to Layer > Duplicate Layer (CTRL+J). Select the original layer and right-click on the effects list in the Layers palette. Select “Create layers”. Hit OK on the popup window.

6 designioustimes glass text effect tutorial How to Create Glass Effect Text in Photoshop

STEP 7

In the Layers palette, select all the layers resulting from STEP 6 (SHIFT+click), except “D’s Outer Stroke”, then click on the “Delete Layer” button – the one looking like a trash can.

7 designioustimes glass text effect tutorial How to Create Glass Effect Text in Photoshop

STEP 8

In the Layers palette, CTRL+click the “D copy” layer to load a selection (it will appear like a marching ants contour), select the “D’s Outer Stroke” layer and hit Delete.

8 designioustimes glass text effect tutorial How to Create Glass Effect Text in Photoshop

STEP 9

Go to Layers palette, set Fill to 0% and open the Blending Options like in STEP 3. Use the settings below.

9 designioustimes glass text effect tutorial How to Create Glass Effect Text in Photoshop

9.1 designioustimes glass text effect tutorial How to Create Glass Effect Text in Photoshop

9.2 designioustimes glass text effect tutorial How to Create Glass Effect Text in Photoshop

9.3 designioustimes glass text effect tutorial How to Create Glass Effect Text in Photoshop

Done!

How to use it:
Simply place it over an image and if you like, add some adjustment layers to give it a nice tint.
Here are a few examples.

final1 designioustimes glass text effect tutorial How to Create Glass Effect Text in Photoshop

final2 designioustimes glass text effect tutorial1 How to Create Glass Effect Text in Photoshop

Follow

Get every new post delivered to your Inbox.