View demo Download source

Today we’ll experiment some more with the adjacent and general sibling combinator and the :checked pseudo-class. Using hidden inputs and labels, we will create an accordion that will animate the content areas on opening and closing.

There are many variations of CSS-only accordions around, most of which are implemented using the :target pseudo-class. The problem with using :target is that we can’t really close the content areas again or have multiple sections open at the same time. By using hidden checkboxes, we can control the opening and closing. Alternatively, we can also use radio buttons if only one section should be open at a time.

So, let start!

Please note: the result of this tutorial will only work as intended in browsers that support the CSS3 properties in use.

The Markup

We will be going through an example that uses checkboxes where one content section is open by default (the input needs to be ‘checked’). Everything will be wrapped in a container with the class ac-container. For each item, we will have a checkbox, a label and an article which is the content section of that item:

<section class="ac-container">
	<div>
		<input id="ac-1" name="accordion-1" type="checkbox" />
		<label for="ac-1">About us</label>
		<article class="ac-small">
			<p>Some content... </p>
		</article>
	</div>
	<div>
		<input id="ac-2" name="accordion-1" type="checkbox" checked />
		<label for="ac-2">How we work</label>
		<article class="ac-medium">
			<p>Some content... </p>
		</article>
	</div>
	<div><!--...--></div>
</section>

Note that we need to give each input an ID which we will then use in the for attribute of the label. We need this in order to check the checkbox when clicking on the label.

Each article will have a class that will help us determine to which height we it to expand to. (Optimally, we could use ‘auto’ as the expanded height value, but unfortunately it will not animate like that.)

Let’s have a look at the style.

The CSS

I will omit all the vendor prefixes, but you will, of course, find them in the files.

Let’s define a width for the accordion and center it:

.ac-container{
	width: 400px;
	margin: 10px auto 30px auto;
}

Next, we’ll make the labels appear as clickable buttons by giving them some slick background gradient. With multiple box shadows, we’ll create a subtle border and an inset effect. We’ll also set the z-index to 20, to make sure it will be on top of the content section:

.ac-container label{
	font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
	padding: 5px 20px;
	position: relative;
	z-index: 20;
	display: block;
	height: 30px;
	cursor: pointer;
	color: #777;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
	line-height: 33px;
	font-size: 19px;
	background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	box-shadow:
		0px 0px 0px 1px rgba(155,155,155,0.3),
		1px 0px 0px 0px rgba(255,255,255,0.9) inset,
		0px 2px 2px rgba(0,0,0,0.1);
}

On hover, we’ll make the label white:

.ac-container label:hover{
	background: #fff;
}

When we click on a label, the checkbox get’s checked and when that happens we want the respective label to have the following “selected” style:

.ac-container input:checked + label,
.ac-container input:checked + label:hover{
	background: #c6e1ec;
	color: #3d7489;
	text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
	box-shadow:
		0px 0px 0px 1px rgba(155,155,155,0.3),
		0px 2px 2px rgba(0,0,0,0.1);
}

As you can see, we are using the adjacent sibling combinator to select the label since it is directly preceded by the checkbox input.

Let’s add a little arrow icon on hover. For that we’ll simply use the pseudo-class “after” so that we don’t add unecessary markup:

.ac-container label:hover:after,
.ac-container input:checked + label:hover:after{
	content: '';
	position: absolute;
	width: 24px;
	height: 24px;
	right: 13px;
	top: 7px;
	background: transparent url(../images/arrow_down.png) no-repeat center center;
}

For the “selected” item, we want to show the up-pointing arrow:

.ac-container input:checked + label:hover:after{
	background-image: url(../images/arrow_up.png);
}

And since we don’t want the inputs to show, we’ll hide them:

.ac-container input{
	display: none;
}

The content area will have an initial height of 0px and any overflow will be hidden. We’ll add a transition for the height and for the box shadow. The transition that we are adding here will act upon “closing” the item. We define another transition for the selected item. So, we can basically control the two behaviors by doing this. As you can see, we will make the closing a bit faster than the opening.

