question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Background color does not accept all valid CSS strings

See original GitHub issue

Tried with background: linear-gradient(#e66465, #9198e5);, radial-gradient(#e66465, #9198e5) & transparent

Suggested resolution

  • For transparent load the underlying Three context with {alpha: true} add a console.warn() noting that setting the alpha of the underlying will potentially impact performance
  • Either provide the same note as above & set the .container’s background-color to the CSS string, or could possibly do some static mapping version of #66 since we’re already in a 3D context?

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:3
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

2reactions
jsantellcommented, Nov 14, 2018

You totally called our bluff on ‘all valid CSS strings’, Andres 😬 we should update that in the docs to specify that it accepts the subset of <color> strings supported by THREE.Color#setStyle. Although it doesn’t seem too outrageous to parse out gradients, I wonder if there’s some combo of specifying a set of colors and generating something like #66 (for that blurry effect commonly used, e.g. #181)

1reaction
forrestocommented, Dec 6, 2018

Are there any blockers to making a new transparent attribute on the custom element, that uses Three’s {alpha: true}? I can try to make a PR if that sounds good.

Read more comments on GitHub >

github_iconTop Results From Across the Web

CSS background colour validity - Stack Overflow
The background color values are coming from the backend, so one div for each colour is added and its background colour is set...
Read more >
Is background-color:none valid CSS ? - GeeksforGeeks
CSS “background-color:none” is valid. But it is better to specify it as “transparent” instead of “none”. The CSS background-color property ...
Read more >
background-color - CSS: Cascading Style Sheets | MDN
The background-color CSS property sets the background color of an element. ... It is rendered behind any background-image that is specified, ...
Read more >
CSS Legal Color Values - W3Schools
Colors in CSS can be specified by the following methods: Hexadecimal colors; Hexadecimal colors with transparency; RGB colors; RGBA colors; HSL colors; HSLA ......
Read more >
Defining Colors in CSS
We've already seen some properties in CSS that take color values. Here's an example: p { color: red; }. There are several different...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found