<![CDATA[Серый форум — HTML/CSS: Вертикальный скроллинг изображения с тенью при прокрутке]]> https://forum.script-coding.com/viewtopic.php?id=10248 Tue, 16 Dec 2014 20:29:37 +0000 PunBB <![CDATA[Re: HTML/CSS: Вертикальный скроллинг изображения с тенью при прокрутке]]> https://forum.script-coding.com/viewtopic.php?pid=89485#p89485 greg zakharov пишет:

Простите, а Вы вообще понимаете принципы разметки?

Не все. Но если бы понимал хорошо, то не спрашивал бы. С другой стороны если бы совсем ничего не понимал, то и спросить не смог бы
Так возможно сделать появление этой тени над картинкой?

]]> Tue, 16 Dec 2014 20:29:37 +0000 https://forum.script-coding.com/viewtopic.php?pid=89485#p89485 <![CDATA[Re: HTML/CSS: Вертикальный скроллинг изображения с тенью при прокрутке]]> https://forum.script-coding.com/viewtopic.php?pid=89484#p89484 Простите, а Вы вообще понимаете принципы разметки?

]]> Tue, 16 Dec 2014 19:59:22 +0000 https://forum.script-coding.com/viewtopic.php?pid=89484#p89484 <![CDATA[HTML/CSS: Вертикальный скроллинг изображения с тенью при прокрутке]]> https://forum.script-coding.com/viewtopic.php?pid=89441#p89441 В этом примере при прокрутке появляется внизу и вверху полоска с тенью, но если вместо текста добавить картинку, то тень не появляется, как сделать что бы в этом примере тень появлялась также и при прокрутке изображения?
Орыгинальный пример здесь, там где Красивый вертикальный скроллинг

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Вертикальный скроллинг изображения с тенью при прокрутке</title>
</head>

<body>

<style>
.scrollbox {
 overflow: auto;
 width: 880px;
 max-height: 400px;
 margin: 30px auto;
 background:
  linear-gradient(white 30%, rgba(255,255,255,0)),
  linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
  radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
  radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
 background-repeat: no-repeat;
 background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
 background-attachment: local, local, scroll, scroll;
}
</style>

<div class="scrollbox">
 <ul>
  <li>Тени нет сверху.</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>Начинаем прокручивать блок</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  <li>22</li>
  <li>23</li>
  <li>24</li>
  <li>25</li>
  <li>26</li>
  <li>27</li>
  <li>Конец!</li>
  <li>Тут нет тени снизу.</li>
 </ul>

 <img src="file://localhost/С:/image.png" alt="" />
</div>

</body>
</html>
]]> Tue, 16 Dec 2014 13:00:03 +0000 https://forum.script-coding.com/viewtopic.php?pid=89441#p89441