Sie sind nicht angemeldet.

Lieber Besucher, herzlich willkommen bei: krpano.com Forum. Falls dies Ihr erster Besuch auf dieser Seite ist, lesen Sie sich bitte die Hilfe durch. Dort wird Ihnen die Bedienung dieser Seite näher erläutert. Darüber hinaus sollten Sie sich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutzen Sie das Registrierungsformular, um sich zu registrieren oder informieren Sie sich ausführlich über den Registrierungsvorgang. Falls Sie sich bereits zu einem früheren Zeitpunkt registriert haben, können Sie sich hier anmelden.

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

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.