DesignerFied.com » CSS

Red Grunge Website Background

Jake Hurst — Fri, 15 Jan 2010 08:08:48 +0000

Here is a basic grunge background. Image dimensions are 1600X800px. Took about 10mins to build, PSD included. I started with a center content area size of 960px wide. If you have PhotoShop then you can edit this to fit your needs.

The body CSS for this background:

background: #f9f9f9 url(/images/red-grunge.jpg) top center no-repeat;

PSD Download: Red-Grunge.psd

Twitter Background:

Twitter Styles:

tile background unchecked

Background color: f9f9f9

Text color: b0b0b0

Link color: a10000

Sidebar color: 400102

Sidebar border: c90000

Example Twitter Page:

Creating An Awesome Polaroid Photo Viewer

Jake Hurst — Thu, 13 Aug 2009 19:49:58 +0000

This is a great script if you want to build a cool looking photo gallery. Its called Polaroid Photo Viewer and its powered by jQuery and CSS3. Check out the demo! You can drag your Polaroids around the page. I like it!!!

This example is making use of CSS3 and jQuery, just to show the effect when combining two powerful techniques. The CSS3 is injected by jQuery, keeping the CSS file clean.

Demo

Script Link

1950s Photoshop Design Background

Jake Hurst — Thu, 26 Mar 2009 08:05:19 +0000

Here is a design I whipped up today using some of the brushes I made a while back.Â You can download the PSD in case anyone want to mess around with the design. Thanks to CSS-Tricks for the sweet layout! I used one of them for the demo page.

Check out the demo http://designerfied.com/1950s-demo/

1950 Photoshop background design

PSD Download

Content background png image:

DHTML tooltips with a transparent background

Jake Hurst — Sun, 18 May 2008 00:12:18 +0000

I used the DHTML tooltips from Dynamic Drive and modified the CSS by adding a slick transparent png image to add a little better look to the mouse over effect. I included a dark.png for sites with dark colors and a light.png for for sites with lighter colors.
Before:…

After:…

To install the DHTML tooltip effect to your site just follow these simple instructions

http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip.htm

To add our transparent image to the tooltips just use the CSS below

Dark colored sites

#dhtmltooltip{
background: url(/images/dark.png) repeat;
color: #FFF;
position: absolute;
width: 150px;
border: 1px solid black;
padding: 2px;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}

Light colored sites

#dhtmltooltip{
background: url(/images/light.png) repeat;
color: #111;
position: absolute;
width: 150px;
border: 1px solid black;
padding: 2px;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}

Now for the images Just right click and save as

Dark.PNG

Light.PNG

Please let me know if you have any trouble, I will try my best to help out.

Add custom MooTools tooltips to your site

Jake Hurst — Thu, 17 Apr 2008 09:09:40 +0000

I first saw this over at WPelements and loved it. So I decided to show you how I put together cool looking tooltips for one of my friends sites. Tooltips come in handy when you want to add a cool hover effect with information in a small box to links, content areas like posts and in this case thumbnail images.

Check out the demo from Mootools.net

You can download the files you need here: http://mootools.net/download

After you upload those files to your server you will then need to put this code into to your page in between the if you are using TMS or WordPress this will all be in the header.php file.

After you have done that you will need to add a class and title to the links or images you want to show the tooltip.

To do that you will have to add this class=”tips” title=”Big Title :: the description” to your links or images that you want to see the tooltip with.

Example link with the class and title in red:

class=”tips” title=”Big Title :: the description”>

The next part is to customize the look of the tooltip. We will do that with CSS. You will need to add this to your existing CSS style sheet.

.tool-tip {
float:left;
color: #BBB;
width: 265px;
z-index: 13000;
}

.tool-title {
font-weight: bold;
font-size: 13px;
margin: 0;
color: #FFF;
padding: 8px 8px 4px;
background: url(/images/tips.png) repeat;
border-bottom: 1px solid #FFF;
}

.tool-text {
font-size: 11px;
padding: 4px 8px 8px;
background: url(/images/tips.png) repeat;
}

.custom-tip {
color: #000;
width: 130px;
z-index: 13000;
}

.custom-title {
font-weight: bold;
font-size: 11px;
margin: 0;
color: #3E4F14;
padding: 8px 8px 4px;
background: #C3DF7D;
border-bottom: 1px solid #B5CF74;
}

.custom-text {
font-size: 11px;
padding: 4px 8px 8px;
background: #CFDFA7;
}

I added a custom transparent PNG image. You can change that to a background color if you want.

Here is that tips.png, download it if you want and change it to the color you need. I used Fireworks to edit it.

Thats it, now you will have nice looking tooltips for your site.