How do people generate rich CSS based design layouts?

Question

I just came across hoptoadapp.com and I was a bit shocked, that there is very little images on the site. Most of the banner, buttons are made purely of CSS styling.

For example the up-right banner "See plans and pricing" is basically fully based on CSS, with all shades, gradients, etc made by CSS, also its different style-sheet for every browser, but it looks basically the same.

My question is, how do people generate such rich CSS layouts? I doubt its made just by coding CSS by hand. What software can be used to create such designs and generate CSS out of it?

Answer 1

This might be to your surprise, but I only use images where absolutely necessary and try to achieve everything by hand-written CSS.

Things like gradients, drop-shadows etc are pretty easy to use, and I've recently come accross CSS PIE which enables me to do the same in Internet Explorer.

The only tool I ever use is the CSS gradient generator.

Update

Do you generate separate css layouts for common browsers separately by hand? This feels a bit like an overkill really. Its farily straightforward job to create nice, clean layout using some software. After automatic slicing it is basicly ready for use. Now with hand css it seems like unnessecery extra layer of work. Do you create mockups / designs / overviews / layouts / etc using some software? Or do you simply build whole website straight from CSS using just a browser? – mdrozdziel 1 hour ago

All of our websites go through a creative process where different concepts are presented to the client. These concepts are usually created in Photoshop, Illustrator or another design software.

Once the designs are approved and signed off, we take the designs and start converting them to CSS. I can usually put together a PSD design into HTML/CSS in about 4 hours (more or less depending on complexity).

A few people that I have worked with take the "Automated" approach where they use a tool such as Dreamweaver, Expression Web, or similar and try to save time. Of course, these tools hardly provide cross-browser solutions and they often need to be tweaked by hand. I personally hate this approach and all of the people we employ need to be able to code by hand.

Although you might find some tools that will fix some cross-browser issues for you, a lot of them you will still need to hand-code. I have found that having a number of years in HTML/CSS experience will really make your life easier because you will learn the differences between browsers and can spot a potential issue before even previewing the website.

Not to blow my own whistle, but for the past year I've had a near-perfect record of creating cross-browser HTML/CSS without any prior testing or conditional comments (this excludes IE6, of course).

The introduction of CSS3 (with CSS3 PIE) has enabled me to create some super-cool webpages, with the use of very few images. Because CSS3 is still in it's early stages, you have to use browser specific syntax such as -webkit- and -moz- to achieve some results, but this syntax is widely available on Google.

Summary
I strongly suggest you get yourself up-to-speed with HTML/CSS if you're going to be a web developer and I wouldn't rely on software to create complicated layouts/UI-elements. Rather, start putting together your own library of code snippets - especially ones that are often re-used in projects.

Also
The button you have displayed in your question should only take about 8-10 minutes to code, it's using a combination of some of the following properties:

• CSS3 Background Gradient
• border
• border-radius
• box-shadow
• text-shadow

Update 2

I forgot to mention the jQuery UI's ThemeRoller, which allows you to generate buttons, tabs and many other elements. It contains royalty-free icons as well so it might be useful to you in some scenarios. I mostly use the framework if I'm building administration panels and I spend quite a bit of time removing unnecessary style declarations to cut down on the size of the CSS file.

Answer 2

It is coded by hand. It takes a lot of research, practice and willpower. There is no magic button (yet.)

Have you looked at the site in IE6 and IE7? Much is broken in IE6, and IE7 degrades the rounded borders to square.

Answer 3

You can generate CSS buttons similar to that one with CSS-Trick's Button Maker, but I suspect most people who use such techniques do them by hand.

Answer 4

These layouts look cool but only in hi-end browsers, however they degrade quite weel in IE6 and IE7 and so on. CSS3 has a lot o nice features but they all are very inconsistent among the different browsers, I would recommend to use specific prefixes always where it possible, for exameple box-shadow is implementented slightly diffrerent in firefox where it is included in box model and can create scrollbars when you attach this property to the elements with 100% width, while Chrome users can see nice box with a shadow that doesnt interfere with the bom model. That made me to remove any -moz-box-shadow for a lot of elements on my website.

I think at this point we can already take the most of advantages of CSS3 but use it wisely, always keeping eye on compatibility and consistency of layout in the older browsers. Sometimes images are the best solution, and since css sprites are widely sopported it can save you a lot of headache just with 1 server request.

If you look at the website you have mentioned in chrome you will se some ungly semi transparent corners, I this, that website designer should use an image instead (the already load a bunch of them) instead of using top-notch and inconsistent CSS3 that, IMO, gives a look of "unfinished" and thus unprofessional website.

That's just my opinion

Answer 5

You can have a look as well at Flexi CSS Layouts - a Dreamweaver Extension that help you create Css layouts in Dreaweaver without coding.