You are not logged in.

Ariel

Beginner

  • "Ariel" started this thread

Posts: 44

Location: Argentina

  • Send private message

1

Saturday, July 7th 2018, 2:14am

CSS background-blend-mode for Layers

Hello!
I'm working on a tour and the designer sent me an interface with a layer with transparency which is actually a "multiply" blend mode from Illustrator.
I was looking is this is posible to do with CSS and I found the "background-blend-mode:" parameter. I think this should be very easy to implement since it's a native CSS parameter.

There's more information about this CSS parameter in this link: https://css-tricks.com/basics-css-blend-modes/

would be very nice to have this option.

thanks!
Ariel M.
Build and Customize your virtual tours with Spinattic
www.spinattic.com

My profile in Spinattic

2

Sunday, July 8th 2018, 4:18pm

Hi,

here some example code to set CSS styles of layers:

Source code

1
2
3
4
5
6
7
<action name="set_css_style" type="Javascript">
  caller.sprite.style[ args[1] ] = args[2];
</action>

<layer ...
    onloaded="set_css_style('backgroundBlendMode', 'multiply');"
    />


But if with CSS background-blend would do what you want and work in all browsers is another question...

Best regards,
Klaus

3

Friday, July 13th 2018, 9:35pm

@ klaus:

can i ask you why you're using 'backgroundBlendMode' and not 'background-blend-mode' in the call?

does it not work with standard css attribute names?
i tried to set a background-color or backgroundColor but didnt succeed....

mylayer.sprite.style seems to be a CSSStyleDeclaration (?)
but also mylayer.sprite.style.setProperty(propertyName, value, priority); does not work

best, index

This post has been edited 2 times, last edit by "indexofrefraction" (Jul 13th 2018, 9:57pm)


jordi

Intermediate

Posts: 427

Location: Barcelona

Occupation: creating ideas & coding them

  • Send private message

4

Saturday, July 14th 2018, 5:49pm

You can not use - you have to use camel case notation when setting css attributes from JavaScript
everpano.com smart virtual tours

5

Saturday, July 14th 2018, 8:38pm

@jordi: backgroundColor does not work, too
do you have a link where the camel case naming is documented?

i suspect maybe krpano updates / refreshes
most css attributes with the values from the xml (?)

6

Wednesday, July 18th 2018, 10:11pm

do you have a link where the camel case naming is documented?

Here some links:
https://developer.mozilla.org/en-US/docs…rties_Reference
https://javascript.info/styles-and-classes#element-style

You could also use the developer tools of the browser to see the available proprieties,
e.g. try:

Source code

1
console.dir(document.documentElement.style) 
to see the properties of a CSSStyleDeclaration object.


i suspect maybe krpano updates / refreshes
most css attributes with the values from the xml (?)
Not 'most', but the 'background' CSS style will be set/updated already by krpano.

Best regards,
Klaus

7

Thursday, July 19th 2018, 8:50am


Not 'most', but the 'background' CSS style will be set/updated already by krpano.


thanks for those infos klaus!

background-image is also one of the styles (updated by krpano), right?

8

Thursday, July 19th 2018, 9:47pm

background-image is also one of the styles (updated by krpano), right?
Yes, the image of <layer> elements will be set via the background-image CSS styles.