Be a Supporter!
FallingTears
FallingTears
  • Member since: Nov. 28, 2012
  • Offline.
Forum Stats
Member
Level 03
Programmer
CSS3 Gradient 2012-12-12 14:01:37 Reply

Alright, for all you CSS3 prodigies, I have a fairly complex question. This is a situation that I've never been able to resolve. First, let me describe a scenario. I work at a web development company. We have graphics designers. We have web developers. The graphics designers throw the Web Developer's PSDs. We then use Photoshop to break these PSDs down into the images that we need to create websites.

Needless to say, I'm not a graphics designer. I've been thrown a challenge in which I would like to rise to the occasion and show that I have the skill to do said task.

Basically, I need to create a responsive website (this is great, because of the way the graphics are designed ... I get to do a little thing called "image raping." It's where you have to take images and cut them up into millions of little pieces, because they're raster images and aren't very scalable [I don't like cutting up pictures, I want to use one graphic that's not cut up]) that responds to changes in size, etc.

That being said, I noticed something interesting in the PSD. The graphics designer is using a double linear gradient. The top left corner has a color of rgb(84,84,84), bottom left corner (71,71,71), top right corner (72,72,72) and bottom right corner rgb(61,61,61). There is a very gradual gradient from the darker color to lighter in both directions.

Do you guys know if CSS3 is even capable of handling a double layered gradient like this? I can't use the image, because this gradient exists in the "scalable" section ..... the part of the image that will be a different size based on media being used and size of browser window.


BBS Signature
FallingTears
FallingTears
  • Member since: Nov. 28, 2012
  • Offline.
Forum Stats
Member
Level 03
Programmer
Response to CSS3 Gradient 2012-12-12 14:03:24 Reply

At 12/12/12 02:01 PM, FallingTears wrote: There is a very gradual gradient from the darker color to lighter in both directions.

By both directions, I mean top to bottom and left to right.


BBS Signature
kiwi-kiwi
kiwi-kiwi
  • Member since: Mar. 6, 2009
  • Offline.
Forum Stats
Member
Level 09
Programmer
Response to CSS3 Gradient 2012-12-12 14:48:42 Reply

At 12/12/12 02:03 PM, FallingTears wrote:
At 12/12/12 02:01 PM, FallingTears wrote: There is a very gradual gradient from the darker color to lighter in both directions.
By both directions, I mean top to bottom and left to right.

Unfortunately the specification has only a linear and radial gradient, but if you really want to, you can use four adjacent divs.
Also relevant

smulse
smulse
  • Member since: Mar. 24, 2005
  • Offline.
Forum Stats
Member
Level 31
Blank Slate
Response to CSS3 Gradient 2012-12-12 16:36:28 Reply

Actually you could just use one div.

Do top -> bottom gradient as the background for the div, then use a div:after for the left -> right gradient.

You'll most likely have to use RGBA colours as apposed to HEX, otherwise you won't get any transparency (ie, you wouldn't see both gradients over the top of one another). And you'll have to have a little play around with the colours as they'll differ slightly from what you mentioned due to the transparency.

So yeah, it's possible in theory, just might take you a little while to get exactly the colours you want.


BBS Signature
FallingTears
FallingTears
  • Member since: Nov. 28, 2012
  • Offline.
Forum Stats
Member
Level 03
Programmer
Response to CSS3 Gradient 2012-12-12 22:44:02 Reply

At 12/12/12 04:36 PM, smulse wrote: Actually you could just use one div.

Do top -> bottom gradient as the background for the div, then use a div:after for the left -> right gradient.

You'll most likely have to use RGBA colours as apposed to HEX, otherwise you won't get any transparency (ie, you wouldn't see both gradients over the top of one another). And you'll have to have a little play around with the colours as they'll differ slightly from what you mentioned due to the transparency.

So yeah, it's possible in theory, just might take you a little while to get exactly the colours you want.

Now that you've mentioned it, that makes sense. I never thought of it that way. I just want something that's close enough using CSS3 without seeing any abrupt lines in the center (where one color clearly changes from one color to another). I think I will play around with your recommendation. If I figure it out, I will share the CSS3 here. Quite honestly, you've gotten me excited about this! I can't wait till I get to work tomorrow to try this out!


BBS Signature
FallingTears
FallingTears
  • Member since: Nov. 28, 2012
  • Offline.
Forum Stats
Member
Level 03
Programmer
Response to CSS3 Gradient 2012-12-12 22:45:59 Reply

At 12/12/12 04:36 PM, smulse wrote: You'll most likely have to use RGBA colours as apposed to HEX

To be quite honest, I've never implemented RGBA before. I actually prefer using rgb() instead of hex. I don't know why, but it just feels better or something. I don't know. Maybe that's just me.


BBS Signature
Shakyjake
Shakyjake
  • Member since: May. 7, 2005
  • Offline.
Forum Stats
Member
Level 22
Programmer
Response to CSS3 Gradient 2012-12-13 18:29:50 Reply

Sounds like you're after a diagonal gradient

.yourselector {
	background: linear-gradient(135deg, rgba(84,84,84,1) 0%,rgba(61,61,61,1) 100%);
}

That will create a gradient from top left to bottom right. The rgb values at the top-right/bottom-left corners may differ depending on the dimensions on the container as will the angle.

The angle I've given assumes a box of equal width/height dimensions. To find the correct angle for your case you can use a bit of soh cah toa :

angle = tan^-1(x/y)

(tan^-1 is a dodgy way of saying inverse tan)

However
I've just realised that this may screw up your "responsiveness", since the container's dimensions, and therefore the required angle, will change to fit various screens.

Instead you should probably just use a background image and adjust the sizing on that to give you a consistent look.

.yourselector {
	background: url(../images/sexy-gradient.png) no-repeat left top;
	background-size: 100% 100%;
}
I don't know if you need to specify both x and y values for background-size when they're both the same but better sdafe than sorry.
FallingTears
FallingTears
  • Member since: Nov. 28, 2012
  • Offline.
Forum Stats
Member
Level 03
Programmer
Response to CSS3 Gradient 2012-12-14 10:42:19 Reply

At 12/13/12 06:29 PM, Shakyjake wrote: Sounds like you're after a diagonal gradient

Mathematically, the color's wouldn't match exactly at all four corners. Personally, I like my work to be perfect and precise, or its a no go. Two different gradients, with transparency, will have to be used to make this a reality.


BBS Signature
smulse
smulse
  • Member since: Mar. 24, 2005
  • Offline.
Forum Stats
Member
Level 31
Blank Slate
Response to CSS3 Gradient 2012-12-19 14:26:29 Reply

Purely out of interest did you end up doing this in the end? I'd love to know if you got anywhere.

I'm thinking of using a similar technique on a website I'm currently working on, but it'll probably be easier for me as I won't have to work backwards to try figure out the colours and transparencies.


BBS Signature
FallingTears
FallingTears
  • Member since: Nov. 28, 2012
  • Offline.
Forum Stats
Member
Level 03
Programmer
Response to CSS3 Gradient 2012-12-19 15:20:38 Reply

At 12/19/12 02:26 PM, smulse wrote: Purely out of interest did you end up doing this in the end? I'd love to know if you got anywhere.

I'm thinking of using a similar technique on a website I'm currently working on, but it'll probably be easier for me as I won't have to work backwards to try figure out the colours and transparencies.

I haven't had a chance to work on this. I've been hit with 32861858 (overexaggeration) other tasks at work.


BBS Signature