Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

February 11 2014

11:00

HTML, CSS, PSD and More: 24 Free Design Resources from January 2014


  

Creativity is like a cat. Sometimes it gives you head butts and rubs against you. Then it delivers you nothing but dead prey or stays away completely for days. As a creative professional you need to find ways to get creativity back, while your cat just needs you to patiently wait as long as it takes. Sparking your creativity is best done by inspiration and inspiration comes from many things, not the least other people’s work. In the face of this fact we’ve put together yet another set stuffed with HTML, CSS and PSD templates and added the best UI kits. Your cat will not be interested, but you should keep the following list safe and warm….

January 20 2014

11:00

HTML, CSS, PSD and More: 22 Free Design Resources from December 2013


  

Design resources are great in many ways. Some of us might just use them as they are, building their next project upon them. Others simply take them as an inspiration to create their own. All of us collect these resources. There’s no denying, we are hunter-gatherers. In the face of this fact we’ve put together yet another set stuffed with HTML, CSS and PSD templates and added the best UI kits. Bring it to the fireplace and hear everyone whoop with joy.

December 11 2013

18:04

HTML, CSS, PSD and More: 25 Free Design Resources from November 2013


  

Hello world! Another month has passed and here we are, back again with another collection of the most awesome fresh and free design resources we were able to dig up. We’ve put together a set stuffed with HTML, CSS and PSD templates and added the best UI kits. One important information before you read on: All the following elements are freely usable, though some will require a registration to download.

November 18 2013

07:30

Fall Cleaning Pt. 2: 26 Free Design Resources, Fresh from October 2013


  

Hello global design community!. We are back with another edition of our monthly collection of the freshest design resources. Today, we’ll show you, what October 2013 had to offer. If you know our series already, you know you can expect the best HTML, CSS and PSD templates, as well as UI-kits for your next great web or native app. All of the resources showcased here are fresh, free and easy to download, suitable for experienced and amateur web designers, so be sure to download the ones you love and share them with everyone you know!

August 01 2013

06:30

Best of July 2013: 30+ Brand-New HTML/PSD Themes & UI Elements


  

This is the second compilation in our monthly series of brand-new HTML/PSD themes and UI elements. All the works exposed here are fresh resources from the month of July 2013. You will find another big set of ready to use themes, templates and elements for the web as well as completely editable files for your favorite image or vector editor. We got something for everybody…

July 11 2013

06:30

Summer 2013: The best HTML/PSD Themes & UI Elements of the Season


  


  

If you develop websites and your environment is not WordPress, you still don’t need to live your online life in visual darkness or hide beneath the sheets. We curated a list of awesome templates layered in HTML and CSS to make your work easier, and with a lot of different grooves to find the appropriate one for your web. Or, if you are you more confortable developing your own theme based on some pre-built elements, here is the inspiration you need to create an awesome theme or application. Starting with the PSDs  and UIs shown below, you can create your own awesome design. Take a look!

November 15 2011

10:00

Graphic Design Basics Part 3: Composition

The second article in the series talked about the Principles of Graphic Design and we took a look at concepts such as Balance, Dominance, Contrast and Harmony. Today we go a bit more in-depth with the last episode and talk about the composition and its basic elements.

1. Single Visual

This composition is where a single image is used for the design. This means the image is usually powerful, creates an impact and the whole design is built on it. Examples of single visual pages include landing pages, but this is more popular in print than in web.

The single visual composition is one of the easiest to achieve, although you need to carefully select the image, otherwise it won’t have the desired effect. The main principle behind this pattern is to make sure the typography and the other design elements reinforce the visual element and do not compete with it. There has to be a clear definition over which one is more important and in this case the image, illustration or graphic element used have to be the most powerful.

Glitter Denmark is a very good example of a single visual pattern design.

2. The Golden Ratio

The Golden Ration, which is also known as the Fibonacci Spiral or Phi, is around 1:1.618. The Fibonacci Spiral is found all over the world in different things and the web is no exception. It is a good idea to place the elements into a website along the lines of the Spiral, because this is the way the human eye works. Managing to use the Golden Ratio properly will bring the focus of the visitors onto specific things you wish to emphasize.

