A Thing To Know about Gradients and “Transparent Black”

rfp-robotRFP ROBOT: Website Request for Proposal Generator

The time has come for a new website (or website redesign), which means you need to write a website request for proposal or web RFP. A Google search produces a few examples, but they vary wildly and don’t seem to speak really to your goals for developing or redesigning a new website. You need to write a website RFP that will clearly articulate your needs and generate responses from the best website designers and developers out there. But how?

Have no fear, RFP Robot is here. He will walk you through a step-by-step process to help you work through the details of your project and create a PDF formatted website design RFP that will provide the information vendors need to write an accurate bid. RFP Robot will tell you what info you should include, point out pitfalls, and give examples.


Say you have a gradient in CSS that goes from red to transparent. Easy, right? Like this:
.element {
background: linear-gradient(
to bottom,
red,
transparent
);
}
There is a pretty big gotcha here, though.

In Chrome (also Android), Firefox, and Edge, you’d be all good.

But in Safari (also iOS), you’d not be good.

The element on the left in each browser demonstrates the problem.

The problem, the best I understand it, is that transparent is being interpreted (and interpolated) as “transparent black”.
To fix it, you have to set the color as a fully transparent version of that exact color. Like:
.element {
background: linear-gradient(
to bottom,
red,
rgba(255, 0, 0, 0)
)
}
That’s not always easy with a hex code, since it’s not obvious what the RGBa or HSLa equivalent is. It’s not hard to find a color converter though, just web search around.
The CSS Level 4 color() function will make this easier, Like:
.element {
background: linear-gradient(
to bottom,
#eb8fa9,
color(#eb8fa9 alpha(0%)) /* or is it color-mod()? */
)
}
But the support for that isn’t around yet.
Sass can help out, if you are using that:
.element {
background: linear-gradient(
to bottom,
#eb8fa9,
rgba(#eb8fa9, 0);
)
}

A Thing To Know about Gradients and “Transparent Black” is a post from CSS-Tricks
Source: CssTricks

Posted on January 10, 2017 in android, Austin Web Designer, browser, code, css, drupal design,, Drupal Developer, drupal developer austin, Drupal Development, Drupal Development Austin, Drupal Support, Expert Drupal Development, firefox, iOS, Safari, The, web, Web Design Services

Share the Story

Back to Top