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


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

1733
7.4 из 10
Проголосовало: 3






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

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

Код HTML:

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


Код CSS:

Code
<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>
Автор публикации: Загрузка
Загрузка
Estwood, это его n материал
Источник: http://yraaa.ru/
  • Всего комментариев: 1

BALCETUL
0
BALCETUL написал: Написано 02 Августа 2012 в 21:19
Комментарий №1
smile

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Поставил ваш код он начинает считать от 0 до 100 и останавливаеться. я думал он будет в случайном порядке показывать цыфры
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
    Последние темы
    Опрос
    205
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 2
    Гостей: 2
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: