CSS Gloss Pills

(What the What?!)


I knocked this up a long time ago. I need to look at re-doing this using ::before and ::after to clean the code up, for it is a mess!


Your confusion is understandable, if you have viewed the source of this page, you're probably wondering at the wonder of the tag soup. It's messy, I'll admit that, messy yet necessary.

This is a demonstration of a method to create 'that glossy effect' using CSS, that's right kids, no images (well, unless you include the noise in the background). The elements have been put together in a similar fashion to layers for an image with a very simple php foreach wrapping it all up. CSS is applied to these layers to create the visual effect.

Now for the why! I'm not sure there is one, other than the fact that I just had to and it's cool to just make stuff sometimes.

Break Down

Let's break this down and extract meaning from this madness, shall we? (it's rhetorical, no answers on a post card, cheers!)

What we have here (as mentioned above) are several layers with their own applied style. The HTML looks like this.

    <div class="menuBase">
	<div class="menuBaseVertical">
	    <div class="menuColour">
		<div class="menuColourHorizontal">
		    <div class="menuColourVertical">
			<div class="menuColourOverlay">
			    <div class="menuColourGloss">
				<a href="#">Home</a>
Tag soup right?! Yep, yep, yep! However, without the soup, this would not work.

As you can see from the class list I have tried to make this as self explanatory as possible, without over-over doing the naming convention. Yeah, it's a tad silly as is, but, menuColourHorizontalDarkAlphaGradient is too much. Although, menuCHDAG would've worked. Hindsight eh? Yeah, moving along...

The Devil's in the Details


.menuBase {
  background: linear-gradient(to right,
  rgba(0,0,0,0.1) 0%,rgba(255,255,255,0.1) 100%);
  border-radius: 10px;
  border-top: 1px solid rgba(0,0,0,0.5);
  border-bottom: 1px solid rgba(255,255,255,0.65);
  box-shadow: 0 0 2px rgba(255,255,255,0.5);

This is the .menuBase, it's pretty basic, just a set of outlines wrapped around a minimal gradient. There's a box-shadow too, this adds a softer outline to the bottom of the div.


.menuBaseVertical {
  background: linear-gradient(to bottom,
  rgba(0,0,0,0.1) 0%,rgba(255,255,255,0.5) 100%);
  border-radius: 10px;
  padding: 5px;

This div simply adds a dark to light vertical gradient within .menuBase. rgba() become friends with it and learn to love it like I do.


.menuColour {
  background: rgb(150,150,150);
  border-radius: 10px;
  border: 1px solid rgba(0,100,150,0.8);

This is just a block of grey with a solid coloured outline. The solid grey stops the alpha layer of the actual colour overlaying the menuBase* gradients and as such stops the gradients bleeding through and causing all kinds of unpleasantries. Think of it as the alpha channel slate wiper.


.menuColourHorizontal {
  background: linear-gradient(to right,
  rgba(0,0,0,0.7) 0%,rgba(255,255,255,0.8) 100%);
  border-radius: 9px;

This is where the internal fun starts to happen. This gradient paves the way for the actual colour overlay. It's also used to help with the :hover effect.


.menuColourVertical {
  background: linear-gradient(to bottom,
  rgba(0,0,0,0.9) 0%,rgba(255,255,255,0.4) 100%);
  border-radius: 9px;

Not a million miles away from it's parent .menuColourHorizontal with the addition of exaggerating the :hover outline colour.


.menuColourOverlay {
  background: rgba(0,160,250,0.3);
  border-radius: 9px;
  padding: 1px;

The alpha colour. This is where the almost final part of the magic happens. Adding colour to the mix sets it all off.


.menuColourGloss {
  background: linear-gradient(to bottom, rgba(255,255,255,0.4) 0%,
  rgba(255,255,255,0.3) 50%,rgba(255,255,255,0) 50%);
  border-radius: 9px;

The last piece of the puzzle, this is the element that adds that shiny mirrored look to the menu items.

All together now...

Lots of ugly parts making something quite pretty.

Try this one for yourselves, if there's any image set-ups that you know in Gimp or Photoshop, apply them in CSS.