strimble

There are a few changes to elements and new elements in HTML5. One of those elements is the a element, or anchor element. It’s used to create hyperlinks. There are a few changes to this element.

1. The name attribute is obsolete.You can no longer use something like…

   <a name="whatever"></a><div>Some content.</div>

   Instead, put an id on the nearest container…

   <div id="whatever">Some content.</div>

2. The target attribute has changed.This used to be deprecated, but now it’s not. Go ahead and use it.

   <a href="http://blog.strimble.com/" target="_blank">blog</a>

3. There is a new media attribute.This is the type of media that the destination of the hyperlink was designed for.

   <a href="http://blog.strimble.com/" media="screen">blog</a>

Jelly Fish

I keep seeing these nice looking jelly button images, but I was wondering if there’s a decent way of creating these jelly buttons without using images. Since CSS3 is now becoming popular, I decided to try to create one just using HTML and CSS3. So, if you would like to create a 3D looking jelly button like the one below, read on.

1. First, create the HTML with an anchor element. Let’s start with:

   <a href="#" title="My Cute Little Jelly Button">Jelly Button</a>
   

   Example:

   Jelly Button

2. Ever notice that jelly buttons look like they have a smaller rectangle within a rectangle? Let’s add a span element inside the anchor element.

   <a href="#" title="My Cute Little Jelly Button"><span></span>Jelly Button</a>
   

   Example:

   Jelly Button

3. Next, let’s add a class attribute to the anchor so that we can refer to it with CSS.

   <a class="jellybutton" href="#" title="My Cute Little Jelly Button"><span></span>Jelly Button</a>
   

   Example:

   Jelly Button

4. Time to start the CSS! Let’s start by creating a box:

   <style type="text/css">
       a.jellybutton {
           position: relative;
           display: block;
           width: 150px;
           padding: 5px;
           border: 1px solid #555;
           background: #481525;
           color: #FFF;
           text-align: center;
       }
   </style>
   

   Example:

   Jelly Button

5. Let’s add some spiffy CSS3 styles. By adding a linear gradient and rounding the corners, it will look more like a button.

   Creating rounded corners is pretty simple with the syntax for border-radius.

   You can use a gradient in the CSS anywhere where you would normally use an image, such as in a background. Below is the syntax. More information is available about this over at the Surfin’ Safari site. Below, we have designated a light color on the top and a dark color on the bottom.

   -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

   We’re also using RGBA for the gradient. This currently only seems to work in Webkit browsers, like Safari and Google Chrome, and Firefox.

   <style type="text/css">
       a.jellybutton {
           position: relative;
           width: 150px;
           text-align: center;
           padding: 5px;
           display: block;
           border: 1px solid #555;
           background: #481525 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.5)), to(rgba(0, 0, 0, 0.5)));
           color: #FFF;
           -webkit-border-radius:7px;
       }
   </style>
   

   Example:

   Jelly Button

6. Now it’s starting to look a little three dimensional! The final step is styling the span to make it look jelly-like. Remember, we had used a gradient and border-radius on the anchor element? Well, we’re just doing the same thing here. The gradient is white on the top with a 0.5 alpha, which is like saying 50% opacity, and it is completely transparent at the bottom.

   <style type="text/css">
       a.jellybutton {
           position: relative;
           width: 150px;
           text-align: center;
           padding: 5px;
           display: block;
           border: 1px solid #555;
           background: #481525 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.5)), to(rgba(0, 0, 0, 0.5)));
           color: #FFF;
           -webkit-border-radius:7px;
       }
       a.jellybutton span {
           position: absolute;
           top: 0;
           left: 2px;
           width: 156px;
           height: 50%;
           display: block;
           background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
           -webkit-border-radius: 7px;
       }
   </style>
   

   Example:

   Jelly Button

Well, there you have it folks! A purely CSS jelly button — without the use of an image. I suspect that this might make page load a little quicker without having to download a resource for a jelly button image on the client.

Also, please remember that because of the use of CSS3, this currently only works in Webkit browsers, such as Safari and Google Chrome.