Sie sind nicht angemeldet.

1

Samstag, 7. Juli 2018, 02:14

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

Sonntag, 8. Juli 2018, 16:18

Hi,

here some example code to set CSS styles of layers:

Quellcode

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

Freitag, 13. Juli 2018, 21:35

@ 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

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »indexofrefraction« (13. Juli 2018, 21:57)


jordi

Fortgeschrittener

Beiträge: 419

Wohnort: Barcelona

Beruf: creating ideas & coding them

  • Nachricht senden

4

Samstag, 14. Juli 2018, 17:49

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

5

Samstag, 14. Juli 2018, 20:38

@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

Mittwoch, 18. Juli 2018, 22:11

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:

Quellcode

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

Donnerstag, 19. Juli 2018, 08:50


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

Donnerstag, 19. Juli 2018, 21:47

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.