Six Revisions » CSS http://sixrevisions.com Thu, 02 Sep 2010 10:30:49 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 3 Advanced CSS3 Techniques You Should Learn http://sixrevisions.com/css/3-advanced-css3-techniques-you-should-learn/ http://sixrevisions.com/css/3-advanced-css3-techniques-you-should-learn/#comments Sun, 15 Aug 2010 16:00:50 +0000 Jacob Gube http://sixrevisions.com/?p=3868 3 Advanced CSS3 Techniques You Should Learn

If you’re reading this, then I can safely assume that you’ve at least heard of CSS3. The latest version of CSS includes properties that allow you to style your HTML elements with rounded corners, drop shadows, and even color gradients.

However, these techniques just scratch the surface of what CSS3 can really do. In this guide, I am going to be talking about three advanced CSS3 techniques.

View Demo

Here is a single demo page of all the code I’ll be using in this guide. It’s best viewed on WebKit browsers (like Google Chrome and Apple Safari) so you can see the CSS3 -webkit animation properties in action.

View Demo

1. Advanced Selectors

One of the most important but under-hyped features of CSS3 is the new advanced selectors. I’m sure I don’t have to tell you why being able to target specific HTML elements without having to use an ID attribute is a good thing!

Traditionally, CSS selectors have always been: IDs (#id), classes (.class), HTML elements (such as p), and occasionally pseudo-classes like :hover or :active.

The problem with this formula is that nearly every element needs to have a hook. This means that to get specific with what you’re selecting, the element needs to have either an ID (if it’s just one element) or a class (if it’s a group of elements) so that the browser knows what you’re talking about.

When you start working with very complex layouts, the amount of IDs and classes you need to add to your markup begins to slow you (and your web pages) down.

Enter CSS3. With numerous new pseudo-classes to choose from, your markup and page response times will thank you.

To demonstrate some of these new selectors, I’ve marked up a simple example: two unordered lists.

<!DOCTYPE html>
<html>
<body>
  <ul>
    <li>First Line</li>
    <li>Second Line</li>
    <li>Third Line</li>
    <li>Fourth Line</li>
    <li>Fifth Line</li>
    <li>Sixth Line</li>
  </ul>
  <ul>
    <li>First Line</li>
    <li>Second Line</li>
    <li>Third Line</li>
    <li>Fourth Line</li>
    <li>Fifth Line</li>
    <li>Sixth Line</li>
  </ul>
</body>
</html>

The following code block is some basic CSS just for visuals. All I’ve done is reset the margins and padding of every element using the universal selector (*) and applied some basic styles to both unordered lists.

* {
  margin: 0;
  padding: 0;
}
ul {
  list-style-type: none;
  margin: 2%;
  border: 1px solid #ccc;
  padding: 5px;
  width: 44%;
  float: left;
}
ul li {
  margin-bottom: 5px;
  padding: 2px;
}

Now it’s time to write our first advanced selector! (Don’t be scared!)

The first part of our selector just says to select the <ul> that is the first child of another element (the <body> in this case).

Then it goes on to select the odd list items (first, third, fifth, and so on) in the first unordered list.

As you can see, using a combination of pseudo-classes and HTML element selectors, we’ve managed to only select the first of the two identical unordered lists.

ul:first-child li:nth-child(odd)

Another way of doing this is shown below, which does the same thing except this time it does so by selecting the first <ul> on the page, regardless of whether or not it’s the first child of another element.

ul:first-of-type li:nth-child(odd)

As you progress further into using CSS selectors, you’ll find that there are many ways of doing the same thing, and it’s up to you to decide which one to use.

With the first unordered list selected, we can style the odd list items (we will give them a different background color than the other list items).

ul:first-child li:nth-child(odd) {
  background-color: #d2fffe;
  border: 1px solid #000;
}

That isn’t the only way of using :nth-child, though. We can also use it to style individual elements based on their position. The code block below gives the 5th list item of the first unordered list on our web page a pink background.

body > ul:first-child li:nth-child(5) {
  background: #ffd2d2;
}

For another example, let’s add a web form to our HTML document. Please note the fact that one of the input elements (name=email) has the Boolean attribute of disabled so that I can demonstrate the :disabled pseudo-class later on.

<form method="post" action="#">
<p>
  <label for="name">Name:</label>
  <input type="text" name="name" value="" />
<p>
  <label for="email">Email:</label>
  <input type="text" name="email" value="" disabled />
</p>
<p>
  <label for="message">Message:</label>
  <textarea name="message"></textarea>
</p>
</form>

The following code block is just some basic styles for our web form. What this will do is remove some default styling on the form and float the labels to the left and the inputs to the right.

form {
  clear: both;
  width: 95%;
}
form p {
  margin-bottom: 15px;
  clear: both;
  overflow: hidden;
}
form label {
  float: left;
}
form input, form textarea {
  width: 70%;
  float: right;
  border: 1px solid #000;
}
form textarea {
  height: 50px;
}

We’re now going to take advantage of the disabled attribute on the email input to add a darker gray background to it.

input:disabled {
  background: #e7e7e7;
}

Next up, we have a complex-looking selector, but it’s actually quite simple.

By using the :not pseudo-class, we are selecting everything inside a paragraph that is also inside a form except for <textarea> and <label> elements.

Essentially, what this will do is target all form fields that aren’t textareas.

form p *:not(textarea):not(label) {
  height: 20px;
}

In actual practice, it would be more efficient to use input as the selector in our particular case, but I chose to do it this way to demonstrate the :not selector and how we can chain different pseudo-classes together to produce a more specific selector.

That’s it for advanced selectors. We covered a lot, but we still have two more techniques to look at! Let’s get started with those.

2. Animations

Animation on the web has long been the domain of Flash and JavaScript. Now, with CSS3, it’s possible to do the same sorts of animation with only a few lines of code!

To demonstrate animation techniques, let’s add another section to our markup: a simple div with no class or ID, and inside it, an <h1> — nothing too fancy. 

<div>
  <h1>Hover over to see animation</h1>
</div>

Since it’s our first div, we can use the :first-of-type pseudo-class to select it. I’ve made it a 200px by 200px blue box just to make it easy to see. I’ve also styled the h1 for visuals.

div:first-of-type {
  width: 200px;
  height: 200px;
  background: blue;
  color: #fff;
  clear: both;
}
h1 {
  color: #fff;
  font: 30px/1.5 Helvetica, Arial, sans-serif;
  width: 150px;
  margin: 25px auto;
}

3 Advanced CSS3 Techniques You Should Learn

Now comes the fun part! To create the animation, add the following three lines to the div:first-of-type selector. You’ll see nothing yet, but this sets the stage for the animation functionality, which will kick in when the box is hovered on.

-webkit-transition-property: background, border;
-webkit-transition-duration: 2s, 1s;
-webkit-transition-timing-function: linear, ease-in-out;

I’m using three properties to define two animations for the box (background and border). By adding commas between the properties of each option, I can distinguish which ones will be applied to which animation.

The -webkit-transition-property value defines which CSS properties will be animated (background and border).

The -webkit-transition-duration property defines how long the animation transition will be — in this case, 2 seconds for the background and 1 second for the border.

The last -webkit-transition-timing-function tells the browser what equation to use for the transition.

So we’ve set the stage for the animation, but we haven’t added any animation yet!

Let’s fix that by declaring our :hover properties.

div:first-of-type:hover {
  background: #ccc;
  border: 20px solid blue;
}

Now, when you hover over our blue box, the background and border will change and grow. That’s it. We don’t have to add any other code, the animation will run automatically!

We’re not done yet, let’s add one more example animation to the markup.

<div onclick="this.style.webkitTransform='rotate(360deg)'">
  <h1>Click me!</h1>
</div><!--end clickable-->

I’ve used a bit of inline Javascript so that when the div is clicked, it rotates itself around 360 degrees (in production, you will want to do this unobtrusively by using JavaScript DOM selection methods — but that’s out of the scope of this guide).

Next for the CSS, we’ll use the :last-child pseudo-class (since we want to target the last div in our HTML).

div:last-child {
  width: 95%;
  height: 100px;
  -webkit-transition: -webkit-transform 3s ease-in;
  background: rgba(0,0,0,.5);
  cursor: pointer;
}

The things to note about the above CSS code block is that the background property uses the rgba property to give the div a semitransparent background. The other thing to note is the use of the -webkit-transition property shorthand to animate the rotation of the div.

And with that, we’re done with the animation. It’s full steam ahead to the last CSS3 technique we’ll cover: media queries.

3. Media Queries

The third and last advanced CSS3 technique I’ll be discussing is media queries. What are they? Media queries allow web designers to add conditional CSS rules depending on what the user is using to view the web page.

The advantage of this is that we can make new rules on how to display a web page depending on the situation of our user. For example, if their viewport’s width is thinner than 800 pixels, we can adjust the layout accordingly, giving us a truly fluid and flexible layout. So how do we do it? Easy.

@media screen and (max-width:800px) {
  ...properties when browser is 800px or less...
}

If you open up the demo in a web browser that supports media queries, you will see that as you reduce the size of the browser, the boxes change sizes, which is great.

However, wouldn’t it be awesome if when the browser’s width gets reduced, the two lists stop floating? Yes, it would be. And the CSS for that is the following:

@media screen and (max-width:800px) {
  ul {
    float: none;
    max-width: auto;
    width: auto;
  }
}

While we’re at it, let’s make a few other changes. In the following code block, we’ll make it so that the first div disappears if the viewport is less than 800px.

div:first-of-type {
  display: none;
}

Now when the browser is reduced past 800px, the blue box will disappear!

We can even have multiple @media rules in one document. How about we do something else if the browser is lowered to 600px in width?

@media screen and (max-width:600px) {
  ul:last-of-type {
    display: none;
  }
}

Now, when you reduce the browser a little more (less than 600px) — like magic — the second unordered list disappears!

Here’s some styles for when the width is reduced to 400px.

@media screen and (max-width: 400px) {
  div:last-child, form {
    display: none;
  }
  ul:first-of-type {
    height: auto;
    padding: 50px;
  }
  ul:first-of-type li {
    margin-bottom: 50px;
  }
}

I hope you see the potential of media queries, especially with the growing number of ways people view websites (such as through mobile devices).

Wrapping Up

Now you know three advanced CSS3 techniques! Give yourself a pat on the back, you deserve it.

It’s important to note that while the selectors and media queries will work in most modern browsers (Firefox, Safari, Chrome), the animation will only work on Webkit-based browsers like Safari and Chrome.

Further Reading

Related Content

About the Author

Max Luzuriaga is a freelance web designer (see his work on his portfolio site). He’s also a design blogger at The Design Gnome. He likes web standards and loves talking in the third person. Follow him on Twitter as @designgnome.

]]> http://sixrevisions.com/css/3-advanced-css3-techniques-you-should-learn/feed/ 27 10 Interesting CSS3 Experiments and Demos http://sixrevisions.com/css/css3-demos-experiments/ http://sixrevisions.com/css/css3-demos-experiments/#comments Sun, 25 Jul 2010 16:00:42 +0000 Jacob Gube http://sixrevisions.com/?p=3747 10 Interesting CSS3 Experiments and Demos

You’ve heard it plenty of times before: We’re at the precipice of a transition in the way we, as developers, do things. Leading the way are future standards like CSS3 and HTML5, both already partially implemented in 4 out of the 5 major web browsers, with IE9 promising support, empowering us with new ways of making interactive and rich user experiences.

