CSS and JavaScript are extremely powerful tools for designers and developers. However, sometimes it’s difficult to come up with the one excellent idea that would solve a problem that you are facing right now. Good news: almost every day designers and developers come up with fresh and clever CSS tricks and techniques and share them with other developers online. We regularly collect all these tricks, filter them, sort them, revise them and prepare them for Smashing Magazine readers.
In this post we present 45 useful CSS/JavaScript-techniques that may help you find clever solutions to some of your problems or just get inspired by what is possible with CSS. We cover interesting CSS-techniques, navigation menus, CSS typography, CSS lists and CSS buttons. The focus of this post lies on CSS; please notice that some of the techniques use JavaScript or PHP for enhanced functionality.
Please notice that this is the first part of our large round-up of fresh CSS/JavaScript-techniques. Other techniques (CSS tables, CSS layouts, CSS for Mobile and CSS forms) will be featured in an upcoming article. So don’t forget to subscribe to our RSS-feed and follow us on Twitter for similar articles and a stream of useful resources. Please also let us know what we should change or improve in our future posts!
We are aware that many readers are tired of “lists” floating around in the Web, but we are confident that the vast majority of our visitors will benefit from this post format and will find at least some of the techniques featured in this post useful.
By the way, did you know that Smashing Magazine has one of the most influential and popular Twitter accounts? Join our discussions and get updates about useful tools and resources — follow us on Twitter.
Interesting CSS Techniques
Building the New Visual Annotations
These note overlays are composed of two main elements, an overlay with the shine and a border with the transparency. A very interesting, yet simple technique by the ZURB Design Agency, designers who have written a series of articles on Smashing Magazine as well.
Sexy Music Album Overlays
This aticle shows how to style your music streams and provides you some graphics to do so.
A Colorful Clock With CSS & jQuery
This tutorial describes how one can create a clock using basic CSS and JavaScript.
How To Create Depth And Nice 3D Ribbons Only Using CSS3
We will use box-shadow to create a drop-shadow with RGBa, a color model that allows an optimized contrast with any kind of backgrounds. RGBa is the standard RGB model (0,0,0 – 255,255,255) and it adds the last option (a) for the opacity. We can use this model also for other properties and it works with the new browser.
Advanced Event Timeline With PHP, CSS & jQuery
This Advanced Event Timeline is used with the help of PHP, MySQL, CSS and jQuery. The result: a nice time line with clickable events. Adding new ones is going to be as easy as inserting a row in the database.
CSS Navigation Menus
CSS 3D Meninas
“I’ve took the classic paint The Maids of Honour (Las Meninas) and created a CSS pseudo-3D / Parallax effect. It is pure CSS, no JavaScript or Flash is involved. It has been tested and is working on Internet Explorer 8, Firefox 3, Opera 9, Safari 3, Chrome 4 and Konqueror 3.5, and it validates, too.
Sproing! – Make An Elastic Thumbnail Menu
“In an ongoing attempt to offer alternative methods to spruce up menus, I’ve pieced together an elastic thumbnail menu. It magnifies menu items when they are hovered over and menu items expand upwards.
How to Create Simple and Effective Sub Navs with Definition Lists
“When we need simple and effective on-page navigation, to either jump to content on the page or flip to another view, we use the dl element. Its sub elements, the dt and dd, make it very easy for us to create inline links with a clear label. Here we’re going to share with you a fast, lightweight method for how we’ll use CSS to do it.”
Sticky SideNav Layout with CSS
Learn how to create a fixed sidenav layout for your blog or website. Having a fixed sidenav comes in handy when dealing with blog style websites where the content is extremely tall and there is a need for good amount of scrolling. The fixed navigation allows the user to cruise through the content without scrolling back up to the top to navigate through the rest of the site.
Unobtrusive Dropdown Page Changer
Using a <select> dropdown menu to create navigation isn’t as common as it once was, but it’s still around. It got ripped on pretty good for being an inaccessible / obtrusive. Indeed a lot of the scripts you’ll find out there for creating a menu like this are this way. Bummer. Let’s make one that works with or without JavaScript.
CSS Navigation: No JavaScript, jQuery or Image Required, Free CSS Navigation / Pagination with Tooltip
CSS-based navigation / pagination bar without JavaScript. There is a tooltip on hover for the ‘previous’ and ‘next’ page’s bullets that makes navigation easier.
How to Code an Overlapping Tabbed Main Menu
Main navigation menu is that part of a website design that makes the whole site look lively and complete. But the most common type of navigation menu style still being used a lot is the tabbed navigation menu. Here is a tutorial on how to code an overlapping tabbed menu.
Solution For Very Long Dropdown Menus
“I like to be confident with post titles, but the reality in this case is a possible solution for very long dropdowns. The problem with long dropdowns is that the dropdown itself can go below the “fold” of the website. That is, below the visible area of the browser window. So in order to access those menu items down below, you need to scroll your browser window. For those of us with scroll wheels of some kind on our mice (mouses?), it’s not a big deal. For those without, those lower menu items are totally inaccessible, because to use the browser scrollbar means mousing off the menu (and probably having it close).”
Mega Drop Down Menu w/ CSS & jQuery
When used properly, mega drop down menus can be quite efficient for large scale websites. Let’s experiment with different ways of implementing this technique. A tutorial by Soh Tanaka, Smashing Magazine’s regular author.
CSS Typography and Body Copy
How to Create a Cool Anaglyphic Text Effect with CSS
Anaglyphs are those amazing 3D images that are created by offsetting two of the red, green and blue channels, and are viewed with those nerdy looking 3D glasses with different coloured lenses. I don’t know if this effect works for real, as I’ve unfortunately misplaced my 3D specs, but it’s a pretty cool text effect nevertheless! Let’s take a look at how a similar style can be created for sprucing up your web designs, while taking into consideration semantics and avoiding the repetition of any markup.
Typographic work planner
Enter this, a little HTML/CSS typographic work planner. By using some super-semantic HTML and a dash of CSS you can craft a beautiful looking yet incredibly simple work planner for you and your staff.
Thinning Text in Webkit (Safari)
Safari has a not-so-lovely way of bulking up text using sub-pixel rendering. On previous versions of Safari, this was fixed with a text-shadow declaration, but since Snow Leopard that method no longer works. Fortunately, there is an alternative.
Pseudo Drop Caps
They’ve been around for a while now, appearing in magazines, print and now the web. Designers and developers alike have experimented with multiple workarounds from using inline styles to using image replacement but with both of these solutions there are problems. For example, what happens when you recreate your site and decide that you no longer want to upload the drop cap images, you’re now going to left with a broken image at the start of every single post that you had previously created, this is obviously assuming you haven’t used text-indent. If you decided to go down on the inline style route then your are just bad, just very bad.
How to Create Perfect Pre Tags
If you operate a website that features lots of code examples, you know how important it is to spend some quality time styling the &tl;pre> element. When left unstyled, wild <pre> tags will mangle your preformatted content and destroy your site’s layout. Different browsers treat the <pre> tag quite differently, varying greatly in their default handling of font-sizing, scrollbar-rendering, and word-wrapping. Indeed, getting your preformatted code to look consistent, usable, and stylish across browsers is no easy task, but it certainly can be done. This article explains everything you need to create proper <pre> tags.
Improve your web typography with baseline shift
The baseline is an invisible line onto which all type characters sit, although of course some characters (including ‘j’, ‘p’, ‘g’ and ‘y’) have descenders that hang below the baseline. Baseline shift involves moving characters up or down in relation to the baseline and using it effectively can make a huge difference to the professional look of your type. Although baseline shift has traditionally been a part of using tools like InDesign or Quark, there are ways to accomplish the same results using CSS.
Typograph – Scale & Rhythm
This page is both an essay and a tool. It sets out to explore how two, intertwined concepts, often playful but sometimes cheeky, can be encouraged to dance in web pages. Drag the colored boxes along the scale to throw these words anew. For the most part, this text is just a libretto for the performance you are about to play upon it.
Fancy Quotes With jQuery, AJAX & CSS
Learn how to create a fancy quote rating system that will display a number of famous quotes and will enable site visitors to rate their favorites.
How To Create Simple, Stylish and Swappable Image Captions
Most image caption solutions require a lot of excessive HTML, make it difficult to redesign or don’t communicate clearly that they belong to an image. Let’s see what we can do to address these problems.
Styling photo captions with CSS
Sure, some photos are self-explanatory, but most photos are best served with text captions. It’s true for traditional media like newspapers and magazines, and just as true for blog posts and web articles. Here’s a quick tip on using photo captions and styling them nicely with the magic of CSS.
Image captions on Web pages
This document suggests three ways of presenting an image with a caption in HTML. Styling in CSS is also discussed.
Styling Post Headings That Stick Out
“Recently, I’ve noticed a trend in blog post headings where it sticks out of its base layout. I would like to share this technique for those who would like to give their post headings a new style. One tip to keep in mind when designing this is to make sure it fits your target audience screen resolution size. Note that this technique may vary depending on your design. My goal is for you to grasp the main concept in this tutorial so you can experiment and apply it to your own projects.”
Using ellipsis with HTML and CSS
If the text is too wide to fit into a container, a nice solution can be to have ellipsis to show there’s more information available. While not currently part of the official HTML specifications, it is possible to have ellipsis defined in CSS and it works for Internet Explorer, Safari, Chrome and Opera. It doesn’t work for Firefox but there’s a workaround that can be done with jQuery.
5 Message Boxes to Style your Notifications with CSS
This article presents free notification boxes to use/customize as well as a very simple technique to create your own ones inspired from this roundup.
CSS Lists
Create a Microsoft Word-Style Outline with CSS
As you can see, the browser doesn’t bother to vary the indentation style much, or change the list type from roman numerals to alphabetical characters and so on… all the things we’re so used to seeing because Microsoft Word and other writing programs do them by default. So let’s use a bit of CSS ingenuity to make a Microsoft Word-styled outline using ordered lists!
Pure CSS Timeline
“I wanted to build a CSS timeline for the “About” section of my site while using some clean and simple markup. I wanted to avoid using images as much as possible, so I spent a few minutes prototyping some options and came up with a solution using unordered lists. The result is a simple and clean looking timeline with some very straight forward markup. In this article I’ll share my approach to creating a timeline out of CSS and HTML which results in a nice looking, simple timeline.”
Automatic numbering with CSS Counters
When writing documents, it is often useful to number sections and have a table of contents. You can number these by hand, directly in the markup, but this can be time consuming if the order changes and you have to edit all the numbers. CSS2.1 gives us a automated way to generate numbers using CSS counters, and this article will walk you through how to use them. One word of note before we start is that CSS counters are not yet implemented in IE, although they are on the roadmap for IE8.
CSS tricks for custom bullets
Elastic Calendar Styling with CSS
A traditional calendar is a grid of numbered boxes on a page. As a web designer, you might go right for a table, and I wouldn’t fault you for that. Tables, though, can sometimes be tough to muscle into shape. The CSS purist in me gets pissed when I set the width of a table (or a cell) and it decides it knows better and grows or shrinks as it sees fit.
You can tackle calendar styling with pure CSS, and I feel it makes just as much sense semantically as a table does. What is a calender, if not an ordered list of days? By using CSS, we can even do some cool things like do all our sizing with ems so our calendar layout will be elastic. That is, grow in both width and height when text is resized in browsers, while greatly increasing accessibility.
Style a List with One Pixel
A one-pixel background image can be a pretty versatile thing. With repeat-x it can be a horizontal line, repeat-y makes a vertical line, and repeat makes it a fill color. Just as a little fun proof of concept, we can use that to create a depth-chart looking unordered list.
Style Your Ordered List
By default, most browsers display the ordered list numbers same font style as the body text. Here is a quick CSS tutorial on how you can use the ordered list (ol) and paragraph (p) element to design a stylish numbered list.
Simulating a Table Using an Unordered List
Your first question immediately might be, “why would I want to simulate a table with a list, why not just use a table?” With the raise in popularity of AJAX sortable list elements, using list items to represent a multiple column data table can allow for easy sorting of various more “tabley” information. So let’s get started.
8 different ways to beautifully style your HTML lists with CSS
“The use of HTML lists (<ol> for an ordered list, <ul> for an unordered list) is very common these days. Today, we’re going to look a little bit further than creating regular lists, by showing 8 different ways to beautifully style your HTML lists with CSS. We’ll use some pure CSS techniques to make a bored list look awesome (and even have some extra functionality).”
Quick Tip – Simplify List Margins with CSS
Have you ever set default margins for a layout, and then had to go back and manually adjust all of your lists? By default, list item markers have a negative positioning in relationship to the list item itself. This means that zero-ing out margins automatically leads to an overflow if the list is contained inside anything else. Wouldn’t it be easier to put the list item marker at the same starting point as other elements instead? Lucky for us, there’s a style to help do just that. Let’s see what can be done with the list-style-position property.
Sexy HTML List Tricks
Behold the ubiquitous list elements, <ul> and <ol>. These two sexy elements help millions of websites display lists of information in clean, semantic fashion. Without them, we’d be crawling around like filthy cavemen, eating dirt and howling at the moon. But these list elements aren’t just sexy, they are also extremely flexible, enabling us humble designers to create robust list configurations that are semantically versatile and highly customizable.
Clickable <li>
I originally coded the markup to be a table, but discovered a problem when I tried to make the whole row clickable. I ended up with a list of articles instead.
CSS Buttons
Simply-Buttons v2
This technique presents buttons of the size that always fits the content. There are 3 states: inactive, active and hover. The technique works in all major browsers and doesn’t require JavaScript.
How to make sexy buttons with CSS
This tutorial will teach you how to create pretty looking textual buttons (with alternate pressed state) using CSS. Dynamic buttons save you heaps of time otherwise spent creating graphics and will basically make you a happier person at the end of the day.
Liquid & Color Adjustable CSS Buttons
When working on a large site with multiple buttons, it can be quite tedious to make all the buttons in Photoshop. Making future adjustments on the verbiage and colors can be also be time consuming. By having dynamic buttons, this scenario is much easier to handle, and by having liquid and color adjustable buttons with CSS, we are able to change the verbiage and colors in a flash.
Create a Button with Hover and Active States using CSS Sprites
Too many designers neglect the click state (active-property in CSS) in web design, either because they’re unaware of it, underestimate the importance of it or are plain lazy. It’s a simple effect that improves usability by giving the user some feedback as to what they’ve clicked on but can also add depth to a design.
Recreating the button
“I thought it would be interesting to provide a portion of the background on buttons here, and discuss some of the iterations we’ve been through so far to get to the current state.”
Rounded form buttons
Google’s Imageless Buttons
An interesting discussion about various buttons design techniques to reconstruct Google’s imageless buttons.
Stay tuned!
This is the first part of our large round-up of fresh CSS/JavaScript-techniques. Don’t forget to subscribe to our RSS-feed and follow us on Twitter for similar articles and a stream of useful resources. Please also let us know what we should change or improve in our future posts!
Would you like to see more similar round-ups on Smashing Magazine in the future?(answers)
© Smashing Editorial for Smashing Magazine, 2010. | Permalink | 64 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: CSS, javascript, js
We’re all mostly accustomed to educating ourselves by reading articles. Rare are the opportunities to attend conferences or watch live shows on subjects that we’re interested in. That’s why we are presenting here phenomenal videos and related resources on the topic of user experience (UX) by different presenters at different events. We have focused on current content but have included some older videos that are still relevant. It will take you more than 16 hours to watch all of these videos. So, make some popcorn, turn off the lights and enjoy.
User Experience Videos
The State of User Experience
Jesse James Garett, founder of Adaptive Path and author of the book The Elements of User Experience, speaks on what UX and UX design is, what UX looked like before and what are some of the challenges people are encountering now. He cites engagement as the main goal of UX design and, through some fantastic examples, shows that engagement is an universal quality achieved through visuality, sound, touch, smell, taste, body and mind. One of the most impressive moments from the session is when Jesse compares Beethoven to an experience designer, accompanied by the Ninth Symphony. Duration: 40 minutes.
UX Best Practices
In this excellent video session, Nick Finck pries open the most popular websites today, including eBay, Amazon, Toyota, Flickr, Twitter and Netflix, to explain user experience best practices. Nick discusses both the good and bad experiences on these websites on the basis of visual design, information architecture, interaction and ease of use. For those unfamiliar with UX, Nick explains the basic concept and contributing factors. The last 20 minutes of the session are reserved for Q&A, and some very interesting questions and great answers come up. Duration: 1 hour 32 minutes. There is no video of the session, only 75 slides with an audtio track.
The Three Ways That Good Design Makes You Happy
In this short but fantastic lecture, Don Norman, known to many as the author of The Design of Everyday Things, explains visual, behavioral and reflective design and the ways in which each of them affects people. In his witty way, Done shows examples from everyday life. Duration: 13 minutes.
5 Minutes on Imitation in Design
In this brilliant short talk, Jeffrey Veen explains what is meant by “Good artists copy, great artist steal.” By way of an interesting short story about World War II and the American army’s contact with natives of the Pacific Islands, he also explains “cargo cult” and how it still present today. A truly brilliant video. Duration: 6 minutes.
UX Team of One
In this half-hour session held at the IA Summit 2008, Leah Buley of Adaptive Path shows what it means to be a UX team of one by telling her own story and recounting a real-life example. Leah explains the concept of generative design, which is the process of creating and sketching a lot of different ideas and then refining them. The slides are amazing because Leah drew them by hand. Duration: 32 minutes.
Experience Is the Product
Peter Merholz explains why it is important to focus not on technology or features but on the product and the experience you want to create. The session is rich in good and bad examples drawn from real life. Duration: 43 minutes.
Behavior Is Our Medium
In this fantastic session, Robert Fabricant talks about interaction design beyond computing technology. His examples include the family tree and one particularly interesting tree that his daughters drew. His examples from history, especially ancient history, are amazing and put interaction design in a broader context beyond the computer interfaces we’re so used to. Duration: 61 minutes.
Web Form Design
If you think Web forms suck (because you have to fill them in every day), then you must see this video. This talk by Luke Wroblewsky at MIX 09 is based on years of experience in usability testing and study. Luke shows examples from the real world and addresses the major problems with Web form design today. You will see how some of the biggest websites have failed and what you can do to prevent such failures in your Web forms. Duration: 75 minutes.
User Experience Design for Non-Designers
In this short mini-breakout session, Shawn Konopinsky explains what UX design is at a very abstract level. He shows three different types of user interfaces and how UX design applies to all three. He explains basic concepts such as concept ideation, interaction design and visual design and emphasizes the importance of an “Agile” approach to projects. Duration: 18 minutes.
The Importance of Identity and Vision to UX Designers on Agile Projects
If you watched the previous video, you will know why the Agile approach is important in UX design. This video and the slides go deeper into the Agile approach, relying on research done at London university. Johanna Kollmann explains the research and the results. Duration: 32 minutes.
Learning IxD from Everyday Objects
“Inspiration surrounds us in everyday objects.” This is how Bill DeRouchey begins this brilliant talk about interaction design. We use icons, words or shapes to create a language of interactions. If we use the wrong language, the interaction becomes confusing, and this is what Bill shows, using many common objects and devices. One of the most interesting slides is the one that shows how users “hack the interface.” Duration: 45 minutes.
Two videos: Information and Architecture
In these two short videos, Mickey McManus explains related concepts: information and architecture, using everyday objects, such as cup of tea, to illustrate his argument. The videos are part of a short article in which Mickey draws these concepts together to explain what information architecture is. Duration: a few minutes.
Wireframes for the Wicked
Nick Finck, along with Michael Angels and Donna Spencer, goes over wireframing basics via short easy questions. What are wireframes? Why use wireframes? What does the process of wireframing look like? The three of them also explain the different types of wireframes and show examples of their work. Duration: 1 hour 5 minutes.
Design Prototyping: Bringing Wireframes to Life
Dan Harrelson explains the purpose of prototyping, why it is important and how it differs from wireframes and visual comps. With wireframing, instead of seeing how a concept functions or works, we see how it actually feels, which contributes to better usability testing. The video, like all videos from MIX 09, has “double view”: while looking at the large slides, you have a synchronized inset video of the speaker. Duration: 60 minutes.
Journey to the Center of Design
Does user-centric design really exist? In this funny keynote, Jared Spool asks whether user-centric design (UCD) has lost its way and needs to evolve into something else. Ironically, as studies have shown, many great projects have succeeded without UCD. Jared suggests three key attributes of great experience design that can replace UCD. Duration: 1 hour 14 minutes.
User-Centered Design 101
In this Web seminar, Frank Spiller demystifies the paradigm of UCD. He explains the difference between usability and UCD, which has confused many. From the perspective of the development process, he compares UCD to the Agile and Waterfall processes. At the end, he shows some UCD success stories. Duration: 58 minutes.
The Mint.com Experience
Aaron Forth of Mint.com speaks of the importance of aligning your user experience and business objectives. He goes over the challenges of delivering such a user experience at Mint, what the company did to attract brand interest and how Mint became one of the best personal-finance software tools today. Interesting fact: Mint discontinued IE6 support because it spent almost 20% of its time designing for the browser. Duration: 40 minutes.
Mobile User Experiences
Rachel Hinman start her talk about mobile user experiences with a provocative thought: that technology disengages us from real life. She says we should rethink our relationship to devices and use them in the context of concrete tasks. Duration: 24 minutes.
Tap Is the New Click
“Several years ago, Minority Report was a sci-fi movie, and now we’re already there with [the touch wall].” At the beginning of his session, Dan Saffer shows a couple of examples of touch-screen technology that marks the beginning of a new era of interaction in which gesture and touch replace mouse clicks. He explains how to design for these technologies by going over how touch-screens differ from traditional websites and devices. Duration: 67 minutes.
10/GUI
This is a fantastic experiment that examines current mouse-driven user interfaces and their limitation while offering a completely new way of interaction. Although keyboard and mouse were really great innovations in past century, Clayton Miller think we shouldn’t stop there but rather innovate further. Duration: 8 minutes.
The Least You Can Do About Usability
Steve Krug, known to many as the author of Don’t Make Me Think, here tries to convince people to do their own usability testing. Confirming Jacob Nielsen’s advice, that developers can do it themselves, Steve identifies the minimum requirements to make usability testing meaningful. At the end of the session, Steve performs a short usability test right in front of the audience, which makes this session truly outstanding. Duration: 60 minutes.
AJAX Usability
Kelly Norton talks about a very interesting, and often forgotten, subject: AJAX usability. He covers usability basics and how to design AJAX applications for humans. Full of real-life examples, he offers several concrete suggestions on how to improve usability in AJAX applications. Duration: 55 minutes.
Jason Fried of 37signals Speaking at Business of Software 2008
In this short amazing session, Jason Fried shares his thoughts and experiences from 37Signals. Ideas are agile, some even radical. This video is interesting because many of Jason’s thoughts contrast with widespread opinion. In the second half of the session, Jason uses audience questions to explain his ideas in more detail. Duration: 55 minutes.
Bonus videos
Sketching User Experiences
In this keynote from MIX09, the first 25 minutes are taken up by Bill Buxton, known to many as the author of the book Sketching User Experiences. In an optimistic talk, he explains why now, in these days of crisis, is a good time to pay attention to design and what key factors are required to revitalize the user experience. Duration: 25 minutes.
Interview With Don Norman on UX Week 2008
In a relaxed atmosphere at UX Week 2008, Don Norman answers interesting questions and share his thoughts on various aspects of design. One of the best bits comes at the beginning, when Don speaks of his “crusade” to replace the word “users” with “people.” Will we ever have “People Experience”? Do we already have it? Find the answer in this fantastic interview. Duration: 53 minutes.
(al)
© Janko Jovanovic for Smashing Magazine, 2010. | Permalink | 40 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: usability, user experience, ux
By day, the Airstash is a common, ordinary USB card reader. But by night, it dons the mantle of wireless connectivity, taking to the streets and sharing pictures an images in an ad-hoc, daredevil manner.
