Herself's Webtools

Scripts, HowTos, Templates, Plugins, Widgets, Tips

Archive for the ‘css’ Category

How to create 3d vertical backgrounds for sidebars

without comments

3d isn’t really 3 dimensional on your computer screen. It is an optical illusion we create by making some parts of an image a little lighter than other parts.

For 3d vertical side bars you will want a horizontal strip as wide as your side bars plus center area. This is usually 800 or 1024 pixels depending on your template or web page design. You can find this information along with the width of your center area and side bars in your template information.

Make the height of the image 140 pixels we’ll trim it up later. I create 2 side bar images; one for each side. Usually you would use a 400 pixel or 600 pixel white area in the middle so your main blog text will be easily readable but a light textured background will work also.

Create your two side bars by using Gimp or and selecting a gradient you like. Experiment with the gradients until you achieve the effect you want. The green shaded button is your gradient button in Gimp, select that and a gradient you like for each side. Click your mouse at one end of the image and drag the line that appears to the other end and click to fill the image with your gradient.

The green shade button, second row, 3rd from right does gradients.
The black shaded area under the dot and woodlike texture bottom right is where you click to change the gradient.
The button in the middle of the second row left of T is what you use to flip your images.

Copy and paste the sidebar images on the ends of your 800 or 1024 pixel background. Merge the layers down. Use Layers->anchor to do this. Now trim up the edges to get rid of any white pixels hanging on the edges. Choose Image->Canvas Size and crop the image to 128 x 800 (1024). Be sure to center the image and crop off the edges.

Create a duplicate layer, Dialogs->Layers and flip it vertically this time. Use the ‘Flip Layer or Selection Button’. Then set the layer to 50% opacity to remove any seams. Flatten the image and save it.

Your CSS will look like this.

<head>
<title></title>
<style type=”text/css”>
body {
background-image: url(green-purple-sidebar.jpg);
background-repeat: repeat-y;
background-position: center;
}
</style>
</head>

If you want your sidebars to appear to be floating above the main section put a grey edge to the same side of each ( both right or both left ). The grey side strip will look like a shadow. Since all shadows fall the same way with one light you’ll want both sides to have the shading on the same side. Use a shaded grey darker near the side bar and lighter at the edge away from the sidebar.

You can download both backgrounds to look at, experiment or use here

See also:
3D horizontal backgrounds
Gimp Basics: Beginning

Written by Linda MacPhee-Cobb

July 13th, 2007 at 12:00 pm

How to create 3d horizontal backgrounds

without comments

When we look at a computer screen and see a 3d image it isn’t really 3d it has just been shaded. We add an imaginary light point. Parts of an object closest to and facing our light point we color slightly lighter than those further away.

Another word for shading it ‘gradient’. Most graphics programs will have some built in gradients and make it easy for you to create them. CSS lets you tile a background strip either horizontally or vertically.

We will create a shaded vertical strip 128×1200 pixels.

I did this in Gimp. I created a 140×1200 strip. I then made two 140×600 images. I painted one with a brown gradient. Use the ‘fill with gradient’ button, and I chose ‘Golden’ for the sand and ‘Deep Sea’ for the sky. Click your mouse at one end of the image and drag the line across to the other end and click and the gradient will fill the area.

The green shade button, second row, 3rd from right does gradients.
The black shaded area under the dot and woodlike texture bottom right is where you click to change the gradient.
The button in the middle of the second row left of T is what you use to flip your images.

To make the gold part have some texture like sand I used Filters->Artistic->Gimpressionist->Paper and the default settings. Click OK. I then copied and pasted the golden gradient in the bottom and the blue gradient in the top of my large strip. Anchor the layers down.

Next crop the image to 128×1200. This gets rid of any white pixels that may be hanging around the edges. To keep the image from having seams when you tile it select Dialog-> Layers and make a duplicate layer. Then select the ‘Flip Layer or Selection’ button. Flip the top layer horizontally. Then in the layer box make it 50% opacity. That will erase any seams there might be.

In your HTML you’ll need to center this background vertically and tile it horizontally.
<head>
<title></title>
<style type=”text/css”>
body {
background-image: url(sand-sky.jpg);
background-repeat: repeat-x;
background-position: center;
}
</style>
</head>

You can download the background to look at, experiment or use here

See also:
3D vertical backgrounds
Gimp Basics: Beginning

Written by Linda MacPhee-Cobb

July 9th, 2007 at 12:00 pm

How to animate a link on mouse over

with 2 comments

This effect is much cooler if you use small gifs. I used large images in the Animate link on mouse over example just to make it easier for you to see what I am doing.

When the mouse hovers over the link, you see the animation. When the mouse is not over the link you see a still image. The best examples of this I have seen use small still image as a background, and a copy of that that has sparkles that appear and disappear when the mouse hovers.

You need two gifs; one a still image, and one animated version of that still image:

You can just drag these two images I used to your desktop to play with.

Here is the HTML/CSS for this example:

<html>
<head>
<title>Animated link mouse over example</title>

<style type=”text/css”>

#link {
position: absolute;
top: 100px;
left: 100px;
}

a {
background: url(animate-link-still.gif) no-repeat center;
height: 256px;
width: 256px;
padding: 125px;
}

a:hover{
background: url(animate-link-rotate.gif) no-repeat center;
}

</style>

</head>
&ltbody>

<div id=”link”>

* Note: make the height and width of the link the same as your image size.

Written by Linda MacPhee-Cobb

June 29th, 2007 at 12:00 pm

Posted in css,graphics,how to,HTML

Creating horizontal link lists

without comments

Suppose you have a list of links:
TimesToCome Mobile
Herselfs AI
Herself’s Houseplants

And you’d prefer to lay them out horizontally on your page like:

TimesToCome Mobile|Herselfs AI|Herself’s Houseplants

Or better yet, like the 3 social bookmark links at the bottom of this post are laid out.

This is especially useful for the list of social bookmarks at the bottom of your page.

You can in HTML just place the links one after the other with a ‘|’ in between. Or you can use CSS to line them up for you and space them out nicely. The float: left; is what makes your list horizontal instead of vertical.

#socialbookmarks ul
{
margin:0;
padding:0;
}

#socialbookmarks li {
float:left;
margin:0;
padding:0;
list-style-type: none;
white-space: nowrap;
}

#socialbookmarks li a
{
list-style-type: none;
padding: 0 18px;
font-size: 0.8em;
text-transform: uppercase;
letter-spacing: 1px;
}

The bookmarks are added in the form of an HTML list to the web page
<div id=”socialbookmarks”>
<ul>
<li> link 1 </li>
<li> link 2 </li>
<li> link 3 </li>
</ul>
</div>
<br />

You need a break ( br ) tag at the end to prevent the links from wrapping if the next item in your template is also a float item.

Written by Linda MacPhee-Cobb

May 25th, 2007 at 12:00 pm

Posted in css,how to,HTML