How to develop it? (psd mock-up code to html document)

[Lykos22]

Hi, i'd like some feedback please, if its possible. I 've found this article ( http://webdesign.tutsplus.com/tutorials/complete-websites/create-a-dar k-clean-website-design-in-adobe-photoshop-free-psd/ ) that teaches how to design a website in photoshop. I can guess how is going to be the structure of the html and css in general, when turning this psd mock-up to an html document, but my main focus is on the coding process of banner/ slider area of the website, and i'd like to know which is the best or more efficient way to code it in some parts, like:

1. the gradient background: is it better to code it with css or export it as an image-graph and add it as a background to a div [like background-image:url('image.jpeg') ]? NOTE that there are 3 gradients (step 8 of the article).
2. the shadow effect: how can i make the shadow look like this? it does not extend to the full width of the slider and also has a different shape. Generally the shadow effect look like this http://www.w3schools...css3_box-shadow , but the one in the article looks totaly different.
3. Finally about the slider and the logo: both look like they are standing on top/in front of the layout, is this has to do with the z-index property? both are are not placed in the same height as their sections, they are possitioned/go more 'downwards', how is better to do it? by using some margin or padding or maybe setting their positions (top, bottom, relative absolute ... )?

Please note that i'm talking about the development process, when creating an html document (html & css) in dreamweaver or any other editor, NOT how to design the mock-up.

Edited October 10, 2012 by Lykos22

[es131245]

0 ive seen html and css sites from some progs like office and i think photoshop is in that list too. Html & Css of the is very bad.You better to develop degign parts in photoshop and leave site coding to presialist. (no one will do it better than a person)1 ive never seen css gradients. (maybe im not that mature), ive used images that ive drown in image editors.2 box-shadow is a good idea but you wont get different shape shade with it. Only same shape and fuzzy3 standing out cound be easly done by shadows in image editor and sliding can be done on jquery

Edited October 10, 2012 by es131245

[DarkxPunk]

1 ive never seen css gradients. (maybe im not that mature), ive used images that ive drown in image editors.

You can do it in css3Now to the guy who posted:I agree with the other guy, you should leave coding to a human, not software, they muck it up. I would also stay away from too fancy of css3 features for now because ie6-8 are still used, and we are not out of the dark ages yet. It's also good practice to learn how to do some things the hard way.Do the w3school tutorials, or paste some codes with your specific problems.Glad to help.

[Lykos22]

You can do it in css3 Now to the guy who posted:I agree with the other guy, you should leave coding to a human, not software, they muck it up. I would also stay away from too fancy of css3 features for now because ie6-8 are still used, and we are not out of the dark ages yet. It's also good practice to learn how to do some things the hard way. Do the w3school tutorials, or paste some codes with your specific problems. Glad to help.

Thanks for the reply. If I understand your post right, me too i prefer to work this way. I'm not relying on Photoshop or Fireworks to generate my html, but i re-create the whole thing, that i get from the mock-up with HTML and CSS code in an editor. Instead of css3, can do the gradient as an image-graph?

[Ingolme]

Gradients are usually done with 1px thin images that are repeated vertically or horizontally as CSS.

[Lykos22]

Gradients are usually done with 1px thin images that are repeated vertically or horizontally as CSS.

I guess this is best made in case of linear gradients .. In radial i think is a little bit difficult as the color does not change always at the same point ( as it has a cyrcle shape). but in this case i'm refering if you notice there are 3 radial gradients, which i think is a little bit difficult to write it with css code. Edited October 11, 2012 by Lykos22

[Ingolme]

In that case the only way to do it is a large image, taking up the full extension of the gradient. Or you can use CSS3 and leave older browsers to have a worse version of the page.

[Lykos22]

In that case the only way to do it is a large image, taking up the full extension of the gradient. Or you can use CSS3 and leave older browsers to have a worse version of the page.

Thanks for the reply! the same thing applies and for the shadow effect of the example or this can be coded?