Наверх
 

Навигация
Опрос
Какие виды уроков Вы хотите видеть на сайте?
Битрикс
DLE
CSS
Joomla
Wordpress
Все для хостинга
Все для фотошопа
Другое

База уроков » » » Красивый вертикальный скроллинг

Красивый вертикальный скроллинг

29 мая 2014 | Комментариев: 0 | Просмотров: 1578

 Вот так он будет выглядеть у вас на страничке сайта. Сверху и снизу тень при прокрутке, а до ходя до конца то одна тень пропадает, так как вы дошли до конца.

 

Вот сам код:

 

<style>
	.scrollbox {
	 overflow: auto;
	 width: 300px;
	 max-height: 300px;
	 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>
	</div>

 

Вот и все. Удачи



 
 


Теги: html, HTML5, CSS3

Ссылка на новость:

    html-cсылка на публикацию
    BB-cсылка на публикацию
    Прямая ссылка на публикацию

ЕЩЕ НА ЭТУ ТЕМУ:

Появление видимости кнопки при поставленной галки в чекбоксе

Появление видимости кнопки при поставленной галки в чекбоксе

  Кнопка становится видимой при нажатом чекбоксе.  
Появление кнопки при поставленной галки в чекбоксе

Появление кнопки при поставленной галки в чекбоксе

  Простое появлении кнопки при нажатом чекбоксе.
Кнопки с анимацией на CSS3

Кнопки с анимацией на CSS3

Красивые кнопки с анимацией на CSS3. Всегда подойдет любому сайту
Красивый текст с тенью (Совместимый с Internet Explorer)

Красивый текст с тенью (Совместимый с Internet Explorer)

Красивый текст с тенью (Совместимый с Internet Explorer)
Обычное меню на CSS3 с закругленными краями

Обычное меню на CSS3 с закругленными краями

Простое CSS3 меню с закругленными краями использующее свойство ...border-radius, поэтому в IE может не отображаться.
Всплывающая подcказка при наведении

Всплывающая подcказка при наведении

Простой и очень легкий по размеру эффект всплывающей подсказки. Любой элемент с классом vtip будет отображать при наведении на него всплывающую подсказку на
Анимированный фон при наведении на ссылку

Анимированный фон при наведении на ссылку

Простой эффект анимированного фона при наведении курсора на ссылку
Навигационное меню темными кнопками

Навигационное меню темными кнопками

Простое меню на CSS3/HTML с эффектом выдавливания в темных тонах.
Красивый эффект анимации для галереи

Красивый эффект анимации для галереи

Эффект, который позволит преобразить вашу галерею фотографий, с помощью библиотеки Raphael и jQuery. Нужно создать три файла: index.html, default.css, init.js
Красивая анимация заголовка изображения

Красивая анимация заголовка изображения

Красивый эффект анимации при наведении на картинку, у которой по верх отображается ее название.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.