Working with paper-scroll-header-panel, styling it, and transitions

[aaron...@gmail.com]

I am trying to understand the proper way to setup a paper-scroll-header-panel that transitions from a 'tall' size where the background is a combination of a CSS gradient with a mostly transparent bg-image over top of it to a condense version that is just a solid color.

The demo here https://elements.polymer-project.org/elements/paper-scroll-header-panel?view=demo:demo/index.html&active=paper-scroll-header-panel is mostly what I am after (I want the condensed header to stay at the top) but its structure seems a lot different than I read elsewhere and have most working right now.

My current setup is uses this CSS class:

paper-scroll-header-panel {
    --paper-scroll-header-panel-full-header: {
         background: -webkit-radial-gradient(#ffb837, #f13c0d); /* Safari 5.1 to 6.0 */
         background: -o-radial-gradient(#ffb837, #f13c0d); /* For Opera 11.6 to 12.0 */
         background: -moz-radial-gradient(#ffb837, #f13c0d); /* For Firefox 3.6 to 15 */
         background: radial-gradient(#ffb837, #f13c0d); /* Standard syntax */
     };
    --paper-scroll-header-panel-condensed-header: {
         background-color: #f13c0d;
     };
 }

 combined with very simple html structure:

<paper-scroll-header-panel condenses keep-condensed-header>
<paper-toolbar class="tall layout horizontal">
<div class="bottom horizontal layout">
            <div class="paper-font-subhead">Title</div>
 </div>
 </paper-toolbar>
 <!-- content stuff -->
</ paper-scroll-header-panel>

This works for the basic transition from tall header with gradient background to condensed header with solid background. However, I need to add a background image over the top of the gradient and since I cant combine the gradient and background image in the same CSS style (or at least my attempts have failed) I am trying to find a workaround....which led me to the demo I linked to above..

The demo doesn't use CSS classes I am using now and seems to use a verbose method with a bunch of extra divs...the general idea is this:

<paper-scroll-header-panel>
<div class="headerContainer>
<div class="bg-container paper-scroll-header-panel>
<div id="condensedHeaderBg" class="paper-scroll-header-panel"></div>
<div id="headerBg" class="paper-scroll-header-panel"></div>
</div>
</div>
<!-- paper-toolbar stuff -->
</paper-scroll-header-panel>

I believe the IDs that are used have built in functionality with polymer to fade between when resizing. I think this method with the extra divs may allow me to add in an image over the top of the gradient in an easier fashion and have the polymer transition effects added to it automatically...however I cannot for the life of me figure out the proper structure to make this work.

What is the correct way to work with this dang paper-scroll-header-panel and style the header and still get all the transition effects without having to write separate event handlers to resize and fade extra things like image or really anything else you could throw into a panel header? For what its worth I have found it very hard to google search for specific parts of "polymer"/"paper elements"/"material design" help as I either get back results from the polymer website (which I honestly havent found super helpful) or random things about those actual real world materials...seems the name of this framework and its elements make it very hard to search for relevant info.

[Frankie Fu]

In CSS you can apply multiple backgrounds to the same element (https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds) and that may help you to achieve what you want.  e.g.

--paper-scroll-header-panel-full-header: {
        background-image: url(images/transparent-image.png), radial-gradient(#ffb837, #f13c0d);
}

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/fd784e4f-97e3-4c7b-9f42-e5a0f56110cf%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[aaron...@gmail.com]

Thanks! apparently when I tried this before my -moz and -o styles combined with url were killing it and I didnt think remove them. This made it very easy to use the simple CSS style method and not all the extra divs.