The Fibonacci Spiral

3. Focal Point

This is another important one because the focal point is the one who gives the viewers something to look at. The focal point adds a more specific idea to the design and acts as a starting point for most of the visitors. The focal point can be represented through simple typography, a button, illustration, a picture or any other element. It is totally up to the designers which is the way he wants to create a focal point through.

Girlfriend Agency uses the focal point properly, by emphasizing the headline

The focal point has to be in focus and has to be the first element a viewer sees when he enters the page (especially for the first time). However, making it too important and visible will break the balance of the layout. Keep the focal point within your site’s goal and make the purpose of the page be shown through it. For example, having a call to action button is a focal point, because that is the final action you want the user to take on your page.

4. Grid design

This should not be a new one for you. Grid theory is maybe the most popular element of a composition, because we do it all the time even without realizing. Grids add structure to a design and are used to hold a good proportion among the elements on the page. You can find lots of grid frameworks on the internet, which are free to download and build on, and I actually recommend you to use them if you are a beginner in this domain. Working from the beginning with grids will make you feel comfortable with this approach and this is good for your layouts.

Grids do not have to be rigid all the time, they can also be subtle, but if you go for this option, then make sure the design will still be clean and refined before the delivery. When working with grids it is always a good idea to ask feedback from the ones around you, because working for hours long with a grid framework in front of you will probably make your eyes not see small mistakes that need adjustments.

The Grid System

5. Gestalt Laws

When I learned this principle in school I was amazed by the difference it made in my designs. The laws are the result of the human visual perception of things, including websites and elements. The laws are created by the way different elements impact the viewer.

There are five principles Gestalt Laws: closure, similarity, continuation, alignment and proximity.

Shortly explained, the law of closure says we are accustomed to close things in our imagination that are not really closed. A good example is a near circle which you draw only on 330°. The human brain will perceive it as a whole, completed circle. The law of proximity shows we tend to group objects that are closer to each other, while the law of similarity emphasizes the same thing, only that we group  things that have the same color, shape or texture. The law of continuation emphasizes that objects will be grouped as a whole if they are co-linear or follow a specific direction, while the last rule, the one of alignment, shows that objects are aligned based on their edges (very popular pattern), or based on their centerlines. The objects can also overlap each other.

The Gestalt Law of Closure

The Gestalt Law of Proximity

There are actually more Gestalt Laws, but not all of them are important for designers. At the end of the article you can find a link with all the laws and you can learn more about each one of them.

6. The “Z” and “F” Layout

The so-called “Z” layout is based on the normal movement of the human eye. As the name says, most of the people who’ve been eye-tracked look at a webpage in a Z shape, meaning they start in the upper left corner and finish in the bottom right one. Managing to align all the objects on a home page along this shape will definitely provide better results and will make your design more efficient.

Layout in a Z shape

There is another type of layout as well, shaped as an F. This means users read the first line and then continue to read the second, continuing like that in a specific order.

Goal Arena is a layout in a visible F shape

Bottom line

These are the most important principles of design and by having a strong knowledge of each one of them your layouts will not only look better, but will also offer a better user experience. Creating good interfaces for the user will make them keep your page in mind and, if you get used to working with these principles, at some point in time it will even get normal and logic.

Sure, there is much more knowledge to get about all these laws, but this knowledge comes along with the experience and you can’t really get it only from books, but by practicing. By looking back at all these three articles you should already have enough knowledge of the basic elements of a graphic design and I really hope that if you are a beginner, this series of articles made you think more seriously about a graphic design career.

Read more

The Gestalt Psychology on Wikipedia

The Gestalt Principle on Tutsplus

Grid Theory on Design Festival

Grid Design Basics on Opera Developers

The Golden Ratio in Web Design on Tutsplus

Golden Ration on Wikipedia

July 16 2011

10:00

The Elements of Design in Modern Web Design

The elements of design are pivotal in creating an eye-catching, harmonious design that speaks to your audience and shouldn’t be overlooked. They are the fundamental elements of design which can be called upon when you reach a tough part of the design process. Becoming familiar with these elements means you have the knowledge to make sound decisions in regards putting a design together.

Line

Perhaps the simplest element you can use is a line. A line is a form with width and length, but no depth. The type of lines you use can convey different feelings, moods and add strength to your ideas.

Each of the lines above conveys its own emotion. By varying thickness, curves and stroke width we can produce different feelings or ideas.

 

Lines for Organization

In regards to web design, lines are used abundantly to divide sections of content or to join sections that are related to each other. On websites and in magazines we see lines used to frame photographs, separate sidebars and join articles together.

The Grid

Consider using a grid to better position elements on a page. The grid itself is invisible on the final design, but sometimes grid lines are drawn to strengthen the effect of the grid. This can help maintain consistency throughout a website.

The website for Things that are Brown uses a 16-column grid as a foundation of their design.

  • Lines convey different emotions. Think about which type of line best suits your design: Thick, thin, wavy, dotted, dashed, hand-drawn.
  • Decide the purpose of the line. Is it to add two related parts together, or separate elements? Do you want to add a border around an image?
  • A grid can be used to organize information more effectively, as well as streamline the development process.

Unfinished Business School is an example of a site that uses a lot of curved and dashed lines to indicate movement and energy.

Form

Forms are three-dimensional objects within a design, like a sphere or cube. Forms are common in actual three-dimensional graphic design, of course, but are also seen in web and print design. Website designs that use 3D techniques are making use of forms. A form can be geometric, organic, natural, realistic, abstract and non-objective.

Ultimate Interactive Studio uses shadow to create form, giving the viewer the illusion that a line is elevated in space.

 

Gold Coast Web Design uses shadow to give the illusion of the page coming forward.

 

Shape

Shapes are two-dimensional. A shape is formed when a line encloses an area. Shapes can vary endlessly and can suggest physical form and direct eye movement. Simple shapes are remembered and understood more easily than complex shapes. Circles, squares, rectangles, triangles, and any other kind of polygon or abstract shape are shapes. Using shapes allow us to control or guide the viewer through the layout as we want.

  • Think about what is the most appropriate way for you to use a shape. Is it a photograph, illustration, block of color or a block of text? Remember, less is more, don’t drag you viewers eyes all over the place by using too many shapes.
  • Are the shapes you’re using leading the viewer’s eye to the right places?
  • Long blocks of text can often be broken up using shapes, lessening the strain on the viewers eyes.

Quen Estuda Faz uses shape throughout their site to clearly delineate information from the next.

Texture

Texture is a great way of establishing a mood for a design. Whether you use them subtly, or more pronounced, texture can establish a feeling or conjure up memories to the user. The most commonly seen textures, apart from flat or smooth, are things like paper, stone, concrete, brick, fabric, and natural elements.

We can give the impression of texture by using background images of various material, for example, stone, cardboard and scanned old paper or cloth are used frequently by web designers to bring a tactile element to their website.

  • Don’t use texture for the sake of it. Use it when it supports the message your communicating
  • Texture is not limited to backgrounds. Use images, either Photographs or Illustrations that show elements that are in complete contrast to each other. Use strongly contrasting type such as grungy, rough or distorted type with a smooth, elegant font.

The use of texture on the website for Havana Club adds a layer of authenticity to the design.

 

Prologue Advertising uses texture as a background element in their header.

Color

In addition to being one of the most obvious elements of a design, color has the ability to create strong emotional reactions. A user can consciously and subconsciously apply certain meanings or emotions to different colors.

Color Theory is another important aspect of design and one you should be familiar with. You should know the difference between:

  • shade (when black is added to a pure color),
  • tint (when white is added to a pure color) 
  • tone (when gray is added to a pure color).

Keep these pointers in mind when using color in your web designs:

  • If too many colors are used in a design, the viewer will become visually confused and will reject the image. Conversely, if not enough color is used, boredom results.
  • More harmonious effects can be achieved by using colors that are close together on the color wheel.

Color Scheme Designers
Color Theory For Designers

The website for Indofolio uses color generously on the bold, eye-catching site for the designer.

Value

How light or dark a particular element is can be referred to its value. Value can be used for emphasis. Variations in value are used to create a focal point for the design of a picture. A light element on a dark background will be immediately recognized as the center of attention, similarly for a dark element on a mostly white background.

  • Value can be described simply as the relative lightness or darkness of an object. Like contrast, value can add depth and dimension to your designs.
  • Value is used to describe objects, shapes, and space.
  • If you can’t tell the value of something just by looking at it, convert it to grayscale in Photoshop to get a better idea.

Web is Beautiful uses value to delineate hierarchy on their website.

 

Conclusion

As you can see, the elements Line, Shape, Form, Texture, Color, and Value can work to create memorable, carefully thought-out design. In many cases combining these elements in one design can create impactful design solutions that resonate with the viewer. In all cases, make sure you evaluate the use of each design element and whether or not it contributes to the overall message your trying to convey. The result will be more noticeable and striking than throwing all the  elements together in one design.


Additional Resources

Shape – Basic Elements of Design
The Elements of Design

June 13 2011

05:15

A Graphic Design Primer, Part 1: The Elements of a Design

Advertisement in A Graphic Design Primer, Part 1: The Elements of a Design
 in A Graphic Design Primer, Part 1: The Elements of a Design  in A Graphic Design Primer, Part 1: The Elements of a Design  in A Graphic Design Primer, Part 1: The Elements of a Design

There are many elements that make up any visual design, whether it’s good or not. Becoming familiar with the parts of a design is necessary before you can start to apply the principles of good design to your own work, in the same way that a doctor needs to have an understanding of anatomy before he can learn to heal a patient.

There are seven basic elements of any design. Some are easier to grasp than others, but all are important. Once you can identify the elements of a design, whether it’s your own or someone else’s, you can learn how the principles of good design are best applied.

Line

Lines are generally present throughout a design. They can be thick or thin, straight or curved, solid or dashed or dotted. Lines can be any color and any style. Straight lines are often used as delineations between sections of a design, or they may be used to direct a viewer’s vision in one direction or another.

The width of a line has a direct effect on its visual impact. Thick lines are bold and strong; they draw attention to themselves. Thin lines tend to do the opposite. Color also effects the impact of a line, with brighter and darker colors drawing more attention than lighter and paler colors. The style of a line also has an effect: dotted or dashed lines are less imposing than solid lines.

Curved lines often give a more dynamic or fluid look to a design. They indicate movement and energy. They’re also more common in designs with an organic nature, as they’re more likely to be seen in nature. Straight lines are more formal and structured, and indicative of “civilized” culture.

Examples

RePrint

RePrint uses a number of curved lines to direct the eye of the visitor.

Reprint in A Graphic Design Primer, Part 1: The Elements of a Design

VideoDSLR

VideoDSLR uses straight lines of varying widths to delineate content sections.

Videodslr in A Graphic Design Primer, Part 1: The Elements of a Design

Justdot

Justdot is another example of a site that uses a lot of curved and dashed lines to indicate movement and energy.

Justdot in A Graphic Design Primer, Part 1: The Elements of a Design

Form

Forms are three-dimensional objects within a design, like a sphere or cube. You can have forms that are actually three-dimensional in your designs (like with product packaging), or forms that are actually two-dimensional but are displayed in a way as to imply that they’re three-dimensional (like a line-drawing of a cube).

Forms are common in actual three-dimensional graphic design, of course, but are also seen in web and print design. Website designs that use 3D techniques are making use of forms. Another common place to see forms is in logo designs where a sphere or cube is present.

Examples

Print Mor NYC

Print Mor NYC uses a 3D effect behind their main content.

Printmornyc in A Graphic Design Primer, Part 1: The Elements of a Design

Arlo Vance

