Inspect Element » css3

Create a CSS3 Image Gallery with a 3D Lightbox Animation

Tom Kenny — Tue, 19 Apr 2011 13:20:13 +0000

For the most part, the CSS3 tutorials and examples out there are a little dull. Of course there are some really great examples out there such as Benjamin de Cock’s CSS Playground but most others consist of a drop-shadow here and a few rounded corners there and nothing more. It’s time to start doing something more inspirational and useful at the same time.

Having been inspired to get ‘Hardboiled‘, I’ve started playing around with a few cool techniques and exploring how to make the content accessible in less capable browsers while giving the best possible experiences to the ones that support the latest advancements in CSS. I’ve taken Benjamin’s CSS lightbox gallery and built upon by adding a few hover effects for the gallery grid itself and a 3D rotation for the lightbox content, all with the use of CSS.

View Demo

The :target Pseudo-Class

First, let’s look at how the lightbox actually appears without JavaScript and only CSS with the use of the :target pseudo-class. If you’re writing CSS, you’re already using pseudo-classes as you’ll be familiar with :hover, :visited and :active.

You can link directly to a place on a page by adding a page anchor (#) with the ID of an element to the end of the URL:

http://url.com/#info1

You probably already knew that but what you may not know that you can affect the style of the element that is linked to via the :target pseudo-class. The following code would only be seen if a user clicks on a link with the target ID in:

#info1:target { background-color: red; }

In the case of the demo, we’re using any list item with an ID that has been ‘targeted’ to display the lightbox li[id]:target. Pretty standard CSS is then used to display the lightbox on the page, even with a dark transparent overlay through the use of opacity.

The Animation

If we leave it at that, it’s pretty much the same as a standard lightbox or modal window so we’ll set it apart with a fun animation. Here is how we’ve created the animation with the help of keyframes (WebKit only for now):

@-webkit-keyframes lightbox {
	0% { -webkit-transform: scale(5) rotateY(-270deg); }
	100% { -webkit-transform: scale(1) rotateY(0deg); }
}

On it’s own, the code above won’t do anything so we need to reference it against the element(s) we want to animate.

li[id]:target div { -webkit-animation: lightbox 0.75s cubic-bezier(0,0,0,1); }

As you can see, the animation is called lightbox and that’s the first part of the animation property, followed by the duration and the timing function.

It’s very simple. We’re telling the div (the white box with the blue heading in the demo) to transform 5 times bigger with scale(5) and from a rotated position of -270 degress with rotateY(-270deg). Then when the animation ends after 0.75s we want it to reset to it’s actual size and rotation. The browser will create the animation in between (which is affected but the cubic-bezier timing function above).

Less Capable Browsers

The good thing about this is that browsers that don’t support CSS3 will fallback to an accessible version without the fancy animations thanks to the use of the page anchor and Modernizr.

We do this by testing to see if CSS transforms aren’t supported and then adding CSS using the .no-csstransforms class. Why are we testing for a lack of CSS transforms and not CSS animation? It’s mainly to do with :target pseudo-class support which we can’t test for with Modernizr. It isn’t supported by older browsers, specifically IE8 and below but it is supported in all browsers with support for CSS transforms (as far as I know).

I’ve taken that one step further by creating an equal to or less than IE8 condition comment and

We also want to replace the ‘x’ (the close button in the lightbox) with ‘Back to top’ text for lesser browsers to aid usability. We do that with a bit of jQuery and a test for no CSS transforms with Modernizr.

if (!Modernizr.csstransforms) {
	$(document).ready(function(){
		$(".close").text("Back to top");
	});
}

Issues

There are a couple of issues I need to point out:

Double scrollbar when the lightbox content exceeds the height of the screen resolution
Animation is possibly slow on older machines (needs more testing)
Loads all content, whereas JavaScript solutions online load content when requested
If a browser has JavaScript turned off and doesn’t support CSS transforms, no content will be displayed. This is a problem with using Modernizr as a JS solution for browser feature testing.

I recommend this should only be considered as a demonstration of CSS3 3D animations unless you don’t have much content in the lightbox, similar to the demo.

I’ll be looking to improve it all the time. In the meantime, let me know what you think and if you can offer any improvements or ideas please let me know in the comments.

Use CSS3 Now!

Tom Kenny — Tue, 11 Jan 2011 10:29:47 +0000

I posted a quick tutorial yesterday showing how to use a simple CSS3 technique to spin some icons on hover. I’ve posted CSS3 tutorials before but all of a sudden this latest one has already received a few negative comments complaining that they can’t use CSS3 yet. Of course you can! Get over the way you used to do things, move with the times and embrace the new hotness right now. Today.

Here are two of the most negative comments:

Demonstrations of CSS3 are lame. What, 10% of the internet uses a browser capable of showing this stuff. What a waste of time.

That’s a pretty slick trick! I just wish I could use it now and not have to wait 3 years for the general public to catch up with their browser updates…

I work on corporate websites in my full time job and I use CSS3 all the time. In fact I’m using that spinning icon technique in a site redesign I’m working on at the moment and their usage stats show IE at 67.1% for the last month. However, that number is trending down and usage stats for other browsers are increasing including Chrome, Safari and Firefox. This is not unique to this one site. Every corporate site I’ve checked is showing same characteristics with their users. Chances are, if this is happening in the corporate world, the stats will look even better in other industries.

It’s true, visitors with current versions of IE won’t see the example used in my tutorial but with good use of CSS3 you can enhance interaction for users of newer browsers and people who are upgrading. Browser usage is trending towards newer browsers if you look at the stats. For example, a year from now people who had older browsers and have upgraded their browser (or been upgraded by someone else) will start to notice these enhancements possibly giving them a sense of discovery. They may even notice them more than someone who hasn’t upgraded because they saw it IE first (still fully accessible of course) and then saw it in a modern browser. Certainly not a bad thing.

However, the average visitor who still uses older browsers will still see a fully accessible version of your site and they won’t check sites in multiple browsers to see what the differences are. That just doesn’t happen outside of the web design and development community. In the case of the tutorial in question, everything looks the same initially, so everyone is still getting the same access to content, just the interaction has been enhanced for more recent browsers. That’s the key. As long as everything is still accessible, start embracing CSS3 or you’ll get left behind.

Hardboiled CSS3 Media Queries

Tom Kenny — Tue, 12 Oct 2010 16:34:44 +0000

Andy Clarke offers a comprehensive starting point for media queries based on the specs of different devices such as smartphones and iPad as well as varying screen sizes. Apparently they’re part of a wider toolkit that he’ll be releasing with his book coming soon which is almost certainly going to be worth the wait.

Ultimate CSS Gradient Generator

Tom Kenny — Wed, 06 Oct 2010 13:44:45 +0000

A gradient generator web app that mimics Photoshop’s gradient creation tool. Could do without the IE filter though. If you really have to use a gradient for IE, just write a conditional comment and only let IE users clock up another HTTP request.

Writing Clean CSS3 Code [updated]

Tom Kenny — Wed, 01 Sep 2010 22:56:10 +0000

One of the main problems with writing CSS3 code are the vendor prefixes. These are the -moz- or -webkit- you see before properties such as border-radius or text-shadow. They’re a necessary evil at worst and you’ll have to use them to get the most out of what CSS3 currently has to offer.

So what’s the problem? I’m very much a fan of the single line approach to writing CSS as seen below. It allows elements to sit under each other nicely, making them easier to find. Good commenting also helps.

The downside of vendor prefixes is declaring the same value more than once. Combine this with the single line approach above and you can see it starts to get messy with every CSS3 declaration on the same line. This will only get more difficult to read, with more CSS3 properties used.

I’m a designer so I can’t have my code looking messy and ugly, especially when you’re working on sites you know your workmates will be working on some point too. My solution is to keep the regular old CSS on a single line but split CSS3 onto separate lines defined by vendor prefixes. Not exactly earth-shattering but now it’s cleaner and much easier to read and edit all those declarations of the same property. They all sit under each other making them easier to compare to one another. I also start with the shortest at the top working my way to the longest, again just keeping everything consistent, neater and easier to read.

It even works well with extra CSS3 properties.

I take the same approach if I’m using rgba for the background colour of an element. The first declaration is for older browsers such as IE which ignore the rgba line.

Over to You

How do you deal with keeping your code beautiful and using multiple CSS3 vendor prefixes?

Update: As a few people have pointed out in the comments as well as a tweet from @nathansmith, you should be putting the vendor prefixes first and the final spec version last. See CSS-Tricks‘ comprehensive explanation.

Use of CSS3 Goodness for GMail on the iPad

Tom Kenny — Thu, 19 Aug 2010 15:15:36 +0000

An interesting note when writing translations in CSS3 for the iPad:

… it seems that 2D translations are not hardware-accelerated. But, since any 2D translation is equivalent to a corresponding 3D translation with the same translations in the x and y and no translation in the z axis, it is easy to use a hardware accelerated translate3d(x, y, 0) transform instead of a non-hardware accelerated translate(x, y) transform.

Browser Prefixes aren’t as Evil as you Think

Tom Kenny — Wed, 07 Jul 2010 16:27:10 +0000

Eric Meyer’s excellent thoughts on why browser prefixes are not as bad as some people make them out to be and I completely agree.

So the next time you find yourself grumbling about declaring the same thing four times, once for each browser, remember that the pain is temporary. It’s a little like a vaccine—the shot hurts now, true, but it’s really not that bad in comparison to the disease it prevents. And in this case, you’re being vaccinated against a bad case of multi-year parser hacking and browser sniffing. We suffered through that long plague once already. Prefixes will, if used properly, ward off another outbreak for a long time to come.

Simulate Realism with CSS3

Tom Kenny — Tue, 16 Feb 2010 15:15:09 +0000

CSS3 is here to make our lives easier as web designers and developers. While it’s not something we can always rely on heavily for layout purposes just yet, we can use it to enhance certain aspects of our designs by spending a considerably less amount of time doing so.

However, CSS3 has not been created for the sole purpose of making it easier and quicker to create a website but also so we can create much better sites than we ever could with CSS before. Here are a few examples of how CSS3 can improve the web.

Polaroids – View Demo

Despite not being around today, polaroid images are still iconic and because of this is still a great way to display photos. It’s simple enough to display a basic polaroid image using a white border on all sides with a thicker border for the bottom but we can enhance it with CSS3. As you’ll see in the demo, viewed in the latest versions of Safari, Firefox or Chrome, you can add an extra layer of depth with the addition of drop-shadow and transitions.

img {
	border: 15px solid #fff;
	border-bottom: 65px solid #fff;
	-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
	-webkit-transform: rotate(1deg);
	-moz-transform: rotate(1deg);
}

img:hover {
	-webkit-box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.1);
	-webkit-transform: rotate(1deg) scale(1.05);
	-moz-transform: rotate(1deg) scale(1.05);
}

