I have spent a good portion of this week working on a personal project, Elements. It’s an interactive periodic table of the elements, and utilizes quite a few neat CSS3 and HTML5 features.
It supports WebKit (Chrome, Safari), Firefox, and even IE9+! It features a really great interface complete with transitions, an animated <canvas> Bohr model of each element, and more information than you can shake a stick at. If you are a fan of chemistry or ever need a quick reference, I hope Elements will be your first stop!
Some time over the next week, Elements will be a downloadable Google Chrome app, available in the Google Chrome Store. It is provided free-of-charge, but I will be accepting donations to help fund future development of both Elements and other projects. Help me spread the word!
This neat little trick utilizes CSS3 masks to add a drop shadow to any icon or image with alpha transparency. We’ll be using the pseudo-element :before to create a duplicate of the icon on top of its shadow. Now, let’s jump into the thick of it!
Grab any icon you like. For this example, I’m using an error icon from the wonderful Silk icon set, but you can use anything with alpha transparency. Anywhere you’d like the icon to pop up, place some markup like so: <div class=”error”><img src=”error.png” alt=”Error” /></div>. While the img isn’t really necessary for this trick, it will be more graceful should the CSS fail to load. That being said, let’s go ahead and tell that image to not be displayed in the CSS: div.error img { display: none; }
Now we can create the drop shadow. We’ll use div.error for that. First off, make it an inline-block element so it can sit next to other elements. Give it the width of your icon in pixels. Since we need an extra pixel of space at the bottom for the shadow, give it the height of your icon plus 1px. The icon I am using is 16px by 16px, so I will need to make this element 16px by 17px. Set a background color for the shadow; if you want transparency, use rgba(). Finally, we need to set the mask image. For WebKit, this is done with -webkit-mask-box-image. Here’s what you should have so far:
div.error {
display: inline-block;
width: 16px;
height: 17px;
background-color: rgba(0, 0, 0, 0.5);
-webkit-mask-box-image: url(error.png);
}
If you load this up right now, you’ll see that you have a 50% translucent black shadow in the shape of your icon. Now it’s time to add the actual icon image on top of it. For this, we need to use div.error:before. Once again, make it an inline-block element. Since this one doesn’t need any extra room, assign it the width and height of your icon. Give it some content (an empty pair of quotes works just fine), and then set the background image to that of your icon. Let’s take a look at the CSS for that:
div.error:before {
display: inline-block;
width: 16px;
height: 16px;
content: “”;
background-image: url(error.png);
}
Reload, and you should find your icon with a lovely little shadow. Play around with this effect and see what you can achieve!
Gradient text can often be useful in a design, especially for headers. Since -webkit-gradient works as an image, however, it’s hard to employ for text. A quick Google will lead you to this Nice Web Type article about pure CSS gradients, but it uses an extra nested element and -webkit-mask-image. You also have to specify your text once in the markup and once in CSS—in my mind, a major no-no.
So, how do we combat these requirements? Fortunately, WebKit offers -webkit-background-clip: text, which does just what we need! It clips the background to only fill the text of the current element; coupled with some transparent text and a -webkit-gradient background, you have gradient text in WebKit, without the need for extra layers and specifying the text in two places. Try this on for size:
h1.gradient {
font-size: 70px;
background-image: -webkit-gradient(linear,
left top, left bottom,
from(white),
to(black)
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
I’ve made a few key updates to the Sexy CSS Buttons. Namely, I’ve added transitions for Mozilla (-moz-transition, introduced in Firefox 3.7) and Opera (-o-transition, introduced in Opera 10.50). I don’t plan on updating the original post, but I will sum up the changes here.
Instead of just having the -webkit-transition block in input[type=button], button, we now have three blocks:
-webkit-transition: background-color 0.2s ease-in-out,
color 0.2s ease-in-out,
-webkit-box-shadow 0.2s ease-in-out;
-moz-transition: background-color 0.2s ease-in-out,
color 0.2s ease-in-out,
-moz-box-shadow 0.2s ease-in-out;
-o-transition: background-color 0.2s ease-in-out,
color 0.2s ease-in-out,
box-shadow 0.2s ease-in-out;
We will also need to update the transition duration for the click state, input[type=button]:active, button:active:
-webkit-transition-duration: 0.0s;
-moz-transition-duration: 0.0s;
-o-transition-duration: 0.0s;
And now your buttons are ready for Mozilla and Opera transitions!
I’ve gotten some good feedback about my previous CSS tutorial, Sexy CSS Buttons, so I figured I would make a series of tutorials on creating a sexy user interface for Web applications using nothing but the power of CSS. This installment will teach you how to create a sexy toolbar, like so:
We are going to start by creating an unordered list using the HTML element <ul> and give it the classname toolbar. This will simplify the markup needed and will be fairly easy to decorate with CSS.
<ul class=”toolbar”>
<li>This</li>
<li>is</li>
<li>our</li>
<li>toolbar</li>
</ul>
Now we need to style the list. Most importantly, we need to set list-style-type to none to remove the bullets. Then we need to set the padding and margins:
list-style-type: none;
margin: 0px;
padding: 5px 0px 5px 0px;
The gradient is drawn on the <ul> instead of the individual <li>s. This gradient starts at 60% opacity and fades to 30% half-way, then has a harsh break to 20% until it fades out entirely. So, let’s add the gradient now:
background-image: -webkit-gradient(linear,
left top, left bottom,
color-stop(0.0, rgba(255, 255, 255, 0.6)),
color-stop(0.5, rgba(255, 255, 255, 0.3)),
color-stop(0.5, rgba(255, 255, 255, 0.2)),
color-stop(1.0, rgba(255, 255, 255, 0.0)));
background-image: -moz-linear-gradient(top,
rgba(255, 255, 255, 0.6) 0%,
rgba(255, 255, 255, 0.3) 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.0) 100%);
Now add a one pixel highlight at the top, if you like. As with the CSS buttons, we need to specify one line for Webkit, one for Mozilla, and one for Opera.
-webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5);
-moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5);
box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5);
The last thing we need to do for the <ul> is to set the background color, text color, and text alignment:
background-color: #222;
color: #fff;
text-align: center;
So, now that we have the list set up, we need to style its individual items. We need to make each item an inline-block element. Then we set margins and padding as well as a minimum width. To make the interface more application-like, we should also set the cursor to the default. You may also want it to look like a pointer, as if the buttons were links.
display: inline-block;
margin: 0px;
padding: 3px 5px 3px 5px;
min-width: 100px;
cursor: default;
It is very important to note that all of the major browsers render whitespace between inline elements (including inline-block) as a single space. So if your toolbar has spacing between the items, it’s probably because you have the next item on a new line. There are a couple of ways around this. Firstly, you could use a negative margin on all but the first element; this works pretty well, but it’s hard to give a space a pixel-width, as font size and other variables may change it. Secondly, you could just put everything on one line; for small toolbars, this is probably your best bet. Lastly, you could comment out all the whitespace:
<ul class=”toolbar” style=”background-color: #700”>
<li>This</li><!––
––><li>toolbar</li><!––
––><li>is</li><!––
––><li>red!</li>
</ul>
Since we have multiple items side-by-side, we don’t want two borders being drawn next to each other. Here we set only the top, bottom, and left borders. We’ll add the right border for the last item later.
border: 1px solid rgba(0, 0, 0, 0.5);
border-width: 1px 0px 1px 1px;
By using an inset box shadow, we can add a subtle highlight border inside each of our items. At the same time, we should draw a highlight underneath the item, to make it look as if it is set within the toolbar.
-webkit-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.2),
inset 0px 0px 2px rgba(255, 255, 255, 0.25);
-moz-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.2),
inset 0px 0px 2px rgba(255, 255, 255, 0.25);
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.2),
inset 0px 0px 2px rgba(255, 255, 255, 0.25);
To make the items animate on hover in Webkit, we can set up a transition for the background property:
-webkit-transition: background 0.2s ease-in-out;
Now we need to set the font size to be small and bold, and draw a drop shadow above the text.
text-shadow: rgba(0, 0, 0, 0.5) 0px -1px 0px;
font-size: 8pt;
font-weight: bold;
The toolbar now looks mostly fine—we just need to add rounded borders to the first and last item and then give the last item a right border. For this, we can use the CSS pseudo-classes :first-child and :last-child.
ul.toolbar li:first-child {
border-radius: 3px 0px 0px 3px;
-moz-border-radius: 3px 0px 0px 3px;
}
ul.toolbar li:last-child {
border-radius: 0px 3px 3px 0px;
-moz-border-radius: 0px 3px 3px 0px;
border-width: 1px;
}
To set up hover and click states, we can use :hover and :active to set the background. For the clicked state, we should set the Webkit transition time to instantaneous. Here, the hover state is also used by the selected class, which you could use for the currently selected item.
ul.toolbar li.selected, ul.toolbar li:hover {
background-color: rgba(255, 255, 255, 0.25);
}
ul.toolbar li:active {
background-color: rgba(0, 0, 0, 0.3);
-webkit-transition-duration: 0.0s;
}
The last thing we need to do to make the toolbar complete is add a class for items which have icons. The best way to add icons is to set them as the background image of the item, which will ensure they are the same size as the text-only items.
ul.toolbar li.icon {
min-width: 0px;
padding-left: 30px;
background-repeat: no-repeat;
background-position: 10px center;
}
To see examples of the toolbars in action, head over to the Sexy CSS Toolbars page in my Experiments.
CSS is getting quite powerful these days. It can even take the place of images in many ways, giving you a more flexible design and fewer files to work with. Imagine being able to make an ultra sexy button with just CSS, giving you complete control through code. Well, you can! And it’s not too difficult, really. Below you can see some buttons I styled using only CSS:
Sexy, yes? These employ a couple of useful CSS properties. Most importantly are gradients, for which we use -webkit-gradient and -moz-linear-gradient. Secondly, we use border-radius and -moz-border-radius to make the button round. For a bit of added depth and eye candy, I have added a subtle drop black dropshadow above the text using text-shadow and around the whole button using -webkit-box-shadow, -moz-box-shadow, and box-shadow.
You may have noticed a lot of “webkit” or “moz” above. Everything used to create these buttons works in both Webkit browsers as well as Mozilla browsers—they just work a little differently. Internet Explorer does not have any of the functionality required to make a button like this, and Opera lacks quite a few things as well. It degrades fairly well in Opera (as it still has border-radius), and Internet Explorer users get a solid gray rectangle with a black border. So what does this mean for us as developers? Well, it’s not something we can rely on in the wild—but it works perfectly for those targetting Mozilla or Webkit users.
Alright, now let’s start looking at some code. Of course, we’ll create our button as usual: <input type=”button” value=”Cancel” />. To style all inputs with the type of “button” as well as the button element, we can use the CSS selector input[type=button], button.
We’ll start by changing our button’s outline and radius. We need to set the outline-width to 0 to avoid Webkit drawing an ugly border around it when focused. Because there is no outline-radius property, Webkit draws a rectangular border on focused elements. We set border-radius and -moz-border-radius to 50px, which will make our buttons as round as possible up to a height of 50 pixels.
outline-width: 0;
border: 1px solid #000;
border-radius: 50px;
-moz-border-radius: 50px;
Now let’s set up the drop shadow for the whole button. We need one line for Webkit, one for Mozilla, and the real CSS3 property, which is used by Opera:
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
And now to make the buttons really sexy: add the gradient. These differ a little between browsers. We need to specify to -webkit-gradient that we are using a linear gradient. For Mozilla, we specify that we want a linear gradient by using -moz-linear-gradient. Then we specify the angle (for instance, from the top left to the bottom left). Webkit’s color-stops are backwards from Mozilla’s colors (which require no extra function). Mozilla can also use pixel values or percentages, whereas Webkit can only use percentages.
background-image: -webkit-gradient(linear,
left top, left bottom,
color-stop(0.0, rgba(255, 255, 255, 0.8)),
color-stop(0.01, rgba(255, 255, 255, 0.6)),
color-stop(0.4, rgba(255, 255, 255, 0.3)),
color-stop(0.4, rgba(255, 255, 255, 0.2)),
color-stop(1.0, rgba(255, 255, 255, 0.0)));
background-image: -moz-linear-gradient(top,
rgba(255, 255, 255, 1.0) 0%,
rgba(255, 255, 255, 0.6) 1px,
rgba(255, 255, 255, 0.3) 40%,
rgba(255, 255, 255, 0.2) 40%,
rgba(255, 255, 255, 0.0) 100%);
It is important to note that CSS gradients act as an image—in this case, the background image. The leverage to this design comes from the fact that we use RGBA colors; that is, no part of the gradient is fully opaque, and thus the color underneath can shine through. This is very important when using Webkit transitions, as you cannot transition from one gradient to another—but you can transition from one background color to another.
It is possible to specify an inner drop shadow which will act as the shiny highlight, rather than specify it in the gradient. This works in Mozilla and Opera; the odd man out in this case is Webkit, as there is a bug preventing it from rendering correctly. You can add another line to -moz-box-shadow and box-shadow to get the effect:
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.9),
inset 0px 1px 0px rgba(255, 255, 255, 0.5);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.9),
inset 0px 1px 0px rgba(255, 255, 255, 0.5);
Now we just need to set up the initial background color, text color, and the text drop shadow:
background-color: #444;
color: #fff;
text-shadow: rgba(0, 0, 0, 0.5) 0px -1px 0px;
So, now we have a styled sexy button. But it doesn’t quite act like a button yet. We need to add some styling for when the button is hovered, focused and clicked.
To add a bit more eye candy, we can use Webkit transitions to ease between the states. Add this -webkit-transition to the button’s normal CSS mode to ease between the background color, text color, and drop shadow:
-webkit-transition: background 0.2s ease-in-out,
color 0.2s ease-in-out,
-webkit-box-shadow 0.2s ease-in-out;
To style the hover and focus states, we will use the selector input[type=button]:hover, input[type=button]:focus, button:hover, button:focus. This ensures that we can style the button for those who use the mouse as well as for keyboard navigators. Fortunately, most of the inherited styles will still apply to the hover state. All we need to do is change a few key properties. Here I darken the drop shadow and lighten the background color:
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.9);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.9);
background-color: #666;
For the click state, we use the input[type=button]:active, button:active selector. Like with the hover state, we just need to change a few things. Here I darken the background and text and change the transition to be instantaneous:
background-color: #222;
color: #ccc;
-webkit-transition-duration: 0.0s;
So, now we have a completely functional sexy button, all created with CSS! Play around with the settings to create a button which fits your style. Check out the Sexy Buttons page in my Experiments to see them in action!
Update: I have added Mozilla and Opera transitions to the buttons. You can read more about the code changes in the update post.