Another example of a 3D effect in website design.

Arlovance in A Graphic Design Primer, Part 1: The Elements of a Design

Shape

Shapes are two-dimensional. Circles, squares, rectangles, triangles, and any other kind of polygon or abstract shape are included. Most designs include a variety of shapes, though deliberate use of specific shapes can give a design a certain mood or feeling.

For example, circles are often associated with movement, and also with organic and natural things. Squares are more often seen with orderly, structured designs. The color, style, and texture of a shape can make a huge difference in how it is perceived.

Examples

Method Design Lab

Method Design Lab uses ovals and other rounded shapes throughout their design.

Methoddesignlab in A Graphic Design Primer, Part 1: The Elements of a Design

Passion About Design

Circles are used throughout the design.

Passionaboutdesign in A Graphic Design Primer, Part 1: The Elements of a Design

Cappen

The Cappen site uses triangles throughout their site.

Cappen in A Graphic Design Primer, Part 1: The Elements of a Design

Texture

Textures are an important part of just about any design. Even designs that, on the surface, don’t seem to use textures actually are (“smooth” and “flat” are textures, too). Textures can add to the feeling and mood of a design, or they can take away.

The most commonly seen textures, apart from flat or smooth, are things like paper, stone, concrete, brick, fabric, and natural elements. Textures can be subtle or pronounced, used liberally or sparingly, depending on the individual design. But texture is an important aspect of design, that can have a surprising effect on how a design comes across.

Examples

The Heads of State

The Heads of State site uses a few subtle textures.

Theheadsofstate in A Graphic Design Primer, Part 1: The Elements of a Design

Doublenaut

Doublenaut uses a more pronounced texture in their background.

Doublenaut in A Graphic Design Primer, Part 1: The Elements of a Design

Cuban Council

The Cuban Council website uses textures on virtually every element of their design.

Cubancouncil in A Graphic Design Primer, Part 1: The Elements of a Design

Color

Color is often the most obvious thing about a design. We’re taught colors from an early age, and even go so far as to identify some things with color descriptors (“my green jacket” or “my red shoes”). Color is also capable of creating strong reactions among people, who consciously and subconsciously apply certain meanings or emotions to different colors (this is also influenced by culture, as many colors mean different things in different cultures).

Color theory is an important aspect of design, and something designers should at least have casual knowledge of. You should know the difference between a shade (when black is added to a pure color), tint (when white is added to a pure color) and tone (when gray is added to a pure color). You should also know terms like chroma, value, and hue. But more importantly, you should know how all these things work together to create a mood or feel in a design.

For a more complete overview of color theory, check out our archived series, Color Theory for Designers.

Examples

Go Live Button

The very bright colors used on the Go Live Button website have a definite impact on the perception of the visitor.

Golivebutton in A Graphic Design Primer, Part 1: The Elements of a Design

Camp David

The more muted colors here give a completely different feeling than the site above.

Campdavidfilm in A Graphic Design Primer, Part 1: The Elements of a Design

Old Putney Row to the Pole

The Old Putney Row to the Pole site uses darker but still muted colors, which gives yet another impression.

Rowtothepole in A Graphic Design Primer, Part 1: The Elements of a Design

Value

Value is closely related to color, but it’s more general. It’s how light or dark a specific design is. Again, this relates directly to the mood a piece gives. Darker designs convey a different feeling than lighter designs, even with all other design elements being equal. This is one reason you’ll often see designers releasing both light and dark versions of their themes.

Not every piece has a clear-cut value. With very colorful pieces, you might not really be able to tell how high or low the value is. One trick is to convert the design to grayscale, to get a better sense of how light or dark it is. You can also look at the histogram of an image to get an idea of where the value is more heavily concentrated.

Examples

This After That

This After That is an example of a site with a relatively light value.

Thisafterthat in A Graphic Design Primer, Part 1: The Elements of a Design

The Lounge

The Lounge has a relatively dark value.

Thelounge in A Graphic Design Primer, Part 1: The Elements of a Design

Space