A subtle shadow gives the impression that is sitting on a flat surface and by scaling and increasing the size and positioning of the shadow on a hover state we can create the illusion that it has been raised slightly from the surface.

Buttons – View Demo

Why do buttons exist in web design? The web is an interactive medium and buttons are a form of interaction, they are easy to understand as a metaphor for real, physical buttons we use everyday on things like computers, mp3 players, televisions and any other electronic devices we use on a daily basis.

The key to making the buttons behave more like real physical buttons using CSS3 is using code such as shown below for the second button. To achieve a circle with CSS3, set a width and a height and define border-radius as half of those values.

button.two {
	width: 30px;
	height: 30px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	text-indent: -9999px;
	border: 1px solid #696969;
	background: #696969 url(power.png) no-repeat 6px 5px;
}

The active state uses CSS3′s gradient ability to create a gradient that goes from dark at the top to a lighter colour at the bottom. To further emphasise the depression of a button, a CSS transform is applied, scaling down the button slightly. To maintain the background image of the power button, include it in the background property and separate the gradient values with a comma.

button.two:active {
	-webkit-transform: scale(0.97);
	-moz-transform: scale(0.97);
	background: url(power.png) no-repeat 6px 5px, -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.13, #696969),
		color-stop(0.72, #2a2a2a)
	);
	background: url(power.png) no-repeat 6px 5px, -moz-linear-gradient(
		center bottom,
		#696969 13%,
		#2a2a2a 62%
	);
}

