Professional Looking CSS based websites

[macca11]

Hi all, I've studying hard and can make static web designs/sites using only XHTML/CSS. But my sites looks plain flat and boring. I have local jobs ready for me to start, but I'm not going to do this until I'm sure i can produce the look i want.

Does anyone have advice, books ebooks to read, or sites to visit with this information.


Thanks for your help in advance.

John

[D856C]

I'd suggest posting examples of the look you want. It's a big web. It's also possible it's due to the graphics used, not CSS.

Have you tried the usual, like CSS Zen Garden? Web Creme?

A lot of those sites are using CSS and Graphics together. It's not the elements -- it's the interplay.

[macca11]

Well the look im after is nothing special just the little things that nmake it look good. eg; Rounded corners, shadows on boxes, gradiants on many boxes, and images how much should or do they get used?

I know theres lots to think about but if you where to make a site from only html & css can these effects be done or is photoshop/flash required.

Thanks

[philjohns]

can u post a link to your website or is it not yet published?

[macca11]

Not yet up, because of these issues
thx!

[D856C]

I know theres lots to think about but if you where to make a site from only html & css can these effects be done or is photoshop/flash required.

You're going to want some graphics program. Much of those little details you're probably (?) admiring are graphics. You may or may not need flash -- but you probably don't for most of it.

You really are making this needlessly difficult by not explaining what you're looking for. Try these...

Stripe generator, allows you to download a graphic image for use in your CSS layout.

Check out these tabbed navigation examples. The more glossy ones use graphics as backgrounds.

Without telepathy that's all I can do.

[macca11]

Sorry all if it's a vague description, that must be my lack of knowledge. I'll try to explain with these two examples.
the first plain, flat.
the second alive, vibrant.

RedLaceDesign.com: Website Design, Graphic Design + Wedding Design: Portland, OR (plain, flat)
Brevard Web Design | Pixel Tree™ (jumps out more, smoother)

I know these aren't the best examples but i hope from these contrasting sites your better see what i mean.

Thanks

[philjohns]

Why not upload your website to a folder on your server called website preview - that way we will be able to visit your website through Inweb Networks


What you describe and show definately needs the use of a graphics program.

The header is made up of these two images (found them in the css code)



and



Is this starting to make sense?

The second object is set so that it repeats horizontally; this is done using the following css:

background-image: url(locationofyourimagehere);
background-repeat: repeat-x;

To repeat an image vertically you exchange "x" for "y" (like the axis on a graph)

Having a thin image reapeated means the background will saty the same whatever size the browser.

[D856C]

Really, this is less about CSS and repeating backgrounds than a sense for design. It is, indeed about learning a graphics program and what it takes to develop such layouts.

[macca11]

As I'm still learning all things web-design, I was hoping to start making really nice, clean, attractive web pages without the use of photoshop, this obviously has great advantages to it, but at the moment it is just to much to take on-board as a learning curve, once i have the basic's covered and looking and feeling great, then maybe I'll learn the graphic side of design (looks). I see from most Zen garden examples many .gif's are used.

thanks all,