strimble

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.

Recently, I’ve created a new Twitter account. The reason for this is that I’m thinking of having a public account instead of, or maybe along side of, a private account. So, I’m testing it out to see if having a public account is something I really want to do or not.

So, I created a new account. After adding my design and icon, I realized that I had to follow people. So, I started following the people I’m following on my private account. This quickly became a task that I did not enjoy. So, I decided to write a script for it to make it a bit easier.

Below is the Perl script I created to handle this.

#!/usr/bin/perl

use Net::Twitter;
use Getopt::Long;
use strict;

# set your own username and password here
my $namefrom = '';
my $passfrom = '';
my $nameto = '';
my $passto = '';
GetOptions('namefrom=s' => \$namefrom, 'passfrom=s' => \$passfrom, 'nameto=s' => \$nameto, 'passto=s' => \$passto);

my $twitfrom = Net::Twitter->new(username=>$namefrom, password=>$passfrom);
my $twitto = Net::Twitter->new(username=>$nameto, password=>$passto);

# establish friends
if($twitfrom->friends()) {
  foreach my $friend (@{ $twitfrom->friends() }) {
        $twitto->follow($friend->{'id'});
  }
}

print "friends are synced between accounts\n";

I saved this file as sync_following.pl. So, now all I have to do is call the script with the options for my two accounts.

$./sync_following.pl --namefrom strimble --passfrom redacted --nameto _strimble --passto redacted

You can download it here. You’ll also need Net::Twitter and Getopt::Long.

Perl scripts make my twitter accounts much simpler to deal with. Let me know if you end up using this script too, and if it was helpful or not.

Come join us for the next Silicon Valley Geek Dinner. This one will be at Pluto’s in Palo Alto. Originally, I wanted to have this one at uWink in Mountain View, but it seems that they’ve closed. I’m expecting this to be a pretty small gathering, since I’m organizing it on such short notice. If there’s any geek subject that you would like to specifically discuss, please let me know in the comments. I hope to see you there!