The recessed border also uses CSS3 gradient to get the full effect. The border class is applied to a div containing the button.

.border {
	margin: 0 auto;
	height: 42px;
	width: 42px;
	display: block;
	background-color: #fcfcfc;
	-webkit-border-radius: 21px;
	-moz-border-radius: 21px;
	border-radius: 21px;
	background: -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0.13, #fcfcfc),
	    color-stop(0.72, #c0c0c0)
	);
	background: -moz-linear-gradient(
	    center bottom,
	    #fcfcfc 13%,
	    #c0c0c0 62%
	);
	-webkit-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.6);
}

View the demo in the latest versions of Safari, Chrome or Firefox.

DVD Animation – View Demo

CSS3 has an animation module which is plenty of fun to play with especially as you’ll be able to do things with CSS that you weren’t able to do before.

a:hover img[alt*="Disc"] {
	-moz-transform: translate(50px,0) rotate(330deg);
	-webkit-transform: translate(50px,0) rotate(330deg);
	transform: translate(50px,0) rotate(330deg);
}

Here the animation is being used to animate the DVDs as as you hover over the link that encapsulates bot the cover and the disc.

img[alt*="Disc"] {
	-moz-transition: all .5s ease-in-out;
	-webkit-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

Anyone who follows the work of Andy Clarke will likely have seen the DVD animation of the homepage of For a Beautiful Web. The above code demonstrates how Andy implemented this effect. At this point I want to highlight what you can do when you see something interesting on the web. All you have to do is have a look at the source code to see exactly how it works and learn from it to see how you could use it in the future. Now I’m not saying copy someone’s work but adjust it to your or your client’s needs.

Zurb also have an excellent demonstration of a similar effect which the wrote for Smashing Magazine.

BONUS: 3D Book Animation – View Demo

This one is for WebKit based browsers only so fire up the latest version of Safari or Chrome to see it in action and is based on this example found on the Surfin’ Safari blog. I’ll let you hunt around for code to see how it works as discovery is half the fun of learning about CSS. If you have any questions let me know in the comments and either myself or one of our great readers will help you out.

Tools and Resources to Improve your Typography on the Web

Tom Kenny — Thu, 04 Feb 2010 14:50:54 +0000

Typography on the web has previously been confined to a set of web-safe fonts due to their dependance of being on every computer but now that has changed. It’s one of the most satisfying and rewarding aspects of web design when you get it right but can also be one of the most difficult to do so. Here are some tools, resources and free fonts to help you on your quest for quality typography.

Font Embedding

Font embedding has become the saviour of typography on the web. Without it, we would still be stuck using the usual array of ‘web-safe’ fonts such as Arial, Georgia and Verdana. Not that there is anything wrong with them, just designers needed more choice and variety is the spice of life as they say. In fact web-safe fonts certainly played their part in forcing designers to create readable body text as they’re all very readable at smaller sizes.

@font-face

Advantages:

Easy to setup (see previous post)
Behaves exactly the same as regular text
Even works in IE6+ (albeit through Microsoft’s proprietary format)

Disadvantages:

Limited use of fonts due to no form of copy protection

TypeKit

Advantages:

Huge selection of commercial fonts to choose from
All the benefits of @font-face but with copy protection

Disadvantages:

You don’t own the font for use in Photoshop designs etc.
Relies on JavaScript
Isn’t free (although it isn’t expensive)

Typotheque

Advantages:

Doesn’t use JavaScrip, only CSS
All the benefits of @font-face but with copy protection

Disadvantages:

Seemingly expensive

Cufon

Advantages:

Works across all browsers

Disadvantages:

Requires JavaScript
Can’t select text

sIFR

Advantages:

Works across all browsers

Disadvantages:

Requires Flash

Font Discovery

WhatTheFont

Have you ever found a great font but don’t know what it is? I frequently get asked what font I’ve used for the Inspect Element logo. Well now you can snap a screenshot and upload it to WhatTheFont which will return a list of the best matches of fonts. There have only been a couple of times where it hasn’t found the font I’ve been looking for but has worked flawlessly otherwise.

MyFonts

MyFonts gives you the ability to view an extensive selection of fonts with custom text before you buy.

FontShop

Online font store founded by extremely well respected typographer and designer Erik Spiekermann.

I Love Typography

You won’t go wrong by following I Love Typography to keep up with what’s going on in the world of Typography.

Education

Typedia

As the name suggests, Typedia aims to be an encyclopaedia of Type by blending the world of crowd-sourcing and social media and community. Not only is this a great place for font discovery but also a great place to learn about typography.

Free Fonts

Fonts available for @font-face embedding

You can’t just start using any font on the web. You have to respect individual licenses so this is a great resource displaying all fonts that have been specifically approved for @font-face embedding. The list is kept up to date as more fonts are added.

The League of Moveable Type

The League of Moveable Type, an open-source type movement, is very much a quality over quantity collection of free fonts.

exljbris Font Foundry

Similarly, exljbris Font Foundry is a collection of a few absolutely great fonts. All fonts are created and released by Jos Buivenga.

dafont

On the other end of the scale, dafont contains a huge number of fonts but finding a good font is like looking for a needle in a haystack. There are a few good hidden gems to be found though.

Font Squirrel’s Free @font-face Kits

A number of free fonts for you to download complete with the CSS you need to use the fonts on your site.

One more thing…

Don’t forget to check out Elliot Jay Stocks’ 8 Faces magazine when it launches as all signs point to it being excellent.

Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3

Tom Kenny — Mon, 25 Jan 2010 21:12:14 +0000

HTML5 is the future of web development but believe it or not you can start using it today. HTML5 is much more considerate to semantics and accessibility as we don’t have to throw meaningless div’s everywhere. It introduces meaningful tags for common elements such as navigations and footers which makes much more sense and are more natural.

This is a run through of the basics of HTML5 and CSS3 while still paying attention to older browsers. Before we start, make note of the answer to this question. Do websites need to look exactly the same in every browser?

View Demo | Download Files (.zip)

The HTML







    One Page Portfolio
    

    

    

    

    
    
    





     

    	

    		Web Design Portfolio

    		 
    			
    				Intro
    				Portfolio
    				About
    				Contact
    			
    		

    	

    

     

    	

    		Hand-coded HTML and CSS is what I do. It's what I'm good at so why not?

    		http://inspectelement.com">

    		Featured Project: Inspect Element

    	

    	 

    		My Portfolio

    		
    			
    				http://inspectelement.com">
    			
    			
    				http://inspectelement.com">
    			
    			
    				http://inspectelement.com">
    			
    			
    				http://inspectelement.com">
    			
    			
    				http://inspectelement.com">
    			
    			
    				http://inspectelement.com">
    			
    			
    				http://inspectelement.com">
    			
    			
    				http://inspectelement.com">
    			
    			
    				http://inspectelement.com">
    			
    		

    	

    	 

    		About Me

    		Now this is a story all about how my life got twisted upside down and I'd like to take a minute just sit right there I'll tell you how I became the prince of a town called Bel-Air. In West Philadelphia born and raised on the playground my momma said most of my days chilling out, maxing and relaxing all cool and all shooting some b-ball outside of school when a couple of guys they were up to no good started making trouble in our neighbourhood I got in one little fight and my mom got scared, she said your moving in with your auntie and uncle in Bel-Air

    	

    	 

    		Contact Me

    		I whistled for a cab and when it came near the license plate said fresh and had dice in the mirror, if anything I could say that this cab was rare but I thought nah, forget it, yo home to Bel-Air! I pulled up to the house about seven or eight I yelled to the cabbie yo home, smell you later, looked at my kingdom I was finally there to sit on my throne as the prince of Bel-Air

    		 

    			Name
    			 

    			Email
    			example@domain.com" required tabindex="2" /> 

    			Your Message
    			 

    			 

    		 

    	

    	 

    		
    			http://twitter.com/tkenny">Follow me on Twitter
    			http://inspectelement.com/articles/code-a-backwards-compatible-one-page-portfolio-with-html5-and-css3">Back to the Tutorial on Inspect Element

Download the HTML here (Right-click and save as).

First thing first, let’s make sure the code validates with W3C’s experimental HTML5 validator.

Good news, it does! This is a simple example but good to know we’re on the right lines.

The HTML5 Goodness

As you can see from the code above there are new tags that you may not be familiar with. To make it even simpler here is the code stripped down to only the HTML5 tags.

Header

The first one you’ll notice is

and it does exactly what it implies. You can use this for the header of your page, typically containing the logo and the navigation.

The header element represents a group of introductory or navigational aids.

A header element is intended to usually contain the section’s heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos.

The header element as described in the HTML5 specs.

Nav

The

tag now gives us the ability to highlight the navigation of a site through the HTML. Usually contained within the header of a page but can also be applied to left or right sided navigation in sidebars.

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

Not all groups of links on a page need to be in a nav element — only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases, without a nav element.

User agents (such as screen readers) that are targeted at users who can benefit from navigation information being omitted in the initial rendering, or who can benefit from navigation information being immediately available, can use this element as a way to determine what content on the page to initially skip and/or provide on request.

The nav element as described in the HTML5 specs

Section

In this example the

tag is being used to separate the different parts of the page. The introduction, my portfolio, about me and contact me areas are all sections that make up the page, all contained within a section tag.

The section element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a heading.

Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, contact information.

The section element as described in the HTML5 specs.

Footer

You’ll find the

tag at the end of the contact section of the portfolio example. It’s included there and not at the end of the document in this case because it contains content relevant to the contact section in the form of the Twitter link (ignoring the back to tutorial link). For more information read the following included in the HTML 5 spec overview:

The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

Contact information for the author or editor of a section belongs in an address element, possibly itself inside a footer.

Footers don’t necessarily have to appear at the end of a section, though they usually do.

When the footer element contains entire sections, they represent appendices, indexes, long colophons, verbose license agreements, and other such content.

The footer element is not sectioning content; it doesn’t introduce a new section.

When the nearest ancestor sectioning content or sectioning root element is the body element, then it applies to the whole page.

The footer element as described in the HTML5 specs.

The Form

While the form itself doesn’t seem to be radically different to previous methods, HTML5 does introduce a nice addition in the placeholder attribute. Basically this fills in a text field with sample text much like we’re used to doing with Javascript now.

example@domain.com" />

For more on HTML5 in forms make sure you check out Have a Field Day with HTML5 Forms on last year’s 24 ways.

Backwards Compatibility

All of this is great. We’re using the latest and greatest technology in web development but currently only a few browsers support HTML5 in any capacity. We now need to think about all versions of Internet Explorer which don’t include any support for HTML5 whatsoever. Fortunately for us, Remy Sharp has created a Javascript file that reverses IE’s inability to style elements it doesn’t recognise.

Just included the following code:

Now that all major browsers will recognise the styling let’s move onto the CSS.

The CSS3 Goodness

Most of the CSS won’t be new to you but there are a few CSS3 properties that we’ll have a look at including gradients, embeddable fonts and text shadow.

View the CSS here

Let’s begin by looking at how this page behaves visually in a browser that supports CSS3. View the demo in the latest versions of Safari, Chrome or Firefox to see the full effect. Or see the screenshots below:

@font-face

While this example uses @font-face on every instance of text, I wouldn’t recommend doing so on large websites. Also, using some fonts as body text may case text to become hard to read. Don’t get carried away. This theme uses Yanone Kaffeesatz at a large enough size to make it very readable and differ enough from the regular web-safe fonts.

@font-face { font-family: Keffeesatz; src: url(YanoneKaffeesatz-Light.otf) format("opentype") }
@font-face { font-family: KeffeesatzBold; src: url(YanoneKaffeesatz-Bold.otf) format("opentype") }

RGBa

With RGBa you can declare a colour and an opacity as a single property. Not only that but it can be applied to anything that uses colour. To demonstrate this, the image link and input borders have RGBa applied. You can see the subtle background texture show through, especially noticeable on the input elements in the form.

input[type="text"] { border: 5px solid rgba(122, 192, 0, 0.15); }

The first three values (122, 192, 0) are the red, green and blue values of the colour with the fourth (0.15) being the alpha value, or opacity.