.ac-container article{
	background: rgba(255, 255, 255, 0.5);
	margin-top: -1px;
	overflow: hidden;
	height: 0px;
	position: relative;
	z-index: 10;
	transition:
		height 0.3s ease-in-out,
		box-shadow 0.6s linear;
}
.ac-container input:checked ~ article{
	transition:
		height 0.5s ease-in-out,
		box-shadow 0.1s linear;
	box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}

Let’s style the content a bit:

.ac-container article p{
	font-style: italic;
	color: #777;
	line-height: 23px;
	font-size: 14px;
	padding: 20px;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}

Now we define the three classes for the different heights. These are the heights that an item’s content will animate to:

.ac-container input:checked ~ article.ac-small{
	height: 140px;
}
.ac-container input:checked ~ article.ac-medium{
	height: 180px;
}
.ac-container input:checked ~ article.ac-large{
	height: 230px;
}

As already mentioned, “auto” height would of course be the best option here, but since we can’t animate to that, we need to set some heights for the transition.

Please note that in some mobile browsers, clicking on a label might not trigger the checking or focusing of the associated input.

Demos

1. Demo 1: Using Checkboxes
2. Demo 2: Using Radio Buttons
3. Demo 3: Using Checkboxes (default open)

And that’s it! I hope you enjoyed this tutorial and find it useful!

View demo Download source

Almost any website or design project will include the use of type. From a few words to a page filled with text the font choices you make in the early planning phases will carry through the project. Fonts can help create and establish a mood and set the tone for how your work is received.

Do you want a modern look and feel? Or is the desired effect more classical? Is text being used primarily as art or in logo design or does it need to meet readability standards? All of these are questions you should answer before selecting typefaces for a project.

Keep in mind that each typeface on its own can say almost as much about the project as actual words on the page (or screen). Carefully evaluate typefaces so that each represents projects in the proper way.

Project Goals

The first step with any design project is to determine what you expect as a final outcome. Think about how type will be used. You would not use the same font on a wedding invitation as for a wanted poster, right?

Stick to simple typefaces that are highly readable for projects with large blocks of text. In web design the trend is to use a sans serif body font – think Arial, Tahoma and Verdana. Using a simple choice will take the emphasis off the look of the text so that it is easy to read, such as the simple sans serif font used on this website. Look for a font with average width strokes and lines – stay away from super thin or thick letter forms – to ensure readability.

Consider the impact of type on images as well. If the image is driving the design, keep type simple so the image stands out. Caravan Restaurant & Bar does this with a striking image of its interior on the landing page while using simple type to direct you to other parts of the website.

More engaging font choices often work best when used sparingly and when they can stand on their own. Use a funkier font for items that will be used as artistic elements or that do not rely on readability. Old style, cursive, script and display typefaces can quickly establish a mood and work best when used at large sizes.

For example, “Good Design” establishes a light mood for this site. The same goes for the company name, Indubitablee, in the top left corner. The typefaces have curvy, loose styles and look fun. Now imagine either of those typefaces while trying to read this article. It would be a lot less fun and would be difficult to read.

Moods

Although there are many factors that contribute to the overall feel of a website, some type choices alone can set the mood. (Although some fonts, such as Helvetica, are considered “moodless.” This means these letter forms take on the feel of other typefaces.)
Font selections can feel formal or informal, light or dramatic, modern or traditional and warm or cool. Fonts are not limited to a single mood and combinations of typefaces can create different mood associations.

The Team Fannypack website combines traditional and dramatic typefaces for a very old-style feel but with hints of modernism (not the icon in the top left corner).

AdPacks.com uses scripts and sans serif typefaces to create a page with a look that mirrors the theme “classy” the site is pushing. The old-style image and background in combination with the type creates a harmony in what the page says and its visual identity.

WakWAW takes a completely different approach. It uses a very dramatic typeface to catch your attention and the font is used throughout for headers and as a navigational tool. It combines with a “moodless” font that is easy to read but does not take away from the chaotic feel of the site.

