IMessage, как градиентная маска в CSS

0

У меня есть календарь, в котором я хотел бы, чтобы записи календаря отражали градиент, отображаемый за календарем, так же как iMessages в iOS7 легче кверху и темнее внизу. Можно ли это сделать в css3?

Я бы организовал его следующим образом (упрощенный двухдневный календарь):

<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>
Теги:

3 ответа

0
Лучший ответ

Хорошо, я получил его работу, используя событие прокрутки, чтобы отрегулировать фоновое положение всех элементов списка с помощью 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');
  });
});

демонстрация

спасибо @vals за то, что указали мне в правильном направлении!

Поделиться
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% в фоновом размере. Если вам не подходит максимальный номер, и если список заполнен наполовину, последние элементы не будут полностью заполнены

демонстрация

Поделиться
  • 0
    хм да @vals, это было бы половиной того, что я пытаюсь достичь, интересно, будет ли эффективный способ синхронизировать положение фона с пользователем, прокручивающим с помощью jquery? Может быть, каким-то образом синхронизировать положение фона каждой записи календаря со смещением (). Top этого элемента.
  • 0
    Не совсем уверен, как вы справляетесь со свитком. Может быть, вы можете поставить скрипку?
0

Хотя это не то же самое, что и в 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, и я буду искать помощь, где могу.

Поделиться
  • 1
    Эффект, который он ищет, заключается в статическом градиенте сверху вниз, где объекты, движущиеся на странице, действуют как вырезы, раскрывающие градиент. Таким образом, окно в верхней части экрана будет затенено от одного синего к другому, если вы прокрутите его до конца. Это не похоже, что это сделало бы это.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню