Right click and save as
Skulls By Designerfied

Fist off you need to head over to Dynamic Drive and download the files that you need Featured Content Slider v2.4.

Seconded you need to ether make your own transparent PNG images or you can go here and use the images I used for this project.

See a live demo

Now lets quick look at the stock CSS code.

.sliderwrapper{
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
border: 10px solid navy;
border-bottom-width: 6px;
width: 400px; /*width of featured content slider*/
height: 250px;
}

.sliderwrapper .contentdiv{
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0; /*leave as is*/
top: 0; /*leave as is*/
padding: 5px;
background: white;
width: 390px; /*width of content DIVs within slider. Total width should equal slider’s inner width (390+5+5=400) */
height: 100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}

.pagination{
width: 400px; /*Width of pagination DIV. Total width should equal slider’s outer width (400+10+10=420)*/
text-align: right;
background-color: navy;
padding: 5px 10px;
}

.pagination a{
padding: 0 5px;
text-decoration: none;
color: #00007D;
background: white;
}

.pagination a:hover, .pagination a.selected{
color: #000;
background-color: #FEE496;
}

To add a transparent border around the content slider you can do this. Note: I made the featured content slider smaller for this project.

Remove this:
border: 10px solid navy;

Add this:
background: url(/images/transpBlue10.png) repeat;
padding:2px

So the code should look like this:

.sliderwrapper{
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
background: url(/images/transpBlue10.png) repeat;
border-bottom-width: 6px;
width: 335px; /*width of featured content slider*/
height: 200px;
padding:2px
}

Next step is to edit the content area.

You will need to add this:
border: 1px solid #DDD;
margin: 4px 0 0 5px;
padding: 2px;

So the code will look like this:

.sliderwrapper .contentdiv{
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0; /*leave as is*/
top: 0; /*leave as is*/
margin: 4px 0 0 5px;
padding: 2px;
background: #FFF;
border: 1px solid #DDD;
width: 322px; /*width of content DIVs within slider. Total width should equal slider’s inner width (390+5+5=400) */
height: 100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}

Now we will edit the look of the pagination DIV.

Remove this:
background-color: navy;
width: 400px;

Add this:
width: 419px;
background: url(/images/transpBlue10.png) repeat;

So the code will look like this:

.pagination{
width: 319px; /*Width of pagination DIV. Total width should equal slider’s outer width (400+10+10=420)*/
text-align: right;
background: url(/images/transpBlue10.png) repeat;
padding: 5px 10px;
}

Almost done! The last step is adding a effect to the pagination links.

Remove this:
color: #00007D;
background: white;

Add this:
color: #FFF;
background: url(/images/transpBlue25.png) repeat;

So the code will look like this:

.pagination a{
padding: 0 5px;
text-decoration: none;
color: #FFF;
background: url(/images/transpBlue25.png) repeat;
}

Finish it off with a hover effect.

Remove this:
color: #000;
background-color: #FEE496;

Add this:
color: #EEE;
background: url(/images/transpBlue75.png) repeat;

So the code will look like this:

.pagination a:hover, .pagination a.selected{
color: #EEE;
background: url(/images/transpBlue75.png) repeat;
}

Here is the CSS file:
contentslider.css

Here are the PNGs from this project.

I have only had the LucisArt plugin for PS for a few days now so I am still learning how to use it. Hope you like it!!

Tools Used: Photoshop CS3 and the LucisArt Plugin

Smart Hover Box Features:

• create a hover box out of any html element
• smart positioning will always show hover box in window quadrant with the most space
• optional close button by adding a user defined class to any element
• user defined x and y hover element offset
• user defined timeout after mouseleave event

Link: http://www.consideropen.com/blog/2008/08/smart-hover-box-for-mootools-12/

Full story here: http://technology.timesonline.co.uk/tol/news/tech_and_web/article4557935.ece

I know whats custom about that car? Nothing, I just love it!!

Dane Cook: Here are a few things that truly blow about my upcoming movie poster to promote the release of the film opening on September 19th:

1. Graphics:
Whoever photoshopped our poster must have done so at taser point with
3 minutes to fulfill their hostage takers deranged obligations. They should have called Donnie Hoyle and had him give a tutorial using “You Suck at Photoshop” templates. This is so glossy it makes Entertainment Weekly look wooden.
2. My head:

The left side of my face seems to be melting off of my skull. I guess I am looking directly into the Ark of the Covenant? Are they going for the bells palsy thing here? My left side looks like Britney Spears Read More

Link: http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery

Demo1: http://cssglobe.com/lab/tooltip/01/

Demo2: http://cssglobe.com/lab/tooltip/02/

Demo3: http://cssglobe.com/lab/tooltip/03/