Consider Established Themes

Keep in mind that establishing mood and feeling is pretty complex and can come across differently based on each person’s experiences. While there are some pretty universally accepted moods – think back to that “Wanted” poster – others are not so clearly defined.
Developing a mood based on distinct type selections from certain time periods can help. Using a typeface with an established identity can create an instant mood.

Font Diner uses a 50’s theme, with the main title having the look of the logo from a classic Chevrolet. This visual association is quick. With just a glance you are instantly taken back in time. And the site name, Font Diner, further expands on that theme.

Script and cursive type choices instantly create a feminine mood and are commonly used on websites targets at women. (Think of how many wedding and party invitations use this brand of typography.) Cake Sweet Cake and Addy Meira each use a collection of cursive and italics to create a lights and delightful moods on sites with woman-appeal.

Trends

With the number of items competing for your attention on websites, font choices are becoming increasingly dramatic. But at the same time, type driven sites are opting for more traditional sans serif choices to set them apart.

High impact, high drama fonts are not always readable and can create a sense of intrigue or chaos. These type selections can do one of two things: Bring in new people to the site because of interest, or confuse and turn them away. Make sure to use “super moody,” bold choices with strong images that help convey a message if the type falls short.

“Greetings Earthlings” is a great example of a moody choice paired with a strong image and nice supporting type. It immediately sets a space odyssey feel with an image and typeface on the landing page but the rest of the site uses an easy to read typeface. Site developers merged impact and readability.

Adding Color

Mood can sometimes be about more than just a font. Think about color choices and how just a simple hue change can alter how you feel. Traditional color mood rules still apply and should be considered to avoid an inadvertent emotional association.

Reds and blacks, especially when paired with dramatic typefaces, can create a sense of passion or anger. Blues and greens are more peaceful, with blue also sometimes establishing a sense of melancholy and greens linking to nature. Yellow can be cheerful or comforting and oranges are also exciting or energetic. White emphasizes emptiness or space.

add_filter('user_contactmethods', 'my_user_contactmethods');

function my_user_contactmethods($  user_contactmethods){
  $  user_contactmethods['twitter'] = 'Twitter Username';
  $  user_contactmethods['facebook'] = 'Facebook Username';

  return $  user_contactmethods;
}

Hungry for code snippets? I just opened a snippet library on CatsWhoCode, which include lots of WordPress snippets. Have a look, and don’t hesitate to submit yours!

Thanks to TutsPlus for the cool tip!

The three winners of Conceptboard’s giveaway will get a professional account with unlimited coworkers free of charge for one year.

What is Conceptboard?

It’s everything you ever wanted when working on your drafts with coworkers or clients. Conceptboard is a versatile space to upload images and documents combined with simple but powerful scribble, highlight and commenting tools. It’s wrapped up in real time collaboration features such as presentations and guest access.

Check out the sample board of a photo shooting or create a new demo board to play around with.

How to use it

• idea visualization & decision processes
• brainstorming & mind mapping
• design & document review
• task management & approval
• mock-ups & sketches

Features

• upload concepts, drafts & office documents
• scribble, highlight & underline
• take screenshots with the integrated tool
• work with your team in real time
• start ad hoc presentations
• make precise comments & assign tasks
• use your own corporate branding
• manage your staff
• work together with freelancers and customers

To enter the giveaway, simply add your comment below and tell us why you’d like to try Conceptboard.

Good luck to everyone!

This giveaway will end on the 23rd of February 2012 at 4 p.m. GMT+0.

Look, just because you know Photoshop, Illustrator and Indesign really well, doesn’t make you a fantastic designer — it makes you a really great Photoshop, Illustrator and Indesign user. I constantly struggle with design, it’s sort of a never ending three sided war: my imagination vs. design knowledge vs. design tool proficiency. But I came to a realization a while back that most of us rely too heavily on the last part — the tools — and forget what actually makes a quality design.