There are two kinds of space in design: positive space and negative space. Positive space is that which is occupied by design elements. Negative space (also called “white space”) is the area that’s left over. The relationship between positive and negative space has a strong influence on how the design is perceived. Lots of negative space can give a piece a light, open feeling. A lack of negative space can leave a design feeling cluttered and too busy, especially if the designer is careless.

Negative space can create its own shapes and forms, which impact the design. Understanding the effect of negative space and how to use it to your advantage in a design is one of the most important techniques a designer can learn, and can make the difference between a good design and a great design.

Examples

80/20 Studio

80/20 Studio has a lot of negative space in their design.

8020studio in A Graphic Design Primer, Part 1: The Elements of a Design

Dazed Digital

Dazed Digital, on the other hand, has very little white space in their design.

Dazeddigital in A Graphic Design Primer, Part 1: The Elements of a Design

Poster Roast

Another example of a site without a whole lot of negative space.

Posterroast in A Graphic Design Primer, Part 1: The Elements of a Design

Up Next…

In the next installment, I’ll be covering the principles that make up a good design, and how to apply them to the elements we covered here.

Further Resources

(rb)

March 19 2011

19:11

Styling Elements With Glyphs, Sprites and Pseudo-Elements

Advertisement in Styling Elements With Glyphs, Sprites and Pseudo-Elements
 in Styling Elements With Glyphs, Sprites and Pseudo-Elements  in Styling Elements With Glyphs, Sprites and Pseudo-Elements  in Styling Elements With Glyphs, Sprites and Pseudo-Elements

In 2002, Mark Newhouse published the article "Taming Lists", a very interesting piece in which he explained how to create custom list markers using pseudo-elements. Almost a decade later, Nicolas Gallagher came up with the technique pseudo background-crop which uses pseudo-elements with a sprite.

Today, on the shoulders of giants, we’ll try to push the envelope. We’ll discuss how you can style elements with no extra markup and using a bidi-friendly high-contrast proof CSS sprite technique. The technique will work in Internet Explorer 6/7 as well.

Figure-1 in Styling Elements With Glyphs, Sprites and Pseudo-Elements

Starting with special characters

There is a pletora of glyphs out there that we could use instead of images to create custom markers. This should improve:

  • performance (there is no HTTP request)
  • usability (these characters will grow or shrink according to user’s settings)
  • maintenance (no sprite to create, no asset to deal with)
  • accessibility (see further below).

Example:

The markers (♠, ♣, ♥, ♦) in the list above are created via the following rules:

HTML:

<ul class="glyphs">
	<li class="one">performance</li>
	<li class="two">usability</li>
	<li class="three red">maintenance </li>
	<li class="four red">accessibility</li>
</ul>

CSS:

.glyphs {
  list-style-type: none;
}

.glyphs li:before,
.glyphs b {
  display: inline-block;
  width: 1.5em;
  font-size: 1.5em;
  text-align: center;
}

.one,

.one:before {
  content: "\2660"; /* ♠ */
  background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '&spades;'+this.innerHTML);
}

.two,
.two:before {
  content: "\2663"; /* ♣ */
  background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '&clubs;'+this.innerHTML);
}

.three,
.three:before {
  content: "\2665"; /* ♥ */
  background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '&hearts;'+this.innerHTML);
}

.four,
.four:before {
  content: "\2666"; /* ♦ */
  background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '&diams;'+this.innerHTML);
}

.red b,
.red:before {
  color: red;
}

How does this work?

  • The value of the content property must be an escaped reference to the hexadecimal Unicode character value (for IE, we use HTML entities).
  • Internet Explorer 6/7 do not support ::before nor :before, so the characters are plugged via CSS expressions.
  • IE8 does not support ::before, but does support the single colon notation
  • Please notice that putting aside browser support, “there’s no difference between :before and ::before, or between :after and ::after. The single colon syntax (e.g. :before or :first-child) is the syntax used for both pseudo-classes and pseudo-selectors in all versions of CSS prior to CSS3. With the introduction of CSS3, in order to make a differentiation between pseudo-classes and pseudo-elements, in CSS3 all pseudo-elements must use the double-colon syntax, and all pseudo-classes must use the single-colon syntax.”
  • In IE, characters are wrapped in <b> elements, so we have a means to target and style them (you may rather want to rely on a class name for that).

