CSS gradient backgrounds

[robinmetral]

As seen on the mockups.
This can help: https://gradientlab.space/

[bogreudell]

Nice! I understand now :) Very cool, merci

[robinmetral]

I'll be working on them 🙂

[robinmetral]

Also about the gradients: they are different on every page, so we should also be using PHP or JQuery to tell browsers that gradient X goes with .header on page Y. Does that make sense?

[robinmetral]

@FredericoAndrade is that how you're doing these css background effects on http://fredericoandrade.com/ (in the footer for instance?)

PS. Hi, I'm Robin 🙂

[FredericoAndrade]

Hi @robinmetral! Not sure what your question is, but happy to talk through whatever!

[robinmetral]

He @FredericoAndrade, just wondering how you did the colored shapes in the background of your site 🙂

Did you use CSS gradients? Something else?

They're looking great!

[robinmetral]

CSS gradients would probably be the best option in terms of performance, but it seems that other sites (example) simply use lightweight background images.

Judging by the mockups (some art is pretty complicated, like dotted areas), maybe we should consider using background images

[FredericoAndrade]

Hi @robinmetral so sorry for the delay here, looks like i never pressed send! - the angled details are achieved with a ::before or ::after selector that has the same border properties one uses to make any kind of angle - http://apps.eky.hk/css-triangle-generator/ for example.
Regarding the dotted areas, a small background image would definitely be the best option! Daniel can point you to assets if need be. Very eager to see the result!

[robinmetral]

Hey @FredericoAndrade, no worries and thanks for the link! This will make it much easier than a classic gradient generator 🙂