You are not logged in.

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

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: 426

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.