DevGrow » Freebies

Freebie: Modern UI Pack Photoshop PSD

Monjurul Dolon — Wed, 11 May 2011 17:04:35 +0000

I’ve been running across several new UI PSD kits that cover a wide range of elements, everything from buttons to media players. I wanted to take a shot at making my own with a few simple elements – feel free to use the following UI elements in any project you’d like.

Preview Download PSD

Even if you don’t end up using the elements themselves, consider taking a look at the blending effects to see how they were achieved. I’ll be using this kit and others like it to help create Photoshop mockups for clients more quickly, it saves time not having to remake elements over and over again (obvious I know, not sure why I didn’t consider it earlier).

As always, please leave feedback in the comments and let me know if you like the set!

Polaroid Snapshot (PSD)

Monjurul Dolon — Wed, 16 Mar 2011 21:49:08 +0000

I came up with this simple Polaroid design for a small project and wanted to share it as a quick freebie. Download the PSD, play around with it and use it however you’d like – no attribution or credit is required.

Download PSD

If you like/use it, please leave some feedback in the comments and share the URL!

Dark Button Navigation Using CSS3

Monjurul Dolon — Thu, 27 Jan 2011 18:02:45 +0000

I recently came across a great looking set of navigational buttons designed by Orman Clark of Premium Pixels. I’m a big fan of his design style and decided to whip together a quick CSS3/HTML version of the buttons. Check out the demo and feel free to download the example zip file as well.

View Online Demo Download Files (zip)

The CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118

/* Dark Button CSS */
.button {
outline: 0;
padding: 5px 12px;
display: block;
color: #9fa8b0;
font-weight: bold;
text-shadow: 1px 1px #1f272b;
border: 1px solid #1c252b;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background: #232B30; /* old browsers */
background: -moz-linear-gradient(top, #3D4850 3%, #313d45 4%, #232B30 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#3D4850), color-stop(4%,#313d45), color-stop(100%,#232B30)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3D4850', endColorstr='#232B30',GradientType=0 ); /* ie */
box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* CSS3 */
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Firefox */
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Safari, Chrome */
}
.button:hover {
color: #fff;
background: #4C5A64; /* old browsers */
background: -moz-linear-gradient(top, #4C5A64 3%, #404F5A 4%, #2E3940 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#4C5A64), color-stop(4%,#404F5A), color-stop(100%,#2E3940)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4C5A64', endColorstr='#2E3940',GradientType=0 ); /* ie */
}
.button:active {
background-position: 0 top;
position: relative;
top: 1px;
color: #fff;
padding: 6px 12px 4px;
background: #20282D; /* old browsers */
background: -moz-linear-gradient(top, #20282D 3%, #252E34 51%, #222A30 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#20282D), color-stop(51%,#252E34), color-stop(100%,#222A30)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#20282D', endColorstr='#222A30',GradientType=0 ); /* ie */
-moz-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Firefox */
-webkit-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Safari, Chrome */
box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* CSS3 */
}

/* Search CSS: */
.search-input {
padding: 0 5px 0 22px;
border: 1px solid #1c252b;
height: 30px;
color: #9fa8b0;
font-size: 12px;
line-height: 30px;
font-weight: bold;
text-shadow: 1px 1px #1f272b;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
background: #20282D; /* old browsers */
background: -moz-linear-gradient(top, #20282D 3%, #252E34 51%, #222A30 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#20282D), color-stop(51%,#252E34), color-stop(100%,#222A30)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#20282D', endColorstr='#222A30',GradientType=0 ); /* ie */
-moz-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Firefox */
-webkit-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Safari, Chrome */
box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* CSS3 */
}
.search-input:focus {outline: none;}
.search-submit {
width: 13px;
height: 13px;
border: none;
background: url(mag-glass.png) no-repeat;
display: block;
position: absolute;
left: 26px;
top: 10px;
text-indent: -9999em;
}

/* Vertical List: */
.vertical-list {
list-style: none;
padding: 10px;
width: 200px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: #20282D; /* old browsers */
background: -moz-linear-gradient(top, #20282D 3%, #252E34 51%, #222A30 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#20282D), color-stop(51%,#252E34), color-stop(100%,#222A30)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#20282D', endColorstr='#222A30',GradientType=0 ); /* ie */
-moz-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Firefox */
-webkit-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Safari, Chrome */
box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* CSS3 */
}
.vertical-list .button {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: #515B62; /* old browsers */
background: -moz-linear-gradient(top, #515B62 3%, #444E55 5%, #394147 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#515B62), color-stop(5%,#444E55), color-stop(100%,#394147)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#515B62', endColorstr='#394147',GradientType=0 ); /* ie */
}
.vertical-list .button:hover {
background: #5F6B72; /* old browsers */
background: -moz-linear-gradient(top, #5F6B72 3%, #56646C 4%, #4D5A62 50%, #434D54 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#5F6B72), color-stop(4%,#56646C), color-stop(50%,#4D5A62), color-stop(100%,#434D54)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5F6B72', endColorstr='#434D54',GradientType=0 ); /* ie */
}
.vertical-list .button:active {
padding: 5px 12px;
top: 0;
background: #515B62; /* old browsers */
background: -moz-linear-gradient(top, #515B62 3%, #444E55 5%, #394147 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#515B62), color-stop(5%,#444E55), color-stop(100%,#394147)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#515B62', endColorstr='#394147',GradientType=0 ); /* ie */ -moz-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Firefox */
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Firefox */
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Safari, Chrome */
box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* CSS3 */
}

The HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<ul class="button-list">
<li><a href='/' class='button'>Home</a></li>
<li><a href='/' class='button'>About</a></li>
<li><a href='/' class='button'>Portfolio</a></li>
<li><a href='/' class='button'>Blog</a></li>
<li class="search"><input type="text" class="search-input" name="search" value="Search" onclick="$(this).val('');" /><input type="submit" class="search-submit" /></li>
</ul>
<h3>Vertical Menu:</h3>
<ul class="vertical-list">
<li><a href='/' class='button'>Home</a></li>
<li><a href='/' class='button'>Our Studio</a></li>
<li><a href='/' class='button'>Portfolio</a></li>
<li><a href='/' class='button'>Our Team</a></li>
<li><a href='/' class='button'>Get in Touch</a></li>
</ul>

About the Demo

The only image used in the demo is for the textured background – all other gradients and effects are done with CSS3. As a result, compatibility is limited to a handful of browsers, including Firefox, Chrome, Safari and possibly IE8. It looks strange in IE7 and the gradients don’t work in Opera, so I’d use caution if you’re considering using these in a production environment.

It’s quite easy to reproduce this effect using images, which is why I decided to go for the slightly more challenging route of using CSS3. If you’re really good, you’ll want to have an image-based solution as a backup for browsers that don’t support fancy CSS3 effects yet. I’ll leave that up to you guys though. ;)

As always, feedback and constructive criticism is always welcome. Be sure to check out Orman’s blog, it’s chock full of great resources!

Sharebar v1.1.3 Released, Almost 10,000 Downloads!

Monjurul Dolon — Fri, 19 Nov 2010 19:04:47 +0000

I’ve just updated Sharebar to version 1.1.3, which adds support for disabling the Sharebar widget on individual posts and pages. After you update the plugin, a new option panel should appear in your post and page editing screens at the bottom of the right sidebar – just check that option to disable Sharebar for that post!

Nearing 10k Downloads

Sharebar is my first ever WordPress plugin and it’s amazing to see that it has been installed almost 10,000 times! I’m very curious as to which sites are using the plugin, especially any big ones. If you know of a big blog that uses Sharebar, please let me know in the comments so I can check it out!

Download

You can view the plugin details at WordPress.org or view a simple demo.

View Demo Sharebar WordPress Plugin (zip)

New Plugins Coming

I have some ideas for a few new WordPress plugins that I hope to start coding soon. If you have suggestions for a plugin, feel free to post them in the comments or e-mail me directly.

Be sure to subscribe to the RSS feed and follow me on Twitter for the latest on the Sharebar and all other plugins I release.

Winners of AppSumo User Love Bundle Giveaways

Monjurul Dolon — Fri, 22 Oct 2010 19:20:41 +0000

This week we held our first ever giveaway contest, in which two lucky winners will receive the AppSumo User Love Bundle. The winners have been picked!

The Winners:

Congratulations to you both!

Stay Tuned for More Giveaways!

We have several more giveaways planned for DevGrow so be sure to follow us on Twitter and subscribe to our feed for updates on them. If you are interested in sponsoring a giveaway, feel free to contact us to set one up.

Giveaway: AppSumo User Love Bundles

Monjurul Dolon — Mon, 18 Oct 2010 20:14:12 +0000

This is the first of many giveaways to come on DevGrow, this week we’re giving away 2 AppSumo User Love bundles for total customer care. The giveaway contest starts today and the winners will be announced this Friday, so act fast if you want to enter!

All About Customer Satisfaction!

The AppSumo User Love Bundle is all about customer support and satisfaction – it offers 4-month premium subscriptions to 3 high-profile support services, including:

1. Zendesk – $107 Value

Zendesk is web-based customer support software that provides your support agents with an elegant ticket management and a self-service customer community. It’s agile, smart and convenient. Zendesk is used by some big names, including Twitter, Rackspace and Groupon.

2. SnapEngage – $196 Value

SnapEngage lets you chat with your website visitors in real-time using a single line of JavaScript. You can use GTalk or any free instant messaging client (Pidgin) to instantly talk to your clients, guide them to certain pages and improve their overall experience exponentially. Don’t take my word for it, try it out on their homepage at SnapEngage.com – I spent a few minutes chatting with their support guy about a few questions I had about their service and it works great! Oh, did I mention that they’re being used by GetSatisfaction, Zynga, iContact and Slideshare?

3. GetSatisfaction – $76 Value

A simple way to build online communities that enable productive conversations between companies and their customers. More than 44,000 companies use Get Satisfaction to provide a more social support experience, build better products, increase SEO and improve customer loyalty, including Microsoft, Autodesk (makers of Maya and 3ds Max) and Zappos.

Total Value: $379

Why you need this for your business

Customer support is huge for any business, especially ones that are web-based. Combined, the three services above take care of your entire support system and work together flawlessly (they all integrate with each other) to give your customers the best support imaginable. If you were ever concerned about making your own system, why not save yourself the headache and use these tested services instead?

How to Enter

We are giving away a total of 2 bundles drawn randomly from our list of entrants. To enter the contest, simply Tweet the following message:

I want an http://AppSumo.com User Love Bundle.
Follow @appsumo and RT this to enter! details: http://t.co/KQ0hYa2
via @ThinkDevGrow
Tweet

Don’t use Twitter? Leave a comment below using your e-mail address and you will also be entered into the drawing. Also, if you leave a comment with feedback about the giveaway/bundle AND send the tweet you will be entered into the drawing TWICE.

Contest Summary:

Starts: Today, October 18
Ends: Friday, October 22
Number of Winners: 2
How to Enter: Tweet or Comment (or both for 2 entries)

Lastly, be sure to follow us on Twitter and subscribe to our RSS feed for more giveaways like this one and more great resources for web developers.

Creating a Simple, Reusable PHP Cache Class

Monjurul Dolon — Tue, 05 Oct 2010 15:45:35 +0000

Recently for a small project, I turned one of my previous WordPress cache experiments into a simple, reusable PHP class that you can throw into any project for quick caching. It’s released under MIT license so feel free to use and modify it however you’d like!

Download

The following zip file contains the PHP class and license information.

Download Source File (zip)

The Cache Class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

class Cache {

// Pages you do not want to Cache:
var $doNotCache = array("admin","profile");

// General Config Vars
var $cacheDir = "./cache";
var $cacheTime = 21600;
var $caching = false;
var $cacheFile;
var $cacheFileName;
var $cacheLogFile;
var $cacheLog;

function __construct(){
$this->cacheFile = base64_encode($_SERVER['REQUEST_URI']);
$this->cacheFileName = $this->cacheDir.'/'.$this->cacheFile.'.txt';
$this->cacheLogFile = $this->cacheDir."/log.txt";
if(!is_dir($this->cacheDir)) mkdir($this->cacheDir, 0755);
if(file_exists($this->cacheLogFile))
$this->cacheLog = unserialize(file_get_contents($this->cacheLogFile));
else
$this->cacheLog = array();
}

function start(){
$location = array_slice(explode('/',$_SERVER['REQUEST_URI']), 2);
if(!in_array($location[0],$this->doNotCache)){
if(file_exists($this->cacheFileName) && (time() - filemtime($this->cacheFileName)) < $this->cacheTime && $this->cacheLog[$this->cacheFile] == 1){
$this->caching = false;
echo file_get_contents($this->cacheFileName);
exit();
}else{
$this->caching = true;
ob_start();
}
}
}

function end(){
if($this->caching){
file_put_contents($this->cacheFileName,ob_get_contents());
ob_end_flush();
$this->cacheLog[$this->cacheFile] = 1;
if(file_put_contents($this->cacheLogFile,serialize($this->cacheLog)))
return true;
}
}

function purge($location){
$location = base64_encode($location);
$this->cacheLog[$location] = 0;
if(file_put_contents($this->cacheLogFile,serialize($this->cacheLog)))
return true;
else
return false;
}

function purge_all(){
if(file_exists($this->cacheLogFile)){
foreach($this->cacheLog as $key=>$value) $this->cacheLog[$key] = 0;
if(file_put_contents($this->cacheLogFile,serialize($this->cacheLog)))
return true;
else
return false;
}
}

}

All of the functions are fairly self-explanatory. The __construct function is called when you instantiate the class – all it does is set the variables and create (or load) the cache log file. I chose to use a log file to deal with cache creation and deletion as it reduces unnecessary calls and is a bit faster, in my opinion. If you’d rather just delete expired files, feel free to change that section to however you see fit.

The start function first checks the current URL to make sure that the base name is not in the “do not cache” list and either a) begins the cache process or b) loads the existing cache. The end function checks to see whether or not the page is being cached and if so, creates the static file and updates the cache log file.

The last two functions are used for deleting cache files. The purge function takes a location (full URL for now) and marks it for deletion, while the purge_all function marks all files for deletion. When a file is marked for deletion, the next time a user visits that page the script will create a fresh cache file (it will not be deleted in advance, simply overwritten).

How to Use the Cache Class

Using the cache class is very easy! Just call the start function at the part of your script where you’d like to start caching and the end function wherever the cache ends. For me personally, I tend to start caching after the header section (where I have dynamic elements, such as username and profile links) and end caching after the footer. I also make use of the doNotCache array to make sure my admin and profile pages are not cached. Lastly, I add the purge_all function to my admin save function, so that whenever I update the site the cache is cleared.

To start the Cache:

1
2
3
4
5

include_once("cache.php");
$cache = new Cache;
$cache->start(); // Start caching (if needed)

// Other PHP that generates your pages goes here

And to end the Cache:

1	$cache->end(); // Stop caching

Anything outside of the start and end functions are left alone, so be sure to cache wisely.

Conclusion

I wrote this class after having the need for really simple caching that didn’t require a bunch of other libraries to use. If this is useful for your project, I’d love to hear about it in the comments (it would make my day), and I really appreciate any feedback you may have! I know my PHP isn’t pro level (probably not even close) but I hope it’s good enough to use in small projects.

Lastly, if you haven’t subscribed to the RSS feed, please consider doing so to get more posts like this, and follow me on Twitter!

How to Create a Simple SaaS Price Chart (HTML/CSS)

Monjurul Dolon — Mon, 20 Sep 2010 18:37:32 +0000

As I’ve mentioned before, I’m working on a premium WordPress themes site at the moment and came across the need for a decent-looking SaaS-style pricing table. After looking over dozens of other sites to get an idea of what works best, I whipped one up that satisfies the needs of my customers. To save you a bit of time, I’m sharing the code here so you can use it in your projects as well (GPLicious!).

Download

The zip file below contains the CSS and HTML to create all of the elements in the above example, as well as the icon images used.

Download HTML/CSS (zip)Live Example

To create the price chart/table, I opted to use unordered lists over tables as it makes life easier when you want to change things around later on. It’s also fully valid code (W3C – XHTML 1.0 strict) and looks the same/correct in the latest versions of Firefox, Chrome, Safari, Opera and IE8+. I haven’t tested it in IE6 or IE7 but it should look correct, can someone verify that for me in the comments?

The HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

="price-chart">

="attr-col">
>
>Recurring Payments:>
>Automatic Updates:>
>Tutorials and Support Docs:>
>Support Forum Access:>

="last">Usage Limits:>
>
>

="pt-table">

="pt-body">

"pt-rows"

="title">>Category 1>>Category 2>>Category 3>>Hidden Column>>
="fees">>$5>>$10>>$20>>$25>>
>>->>->>->>->>
>="pt-yes">>="pt-yes">>="pt-yes">>="pt-yes">>>
>="pt-no">>="pt-yes">>="pt-yes">>="pt-yes">>>
>="pt-no">>="pt-no">>="pt-no">>="pt-yes">>>
>="pt-no">>>Single License>>2 Licenses>>2 Licenses>>
="fin">="pt-3x">="./products" class="big-button">Browse Our Products>>>
>
>

="pt-special">

="pt-rows">

="title">Special Plan>

="fees">>$100>>
>>$2 / month>>
>="pt-yes">>>
>="pt-yes">>>
>="pt-yes">>>
>>Unlimited Usage>>

="fin">="./join" class="big-button">Join Now>>
>
>
>
>

As you can see there are 3 unordered lists being used. The first is for the feature list, the second contains the main tabular data and the third is specifically for the special/highlighted column. Columns are simulated in the main table using span tags, which support text or the use of the specified “pt-yes” and “pt-no” classes to generate the icons. If you don’t want to have the highlighted column, just delete the entire “pt-special” DIV. You will also need to adjust some of the widths as I used approximate percentages to keep the entire table fluid.

The CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

.attr-col { margin: 110px 0 0; float: left; width: 200px; }
.attr-col ul { background: #f4f4f4; font-weight: bold; font-size: 13px; border: 1px solid #d6d6d6; border-width: 1px 0px 1px 1px; -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
.attr-col ul li { text-align: right; padding: 0 10px; border-bottom: 1px solid #d6d6d6; line-height: 45px; display: block; }
.attr-col ul li.last { border-bottom: none; }
.pt-table { padding-left: 200px; display: block; position: relative; }
.pt-body { padding: 10px 0 0; }
.pt-rows li { display: block; overflow: hidden;background: #fff; border-left: 2px solid #ccc; border-right: 2px solid #ccc; border-bottom: 1px solid #d9d9d9; }
.pt-rows li span { width: 24%; text-align: center; float: left; border-right: 1px solid #d9d9d9; display: block; line-height: 45px; height: 45px; }
.pt-rows li.title { background: #666; font-size: 22px; color: #fff; font-weight: bold; -webkit-border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; border-top-left-radius: 5px; border-bottom: 2px solid #555; border-width: 0 0 2px; }
.pt-rows li.title span { line-height: 50px; height: 50px; border: none; padding: 0 1px; text-shadow: 2px 2px #444; }
.pt-rows li.fees { border-bottom: 1px solid #ccc; }
.pt-rows li.fees span { line-height: 48px; height: 48px; background: #f7f7f7; font-size: 34px; font-weight: 700; font-family: Georgia, Arial, sans-serif; color: #4172a5; text-shadow: 2px 2px #fff; }
.pt-rows li span.pt-yes { background: url(yes-no.gif) no-repeat center 12px; }
.pt-rows li span.pt-no { background: url(yes-no.gif) no-repeat center -38px; }
.pt-rows li.fin { border-bottom: 2px solid #d9d9d9; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; height: 85px; }
.pt-rows li span.pt-3x { width: 72%; float: left; text-align: center; border: none; }
.pt-special { width: 23%; position: absolute; right: 0; top: 0; }
.pt-special .pt-rows { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border: 1px solid #a2b7ca; background: #f4faff; -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); padding-bottom: 10px; }
.pt-special .pt-rows li { border-width: 0 0 1px; background: transparent; }
.pt-special .pt-rows li.title { height: 58px; margin: 1px; background: #d0ebfe; color: #2a719d; font-size: 30px; line-height: 65px; text-align: center; border-bottom: 1px solid #bfd4e6; border-width: 0 0 1px; text-shadow: 2px 2px #e6f5ff; }
.pt-special .pt-rows li.fees { border-bottom: 1px solid #bcd8ec; }
.pt-special .pt-rows li.fees span { background: #ecf6fe; }
.pt-special .pt-rows li.fin { border: none; text-align: center; }
.pt-special .pt-rows li span { border: none; width: 100%; }
.pt-special .pt-rows li.fin .big-button { background: #3a8bd0; top: 22px; }
.pt-special .pt-rows li.fin .big-button:hover { background: #50a6ef; }

/* Simple Button CSS: */
.big-button { font-size: 24px; line-height: 50px; font-weight: 700; color: #fff; padding: 10px 20px; background: #4a980d; text-shadow: 2px 2px rgba(0, 0, 0, 0.3); border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #407718; text-decoration: none; position: relative; top: 18px; }
.big-button:hover { color: #fff; -moz-box-shadow: 0 0 20px #fffc00; -webkit-box-shadow: 0 0 20px #fffc00; box-shadow: 0 0 20px #fffc00; background: #6fbb2f; }
.big-button:active { position: relative; top: 1px; }

I know it’s not the prettiest code but it gets the job done for most browsers. I used a lot of browser-specific hacks to add rounded corners and shadows, which are ignored by Internet Explorer. You can easily swap them for images or just take them out all together if you’d like.

Reader Exercise

There are a few things I left out of this table on purpose so you can mess with it yourself. Instead of a single call-to-action button for the first 3 columns, try adding a unique one to each category. Also try shifting around the highlighted column, maybe making it the 2nd column instead of the last. That will take a moderate amount of CSS hackery to achieve and should be a worthwhile exercise.

Feedback?

I’m eating my own dog food with this one – I will be using this table (nearly exactly) in my own project. Thus, I appreciate your feedback as it will help improve something that will be presented to my own customers in the future. If you end up using it in your project, please leave your link in the comments so I can check it out – or send me an e-mail if you want to keep it private.

And as always, subscribe to the RSS feed and follow me on Twitter!