webdevRefinery Forum: CSS Help! - webdevRefinery Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Rate Topic: -----

User is offline GeekyMacBoy1 

  • Group: Members
  • Posts: 36
  • Joined: 28-December 10
  • LocationHK
  • Expertise:Graphics

Posted 05 April 2012 - 04:00 AM (#1)

CSS Help!


Guys, is it possible to make a background in CSS, with like a drop shadow effect on the sides? (Gives a gradient effect). Or just is it possible to add a gradient effect to the background?

Also, if I make a header in photoshop, how do I make it in HTML so that whenever someone clicks on the header image, it takes them back to the home page? Thanks.
0


User is offline @Tom 

  • space
  • Group: Members
  • Posts: 704
  • Joined: 24-May 11
  • Locationspace
  • Expertise:Python

Posted 05 April 2012 - 06:43 AM (#2)

Yes and for headed you need
<a href="/index.html"><img src=""></a>

ocelotapps.com
jr wdR comedian under ThatRailsGuy

View Postarronhunt, on 30 June 2012 - 10:09 PM, said:

Sir you are the first person to make me piss myself laughing. Kudos.
0


User is offline Hyde 

  • Group: Members
  • Posts: 1562
  • Joined: 08-March 10

Posted 05 April 2012 - 07:37 AM (#3)

View PostGeekyMacBoy1, on 05 April 2012 - 04:00 AM, said:

Guys, is it possible to make a background in CSS, with like a drop shadow effect on the sides? (Gives a gradient effect). Or just is it possible to add a gradient effect to the background?

Also, if I make a header in photoshop, how do I make it in HTML so that whenever someone clicks on the header image, it takes them back to the home page? Thanks.

For the CSS gradient, yes it is possible. I recommend you pay a little visit to http://gradients.glrzad.com/ .

For the header, if you make it in Photoshop, you can but the conversion to HTML is not automatic. The general idea is to cut the PSD (Photoshop file) to isolate the most importante part, and save them individually (easier than sprites) as different images. Once you have alll the different parts that are forming your header, you need to reassemble them with HTML and CSS. It's realy just the general idea and it always depends on your design, but I'm sure you can find a guide out there that covers it. Some people don't bother and simply save the whole header as a single image and then add it on their page, but this is very unelegant because : 1) It's not flexible/fluid (it doesn't ajust with the brower's width, because it's a static image) and 2) it'll make your site load much slower, where as with CSS, you can repeat horizontally or vertically whatever you need so instead of the browser downloading the whole image it downloads little parts and adjust them as needed to have the same effect.
Hyde | HTML & CSS | PHP & SQL | Objective-C | Java | Basic JavaScript
0


User is offline lobabob 

  • Group: Members
  • Posts: 98
  • Joined: 21-March 10
  • LocationWouldn't you like to know?
  • Expertise:HTML,CSS

Posted 28 April 2012 - 10:49 AM (#4)

You could always make gradients with CSS3, but keep in mind that IE will screw you over with CSS3 gradients. They work with basically every other major browser though.

quick tutorial: http://webdesignerwa...er-css-gradient
"When the world goes mad, one must accept madness as sanity since sanity is, in the last analysis, nothing but the madness on which the whole world happens to agree." - George Bernard Shaw

Life = http://xkcd.com
0


User is offline @Tom 

  • space
  • Group: Members
  • Posts: 704
  • Joined: 24-May 11
  • Locationspace
  • Expertise:Python

Posted 28 April 2012 - 10:57 AM (#5)

I'm sorry but didn't we already tell you that is was possible half a month ago. For the header though it really depends on what your design is.
ocelotapps.com
jr wdR comedian under ThatRailsGuy

View Postarronhunt, on 30 June 2012 - 10:09 PM, said:

Sir you are the first person to make me piss myself laughing. Kudos.
0


Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

2 User(s) are reading this topic
0 members, 2 guests, 0 anonymous users


Enter your sign in name and password


Sign in options
  Or sign in with these services