Например:
Пятница, 19.04.2024, 05:56 Регистрация Карта сайта RSS Лента
Игровые новости Топ Сайтов Статьи Загрузить изображение Игровой форум Картинки
  • Страница 1 из 1
  • 1
Форум » Система Ucoz » Скрипты для ucoz » CSS Список в виде тетрадного листка
CSS Список в виде тетрадного листка
Dimas777
Дата: Среда, 11.09.2013, 19:53 | Сообщение № 1
ICQ пользователя:
Skype пользователя:
Сайт пользователя:

Оффлайн
Сообщений: 300
Награды: 2
 


Список в виде тетрадного листка – вид для UL списка с псевдо-элементами. Казалось бы, они здесь не нужны, но как еще сделать красные линии, не добавляя лишние коды. Прикрепить этот вид можно к списку на сайте с любой тематикой, это может быть прайс-лист сайта про натяжные потолки. Лист будет полезен для оформления цитат на сайте, подойдет и для меню. Чтобы и текст стал похож на написанный ручкой, нужно использовать стандартный шрифт Georgia, и сделать цвет текста синим.

Еще одна особенность - это то, что список не просто бумажка, а стопка бумажек. Объясняется тем, что просто тень не делает блок похожим на тетрадный лист, нужен какой-то объем, и такой объем создает для списка еще пару листов под блоком.

Код HTML:

Код
<ul class="list">   
   <li>Привет, я бумажка.</li>   
   <li>Цифровая бумажка.</li>   
   <li>Представлена в виде списка.</li>   
   <li>С псевдо-элементами.</li>   
   <li>Ну, с красными линиями такими.</li>   
   <li> </li>   
</ul>


Код CSS:

Код
<style type="text/css">   
ul.list {   
   font-size: 14px;   
   list-style: none;   
   position: relative;   
   width: 350px;   
   margin: 40px auto;   
   border: 1px solid #f5f5f5;   
   padding: 20px 0;   
   background-color: #FBFBFB;   
   box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.5),   
   ; 0 4px 3px -2px rgba(0,0,0,.1),   
   0 1px 1px 0 rgba(0,0,0,.2);   
   text-shadow: 0 1px 0 white;   
}   
ul.list:before, ul.list:after {   
   content: '';   
   position: absolute;   
   left: 2px;   
   top: 3px;   
   background-color: #F9F9F9;   
   border: 1px solid #f5f5f5;   
   width: 99%;   
   height: 100%;   
   z-index: -1;   
   box-shadow: 0 7px 1px -3px rgba(0,0,0,.1),   
   ; 0 1px 1px 0 rgba(0,0,0,.2);   
   transform: rotate(2.5deg) ;   
}   
ul.list:after {   
   top: 4px;   
   transform: rotate(-1deg) ;   
}   
.list li {   
   border-bottom: 1px solid rgba(205,220,243,1);   
   padding: 8px 10px 2px 35px;   
}   
.list li:first-of-type:after {   
   content: '';   
   position: absolute;   
   left: 25px;   
   top: -1px;   
   border-left: 1px solid rgba(240,214,213,1);   
   border-right: 1px solid rgba(240,214,213,1);   
   width: 1px;   
   height: 101%;   
}   
</style>




CSS, Список, в, виде, тетрадного, листка

    
Game-Portals.3dn.ru - The Best.
Форум » Система Ucoz » Скрипты для ucoz » CSS Список в виде тетрадного листка
  • Страница 1 из 1
  • 1
Поиск: