Данный урок покажет Вам, как создать тематический дизайн тетрадного листа при помощи только самого 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;
}
Демо на данный урок: демо просмотр