Just how awesome is CSS3? Find out by checking out these 10 experiments and demos that push the capabilities of the specs.

1. Our Solar System

Our Solar System

This experiment presents our solar system’s planetary orbits (fast-forwarded, of course) by utilizing CSS3’s border-radius, transform, and animation. Additionally, hovering over the names of each planet on the right displays an animated tooltip using CSS (learn how to make CSS3 animated tooltips). You can read about how this experiment was developed from this walkthrough by Alex Girón, the creator of this stellar CSS3 demonstration. The animation, at the moment, only works on the WebKit browsers (Google Chrome and Safari).

2. CSS3 Ads Versus Flash Ads

CSS3 Ads Versus Flash Ads

Flash animated web banners are notorious for being intrusive in the user’s experience. Ad-blocking apps can turn these off by looking for all embedded Flash objects on a web page and hiding them. However, using CSS3 animation, these Flash ads can be mimicked in functionality, but will be harder to disable with third-party software. In this experiment, several ads were recreated using CSS3, and the results are almost identical to their Flash-constructed counterpart.

3. CSS3-Man

CSS3-Man

This is a robust animation sequence inspired by the Spider-Man animated television series in the 60’s. Making the sequence work involved using CSS3’s transform, @key-frame and rotate; a bit of jQuery was used to preload the images as well as HTML5 for the audio. The creator wrote an explanation of how the CSS3-Man animated sequence works, which will give you a general idea of the level of effort involved in this amazing experiment.

4. The Man From Hollywood

The Man From Hollywood

This demonstration is an animated sequence (based on kinetic typography) that explores a way in which we can replace rich animation components such as Flash or After Effects. This proof of concept chiefly utilizes advanced CSS selectors and CSS3 animation, however, it’s not purely CSS since JavaScript was used to toggle element classes on and off.

5. Anigma

Anigma

We often use Flash (or Silverlight) for rich and interactive web-based video games. This CSS3 demonstration is a puzzle game and a proof-of-concept of how we can use open standards to create games — though admittedly, not as facile as Flash yet if you compare it to Flash games on sites like Kongregate. HTML5’s <audio> element was used to embed the sound.

6. Animated Polaroids

Animated Polaroids

This demonstration is of stacked images that look like Polaroids. Hovering over a photograph transitions it smoothly to the front of the stack, making for an interesting interaction for presenting your photo gallery. The demo was made by leveraging transition, transform, dynamic psuedo-selectors (to animate the target element), as well as stylistic properties such as box-shadow for visual effects. Read the tutorial on how this was constructed if you’d like to learn how this was developed.

7. CSS3 Music Player Menu

CSS3 Music Player Menu

With HTML5’s <audio> and <video> APIs, which will enable us to utilize multimedia without dependence from proprietary plugins, we’ll eventually have a need for GUIs that provide our users with controls for the media we serve them. Though we could use static images in conjunction with other HTML elements (such as buttons) to build these interfaces, using just HTML and CSS to render media controls mean we’ll have a more malleable solution. This user interface for a music player was built using only CSS3 (gradient, border-radius, box-shadow and all that good stuff). Read the explanation on how this was contructed in this tutorial.

8. Sliding Vinyl with CSS3

Sliding Vinyl with CSS3

This demonstration, found in the ZURB Playground, takes vinyl album covers that, when hovered on, animates the sliding out of a vinyl record that contains additional controls ("more information" and "play"). This proof of concept could one day be used as an elegant web-based interface for a site that plays music when combined with HTML5’s  <audio> API.

9. Gabriel Sharp’s Small Planet

Gabriel Sharp's Small Planet

This animated cartoon sequence depicts a fast-forwarded cycle of day and night. It works on WebKit browsers (Safari and Chrome) using the @keyframes CSS3 property for moving and transitioning PNG images.

10. Falling Leaves

Falling Leaves

WebKit presents the capabilities of CSS3’s animate property with a spectacularly smooth demonstration of falling leaves. Tip: Use your browser’s "view source" feature to read the source code of the demonstration — the code’s well documented with explanations of how it works. Read WebKit’s blog post about the animate property to get a better feel for all the possibilities.

Related Content

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

]]> http://sixrevisions.com/css/css3-demos-experiments/feed/ 15 Create a CSS3 Call to Action Button http://sixrevisions.com/css/create-a-css3-call-to-action-button/ http://sixrevisions.com/css/create-a-css3-call-to-action-button/#comments Tue, 06 Jul 2010 12:00:32 +0000 Jacob Gube http://sixrevisions.com/?p=3565 Create a CSS3 Call to Action Button

Continuing on with my previous article showing the power of CSS3 for web designers, I’m now going to share with you a method for making a slick call to action button using only CSS.

Like the last article, I’m going to take a previous Photoshop tutorial called How to Create a Slick and Clean Button in Photoshop by Six Revisions Chief Editor, Jacob Gube, and try my best to recreate it without using a graphics editor. I think doing this is one of the best ways to highlight the fact that CSS3 can make our jobs as web designers much easier.

Check out that Photoshop tutorial and let me know how close I got to recreating its final product.

Live Demo of CSS3 Call to Action Button

Here’s what we’re going to make. It’s actually live, so feel free to hover over the button (clicking on it, though, will take you to the Six Revisions front page).

If you can’t see it right below, you may have iFrames disabled, or are using a browser that doesn’t yet support these CSS3 modules.

In-Page Demo

Screenshot of Call to Action Button

Here’s how the call to action button should look like (along with its hover state in blue).

Create a CSS3 Call to Action Button

Basic HTML Markup

Okay, here we go: Let’s start with the HTML. Very simple here, just a div to contain the button and a normal hyperlink element with a class of .btn (short for "button") that will represent our call to action button. What a great reminder of what life was like before CSS!

Note: The div around the hyperlink element is not really needed for this to work, but it’s always a good idea to have a container for flexibility.

<div id="linear">
  <a href="http://www.sixrevisions.com" class="btn">CLICK THIS BUTTON</a>
</div>

Basic Markup

Basic CSS

Here we will add our first bit of CSS — just some basic styles for the normal and hover states of the button.

Note: The background colors will be superseded by CSS3 gradients later on, but it’s always good practice to have a back-up plan in case the user is using a browser that doesn’t support CSS3.

a.btn {
  width: 250px;
  padding: 10px 25px 10px 25px;
  font-family: Arial;
  font-size: 16px;
  text-decoration: none;
  color: #ffffff;
  background-color: #98ba3f;
}

a.btn:hover {
  background-color: #245191;
}

Basic Styles

Give the Button a text-shadow CSS Attribute

In this step, we give our call to action button text a subtle text shadow. This actually isn’t CSS3, but it’s also not a highly used CSS attribute.

We make the color of the text-shadow attribute different for the normal state and the hover state (using the :hover pseudo-class).

a.btn {
  text-shadow: -1px -1px 2px #618926;
}

a.btn:hover {
  text-shadow: -1px -1px 2px #465f97;
}

Give the Button text-shadow

Give the Button a Thin Border

Let’s add a thin, 1px border to both button states to make the button a bit more interesting.

a.btn {
  border: 1px solid #618926;
}

a.btn:hover {
  border: 1px solid #0f2557;
}

Since up to this point we have only used CSS2 specs, this is how our call to action button will look like (degrade) in older web browsers.

Give the Button 1px Borders

Round the Corners with CSS3

Alright, here’s where things get interesting. We are going to use CSS3 to add a subtle rounded corner effect to the button.

Using browser vendor prefixes (e.g. -moz- for Mozilla browsers), we can add a 3px border-radius attribute to the .btn class that will round the corners of the button.

Tip: To learn more about some CSS3 basics and why we have to use those crazy-looking vendor prefixes, check out my previous article called CSS3 Techniques You Should Know.