How many designers do you know (or maybe even you) that will instantly get into a pissing contest about what Adobe product is best for web design? But, as soon as somebody brings up “hierarchy” or “typography” those designers tend to duck back into their cubes. Despite our proficiency with the tools of the trade, web designs are not created by these programs.

Really great designers aren’t users, they are creators. To them, designs are created way before they grab their sharpie or click open Photoshop. For me it’s the classic rivalry between Kurt Cobain and Joe Satriani — alright, there’s no rivalry here, but trust me it’s an awesome analogy. Satriani is arguably one of the most polished and skilled guitar players in the universe. He does amazing things with a piece of maple and redwood; nobody on the planet would ever say he “sucked” at the guitar. Where Satriani is a calculated master guitarist, Cobain is a mediocre guitarist at best. So then why was Cobain able to create one of the most unique musical revolutions in the last forty years? Among other things, Cobain was not simply a user of the guitar, but instead he was a creator who used the instrument to express his ideas.

The Disease

I affectionately call this type of disease the “user designer disease”. The disease usually starts early and usually infects newer designers: designers who first graduate college or first start to work in the business. Becoming a user designer starts innocently enough. You learn how powerful these great tools are and you start to build a dependency on them. You start to realize that these applications can do so much that you start to toss away your sketchbooks and notepads. Anytime you have a creative thought you start to pop open your Mac, launch Photoshop and start playing around with the pen tool.

As a recovering user designer I now see the disease all to well. It’s like buying a new luxury car that can parallel park for you, it’s sounds great when you use it, but eventually you start to realize who is really in charge. The disease is a designer killer. It’s a skills killer and most importantly it’s an imagination killer. Like the chicken pox, the “user design” disease is something we all need to get in order to become healthy, happy designers. You’ll experience many different effects when you have the disease, but there are two main, horrible effects that can and will cripple your growth as a designer: deterioration of versatility and reproduction.

The Effects

Being a great designer doesn’t simply mean learning how to use the tools of creation, it’s about being able to create despite the tools of creation. Often times our proficiency with design tools becomes a crutch for us: propping us up and helping us get around, but never allowing us to run.

There are some bad effects to allowing yourself to use creative tools as a crutch, aka, become a “user designer”. The first major effect is the deterioration of versatility and imagination. When you start to use the tools as creative devices and allow them to take over your creative process you start to limit your expression to what you are only capable of doing in the application.

Real design is not limited to how you can create something in Illustrator; rather, design should only be limited to the delivery of the design and the needs of the user (or client). When you limit your creative expression to the tools’ abilities, you are only as versatile or imaginative as the tool itself.

The second horrible and awful effect of being a user designer is reproduction. Instead of finding clever design solutions to your client’s or users’ requirements and finding a design solution that is best for all parties involved, it’s much easier to copy what other popular sites are doing and using nifty Photoshop techniques to accomplish it. That is not design, that is reproduction. Reproduction is a bi-product of buying into popular trends and limiting your process to the tools of the trade. Cookie cutter web designs are simply the designer’s inability to express themselves and solve design problems.

The Cure

Don’t worry, there is a cure for the disease that is becoming the “user designer”. Depending on how far the disease has spread you may have a long hard road to recovery. Now, I’m not the greatest designer and I have some major weaknesses when it comes to design. But in my experience, the best way to throw down the crutches and run is to continually learn, continually grow and continually be aware of your strengths and weaknesses. This takes time, energy and most importantly the ability to be open to new ideas.

Overcoming the itch to rely on design tools and replicate only what is trendy at the time, starts with going back to the basics:

• understanding design principles/elements
• understanding what makes a design good or bad
• be willing to drop your own personal bias
• step out and experiment; fail when needed
• continually study the craft
• don’t copy, find inspiration from others

Proficiency of the tools isn’t a bad thing however, I’m not saying that you shouldn’t spend time learning the power behind the applications. But be careful with them, don’t let them start become your creative process, rather, let them be a part of your creative process. Going back to the Cobain vs. Satriani analogy, you don’t have to become one or the other. Instead, set your goals higher and work towards both — become Jimi Hendrix instead.