Web Designers Journal

Visions Connected To The Web


Creating a Stylish Image Repeat CSS Navigation

This is a guide to creating a simple, SE friendly CSS navigation including an example navigation for you to download and use. This method requires two very small images.


Designing The Backgrounds

Step One – You must create a navigation in photoshop or in your chosen image creating software. Do this by creating a new canvas 700 pixels wide and 30 pixels tall. Now create a nw layer and apply a soft green gradient. You can then if you wish add a gloss layer by selecting the top half on the gradient with the marquee tool and selecting new layer then fill with white. You then go to layer blending options and select overlay and lower the opacity until it looks nice….



15 Awesome Free WordPress Themes

Portfolio Press

Portfolio Press an excellent theme for showcasing your photography, art, web sites, or other projects. It also works nicely as a regular blog site. An options panel is included for uploading logos and and changing the layout. For a video screencast showing how to set up the portfolio, visit http://wptheming.com/portfolio-theme.



CSS Positioning

If you’re a front end developer or a designer who likes to code, CSS-based layouts are at the very core of your work. In what might be a refresher for some, or even an “a-ha!” for others, let’s look at the CSS position property to see how we can use it to create standards-compliant, table-free CSS layouts.

Position is everything

CSS positioning is often misunderstood. Sometimes, in a bug-fixing fury, we apply different position values to a given selector until we get one that works. This is a tedious process that can work for a time, but it behooves us to know why specifying something like position: relative can fix your layout bug. My hope is that we can learn the position property’s values and behaviors, and most importantly, how a value can affect your markup. The CSS specification offers us five position properties: static, relative, absolute, fixed, and inherit. Each property serves a specific purpose. Understanding that purpose is the key to mastering CSS-based layouts.



10 CSS Form Examples

Forms can be greatly enhanced with a touch of CSS, making them more usable and far more visually attractive. Follow some of the examples below and you’ll be creating stunning CSS forms in no time at all.

1. Semantic Horizontal Form

Horizontal CSS Semantic Form

This form is coded in a semantic way and the elements are positioned next to eachother except for the last fieldset which spans the full width of the form below the 3 top fieldsets. It’s been tested in FF1.x, IE6 and Opera8. (looks a little quirky in IE5.x but still usable)

2. Nice Forms

Nice Forms

A great form, with graphical elements and colour to create a different and unique look. All done with CSS and semantic coding.

3. StylePhreak Simple CSS Form

Simple CSS Form

A simple form with regular alignment and unique lines to break up the different sections. This works well as a great base to start your own custom form from.