a.btn {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

a.btn:hover {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

It’s not a huge change, but it looks more interesting. Agree?

Give the Button 1px Borders

Add CSS3 Gradients

In this final step, we add in the styles that really make this button come to life.

We implement the background gradients that give the button its characteristic slick/modern look. We need a starting and ending gradient color, as well as a stop color in between.

I’ll admit, the WebKit version (which affects Apple Safari and Google Chrome) looks pretty complicated. I’ve seen numerous ways of creating gradients for WebKit-based browsers, but none of them seem to be as simple as Mozilla browsers’ method.

a.btn {
  background: -moz-linear-gradient(#98ba40, #a6c250 35%, #618926);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #98ba40),color-stop(.35, #a6c250),color-stop(1, #618926));
}

a.btn:hover {
  background: -moz-linear-gradient(#245192, #1e3b73 75%, #12295d);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #245192),color-stop(.75, #1e3b73),color-stop(1, #12295d));
}

Here’s what it should look like (I’d say it’s pretty close to the original Photoshop tutorial that this is based off of).

Gradient

All the CSS Together Now!

Here is our complete CSS for the .btn class.

a.btn {
  width: 250px;
  padding: 10px 25px 10px 25px;
  font-family: Arial;
  font-size: 16px;
  text-decoration: none;
  color: #ffffff;
  text-shadow: -1px -1px 2px #618926;
  background: -moz-linear-gradient(#98ba40, #a6c250 35%, #618926);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #98ba40),color-stop(.35, #a6c250),color-stop(1, #618926));
  border: 1px solid #618926;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

a.btn:hover {
  text-shadow: -1px -1px 2px #465f97;
  background: -moz-linear-gradient(#245192, #1e3b73 75%, #12295d);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #245192),color-stop(.75, #1e3b73),color-stop(1, #12295d));
  border: 1px solid #0f2557;
}

Finished!

There you have it! With a relatively low number of styles, we get a button that looks quite similar to the Photoshop version. If you weren’t already as excited as I am about CSS3, then hopefully this article will encourage you to explore and use this next iteration of CSS.

Gradient

More CSS3 Reading

Read these other articles and tutorials to learn more about CSS3.

Download Source Files

Related Content

About the Author

Andrew Roberts is a Christian with a passion for web design and development. His web interests focus mostly on HTML/CSS, JavaScript, & PHP/MySQL. When he’s not glued to the computer, he’s spending time with his girlfriend Kaitlynn, photographing animals, or reading. His goal is to attend graduate school for Biblical Studies & Ministry.

]]> http://sixrevisions.com/css/create-a-css3-call-to-action-button/feed/ 29 Saving Bandwidth and Improving Site Speed Using CSS Sprites http://sixrevisions.com/css/css-sprites-site-speed/ http://sixrevisions.com/css/css-sprites-site-speed/#comments Sat, 03 Jul 2010 09:41:02 +0000 Jacob Gube http://sixrevisions.com/?p=3552 Saving Bandwidth and Improving Site Speed Using CSS Spites

As a site owner, possibly the worst experience that you could serve upon your visitors is a frustrating wait whilst the clock spins and the page loads. In most cases, most of your potential customers would have pressed the back button in their browser and headed off somewhere else; this inevitably means a loss of potential business.

Site speed is predicted to become one of Google’s next ranking factors, although as per normal, the company tends to keep the nitty-gritty close to its chest.

In a presentation in Las Vegas, when pressed on the subject of site speed integration into the Google search ranking algorithm, Matt Cutts, member of the Search Quality group at Google and a highly-regarded person in the SEO community, described this as one of his "what to expect in 2010" bullet points. He went on to explain that the company wanted search to be "real fast, as if you are flipping through a magazine."

What all of this should tell us is that if you wish your site to be user-friendly and well-positioned within the ranks of the major search engines, then you should be looking at ways to improve your web page performance. Apart from the myriad of options displayed in Google Webmaster Tools, including consolidating and compression of external files, and checking for broken links on your website, I would recommend looking at the way you use images. One of the best web design techniques out there is the use of CSS sprites.

What are CSS Sprites?

It may be a common misconception that a sprite implies a series of small images. The opposite, in fact, is the truth — a CSS sprite is one large image.

You may be aware of the CSS technique of displaying an "on/off" state for a button which is contained within a single image and positioned using the background-position CSS attribute on :hover (see the tutorial on a button that uses CSS sprites). CSS sprites are basically the same concept: The image is displayed on the page using the coordinates specified in your CSS, and only this area will be visible.

It is easy to believe that a number of small images are likely to be less heavy in total file size than one containing all of the images positioned together. But even if you may have images that are only a few bytes in size, each one is giving your web server unnecessary work to do by sending an HTTP request. Each request contains a portion of overhead information that uses valuable site bandwidth.

Using CSS sprites can reduce the number HTTP requests and can make the web page seem more responsive because all interface elements are already downloaded before the user handles them. This technique can be very effective for improving site performance, particularly in situations where many small images, such as menu icons, are used.

Building a Basic CSS Image Background Sprite

Let’s discuss this topic using an example. Using Photoshop, I created a document with a series of images (logos of companies) and divided the area into chunks of 100 pixels (see the images below). I saved the file and named it logos.jpg.

I used 100-pixel measurements between logos for the purposes of illustrating the concept in this article and because this was a convenient distance to move the position of the CSS background image each time when manipulating the coordinates in my CSS (you should be more accurate when actually applying CSS sprites to reduce its file size further).

The CSS background image is focused on displaying only the first logo as defined by the green border — the coordinates of which are y = 0 and x = 0.

What are CSS Sprites?

To position them, we use the background-position attribute.

What are CSS Sprites?

To display the second image alongside the first, all that is necessary is to adjust the coordinates on the x-axis.

Because of the way we have constructed the image (at 100-pixel intervals), all we need do is add a line of CSS advancing the x-axis by 100 pixels to display each logo.

CSS for the CSS Background Sprite

#logos {height: 64px; margin: 0; padding: 0; position: relative;}

#logos li {background: url(/logos.jpg) no-repeat top left; margin: 0; padding: 0; list-style: none; position: absolute; top: 0;}

#logos a {height: 64px; display: block;}
// First logo
#logos li a.jaz {background-position: 0 0}
// Second logo
#logos li a.iberotel {background-position: 0 -100px;}
// Third logo
#logos li a.solymar {background-position: 0 -200px;}
// Fourth logo
#logos li a.travcotels {background-position: 0 -300px;}
// Fifth logo
#logos li a.intercity {background-position: 0 -400px;}

The Results of Using CSS Sprites

The Results

In the example above, it was possible to reduce the file size from 52kb to 22kb and the number of HTTP requests from 5 to 1. This represents a good saving, and is only one small section of a web page!

Our new CSS sprite method tests well in most modern browsers.

Further Reading on CSS Sprites

Here is a list of suggested reading resources about CSS sprites.

References

  1. Usage share of web browsers (May 2010)

Related Content

About the Author

Peter Richards is a SEO engineer based near Brighton in the UK. He has also spent time as web designer and front-end developer (HTML, CSS, JavaScript). If you wish to connect with him, you can follow Peter on Twitter as @pgrichards.

]]> http://sixrevisions.com/css/css-sprites-site-speed/feed/ 36 Sexy Tooltips with Just CSS http://sixrevisions.com/css/css-only-tooltips/ http://sixrevisions.com/css/css-only-tooltips/#comments Wed, 16 Jun 2010 10:48:38 +0000 Jacob Gube http://sixrevisions.com/?p=3439 Sexy Tooltips with Just CSS

Providing supplementary information about potentially complex elements of a user interface is a central part of any website designer or developer’s workflow in creating usable and accessible websites.

One of the most common mechanisms for providing extra details beyond what you can see on the page is the tooltip (a design pattern for showing tips about a particular element on a screen).

While many innovative solutions exist using CSS and JavaScript (with and without JavaScript frameworks like jQuery), it’s sometimes useful to look towards new technologies to examine the impact they may have on our current techniques.

Thus, we’re going to look at how using the evolving CSS standard can enhance some lovely cross-browser tooltips.

Demonstration of the Sexy Tooltips

Check out the demo page of the pure CSS tooltip we’ll be creating.

Download the Sexy Tootips Source Files

If you’d like the source code to use and follow along, download it below.

Tooltips are Terrific!

Whether you need to explain an abbreviation or acronym, to define a word or if you simply want to give additional details based on what someone hovers over, tooltips provide a simple but effective solution.

From the little yellow block of text that appears over elements such as images with a title attribute (or the alt attribute if you’re unfortunate enough to use Internet Explorer), right down to the CSS and script-powered solutions that exist, they’re fantastic devices that unfortunately seem to get little interest from the design community.

WikipediaMost browsers have a default style of tooltip, though it’s not very pretty.

Leveraging Progressive Enhancement in Tooltips

As standards rapidly evolve and support for new techniques appear within browsers on a more consistent basis, the advances of CSS allow us to produce tooltips (which serve as a replacement for the somewhat boring browser defaults as shown in the image above) to a brand new level of detail and beauty.

If you already use a jQuery-powered example — fear not! — there are still many things JavaScript can accomplish which CSS cannot (like adding a delay on when tooltips disappear), but highlighting the ways we can use CSS to better equip our designs may inspire you to create some beautiful solutions of your own, outside of tooltips.

There are many existing solutions for tooltips you can choose between.There are many existing solutions for tooltips you can choose from.

What We’re Going to Make

In this example, we are going to be producing a pure CSS tooltip mechanism that is aesthetically enhanced using CSS3 (rather than using it to achieve some higher purpose).

What this means is that it will work on browsers that don’t support CSS3 (such as Internet Explorer 8 and below) — it just will not look as pretty. This concept is known as progressive enhancement.

Subtle effects such as the colors, fonts, imagery and border you give your tooltip may differ depending on the end user’s machine (such as their browser, installed fonts or monitor contrast).

CSS3 Extras

Using simple yet effective extras like the now well-established border-radius property and the box-shadow property will give what used to be a generic-looking "boxy" popups a new and more sophisticated visual appearance.

Under the Hood

As always, it makes sense to get some basic code down in your chosen source code editor and we shall begin with the HTML source code for our examples.

Different Types of Tooltips

For the benefit of giving you enough ideas to build upon or implement directly into your own work, we shall produce five different tooltips.

Each will look very similar in order to maintain a standardised appearance, but you should feel free to experiment further and continue evolving these techniques.

You can see how pretty a tooltip can actually be, much better than the default!You can see how pretty a tooltip can actually be, much better than the default at least!

Cross-Browser Compatibility

This mechanism should work across all browsers, however, if you feel the need, you can tweak it to better suit your own requirements.

Basic Markup

On the code block below, we have a generic XHTML 1.0 template with the usual <head> elements that are required.

As we add the CSS into the design, it’s worth pointing out right now that for the purpose of this tutorial, the CSS will be embedded into the document using the <style> tag.

Separating structure from style is (of course) important, I highly recommend putting your CSS into a separate stylesheet in production usage.

For ease of discussion, I decided to place the styles inside the HTML document.

I also highly recommend that if you feel that adding jQuery or other JavaScript enhancements may assist the usability of this lovely eye candy, feel free to do so!

HTML Markup

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>ToolTips Example</title>
</head>
<body>
<h1>Examples of CSS ToolTips!</h1>
<p>Here are some examples of a <a class="tooltip" href="#">Classic<span class="classic">This is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own!</span></a>, <a class="tooltip" href="#">Critical<span class="custom critical"><img src="Critical.png" alt="Error" height="48" width="48" /><em>Critical</em>This is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own!</span></a>, <a class="tooltip" href="#">Help<span class="custom help"><img src="Help.png" alt="Help" height="48" width="48" /><em>Help</em>This is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own!</span></a>, <a class="tooltip" href="#">Information<span class="custom info"><img src="Info.png" alt="Information" height="48" width="48" /><em>Information</em>This is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own!</span></a> and <a class="tooltip" href="#">Warning<span class="custom warning"><img src="Warning.png" alt="Warning" height="48" width="48" /><em>Warning</em>This is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own!</span></a> CSS powered tooltip. This is just an example of what you can do so feel free to get creative and produce your own!</p>
</body>
</html>

Within the above code, you will notice that we have a heading (<h1>) element (nothing special so far) and a paragraph (<p>) of text which contains some anchor  (<a>) elements (with a class value of tooltip).

Why Use Anchor Tags for Tooltips?

The reason why anchors rather than abbr, dfn or another element like span is used at this level is due to IE6’s total lack of support for the :hover pseudo-selector beyond anchor elements.

Therefore, for compatibility reasons I recommend using <a>, though if you don’t like IE6, you can change it.

Each anchor also contains a span with the content of the tooltip.

With some basic HTML code, things don't look or function as they will end up.With some basic HTML code, things don’t look or function as they will end up.

The anchor effectively acts as a point of reference for the hover effect to occur within, and as we add style into the document, the content of the spans will be hidden off-screen until they’re required.

Each span in this example either has a class value of classic (denoting a general tooltip) or custom (with critical, help, info or warning to match denoting the color scheme to use).

Those using the custom style also have a couple of bonus features like the em element (denoting the overview text) and an image proceeding it (which acts as the icon for the tooltip, you can even use your own images).

Basic CSS

As you will now have the HTML on the page, it’s time we make these tooltips do their job (rather than spanning the page as normal linked text).

By adding in the code block below into your <head> element, you will give each link containing a tooltip a nice dotted underline (differentiating it from normal links which typically have a standard solid underline) and a help cursor (again for visual differentiation).

It’ll also remove the outline and set the color (so it feels less like a link and more like a general hover element).

The second bit of code simply hides the tooltips off-screen until their needed.

Easy as pie!

Basic CSS Styles for .tooltip Class

<style type="text/css">
.tooltip {
  border-bottom: 1px dotted #000000;
  color: #000000; outline: none;
  cursor: help; text-decoration: none;
  position: relative;
}
.tooltip span {
  margin-left: -999em;
  position: absolute;
}
</style>

Web Accessibility Considerations

On a note about maintaining accessibility: the outline is removed visually as the link is effectively redundant — it’s only included for the purpose of compatibility with old versions of IE.

Therefore, the outline itself isn’t needed to show that the tooltip is a clickable link unless you want it to be, in which case I advise removing that bit of code.

Also for the benefit of screen readers, the tooltip contents are being moved using a negative margin rather than using display: none or visibility: hidden as some screen readers may ignore the content – which would be bad news for screen reader users.

It's amazing what a bit of CSS can do; now the page appears ready to host the tooltips.It’s amazing what a bit of CSS can do; now the page appears ready to host the tooltips.

CSS for Displaying the Tooltips

At this stage, hovering over the links will do nothing.

Soon we will have a functioning tooltip that will look about the same through whichever browser you prefer to use, but for now, it’s time to place the next lines of CSS code in below what you already have.

By adding in the code block that follows, you should have a mechanism that works and displays the tooltips, though it will look very bland and will have little to no appeal (visually) apart from the fact that everything is contained within a box-like shape (which sets the standard for future code to customise further).

CSS for Showing the Tooltips

.tooltip:hover span {
  font-family: Calibri, Tahoma, Geneva, sans-serif;
  position: absolute;
  left: 1em;
  top: 2em;
  z-index: 99;
  margin-left: 0;
  width: 250px;
}
.tooltip:hover img {
  border: 0;
  margin: -10px 0 0 -55px;
  float: left;
  position: absolute;
}
.tooltip:hover em {
  font-family: Candara, Tahoma, Geneva, sans-serif;
  font-size: 1.2em;
  font-weight: bold;
  display: block;
  padding: 0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em; }
.custom { padding: 0.5em 0.8em 0.8em 2em; }
* html a:hover { background: transparent; }

Star HTML Hack Necessity

You may have noticed that the very last line of code above uses the HTML star hack to apply a transparent background to IE6. Why was this included?

Well, while testing the tooltip, I encountered a strange quirk where the hover pseudo was not obeyed unless a background reference existed!

A lot of CSS later, we have something that functions generally as a tooltip!A lot of CSS later, we have something that functions generally as a tooltip!

With the above code in place, everything works and is visible on the page. But it’s hard to read because there’s no color scheme that pulls the contrast out from the page and that’s something we need to fix right now to make them usable.

CSS for Giving the Tooltips Some Color

The below code will give each of the five styles of tooltip a color scheme which fits the icon (if one exists).

Upon giving your page a quick refresh and hovering over one of the links, you’ll see a pretty tooltip that looks and works equally across the various web browsers.

Though as you will soon discover, there’s a bit more to the story still to come!

CSS for Color Scheme

.classic { background: #FFFFAA; border: 1px solid #FFAD33; }
.critical { background: #FFCCAA; border: 1px solid #FF3334; }
.help { background: #9FDAEE; border: 1px solid #2BB0D7; }
.info { background: #9FDAEE; border: 1px solid #2BB0D7; }
.warning { background: #FFFFAA; border: 1px solid #FFAD33; }

With what you already have (as mentioned above), you’ll have something a bit basic, but that looks good and does its job in giving you a colourful tooltip that you can give your website design.

CSS3 for Progressive Enhancement of Sexiness

Before we leave the example, it’s worth bringing up CSS3 as we can (literally) take the edge off our tooltips, making it feel a bit less boxy using border-radius and give it a bit of extra depth using the box-shadow property.

Because neither of these elements is globally supported, it won’t work for every browser, but for those that it does work within, they’ll look a lot sleeker and sexier!

Much better! A little style gives the tooltip a visually unique appearance.Much better! A little CSS3 gives the tooltip a visually unique appearance.

Add the below code into the .tooltip:hover span selector and refresh the page.

The visual effect of the border, shadow and opacity will help lift the tooltips from the page, and that may well make the information and contrast a bit easier to read.

You’ll see that not only are the official CSS3 properties provided but the Mozilla and WebKit proprietary extensions too.

It’s worth pointing out that this means your code may not validate (even though it’s an acceptable bending-of-the-rules scenario), but the experience benefit your visitors will get may well be worth the lack of validation.

Additional CSS for Modern Browsers

border-radius: 5px 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);

Using some CSS3 properties, we can improve upon the existing CSS code.Using some CSS3 properties, we can improve upon the existing CSS code.

Food for Thought

As this tutorial shows, it doesn’t take much in the way of visual eye candy to give our readers a better experience.

While this style of tooltip may have been done before, adding flourishes like image-based icons, CSS3 effects and perhaps the odd bit of opacity (and typography) can help you go beyond a boxy (and rather ugly or limited) tooltip to have something a bit more elegant and pretty.

When using CSS, the key to any successful implementation is ensuring the experience degrades gracefully and what you do implement is done tastefully and with subtle enhancements.

Giving your website a few useful tooltips to notify users of the meanings of certain terms or words, explaining a general concept you talk about, or even to provide some meaningful alternative details can not only give your content some added context but it may well help your readers get more from the experience you offer them.

Perhaps the greatest thing the future of CSS offers us is a fresh opportunity to restudy and rethink our craft to better meet our users’ needs. I certainly recommend taking this example’s opportunity to look for other ways to give your content an added layer of interactivity.

Related Content

About the Author

Alexander Dawson is a freelance web designer, author and recreational software developer specializing in web standards, accessibility and UX design. As well as running a business called HiTechy and writing, he spends time on Twitter, SitePoint’s forums and other places, helping those in need.

]]> http://sixrevisions.com/css/css-only-tooltips/feed/ 50 The Essential Guide to @font-face http://sixrevisions.com/css/font-face-guide/ http://sixrevisions.com/css/font-face-guide/#comments Tue, 08 Jun 2010 10:00:46 +0000 Jacob Gube http://sixrevisions.com/?p=3408 The Essential Guide to @font-face

Fonts on the Web

The days of being limited to a handful of fonts on the web are very close to being a thing of the past. The problem is no longer a lack of viable solutions, but rather, an abundance of them.

Technologies like Cufon, sIFR, FLIR and @font-face all represent different groups of developers placing bets on what they believe to be the future of web typography.

There is, as of yet, no consensus in this ever-evolving game. All of these methods have perfectly valid arguments both for and against their use.

Further, even the most popular browsers support each of these technologies in widely varying degrees.

However, the @font-face CSS method is among the strongest, simplest and most flexible competitors in this game. It seems to be the current rockstar of the bunch, garnering all the attention and causing a number of sites to pop up offering both free and premium fonts in support of it.

This guide will teach you how to implement @font-face with cross-browser compatibility and will also look at a number of the supporting services that have arisen, making it even easier to use custom fonts in your web designs.

Licensing and Free Fonts

Font licensing presents one of the largest headaches and stumbling blocks to great typography on the web.

Naturally, font foundries would like to be paid for their work and therefore place strict restrictions on the use of their fonts.

These foundries have teamed up with various premium @font-face solutions that we’ll discuss later in the article, but for now, we’ll just dodge the licensing problem completely by using a free font.

The web font licensing problem has caused a major rise in the popularity of sites offering quality free fonts. Among these, the two that I like the best are Font Squirrel and Fontex. These sites both provide tons of great resources absolutely free and even share many of the same font choices.

The Basic Syntax

@font-face only requires a few lines of CSS and is therefore very easy to use without any third party tools.

To get started, stop by one of the free font sites mentioned above and download Chunkfive (or any other font you like).

Once you’ve downloaded the font, place the font file in the root directory of your web page.

Now, go into your stylesheet and insert the following code: 

@font-face {
	font-family: Chunkfive;
	src: url('Chunkfive.otf');
}

This snippet gives the custom font an identifier for the rest of your CSS and then points to the font file to use when this identifier is mentioned.

The first line in my code sets an identifier of “Chunkfive” to the font. It’s best to keep things simple by always using the font name, but you can ultimately use any name you want. “MyReallyCoolFont” would work just as well as long as you refer to the font elsewhere using the same name.

The second line tells the browser that when “Chunkfive” is called, it should load the font Chunkfive.otf file from the url mentioned. This url is simply wherever you choose to place your fonts file. If you had placed Chunkfive in a folder called Fonts, this attribute would’ve read url(Fonts/'Chunkfive.otf').

When you want to use that font anywhere in your site, simply build a font stack like you would normally, using your custom font identifier at the beginning.

font-family: Chunkfive, Georgia, Palatino, Times New Roman, serif;

It’s important to set up these fallbacks in case the custom font doesn’t work for some reason.

Make sure to test your design in at least one of your fallback fonts to ensure that it doesn’t cause your layout to break.

Depending on your browser, this should give you a page with a working custom font.

The text should load immediately, is fully selectable and should work with copy/paste computing functions (a limitation of of other font replacement techniques).

screenshotA screenshot of using Chunkfive on a block of HTML text.

Cross-Browser Compatibility

It would be nice if using custom fonts online were that easy, but it isn’t.

Of course, we can’t possibly expect all the browsers to play nice and agree on a given solution! That would just be unreasonable.

Instead, all the major browsers have decided to go their own way with font formats that they choose to support[1].

  • Internet Explorer only supports EOT
  • Mozilla browsers support OTF and TTF
  • Safari and Opera support OTF, TTF and SVG
  • Chrome supports TTF and SVG.

Further, mobile browsers like Safari on the iPad and iPhone require SVG.

Confused yet? You should be. Fortunately, there are brilliant developers that have worked this all out for you by developing simple systems to follow.

The most popular method of utilizing @font-face across multiple browsers seems to be Paul Irish’s Bulletproof @font-face syntax.

Using Irish’s method, you include multiple versions of the font so that it works on all browsers.

In addition, the code contains a little trick that ignores locally-installed fonts with the same name. Though it is much faster to load a local font, it’s been largely agreed upon that doing so can often have messy results[2].

Let’s take a look at the Bulletproof Syntax using Chunkfive:

@font-face {
	font-family: 'ChunkFiveRegular;
	src: url('Chunkfive-webfont.eot);
	src: local(‚ò∫'),
			 url('Chunkfive-webfont.woff') format('woff'),
			 url('Chunkfive-webfont.ttf') format('truetype'),
			 url('Chunkfive-webfont.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;
}

As before, we first declare an identifier for the rest of our code.

Next, we refer to the EOT version of the font for IE. If the browser is not IE, it will ignore this and move down the line until it finds a font type it can actually use.

The src:local bit is the local font trick I mentioned above. It essentially tells the browser to use a fictional font name that won’t be present on your machine so there is no mess from the wrong font being displayed.

Finally, setting the font-weight and font-style to normal here will ensure that all browsers default to the same values. This makes it so that you can apply a faux bold or italic style later in the CSS. Without this snippet, Webkit browsers will ignore any weight or style commands.

Keep in mind that font rendering can vary widely across browsers and operating systems. Many developers have experienced such poor results from Windows and Internet Explorer that they avoid using custom fonts altogether. Always be sure to examine your results closely on all the browsers that you can to decide if the quality is acceptable.

Where Do I Get All Those Font Types?

You’ve probably noticed that the method above requires you to have at least four different versions of every custom font that you use. Many font sources, such as Fontex, will frequently only provide one file type in a download. So what do you do when you only have a single font file?

Font Squirrel

The answer is to add Font Squirrel to your list of new favorite sites. Font Squirrel offers tons of free @font-face kits that are essentially a one-click download for everything you need to get going with custom, cross-browser compatible fonts.

Each kit includes all the font types you need as well as demo HTML and CSS files to get you started.

All you need to do is download the kit, grab the font files and CSS snippet, and you’re ready to go! The CSS used by Font Squirrel is based on Paul Irish’s bulletproof @font-face syntax shown above so you can be confident that it’s the best method currently available for ensuring compliance for as many users as possible.

@font-face Kit Generator

What if FontSquirrel doesn’t have the kit you need? No problem. If you have a font that you obtained from another source, simply stop by the Font Squirrel @font-face kit generator. All you do is upload your font file and this amazing tool will automatically convert it to all the necessary file types and generate a kit for you to download.

Note that using the @font-face Kit Generator means that you’re guaranteeing that you have the rights/license to convert and embed the font files you upload to the site.

This service is completely free and you can use it with zero sign up.

screenshot

Popular @font-face Services

As I mentioned at the beginning of this article, several services have popped up offering both free and premium solutions for simplifying the @font-face process.

Below is a list of some of the most popular services currently available.

Google Font API

screenshot

The Google Font API is one of the easiest and newest solutions for inserting custom fonts into your designs.

Using this API, you simply choose a font from the Google Font Directory and grab a snippet of code to insert into the <head> tag of your HTML documents. Afterwards, you can refer to the font in your CSS just like any other font you use normally, no @font-face CSS required (it takes care of all this behind the scenes).

All of the fonts in the Google Font Directory are free and open-source. The downside is that there are currently less than twenty options available. The Google Fonts API also neglects to include an SVG version so there is currently no support for mobile devices.

Read the Six Revisions guide on using Google Font API.

TypeKit

screenshot

TypeKit was one of the first services to launch dedicated to making @font-face easier to implement. The TypeKit team has partnered up with font foundries from all over the world to provide hundreds of excellent fonts with zero licensing complications for as long as you use the service.

There is a free trial plan that allows you to use a limited number of fonts on a single website.

Paid plans range from $24.99 per year for two sites all the way to $99.99 per year for an unlimited number of sites.

Typotheque

screenshot

Typotheque allows you to purchase any of their fonts for web use. The nice thing about this service is that instead of a yearly plan, there’s only a one-time fee for purchasing the font. Once you purchase the font you want, just copy and paste the provided CSS and you’re done!

Fonts Live

screenshot

Fonts Live is yet another service that takes care of the complicated licensing hassles while bringing you hundreds of high-quality fonts from the best designers and foundries.

With Fonts Live, you purchase each font individually and pay a yearly subscription fee for the use of the font. Once you purchase the font, you are provided with the simple code snippets necessary to embed the fonts into your site.

Kernest

screenshot

The Kernest system is nearly identical to that of the Google Font API. Simply find a font you like, grab the link to embed into the <head> tag of your HTML documents and you’re all set to start using the font in your CSS.

Kernest has lots of both free and premium fonts available. Unfortunately, the browsing system on Kernest.com attempts to load lots of these fonts simultaneously and can therefore be painfully slow and difficult to use. Prepare for a browser crash if you stumble onto a page with too many font previews.

Wrapping Up @font-face

You should now be fully armed to begin using beautiful custom fonts in your web designs. Using just a few lines of CSS and a free web service (or host your own files as outlined above), you can generate your own @font-face kits that work on most major browsers and won’t cost you a dime to implement.

If the free solutions don’t provide enough options and thinking about font licensing gives you a headache, check out the services above that take care of the complicated legal stuff, and even most of the code, making it extremely simple for you to use premium fonts online.

References

  1. How to Achieve Cross-Browser @font-face Support
  2. @font-face gotchas

Related Content

About the Author

Joshua Johnson is a Graphic Designer/Web Designer with over six years of experience working with a major international marketing agency. He is also the Editor of Design Shack, a web design and development blog. Check out his recent work and follow him on Twitter: @secondfret.

]]> http://sixrevisions.com/css/font-face-guide/feed/ 48 Semantic CSS3 Lightboxes http://sixrevisions.com/css/semantic-css3-lightboxes/ http://sixrevisions.com/css/semantic-css3-lightboxes/#comments Wed, 26 May 2010 11:00:28 +0000 Jacob Gube http://sixrevisions.com/?p=3345 Semantic CSS Lightboxes

The rise of jQuery, MooTools, and JavaScript frameworks has given many web designers a new lease on life, adding more unique functionality into their sites.

Most notably among the various cool and interesting features you can find being injected into a design is the humble lightbox (modal window).

If you’ve ever come across a link or image which — upon clicking — increases in size and where the rest of the screen gets "shaded" to focus on the content, you’ll know what I’m talking about.

This tutorial aims to showcase a method of displaying content based on the lightbox, which is web accessible and (excluding Internet Explorer) will require no scripting at all. Sound like fun? Well, let’s explore the subject further!

Demonstration

Click the preview image below to see a live demonstration.

Demonstration

What About Scripting?

There’s a lot to be said about the benefits of using client-side scripting for this. While we are certainly not in the cut-and-paste era that leads to the kind of crimes against JavaScript many coders would like to see punished, we do, to this day, still have an uncomfortable reliance on scripts and frameworks in order for our websites to function.

Perhaps it seems a little hypocritical in this instance for me to critique the use of scripting (as Internet Explorer users will require scripting enabled to use this functionality), but like all things, we sometimes need to compromise our code to ensure compatibility (especially with that browser)!

Why Not Just Use JavaScript?

In the sense of the current scripting frameworks, I’m not going to say that they are inherently bad because the likes of jQuery often gracefully degrade with good levels of success — you guys can put away the knives and flame-lit torches now!

However, the sad facts are that, due to security issues, widespread abuse and the intrusive potential of client-side scripting, it’s quite easy to understand why a large number of people do not (or cannot) make use of scripting.

Therefore, a solution is required. And hopefully for you CSS3 fans, you’ll find this simple, easy-to-use code to be a welcome improvement.

Browser Support of this CSS Lightbox

To give you a quick introduction before we begin producing the code itself, it’s worth mentioning that I’ve tried the code in a variety of browsers and can say for sure that it works in all recent versions of Mozilla Firefox, Google Chrome, Apple Safari and Opera (which is all great news).

With a little bit of unobtrusive scripting that replicates the CSS3 techniques, it’ll also run smoothly within IE 6, 7 and 8.

The other fantastic news is that current test versions of IE9 support CSS3, so this may very well be the best JavaScript-free solution there is in the near future.

Browser Support of this CSS LightboxInternet Explorer is the usual culprit when it comes to lacking in standards support.

Magic Markup!

To begin our quest for a much more compatible lightbox, the first thing we need is some general HTML markup.

Much of the below won’t surprise you in the slightest as it’s pretty standard. However, for this example, and to showcase how durable this cool method is, we’ll produce three individual lightboxes.

One will be for an image, one will be for a block of scrollable content and the final one will hold a YouTube video. What more could you ask for?

To begin, let’s create the basics and have three fragment links which will go to the correct lightbox (you’ll learn how a bit later on).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>CSS Lightbox</title>
</head>
<body>
<h1>CSS Lightbox</h1>
<p>You can use this fantastic solution to create lightboxes for not just <a href="#image" title="Image Lightbox">images</a> but rich, semantic <a href="#content" title="Content Lightbox">content</a> and <a href="#video" title="Video Lightbox">video's</a> as well!</p>
</body>
</html>

Magic Markup!Not much going on at this stage, a simple HTML document with extra links.

So far, things are pretty simple; you have a heading and paragraph with some links that, upon clicking, will currently do nothing.

The next stage in the process, however, is all important.

We need to add the container for each lightbox to appear within and give them their appropriate values.

To give you an idea as to how each of the three lightboxes work, you’ll need to examine (and add) the code into your source code editor.

To better understand how it works, let’s talk about each item individually.

<div class="lightbox" id="image">
<div class="w300 h60">
<img alt="Six Revisions" height="98" width="255" src="logo.jpg />
</div>
<p class="close"><a href="#" title="Close This Image Lightbox">Close <span>X</span></a></p>
</div>

Each lightbox you wish to provide will require a div element container that contains the id attribute you wish to link too. That id will reference what you’ll need to attach to the href anchor to start the navigation process, not forgetting you’ll also need the lightbox class value on each you include.

Are you with me so far? Good!

Once you have the container that references the lightbox, you’ll need to include both a div (which will hold the lightbox content and will have the width and height declared through class values like in the above) and a paragraph with an anchor to act as the "shader".

Using the above source code, you should find yourself with a working lightbox that contains an image. In this example, I used the Six Revisions logo.

You can indeed link to any image of any size, taking into account the viewport space available.

A Little Bit More About the "Shader"

To better understand how this gets its visual appearance, the secondary div layer works independently from the close anchor which filters in the background. It’s essentially a cascading/tiling effect at work.

The first lightbox has appeared, and it contains an image.The first lightbox has appeared, and it contains an image.

If you look at any modern lightbox, the most common characteristic you will see is that you have a semi-transparent layer which covers over the rest of the page drawing focus to the lightbox content. Upon clicking on this layer, it will return you to the page. This is the very reason why each lightbox requires a closing anchor.

What Should the href Value Be?

The great thing is that you could even link the href to another lightbox if you wanted it to do something other than close (using the null fragment link).

What Can the divs Contain?

As for what’s inside the div, it’s entirely up to you. You can use any block or inline elements (the lightbox will house any HTML element).

In the first example, we had an image; let’s add some content within the code:

<div class="lightbox" id="content">
<div class="w60p h400 scroll">
<h2>Your Content Goes Here!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis felis suscipit tellus euismod varius quis ut nibh. Curabitur in ante nunc, vitae venenatis dui. Phasellus egestas ipsum in ipsum suscipit volutpat. Etiam eu nibh eros. Sed dolor ligula, tincidunt vitae elementum vitae, pharetra vitae eros. Cras risus lectus, aliquam vitae condimentum id, feugiat eu nisi. Cras eu sem erat, eget ultrices enim. Suspendisse feugiat fringilla massa at convallis. Quisque tincidunt, diam quis facilisis volutpat, purus orci rutrum leo, id dapibus tellus ante vel mauris. Quisque posuere, tortor in laoreet hendrerit, ipsum sem molestie nunc, et ultrices erat nulla sed dui. Donec sit amet mi sapien. Maecenas fermentum nulla eu ligula dictum id elementum nisi commodo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In ac massa quam. Suspendisse nibh nibh, condimentum a porttitor a, placerat in lorem. Sed sit amet elit eget magna condimentum posuere volutpat a neque.</p>
<p>Sed dignissim viverra neque, sit amet lobortis elit luctus ac. Proin placerat varius quam eu molestie. Pellentesque vel ante quis metus auctor convallis. Duis mattis risus ac tortor luctus in semper sem fringilla. Vestibulum consectetur iaculis risus vel rutrum. Nam scelerisque gravida felis quis egestas. Mauris vehicula nisl quis felis bibendum nec placerat neque dictum. Donec erat tortor, venenatis id consequat ut, dictum nec enim. Ut ultrices eros vel diam pulvinar aliquam. Phasellus non nisi vitae ligula imperdiet dapibus eleifend sed neque. Morbi gravida dignissim turpis eu auctor. Morbi pellentesque urna vitae nunc dictum elementum. Aliquam erat volutpat. Aenean urna nibh, pretium ut accumsan ut, luctus eget nibh. Nulla sollicitudin fermentum turpis eget rutrum. Integer dignissim dui turpis. Morbi metus libero, suscipit blandit dignissim aliquam, sodales non mi. Proin id augue odio, sit amet gravida mauris.</p>
<p>Proin a dignissim orci. Nam nec urna nisi, in blandit lorem. Nulla cursus ornare rhoncus. Nunc lectus orci, tristique et aliquet sed, venenatis et felis. Nullam sodales orci at est pharetra nec aliquam risus scelerisque. Nullam varius, nisi ut sagittis scelerisque, nulla mauris tempus magna, quis pellentesque sem erat a diam. Cras lectus est, dictum ut consequat ut, adipiscing sit amet sapien. Curabitur tincidunt varius gravida. Quisque augue sem, commodo sed molestie venenatis, cursus vehicula lorem. Praesent scelerisque, tortor a euismod malesuada, ipsum ligula semper odio, ultricies molestie sapien metus condimentum felis. Vivamus hendrerit gravida interdum. Fusce at purus eu orci laoreet lobortis. Aliquam cursus mi at tellus fringilla dictum. Sed nec libero dolor. Integer nec neque at mi malesuada tincidunt.</p>
</div>
<p class="close"><a href="#" title="Close This Content Lightbox">Close <span>X</span></a></p>
</div>

For all whom understand the value of dummies, some Lipsum content is added.For all whom understand the value of dummies, some Lipsum content is added.

Add a YouTube Video

And to round things off even further, let’s add a YouTube video into the mix:

<div class="lightbox" id="video">
<div class="w640 h386">
<object type="application/x-shockwave-flash" width="640" height="385" data="http://www.youtube.com/v/bsGEWHNJ3s8"><param name="movie" value="http://www.youtube.com/v/bsGEWHNJ3s8" /></object>
</div>
<p class="close"><a href="#" title="Close This Video Lightbox">Close <span>X</span></a></p>
</div>

Video on demand, that'll work in the lightbox too! Pretty cool isn't it?Video on demand, that’ll work in the lightbox too! Pretty cool isn’t it?

At this stage, we have completed the entire HTML file that this demonstration will use.

If you want to preview the results in your web browser, you’ll notice that as well as the heading and paragraph, there will now be the three pieces of information on the page (the image, the content block and the video), each with a "Close" link right below it.

Right on :target

At this stage, you’re probably wondering how we’re going to ensure that only the right content appears when it’s needed. And that’s a good question! We are going to use a cool CSS3 pseudo-selector called :target (which styles based on the anchor).

Perhaps you’ve come across the :target selector before, perhaps not. Basically, it cleverly allows you to apply specific style to an element if its id matches the fragment identifier, which is the hash (#) symbol followed by text usually found in page bookmarks. For example: index.html#content (you’ll see it in the address bar).

So, without any further ado, it’s time we began formatting our lightbox to perform the required task whenever this fantastic selector is activated.

You now know why we give the three links in the first piece of code those unique URLs (and gave each div a matching id).

Fragment links are best indicated by the # (hash) character at the end of a URL.Fragment links are best indicated by the # (hash) character at the end of a URL.

For the following piece of code, I’ll provide everything you need using a style element within the <head> of the document.

Generally, this is considered bad practice because all CSS styles should be separated from the structure. However, as this is simply an example and it works unobtrusively, you can easily place all of the stylistic code in an external file. For simplicity, I’ll keep it in-line.

To begin, we’ll start by adding in the easy-to-follow snippets of code such as removing the padding and margins from the document. Also, we’ll hide the lightboxes off-screen until they’re required using some absolute positioning and negative margins.

<style type="text/css">
html, body {
  height: 100%;
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
}
body { overflow-y: auto; }
.lightbox {
  left: -999em;
  position: absolute;
}
</style>

Note: It is entirely possible for you to hide your three lightboxes when they’re not in use using the property display: none. However, as this can affect how some screen reading software will interact with your page, I’ve used negative positioning to get the same effect.

With lightboxes offset, things disappear.With lightboxes offset, things disappear.

Upon refreshing your browser at this stage, you’ll notice that the three previously visible lightboxes will be hidden, which is great.

However, when you click on the links, nothing happens! Don’t worry, your lightbox isn’t broken.

All we need to do is add in the code to activate the two layers (the “close this” lightbox anchor, that gives the fade effect and the lightbox content itself).

.lightbox:target { bottom: 0; left: 0; right: 0; top: 0; position: absolute; }
.lightbox:target .close a { background: rgba(0, 0, 0, 0.75); bottom: 0; left: 0; right: 0; top: 0; position: absolute; z-index: 1; }
.close span { color: #FFFFFF; font-size: 2em; text-indent: 0; position: absolute; right: 0.5em; top: 0.5em; }
.close {text-indent: -999em;}

Keeping things simple, the above code will span the lightbox to every corner of the browser viewport using absolute positioning.

The second line of code will reinforce this code on the anchor itself and will give it a z-index (for priority over the other stuff on the page) and a background which makes use of opacity in browsers that natively support CSS3 alpha transparency.

The third line will use the span element on the "close" button to give it some emphasis for people to know that clicking in the anchor closes the lightbox.

The last line will hide the text in the faded section (for full effect).

Note: It’s worth pointing out that if your content scrolls and you wish the lightbox to follow the scroll action, you can replace position: absolute with position: fixed, however IE6 will not support it. For the example, I’ve used absolute positioning for simplicity and to showcase its potential usage.

Now when you click on a lightbox link, the transparency effect flourishes.Now when you click on a lightbox link, the transparency effect flourishes.

If you refresh your browser with the above code, you’ll notice upon clicking any element that you get that amazing faded effect which will span the entire content. And you should also have a neat little "X" button in the top-right corner just to help reinforce the effect upon clicking outside of the lightbox.

The problem now is we need to get the lightbox contents itself positioned correctly and looking great on the screen.

So below, you’ll find the last bits of CSS to align the content and offset it based on the width of the contents specified.

.lightbox:target div { background: #FFFFFF; position: absolute; left: 50%; top: 50%; z-index: 99; }
.w60p { margin-left: -30%; width: 60%; } .w300 { margin-left: -150px; width: 300px; } .w640 { margin-left: -320px; width: 640px; }
.h60 { height: 60px; margin-top: -30px; } .h400 { height: 400px; margin-top: -200px; } .h386 { height: 386px; margin-top: -193px; }
.scroll { overflow-y: scroll; padding: 0 1em; }

If you refer back to the HTML code, you’ll see that each lightbox container has class values such as w300 (for width 300px) or h400 (for height 400px) or w60p (for width 60%).

The values for each lightbox were simply calculated by measuring the width and height of the contents required and then setting the container width and height to match the dimensions.

Take for example the image we used: As that had specific width and height needs, a specific width and height was applied to the lightbox container, and for each, a negative margin for half that value was given to give it accurate centering.

Note: You may have noticed that a scroll class was also added to match the width and height classes for each lightbox.

Simply put, if you have lots of content within the container and you give it a fixed width and height, the scroll mechanism will allow it to overflow with scroll bars attached. Lovely!

Adding the next bundle of code will properly align the lightboxes content.Adding the next bundle of code will properly align the lightboxes content.

Now try refreshing the page again and — Voila! — just like magic, whenever you click one of the links, its content will load in a container, in the center of the screen.

And the fantastic thing is, it will look and function like any other lightbox. Clicking inside the lightbox will act normally, but clicking outside of it will restore the main screen (and thereby hide the lightbox contents as they’re not the fragment).

If you use Firefox, Chrome, Safari or Opera, this code will work perfectly and is a 100% pure CSS way of implementing a lightbox.

But for Internet Explorer, we (as usual) have compatibility issues to deal with!

Tip: Just imagine what you can do with these target lightboxes: You could have anything from the content shown above, right through to setting the width and height of the container to 100% and have a literal different "page" appear with overflow enabled on a single page web design. Woot!

Compatibility Crisis

Without going into a great deal of detail, the below JavaScript code has been produced to deal with Internet Explorer’s lack of support for :target (this could well be the first effective and simple solution for this issue).

As with the style, I’ve attached the content inline using <script> tags in the header, but it’s entirely graceful and can appear in an external file.

As long as the script is placed below the <style> element, you shouldn’t encounter any issues in regards to the emulation of the code.

<script type="text/javascript">
<!--
 	/*@cc_on @if (@_jscript_version > 5.6)
 	function bootup(){
 	var tds = document.getElementsByTagName("a"); lightbox();
 	for( var x=0; x < tds.length; x++ ){tds[x].onclick = function(){setTimeout(lightbox, 1);};}
 	}
 	function lightbox(){
 	var counted = document.getElementsByTagName("div");
 	for( var x=0; x < counted.length; x++ ){ if ( counted[x].className == "boxfocus" ) { counted[x].className = "lightbox"; } }
 	if (location.hash.substr(1) == "") {} else { document.getElementById(location.hash.substr(1)).className = "boxfocus"; }
 	}
 	window.onload=bootup;
 	@end @*/
 	// -->
</script>

Keeping the above code as simple as possible, it makes use of conditional comments (for JavaScript) to ensure you are using Internet Explorer (hence why it references Jscript) thereby ensuring the code will not interfere with good browsers which render correctly.

When IE is verified, and the page loads, the bootup function monitors whenever an anchor is clicked.

When this event is triggered, the lightbox function is activated and it simply applies a set of classes to the div that matches the hash (#) in the address bar (fragment link), while restoring all other lightbox instances back to the default.

Essentially it says "You’re using IE? OK. You clicked a link or loaded a page? OK. The link clicked references a lightbox? OK, let’s set that in motion and reset any others which may be active".

If you’re not too JavaScript-savvy, it may not make a lot of sense, but the code requires no user maintenance and if you use the code, you’ll just have to trust me that it’ll do the job. Except for those classes to be applied, which have the alternative to the :target stuff, we’ll need to add these into the style in the header.

And to overcome IE’s lack of opacity support, we’ll add a transparent repeating PNG image in its place.

.boxfocus { bottom: 0; left: 0; right: 0; top: 0; position: absolute; }
.boxfocus div {background: #FFFFFF; position: absolute; left: 50%; top: 50%; z-index: 99; }
.boxfocus .close a { background-image: url('trans.png'); bottom: 0; left: 0; right: 0; top: 0; position: absolute; z-index: 1; }

Those of you with eagle eyes may have noticed that the properties of the boxfocus classes, which sit in place of those using the :target pseudo, contain mostly the same properties and values as their counterparts. So you may well ask: Why not group them together?

While it may seem like a smart idea to reduce repeating code, unfortunately the default behaviour for IE and other browsers is that unknown or invalid code (as it would appear to IE) should be totally ignored and deleted. Which means, if grouped, it wouldn’t work, so we need the repeated CSS as a separate entity.

With a bit of caring JavaScript, Internet Explorer will work like any other browser.With a bit of caring JavaScript, Internet Explorer will work like any other browser.

If you now refresh the page again and open it in Internet Explorer, you will find that the lightbox should now work properly in that browser.

It may not be a perfect solution to require extra CSS and some conditional JavaScript to work the mojo, but alas, this isn’t a perfect world, so we must use it to keep things as compatible as possible.

On the bright side of things, Internet Explorer 9 has full support for target so in the future, none of that extra code will be needed.

Setting Standards

And on that note, the example is complete.

  • It’s totally semantic: with div containers and the use of any HTML elements you wish within the container
  • It’s accessible: it’ll work with screen readers
  • It’s not as dependent on scripting as the jQuery solutions and you can bookmark their behaviour
  • And — all things considered — it’s more graceful in that the future looks good for the selectors’ widespread browser support without the need of any scripting

Get Involved with CSS3. Please.

Hopefully this tutorial will inspire you to get involved in testing modern standards like CSS3 because many of these elements already have basic native support.

While there is a real need at this time to make things gracefully degrade (and this option certainly can achieve that), it’s worth highlighting that the potential for the :target pseudo-class goes far beyond lightboxes: It could remove the future need for JavaScript in single-page websites, content swapping, and other process-intensive functions.

While the need for workarounds (like the JavaScript we needed to use) won’t disappear overnight, the future of web standards is pretty bright!

Download

Related Content

About the Author

Alexander Dawson is a freelance web designer, author and recreational software developer specializing in web standards, accessibility and UX design. As well as running a business called HiTechy and writing, he spends time on Twitter, SitePoint’s forums and other places, helping those in need.

]]> http://sixrevisions.com/css/semantic-css3-lightboxes/feed/ 33 Examples of CSS3 in the Wild http://sixrevisions.com/css/examples-of-css3-in-the-wild/ http://sixrevisions.com/css/examples-of-css3-in-the-wild/#comments Thu, 20 May 2010 15:27:34 +0000 Jacob Gube http://sixrevisions.com/?p=3340 Examples of CSS3 in the Wild

Seeing CSS3 on actual functioning websites is a lot like spotting a Himalayan Snow Leopard or a Giant Panda. Because roughly 53 percent of browsers in use don’t support CSS3 (ahem, IE, ahem), most web designers just don’t use it on a regular basis. At least they don’t use it on sites they design for work. As such, most people don’t see it regularly, and if they do, it’s just a fleeting glimpse.

That’s not to say it’s not out there – again, like with snow leopards and pandas, to see CSS3 in the wild, you need to be stealthy, smart, and patient.

So, with out further ado, here are some examples of CSS3 in the wild. But please – make sure to avoid big, sudden movements. You don’t want to scare it off.

To learn more about CSS3, you should also check out these articles and tutorials:

Rounded Corners

How We Did Rounded Corners Before

By creating separate images for the corners of a box, or by using JavaScript to mask sharp edges.

How We Do Rounded Corners with CSS3

border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;

Examples of CSS3 Rounded Corners

The rounded corners on these following sites are pretty obvious and fairly simple looking, but as any web designer knows, they weren’t so simple to create without CSS3.

Twitter

Twitter

Ember

Ember

ZURB

ZURB

Text Shadow

How We Did Text Shadow Before

By creating two elements with the same text, giving one of them the shadow color, offsetting it one or two pixels, and placing it behind the main text using the z-index CSS property.

How We Do Text Shadow with CSS3

text-shadow: 2px 2px 4px #000;

Examples of CSS3 Text Shadow

The sites below each use text shadow in a different way.

Jolicloud

Jolicloud uses CSS3 Text Shadow throughout the site.

Jolicloud

A Different Design

A Different Design uses a white text shadow in the site’s name to give the text that cool "embossed" look.

A Different Design

Time2Project

Over at Time2Project, the "who," "what," and "where" menu links use text shadow to highlight themselves when you hover over them – very cool.

Time2Project

Box Shadow

How We Did Box Shadow Before

By creating an image of the box with a shadow or by using a JavaScript plugin.

How We Do Box Shadow with CSS3

box-shadow: 2px 2px 4px black;
-moz-box-shadow: 2px 2px 4px black; 
-webkit-box-shadow: 2px 2px 4px black; 

Examples of CSS3 Box Shadow

Again, with the two sites below, we can see two very different ways of using the same CSS3 technique.

camen design

At camen design, the footer stays in the same place, and box shadow is used to give the illusion of the main content area sliding underneath the footer.

camen design

CSS-Tricks 

Over at CSS-Tricks, the box shadow effect is used on pretty much every box on the site, highlighting whichever box you hover your mouse on.

CSS-Tricks 

RGBA Colors

How We Did RGBA Colors Before

By calling a PHP script within CSS, thereby tricking the browser into overlaying colors in RGBA format. In no way could this be thought of as a good way of doing things, as it leads to lots of extra code in the PHP file that you’ll never use again.

How We Do RGBA Colors with CSS3

background: rgba(150, 25, 150, 0.5);

Examples of CSS3 RGBA Colors

International Gorilla Conservation Programme (IGCP)

Check out the awesome translucent gorilla on the IGCP site. Now look slightly to the right. That box around the video player uses RGBA as a way to layer a semi-transparent container on top of the banner behind it.

International Gorilla Conservation Programme

24 ways

24Ways uses the effect throughout the site, but it’s most noticeable on the top, where hovering over the headline banner uses RGBA to increase the opacity.

24 ways

Opacity Level

How We Did Opacity Levels Before

By creating PNGs with transparency, or by using CSS filters for IE.

How We Do Opacity Levels with CSS3

opacity: 0.5;

Examples of CSS3 Opacity Levels

Changing the opacity level with CSS3 is one of the coolest ways to add to the user’s interface experience and also one of the simplest, as it takes very little code.

Bunton

At Bunton, each individual box uses opacity to show the designer’s comments about his portfolio – all that info is there all the time, it’s just got an opacity of 0 before you hover over it.

Bunton

Peaxl

Peaxl uses it even more subtly in the "subscribe" box, making the existing text fade away slowly when you click it.

Peaxl

31Three

31Three uses it on its portfolio examples as well, making each circle light up ever so slightly with your hovering mouse. Nice.

31Three

Gradients

How We Did Gradients Before

Image slice of gradient repeated as a background image.

How We Do Gradients with CSS3

background: -moz-linear-gradient(100% 100% 90deg, #1a1a1a, #808080)
background: -webkit-gradient(linear, 0 0, 0 100%, from(#1a1a1a), to(#808080));

Example of CSS3 Gradients

Philadelphia FIRST

While this example isn’t the most beautiful or breathtaking example of CSS3, it might be the most practical. By making the blue banner on top fade into a lighter blue by using CSS3 instead of an image, the site isn’t required to serve that image every time. Little things like that make a difference for a heavily-traffic site, and it shows what can be accomplished with CSS3 once it becomes the standard.

Philadelphia FIRST

@Font-face, Text Shadow, RGBA, Rounded Corner

(aka The Holy Grail of websites that currently use CSS3*)

How We Made Sites Like This Before

We didn’t.

How We Make Them Now

With CSS3. Lots of CSS3.

Examples of CSS3 Sites

The following sites are examples of what one can do with CSS3.

Of course, because CSS3 isn’t implemented in all browsers yet, and implementation of browsers that do use CSS3 can vary, not all of these will render correctly on every browser.

However, it’s an interesting look on what’s soon going to be possible in the world of web design. 

TheFella

TheFella

Mozilla Labs Jetpack

Mozilla Labs Jetpack

Footnote

*@font-face was implemented in IE5 and is part of CSS2, so it was actually modern browsers like Firefox that lagged behind in implementation.

Related Content

About the Author

Blue Derkin is a project and social media lead at InMotion Hosting in Marina del Rey, California. He also writes as Web Hosting Help Guy, InMotion Hosting’s blog dedicated to all things design, development, and web hosting. You can follow him on Twitter @WHHG_InMotion and @BlueDerkin.

]]> http://sixrevisions.com/css/examples-of-css3-in-the-wild/feed/ 24 Snazzy Hover Effects Using CSS http://sixrevisions.com/css/snazzy-hover-effects-using-css/ http://sixrevisions.com/css/snazzy-hover-effects-using-css/#comments Thu, 15 Apr 2010 09:00:17 +0000 Jacob Gube http://sixrevisions.com/?p=3004 Snazzy Hover Effects Using CSS

With all these CSS3 effects and tutorials popping up every day that show all the new and wonderful things we can make happen, we sometimes forget about poor little old CSS2.1 and the great potential it still has.

With very good browser support, we can do lots of cool things that we know will work in all major browsers.

In this tutorial, I will be going over creating flexible advanced hover techniques using CSS2.1 properties.

Here is a live demonstration of the effect we will be creating.

Advanced hover states are quite simple

When I first started learning CSS, the :hover pseudo-element was no more than a way to remove the underline on a text link.

Since then, through experimentation, I have learnt that it is so much more powerful and it can create some really cool effects when used in conjunction with other CSS properties.

One of these effects is creating caption text to appear over the top of images, creating some nice visual feedback for the user and giving them some information about the image they’ve moused over or focused on.

The astute reader will see that this technique has great potential outside of what we discuss here, such as showing CSS tool tips when hovering over a hyperlink.

We’ll be using these key CSS property, pseudo-classes, and pseudo-element to accomplish our technique:

  • content Rather than create unnecessary mark-up to display our caption, we’ll use CSS generated content to add the caption.
  • :hover, :focus Lets us show/hide the caption overlay with our mouse/keyboard.
  • :after Used in conjunction with the content property to dynamically append our caption content and layout.

Generated content is king

CSS-generated content allows us to append (:after) or prepend (:before) content to an element that can display hard-coded content, dynamic content (attr()), images (url()) and counters (counter()).

In this example, we’ll utilise the attr() function to extract the title attribute from the anchor (<a>) tag.

<li>
    <a href="#" title="Sunrise on the farm">
        <img src="img01.jpg" width="200" height="206" alt="Beautiful sunrise" />
    </a>
</li>

ul a:hover:after
{
    content: attr(title);
}

Basic image caption using generated content

As you can see from above, the mark-up is very simple and the use of the content property allows us to create some great behaviour without the bloat. All it’s doing here is getting the anchor’s title attribute value and appending the content :after the anchor.

Make it sit nice

Now that we have some simple mark-up and are now displaying our caption on hover/focus after the image, we’ll add some extra CSS to pretty up the caption and make it sit over the image, rather than beneath it.

We first do some simple styling to the containing list item. The only style required here is the relative position. Using a relative position allows us to absolutely-position elements inside the list item.

The other styles are decorative.

ul > li {
    position: relative;
    float: left;
    list-style: none;
    margin: 0 20px 20px 0;
    font-size: 10px;
}

Adding some more styles to our :hover pseudo-class, we absolutely position the CSS-generated content and give it a height, background, line height (this is the same as the height, so we can vertically-centre the text).

We also do the same for the :focus pseudo-class so someone who can’t use a mouse still gets the full experience.

ul a:hover:after,
ul a:focus:after
{
    background: rgb(255,255,255);
    bottom: 2px;
    content: attr(title);
    color: #000;
    display: block;
    font-weight: bold;
    height: 30px;
    line-height: 30px;
    position: absolute;
    text-align: center;
    width: 100%;
}

We’ll also add an outline around the image to create a nice border effect when the user focuses or hovers on it.

The reason we don’t use the border property is because outline doesn’t affect the area it "outlines", whereas border will affect the element.

ul a:hover img, ul a:focus img { outline: 3px solid #ccc; }

Basic styled caption using generated content

We now have a simple and effective caption overlay, which has very lean mark-up and some simple CSS to create an effective technique.

Let’s extend it further

We have a simple caption overlay that works nicely, but how about we add some additional styles so we can change the position of the caption very easily by adding a couple lines of CSS?

We will create a .reverse class that we can assign to any of our anchor elements that will reposition our caption to appear at the top of the image rather than the bottom.

ul a.reverse:hover:after,
ul a.reverse:focus:after { top: 0px; }

Change caption position using minimal CSS

We can also create an .offset class to position the caption in the middle or offset it by any value. The negative margin is used to pull it into the middle.

ul a.offset:hover:after,
ul a.offset:focus:after { top: 50%; margin-top: -15px; }

Another example of changing caption position using minimal CSS

A sprinkle of CSS3

Of course, I couldn’t resist using some CSS3 goodness to make it that little bit nicer. At this point, we’re just using the principles of Progressive Enhancement where browsers that are CSS3-capable will have a slightly better experience. Our effect will still work on CSS2-capable browsers (such as Internet Explorer) even after we’ve spruced it up with CSS3.

On the anchor I’ve added the CSS3 box-shadow property to create a nice drop shadow effect when the image is hover/focused on. The outline is set to none so that the dotted outline won’t appear when it’s focused on.

(Check out more CSS3 techniques.)

Normally this would be frowned upon, but since we are adequately showing that the image has focus by showing the caption, outlining the image and applying the drop shadow, it’s still obvious that the element in question has focus.

Note: It should be said that the box-shadow property has officially been removed from the W3C CSS3 draft specification for further discussion, however browser vendors appear to have no plans of removing it any time soon, if ever.

ul a:hover, ul a:focus
{
    display: block;
    outline: none;
    -moz-box-shadow: 3px 3px 5px #000;
    -webkit-box-shadow: 3px 3px 5px #000;
    box-shadow: 3px 3px 5px #000; 
}

Using CSS3 we can improve the look for the better browsers

Using the CSS3 rgba() property, we can make the background slightly opaque so that the image can be seen beneath our caption. Setting rgb before our rgba value ensures that browsers such as IE8 still show a background.

ul a:hover:after,
ul a:focus:after
{
    background: rgb(255,255,255);
    background: rgba(255,255,255,0.7);
}

We can also add a CSS gradient in Firefox 3.6, Safari 4 and Chrome 4. (See another tutorial on using CSS gradients on your web typography.)

In the gradient, we also use rgba so that we can have an opaque gradient that blends between two colours.


background: -moz-linear-gradient(top, rgba(255,255,255,0.7), rgba(204,204,204,0.7)); /* Firefox 3.6+ */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.7)), to(rgba(204,204,204,0.7))); /* Safari/Chrome */

To make the caption text pop out a little more, I’ve added the text-shadow property to give it a subtle drop-shadow on the text.

text-shadow: 1px 1px 1px #fff;

Using more CSS3 to add transparency, gradients and text shadows

Another CSS3 property that is quite useful is box-sizing, which lets us adjust how the box model works.

ul a.alternate01:hover:after,
ul a.alternate01:focus:after
{
    top: 0;
    width: 50%;
    height: 100%;
    line-height: normal;
    text-align: left;
    padding: 4px;
    font-size: 12px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

By adjusting the box model, the technique can further extend the caption by utilising box-sizing to our advantage, and so we can keep this technique as flexible as possible by making the overlay cover half the image and have the content run down the side.

With a few adjustments, it’s quite simple using this technique.

Using more CSS3 we can adjust the box model and have vertical captions

The box model—by default—adds padding and borders on top of the height that is set, and since we are setting our height to a 100%, this will essentially push out our overlay by a few pixels.

To change that behaviour, we utilise the CSS3 box-sizing property and set it to border-box. This allows us to set our percentage value and have any padding and borders calculated in conjunction with our height, so as not to push it out like it naturally does.

By default box-sizing is set to content-box. IE8 obviously doesn’t support this property, however IE’s box model naturally behaves like it was set to box-sizing: border-box and therefore doesn’t need any special treatment to work.

Mozilla and WebKit based browsers require their specific prefixes, whereas Opera supports it without any need for a prefix.

ul a.reverse:hover:after,
ul a.reverse:focus:after { top: 0; right: 0; }

We can also reverse the position of the vertical caption

With a small addition to our original reverse class, adding right: 0, we can create some reusable CSS to reverse it either horizontally or vertically without affecting either of the anchors that have the .reverse class. Depending on the caption type— horizontal or vertical—the .reverse class will handle either situation correctly.

It wouldn’t be CSS if IE didn’t do something funky

Of course, IE8—ironically, the first IE browser to support the full CSS2.1 spec—has got an issue with generated content.

Upon initial testing, I thought IE8 didn’t actually support generated content as when I hovered over the image, nothing was showing up.

After some testing and using a text colour that contrasted with the image, I noticed that the background colour wasn’t showing up, but the text was.

So then, I thought at least it still works, just not with a background. Not content with that, I investigated further and discovered that the background colour was appearing behind the image. Don’t ask me how or why this is happening.

I came up with a solution that fixes this issue and allows the CSS-generated content and its background to appear over the image like it does in the other browsers.

Basically, we give the image a relative position and set the z-index to -1 to force it under the generated content.

We then have to reset the position back to static for the better browsers as position relative causes havoc with the caption overlay. I utilised the CSS3 not() pseudo-selector—which IE8 doesn’t support—and set the position back to its default behaviour of static.

ul li img { position: relative; z-index: -1; } /* For IE8 */
ul li:not(#foo) img { position: static; } /* Reset position for better browsers */

Putting it all together

Let’s put it all together into a fully working version.

You can see a demonstration of the snazzy hover effects using various images sizes to show its flexibility.

Here’s the full markup required to create a single image with caption overlays. The demo page has more images on it, as well as demonstrating changing colours and shifting the overlaying caption into different positions as explained earlier in the article, just to show various potential tweaks and use cases.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="_styles.css" media="screen" />
    <title>Snazzy hover effects using CSS demo</title>

</head>
<body>
    <ul>
        <li>
            <a href="#" title="Sunrise on the farm">
                <img src="img_sunrise.jpg" width="300" height="200" alt="Beautiful sunrise" />
            </a>

        </li>
    </ul>
</body>
</html>

And the CSS to transform the simple markup into a snazzy hover/focus effect.

ul { overflow: hidden; padding: 5px; }
ul > li {
    position: relative;
    float: left;
    list-style: none;
    margin: 0 20px 20px 0;
    font-size: 10px;
}
ul a { text-decoration: none; display: block; }

ul li img { display: block; position: relative; z-index: -1; } /* IE8 fix, background colour appears behind img for uknown reason set negative z-index */
ul li:not([class=na]) img { position: static; } /* Reset relative position, as this plays havoc with good browsers */

ul a:hover, ul a:focus
{
    display: block;
    outline: none;
    -moz-box-shadow: 3px 3px 5px #000;
    -webkit-box-shadow: 3px 3px 5px #000;
    box-shadow: 3px 3px 5px #000;
}
ul a:hover img, ul a:focus img { outline: 3px solid #ccc; }

ul a:hover:after,
ul a:focus:after
{
    content: attr(title);
    color: #000;
    position: absolute;
    bottom: 0;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-weight: bold;
    width: 100%;
    background: rgb(255,255,255);
    background: rgba(255,255,255,0.7);
    background: -moz-linear-gradient(top, rgba(255,255,255,0.7), rgba(204,204,204,0.7)); /* Firefox 3.6+ */
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.7)), to(rgba(204,204,204,0.7))); /* Safari */
    display: block;
    text-shadow: 1px 1px 1px #fff;
}

Wrap up

We now have a simple technique that’s very capable using only CSS2.1. Of course, I also showed how to spruce it up with some additional—but not critical—CSS3 to make it a little nicer in more modern browsers.

We have good browser support; it works in all the latest release browsers.

And we made sure the technique was keyboard-accessible so that if you don’t or can’t use a mouse, the technique still works.

What do you think? Will you be using any of the techniques I’ve mentioned above? Why or why not? Share your thoughts and questions in the comments.

Download Source Files

Related Content

About the Author

Ryan Seddon is front-end developer based in Melbourne, Australia. He loves to tinker with CSS, JavaScript and coming up with new techniques. You can find his discoveries and articles at his blog, The CSS Ninja. You can also connect with him through Twitter: @thecssninja.

]]> http://sixrevisions.com/css/snazzy-hover-effects-using-css/feed/ 46 How to Create Inset Typography with CSS3 http://sixrevisions.com/css/how-to-create-inset-typography-with-css3/ http://sixrevisions.com/css/how-to-create-inset-typography-with-css3/#comments Sun, 21 Mar 2010 12:57:31 +0000 Jacob Gube http://sixrevisions.com/?p=2828 Create Inset Typography with CSS3

In this tutorial, we’ll create inset type, a popular text treatment, using CSS. If you follow Six Revisions closely, you’re probably thinking: "Jacob already wrote a Photoshop tutorial on how to do that."

That is correct, but this time we are going to do it using only CSS.

I set out to recreate the How to Create Inset Typography in Photoshop tutorial, and after experimenting with some fresh and new CSS3 properties, I was able to make a similar type treatment.

We’ll do all of this in less than ten lines of CSS.

Step 1: The HTML markup

Let’s first set up the HTML, which is super simple. The typography will be an h1 element, wrapped around a div for its background.

<div id="insetBgd">
	<h1 class="insetType">Inset Typography</h1>
</div>

Step 2: The background

The first bit of CSS we want to do is the background. We are going to create it similar to the background in the Photoshop tutorial mentioned above. We’ll set the width to 550px and height to 100px.

Next, we are going to use CSS3 gradients. If you’ve never used the required browser extensions for CSS3, hop on over to my previous article called CSS3 techniques you should know first, to catch up.

We want the background to have a gradient going top to bottom, from #003471 to #448CCB.

The code to do this is:

#insetBgd {
 width: 550px;
 height: 100px;
 background: -moz-linear-gradient(-90deg, #003471, #448CCB);
 background: -webkit-gradient(linear, left top, left bottom, from(#003471), to(#448CCB));
}

22-02_css_background

Step 3: Define the font stack and styles

Next, we want to define our preferred font. The Photoshop tutorial used Rockwell STD, but we are going to just use the normal Rockwell. Neither are considered acceptable web-safe fonts, but more users will have the plain, old Rockwell than the Rockwell STD variant.

However, in case the user doesn’t have Rockwell, we’ll define a few web-safe fonts to render in its place.

In the example, I set the font-size to 50px, and the font color to #0D4383. Here’s what we have:

h1.insetType {
  font-family: Rockwell, Georgia, "Times New Roman", Times, serif;
  font-size: 50px;
  color: #0D4383;
}

Define Font stack

Step 4: The inset styles

The next and final step is the most important part. We’ll style the font and give it the “inset” look we’re trying to achieve. We’ll do this by using the text-shadow style.

You’ll notice Jacob used “inner shadow” in Photoshop to get this effect. Unfortunately for us, text-shadow doesn’t have an “inset” value. So what we’ll have to do is create multiple instances of RGBA black and white 1px shadows, some being negative pixels, as well as adding different levels of opacity to each.

I messed around with a bunch of different variations, and settled on this:

  text-shadow: rgba(0,0,0,0.5) -1px 0, rgba(0,0,0,0.3) 0 -1px, rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.3) -1px -2px;

Add the text-shadow style to the h1.insetType class above, and our final CSS code looks like the following:

#insetBgd {
  width: 550px;
  height: 100px;
  background: -moz-linear-gradient(-90deg,#003471,#448CCB);
  background: -webkit-gradient(linear, left top, left bottom, from(#003471), to(#448CCB));
}

h1.insetType {
  padding-left: 50px; /* The padding is just there to move the h1 element to the center of the div */
  padding-top: 17px;
  font-family: Rockwell, Georgia, "Times New Roman", Times, serif;
  font-size: 50px;
  color: #0D4383;
  text-shadow: rgba(0,0,0,0.5) -1px 0, rgba(0,0,0,0.3) 0 -1px, rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.3) -1px -2px;
}

CSS3 Inset Typography Demo:

Below, you’ll see the final result. Note that you’ll only be able to see it if your browser supports current CSS3 specs for the attributes that we used in this tutorial.

What It Looks like in Firefox 3.6 (without Rockwell)

Below is a screen shot of what this effect should look like, taken through a Windows OS machine, Firefox 3.6 and without Rockwell installed.

Your browser does not support iframes, you will not be able to view this demo.

Conclusion

So there you have it. Pretty simple, right? It may not look quite as good as it would in Photoshop, but it will take up less load time, it’s more flexible than a static image, and it’s all done without any special software.

I want to give credit to StylizedWeb for giving me an idea of how to go about doing this. Thanks for reading!

Related Content

About the Author

Andrew Roberts is a Christian with a passion for web design and development. His web interests focus mostly on HTML/CSS, JavaScript, & PHP/MySQL. When he’s not glued to the computer, he’s spending time with his girlfriend Kaitlynn, photographing animals, or reading. His goal is to attend graduate school for Biblical studies & ministry.

]]> http://sixrevisions.com/css/how-to-create-inset-typography-with-css3/feed/ 33