的 demo

Question

我有一个日历，我希望日历条目能够反映日历后面显示的渐变，就像iOS7中的iMessages在顶部较浅而在底部较暗。这有可能在css3中完成吗？

我会按如下方式组织它（简化2天日历）：

<div class="gradient">
  <table>
    <tr>
      <td>
        <ul>
          <li class="masked-gradient-background" >lighter item</li>
        </ul>
      </td>
    </tr>

    <tr>
      <td>
        <ul>
          <li class="masked-gradient-background" >darker item item</li>
        </ul>
      </td>
    </tr>
  </table>
</div>

Answer 1

在我能给你的解决方案中，你需要事先知道会有多少项，并为每一项都写一条规则。

不是最好的主意，也许有人可以做得更好。

CSS

.masked-gradient-background {
    background-size: 100px 300%;
    background-image: -webkit-linear-gradient(-90deg,white, black);
}

tr:nth-child(1) .masked-gradient-background {
    background-position-y: 0%;
}

tr:nth-child(2) .masked-gradient-background {
    background-position-y: -100%;
}

tr:nth-child(3) .masked-gradient-background {
    background-position-y: -200%;
}

您需要知道在背景大小中设置300％的项目数。除非您可以使用最大数量，如果列表中途已满，则最后的项目将不会是完全黑暗

demo

Answer 2

虽然这与Message.app中的不同，但这是来自mail.app

的渐变

http://jsfiddle.net/cHhN2/

<div class="icon mail"></div>

html, body {
width   : 100%;
height  : 100%;
margin  : 0;
padding : 0; }

.icon {
position           : relative;
display            : inline-block;
width              : 100px;
height             : 100px;
margin             : 20px;
border-radius      : 18px;
-webkit-box-sizing : border-box;
-moz-box-sizing    : border-box;
box-sizing         : border-box; }

.mail {
box-shadow : 0 0 0 1px rgba(11, 70, 238, 0.1) inset;
background : -webkit-linear-gradient(top, #1a51f0 0%, #03e4fe 100%);
background : -moz-linear-gradient(top, #1a51f0 0%, #03e4fe 100%);
background : -ms-linear-gradient(top, #1a51f0 0%, #03e4fe 100%);
background : -o-linear-gradient(top, #1a51f0 0%, #03e4fe 100%);
background : linear-gradient(top, #1a51f0 0%, #03e4fe 100%); }

.mail {
position      : absolute;
width         : 68px;
height        : 46px;
top           : 50%;
left          : 50%;
margin        : -23px 0 0 -34px;
overflow      : hidden;
border-radius : 3px;
box-shadow    : 0 0 0 1px rgba(5, 64, 234, 0.1); }


.mail:before {
top          : 0;
left         : 0;
border-color : transparent transparent transparent white; }

.mail:after {
top          : 0;
right        : 0;
border-color : transparent white transparent transparent; }

.mail {
position : absolute; }

虽然这可能不是您要求的，但如果不是，请发布截图，因为我是Android用户，我会尽力帮助。

Answer 3

好的，我通过使用scroll事件来调整所有列表元素的背景位置，使用Jquery：

$('li').each(function(){
  var li_offset = $(this).offset().top
  $(this).css('background-position', '0 '+li_offset+'px');
});

$('.scroll').scroll(function(){
  $('li').each(function(){
    var scroll_offset = $(this).scrollTop();
    var li_offset = $(this).offset().top
    var total = li_offset - scroll_offset
    $(this).css('background-position', '0 '+total+'px');
  });
});

的 demo

感谢@vals指出我正确的方向！

iMessage就像css中的渐变掩码一样

3 个答案:

demo

的 demo