Note that the CSS expressions we use here are not as bad as the ones generally used to mimic min-width and the like. These are only evaluated once, which should result in a small performance hit.

Displaying Images Via Pseudo-Elements

The main advantage of using a pseudo-element for the sole purpose of displaying an image is that it allows designers to crop a sprite. Actually, this is nothing new, and many websites are already using extra (aka "junk") markup to achieve this. For example, Yahoo! Search uses empty <s> and Facebook uses empty <i> tags for this purpose. Going this route allows for the creation of compact CSS sprites, without empty space between the images within the sprite.

The two examples below do not use extra markup and they both share the same sprite:

Sprite in Styling Elements With Glyphs, Sprites and Pseudo-Elements

The two images below — which are the second icon in the sprite — are generated using each technique, respectively.

Nicolas Gallagher’s method

Styling the pseudo-element with a background image:
#first:before {
    content: "";
    float: left;
    width: 15px;
    height: 15px;
    margin: 4px 5px 0 0;
    background: url(sprite.png) -15px 0;
}

The new url() / clip method

Using the content property to insert the sprite which is then cropped with clip:
#second {
  position: relative;
  padding-left: 20px;
  background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '<img alt="" src="sprite.png">'+this.innerHTML);
}

#second:before,
#second img {
  content: url(sprite.png);
  position: absolute;
  top: 3px;
  clip: rect(0 30px 15px 15px);
  left: -15px; /* to offset the clip value */
  _left: -35px; /* some massaging for IE 6 */
}

In case you wonder why I use position: absolute in the above rule, it is because the clip property only applies to absolutely positioned elements.

The New Technique: How Does It Work?

  • Instead of styling the pseudo-element with a background, we use it to insert an image (via content).
  • Using the clip property, we crop this image to only display the part we want to show. It means that there is no need to add empty space in the image to avoid other parts to show as well (usually used as background image of larger elements).
  • We offset clip values by using the left and/or top properties.

With a non-cropping technique, images in sprites would have to start from the right hand side or left hand side to accommodate RTL/LTR contexts (background-position: [left]|[right] [vertical value]). Another limitation is creating sprites with images showing next to each other (because other images could be displayed as well). But when cropping sprites, these issues are not in play, so all images can be tucked together.

For an example, see figure below:

Figure-2 in Styling Elements With Glyphs, Sprites and Pseudo-Elements

Advantages of this method over existing techniques

Styled to print
Unlike background images, these images are printed with the document (they are sent to the printer).

Styled to be accessible
Unlike background images, these images will not disappear in MS Windows’ high contrast mode or with high-contrast styles sheets.

Styled to work in IE lt 8
This method works in Internet Explorer 6 and 7 as well.

Note that data URI scheme could be used to avoid the HTTP request. IE6/7 do not support data URI scheme, but we can use MHTML for IE6/7 to make IE7 and older browsers understand it as well.

Styling links with pseudo-elements

Nicolas Gallager shows plenty of cool stuff one can do with pseudo-elements. The only thing I’d add here is the use of ::after to style links à la "read more" and the like, for example:

Read more

CSS:

.more,
.more:after {
  white-space: nowrap;
  content: " \00BB"; /* » */
  background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = this.innerHTML+' &raquo;');
}

A word about accessibility

You should assume that generated content is read by screen-readers, and since there is no mechanism to offer alternative text for images plugged via the content property, we should make sure those images are purely decorative because screen-reader users would not have access to that information.

Further reading

You might want to take a look at the following related resources:

Credits: Icons by FatCow Web Hosting [CC-BY-3.0-us], via Wikimedia Commons


© Thierry Koblentz for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: CSS, elements, lists, pseudo, sprites

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl