—»     —»   Дизайн тетрадного листа при помощи CSS
  Раздел: CSS/Style Sheets   Комментариев: 8  

Дизайн тетрадного листа при помощи CSS

Дизайн тетрадного листа при помощи CSS

Данный урок покажет Вам, как создать тематический дизайн тетрадного листа при помощи только самого CSS.

Мы начнём с создания базовой оболочки, определив для тега body следующие свойства:

body {
background-color: #f5f5f5;
width: 600px;
margin: 0 auto;
padding: 0;
}

Далее, сделаем неупорядоченный список, я его назову list:

.list {
color: #555;
font-size: 22px;
padding: 0 !important;
width: 500px;
font-family: courier, monospace;
border: 1px solid #dedede;
}

Причина того, почему Мы добавили значение поля 0, в том, что в дальнейшем когда Мы добавим красную линию в дизайн тетради, содержимое не должно смещаться. Ширина тетрадного листа может быть какая угодно (width в теге body), для примера Мы выбрали 600px, потому что такая ширина оптимально подходит для любого монитора. Ещё одним ключевым свойством здесь являются граница листа, она отлично вписывается в дизайн.

Далее Мы создадим стиль для каждой строчки листа при помощи тега li:

.list li {
list-style: none;
border-bottom: 1px dotted #ccc;
text-indent: 25px;
height: auto;
padding: 10px;
text-transform: capitalize;
}

Теперь тетрадный лист в значительной степени выглядит очевидно. Только удостоверьтесь, что Вы добавляете именно border-bottom: 1px dotted #ccc;. Данные линии, на мой взгляд, дают необходимую тему для тетрадного листа, но Вы можете с ними и поэкспериментировать.

Если Вы хотите, то можете использовать псевдо-класс: hover, что бы при наведении курсора на тег li (строчки) подсвечивались.

.list li:hover {
background-color: #f0f0f0;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
}

В HTML файле пропишем следующее:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Theme: Notepad</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h4>Notes</h4>
<ul class="list">
<li>Eat Breakfeast</li>
<li>Feed Pugsly, the cow</li>
<li>Sit Down</li>
<li>Eat lunch</li>
<li>Call mom</li>
<li>Tweet about feeding my cow, pugsly</li>
<li>Join a hangout in google+</li>
<li>Prepare Dinner</li>
<li>Eat Dinner</li>
<li>Get ready for bed</li>
<li>Go to bed</li>
</ul>
</body>
</html>

Теперь, напишем стиль для вертикальных красных линий:

.lines {
border-left: 1px solid #ffaa9f;
border-right: 1px solid #ffaa9f;
width: 2px;
float: left;
height: 495px;
margin-left: 40px;
}

В данном обучающем уроке, самое сложное было добавить вертикальные линии для каждой строчки li.
Но Мы поступим следующим образом, добавим в HTML код следующее:

<div class="lines"></div>

Данный div обязательно надо вставить перед тегом ul.
Для того что бы наша красная линия была двойной задаётся параметр width: 2px; в классе CSS .lines.
Финальный вид CSS будет выглядеть так:

body {
background-color: #f5f5f5;
width: 600px;
margin: 0 auto;
padding: 0;
}
h4 {
color: #cd0000;
font-size: 42px;
letter-spacing: -2px;
text-align: left;
}
.list {
color: #555;
font-size: 22px;
padding: 0 !important;
width: 500px;
font-family: courier, monospace;
border: 1px solid #dedede;
}
.list li {
list-style: none;
border-bottom: 1px dotted #ccc;
text-indent: 25px;
height: auto;
padding: 10px;
text-transform: capitalize;
}
.list li:hover {
background-color: #f0f0f0;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
}
.lines {
border-left: 1px solid #ffaa9f;
border-right: 1px solid #ffaa9f;
width: 2px;
float: left;
height: 495px;
margin-left: 40px;
}

Демо на данный урок: демо просмотр
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал ITS   Прочитано (раз): 15275   |   Оставлено комментариев: 8
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 27 февраля 2012 @ 13:52
Написал: valentin — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Как всегда - доступно, понятно и разложено по полочкам. Отличное руководство, спасибо.
Комментарий #2: 28 февраля 2012 @ 06:30
Написал: Vect0r — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
И у вас и на руселлере эта статья. Втыкал вчера там, сегодня здесь, и так и не смог понять, что же тут такого нового и необычного то? То, что вначале идёт объект с обтеканием по левому краю? Ну, так если пунктов в списке будет чуть больше или чуть меньше, то уже этот лист не будет выглядеть, как лист. Чтобы хоть как-то было получше, надо и для ul задавать высоту и прописывать overflow: auto, чтобы, если пунктов в списке будет больше, появлялся бы скролл. Это по крайней мере даст иллюзию того, что красные поля действительно идут по всей "страничке". А для самих пунктов li надо делать white-space: nowrap, чтобы при большом количестве текста, не было пунктов на 2 строки.

Или отступ текста вы считаете какой-то находкой? Так это тоже как бы известная штука.

Поясните, в чём актуальность этого урока. По мне так это бесполезная вещь. Нет, на вашем сайте много интересных статей, но эта – просто ни о чём.
Комментарий #3: 28 февраля 2012 @ 08:04
Написал: senator3821 — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Хорошая информация и понятный урок, спасибо за то, что потратили свое время и написали данный материал!
Комментарий #4: 28 февраля 2012 @ 18:14
Написал: ITS — группа: Читатели  
На сайте с: 20.02.2010   |   Публикаций: 3   |   Комментариев: 127
ICQ: 366337851
Vect0r, belay флаг в руки сайту ресселер, что перевели данный материал быстрее (хотя полагаясь по фидам сайта, то статья свет увидела 27.02.2012 - так же как и здесь), я плагиатом текстов не занимаюсь, нахожу интересный материал на английском языке и перевожу (+ надо учитывать что здесь проходит модерация всех статей, а админа всего только два - в связи с этим статьи появляются чуть позже, того как их перевели).

По поводу "почему так, а не иначе": данный пример, на то он и пример, показывает возможность реализации дизайна тетрадного листа, любой код будь он даже написан великим программистом не будет идеальным, везде есть недочёты и есть что улучшить.

Если хотите выяснить на примере данного урока почему так, а не по другому, то надо обратиться к первоисточнику - хозяину статьи. (жмём на кнопочку "Оригинал статьи" и там задаём все сопутствующие вопросы на английском языке.)

Поясните, в чём актуальность этого урока. По мне так это бесполезная вещь. Нет, на вашем сайте много интересных статей, но эта – просто ни о чём.

: и ещё раз повторюсь, актуальность в том, чтобы показать пример реализации, дать ход зарождению идеи в голове дизайнера. Конечный результат данного примера воочию зависти только от фантазии разработчика.
На ресселере правильно пишет leeyoloo, после Вашего комментария: "...Да и вобще кучу всего придумать можно. Главное вдохновение ((;".

Если есть ещё вопросы, пишите fellow .


--------------------
Вещам, которым надо бы учиться, чтобы их делать, — лучше учиться, делая их.
© Аристотель
Комментарий #5: 29 февраля 2012 @ 12:27
Написал: Vect0r — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Вы меня не совсем правильно поняли. Или я Вас. Мне без разницы, где быстрее появится тот или иной перевод. Не все уроки, которые есть там, есть здесь, и наоборот.
Поэтому, когда я увидел на обоих ресурсах этот урок, то решил, что вероятно он очень полезный. А когда проникся в суть вещей, то понял, что в нём ничего интересного. Некоторые техники, использованные в нём, вообще не стоит применять на мой взгляд в силу их неуниверсальности.

Поэтому и возник вопрос: что же такого нашли 2 разных переводчика в этом уроке, что я упускаю?

Но, судя по всему, это простое совпадение.

P.S.: прошу прощения, если чем-то обидел. Спасибо за то, что делаете и конечно же ждём новых переводов.
Комментарий #6: 29 февраля 2012 @ 18:51
Написал: ITS — группа: Читатели  
На сайте с: 20.02.2010   |   Публикаций: 3   |   Комментариев: 127
ICQ: 366337851
Vect0r, судя по всему просто видимо совпадение что там и тут появился перевод winked
Теперь буду по крайней мере знать, какой сайт уже юзает ресселер.


--------------------
Вещам, которым надо бы учиться, чтобы их делать, — лучше учиться, делая их.
© Аристотель
Комментарий #7: 5 марта 2012 @ 00:22
Написал: ITS — группа: Читатели  
На сайте с: 20.02.2010   |   Публикаций: 3   |   Комментариев: 127
ICQ: 366337851
jenifer, извините, но комментарии к теме статьи на мой взгляд не относятся.


--------------------
Вещам, которым надо бы учиться, чтобы их делать, — лучше учиться, делая их.
© Аристотель
Комментарий #8: 5 марта 2012 @ 00:39
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3324   |   Комментариев: 500
ICQ: --- не указано ---
ITS, jenifer - это бот. Мы его регулярно банили, баним и банить будем.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031