W3C home > Mailing lists > Public > www-style@w3.org > July 2011

RE: [css3-images] Gradient Magic

From: Brian Manthos <brianman@microsoft.com>
Date: Wed, 20 Jul 2011 04:10:04 +0000
To: Brad Kemper <brad.kemper@gmail.com>, Tab Atkins Jr. <jackalmage@gmail.com>
CC: Behnam Esfahbod ZWNJ <behnam@zwnj.org>, WWW-Style <www-style@w3.org>
Message-ID: <9710FCC2E88860489239BE0308AC5D17088EDB@TK5EX14MBXC266.redmond.corp.microsoft.com>
> I was just thinking about animation as a way to illustrate
> the point, not for a real use scenario.  The real use
> scenario would be something like having A, B, C width
> elements on your page and having all the A width elements
> rendering a consistent gradient, B consistent with each other,
> and C consistent with each other regardless of having a
> varying height across members of A, B, and C.  It could be
> convenient from a styling aesthetic perspective, but then
> again... I'm only a periodic hobbyist when it comes to design.

Below is an example page that might help illustrate it.

I used background-size to force the gradient-line values that I wanted.  With your mind's eye, imagine the gradients extended to fill the yellow regions.


The first column represents start and end points of the gradient line for the closest-side square.
The second column represents the "use the average of the width and height" square.
The third column represents the farthest-side square.

Note that the thickness of the white regions in a column is consistent for the 1st and 3rd columns.  This is because the closest-side (1st column) and farthest-side (3rd column) dimension is consistent.  For the 2nd column, the white region is variable because both dimensions contribute to the gradient line length.




<!doctype html>
<html>
<head>
        <meta http-equiv="X-UA-Compatible" content="IE=10">
        <style>

        body {
                background-color: black;
                width: 700px;
        }
        div {
                display: block;
                height: 50px;
                margin: 5px;
                width: 620px;
        }
        span {
                background-color: yellow;
                background-image: -moz-linear-gradient(top left, red 45%, white 45%, white 55%, blue 55%);
                background-image: -ms-linear-gradient(top left, red 45%, white 45%, white 55%, blue 55%);
                background-image: -o-linear-gradient(top left, red 45%, white 45%, white 55%, blue 55%);
                background-image: -webkit-linear-gradient(top left, red 45%, white 45%, white 55%, blue 55%);
                background-image: linear-gradient(top left, red 45%, white 45%, white 55%, blue 55%);
                background-repeat: no-repeat;
                background-position: center;
                display: inline-block;
                height: 100%;
                margin-left: 5px;
        }

        div:nth-child(1) { height: 100px; }
        div:nth-child(2) { height: 200px; }
        div:nth-child(3) { height: 300px; }

        span:nth-child(1) { width: 100px; background-size: 100% 100px; }
        span:nth-child(2) { width: 200px; }
        span:nth-child(3) { width: 300px; background-size: 100% 300px; }

        div:nth-child(1) > span:nth-child(2) { background-size: 150px 150px; }
        div:nth-child(2) > span:nth-child(2) { background-size: 200px 200px; }
        div:nth-child(3) > span:nth-child(2) { background-size: 250px 250px; }

        </style>
</head>
<body>
<div><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span></div>
</body>
</html>
Received on Wednesday, 20 July 2011 04:10:34 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:42 GMT