5. linear-gradient(red 20px, white 0px, blue 40px)
=2=>
linear-gradient(red 20px, white 20px, blue 40px)
6. linear-gradient(red, white -50%, black 150%, blue)
=1,2=>
linear-gradient(red 0%, white 0%, black 150%, blue 150%)
<div data-n="1">
<span data-img style="background-image:url('img.jpg');background-size:cover;" />
</div>
<div data-n="2">
<span data-img data-1 style="background-image:url('img.jpg');background-size:cover;" /><
span data-img data-2 style="background-image:url('img2.jpg');background-size:cover;" />
</div>
<div data-n="3">
<span class="Tower" data-img data-1 style="background-image:url('img.jpg');background-size:cover;" /><
span data-img data-2 style="background-image:url('img2.jpg');background-size:cover;" /><
span data-img data-3 style="background-image:url('img3.jpg');background-size:cover;" />
</div>
<div data-n="4">
<span data-img data-1 style="background-image:url('img.jpg');background-size:cover;" /><
span data-img data-2 style="background-image:url('img2.jpg');background-size:cover;" /><
span data-img data-3 style="background-image:url('img3.jpg');background-size:cover;" /><
span data-img data-4 style="background-image:url('img4.jpg');background-size:cover;" />
</div>
/* one item */
span:first-child:nth-last-child(1) {
width: 100%;
}
/* two items */
span:first-child:nth-last-child(2),
spah:first-child:nth-last-child(2) ~ li {
width: 50%;
height: 100%;
}
/* three items */
span:first-child:nth-last-child(3),
span:first-child:nth-last-child(3) ~ li {
width: 50%;
height: 50%;
}
/* three items - tower */
span.Tower:first-child:nth-last-child(3),
span.Tower:first-child:nth-last-child(3) ~ li {
width: 50%;
height:100%;
float:left;
}
/* four items */
img:first-child:nth-last-child(3),
img:first-child:nth-last-child(3) ~ li {
width: 25%;
height:25%;
}
было бы неплохо если бы в трекер кидалось. спасибо!