« previous next »
Pages: [1]   Go Down

Author Topic: Horizontal Fade on both edges  (Read 4464 times)

0 Members and 1 Guest are viewing this topic.

Offline Munchor

  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 6199
  • Rating: +295/-121
  • Code Recycler
    • View Profile
Horizontal Fade on both edges
« on: September 20, 2011, 01:51:51 pm »
My CSS knowledge is very poor, and so I need help with something.

I need a website to be white on the middle background and fade to gray on the edges. I got an image which is gray fading to white, and made it repeat itself on the left:

Code: [Select]
  background-repeat: repeat-y;

However, I need to achieve the same result (with an inversed image) on the other edge. How can I do it?

Thanks, here's how it should look like (Ascii Art :P)

GgggwwwwwwwgggG

G = Gray, W = white
Logged

Offline Deep Toaster

  • So much to do, so much time, so little motivation
  • Administrator
  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 8217
  • Rating: +758/-15
    • View Profile
    • ClrHome
Re: Horizontal Fade on both edges
« Reply #1 on: September 20, 2011, 07:14:38 pm »
Modify the background so it has both sides. That's the only cross-browser solution.
Logged



Offline Munchor

  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 6199
  • Rating: +295/-121
  • Code Recycler
    • View Profile
Re: Horizontal Fade on both edges
« Reply #2 on: September 21, 2011, 11:49:12 am »
Quote from: Deep Thought on September 20, 2011, 07:14:38 pm
Modify the background so it has both sides. That's the only cross-browser solution.

Thanks, I'll try that. I have another question though... How to achieve a top bar like Facebook.com? I mean, I managed to make a bar, but it's not fully on top and to the right and to the left, it looks like this:



Here's the header (where the text is) HTML and CSS code:

Code: [Select]
<header>
  <img src="titulo.jpg" />
</header>

Code: [Select]

header {
  background-color: #3B5999;
  width: 100%;
  margin-bottom: 20px;
}

The "titulo.jpg" image is the part that says "projeto G". I'd also like a way of controlling how tall the top bar is.

I have "width: 100%", so it's supposed to work alright, but it doesn't really work.
« Last Edit: September 21, 2011, 11:49:34 am by ephan »
Logged

Offline flyingfisch

  • I'm 1337 now!
  • Members
  • LV10 31337 u53r (Next: 2000)
  • **********
  • Posts: 1620
  • Rating: +94/-17
  • Testing, testing, 1...2...3...4...5...6...7...8..9
    • View Profile
    • Top Page Website Design
Re: Horizontal Fade on both edges
« Reply #3 on: September 21, 2011, 02:44:26 pm »
Try this:

CSS:
Code: [Select]
header {
  background-color: #3B5999;
  width: 100%;
  margin-bottom: 20px;
  padding-left: 0px; //overrides most browser's default left padding
}
header img {
    height: 50px; //or whatever you want the height to be
}

P.S. Do you use opera, or is that chrome? cuz thats what the chrome emulator i've got looks like.
« Last Edit: September 21, 2011, 02:47:42 pm by flyingfisch »
Logged



Quote from: my dad
"welcome to the world of computers, where everything seems to be based on random number generators"



The Game V. 2.0

Offline Deep Toaster

  • So much to do, so much time, so little motivation
  • Administrator
  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 8217
  • Rating: +758/-15
    • View Profile
    • ClrHome
Re: Horizontal Fade on both edges
« Reply #4 on: September 21, 2011, 08:07:20 pm »
Code: (CSS) [Select]
body
{
margin: 0;
}Removes the 8-pixel border around everything.
Logged



Offline Munchor

  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 6199
  • Rating: +295/-121
  • Code Recycler
    • View Profile
Re: Horizontal Fade on both edges
« Reply #5 on: September 22, 2011, 09:27:22 am »
@flyingfisch, the height is now changeable, thanks!

@Deep, that didn't really work (I even used "0px")

I have this:

Code: [Select]
header {
  background-color: #3B5999;
  width: 100%;
  margin: 0px;
  margin-bottom: 20px;
  padding: 0px;
}

header img {
  margin: 0px;
  padding: 0px;
  /* height: 50px */
}
Logged

Offline Deep Toaster

  • So much to do, so much time, so little motivation
  • Administrator
  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 8217
  • Rating: +758/-15
    • View Profile
    • ClrHome
Re: Horizontal Fade on both edges
« Reply #6 on: September 22, 2011, 09:32:55 am »
First of all, <header> isn't an HTML tag. You can't just make up your own and assume it'll work, unless you're using XML with style rules.

And I said to put margin: 0 in the body tag, not your header tag.
Logged



Offline Munchor

  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 6199
  • Rating: +295/-121
  • Code Recycler
    • View Profile
Re: Horizontal Fade on both edges
« Reply #7 on: September 22, 2011, 09:47:15 am »
Quote from: Deep Thought on September 22, 2011, 09:32:55 am
First of all, <header> isn't an HTML tag. You can't just make up your own and assume it'll work, unless you're using XML with style rules.

And I said to put margin: 0 in the body tag, not your header tag.

<header> is an HTML 5 tag I am very sure. Also "margin: 0;" on "body" worked, thanks!
« Last Edit: September 22, 2011, 09:48:31 am by ephan »
Logged

Offline flyingfisch

  • I'm 1337 now!
  • Members
  • LV10 31337 u53r (Next: 2000)
  • **********
  • Posts: 1620
  • Rating: +94/-17
  • Testing, testing, 1...2...3...4...5...6...7...8..9
    • View Profile
    • Top Page Website Design
Re: Horizontal Fade on both edges
« Reply #8 on: September 22, 2011, 09:55:41 am »
Quote from: ephan on September 22, 2011, 09:47:15 am
Quote from: Deep Thought on September 22, 2011, 09:32:55 am
First of all, <header> isn't an HTML tag. You can't just make up your own and assume it'll work, unless you're using XML with style rules.

And I said to put margin: 0 in the body tag, not your header tag.

HTML 5 is not the standard yet, so for best cross-browser support, stay away from too much HTML 5 stuff.

<header> is an HTML 5 tag I am very sure. Also "margin: 0;" on "body" worked, thanks!
Logged



Quote from: my dad
"welcome to the world of computers, where everything seems to be based on random number generators"



The Game V. 2.0
Pages: [1]   Go Up
« previous next »