Интернет магазин шабонов
Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Блокнот на CSS

Дата добавления: 07.03.2017 - 12:56
Добавил: Buger
Количество просмотров: 123
Количество комментариев: 0
Размер файла: 3.0Kb
Рейтинг материала: 5.0 / 1
Блокнот на CSS
рейтинг 5.0
/
голосов 1
В этом материале мы рассмотрим, как создать блокнот на чистом css, без использования каких либо изображений. Что нам для этого потребуется, это указать HTML разметку и задать CSS стили. Не знаю конечно где можно использовать данную реализацию, но думаю все же кому-то она пригодится.
Демонстрацию вы сможете увидеть в скачанном файле.

И так давайте приступим к установке.
Первым, что нам надо сделать, это указать HTML разметку для элементов, к которым мы будем задавать стили.
Код
<div class="container">
  <div class="notepad1"></div>
  <div class="notepad2"></div>
</div>

DIV с классом "container" можете убрать, так как он отвечает только за место расположение нашего блокнота.
То есть, вам понадобится прописать только два DIV элемента:
Код
<div class="notepad1"></div>
<div class="notepad2"></div>

Отлично, теперь давайте пропишем для них наши стили CSS:
Код
<style class="cp-pen-styles">
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
   
body {
  background: #30b9f7;
}
   
.container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 355px;
  height: 250px;
}
   
.notepad1,
.notepad2 {
  display: inline-block;
  margin: 0 10px;
}
   
.notepad1 {
  position: relative;
  width: 135px;
  height: 200px;
  border-radius: 5px;
  background: #da4c9e;
  box-shadow: inset 0px -2px 0 rgba(0, 0, 0, 0.25), inset 0px -3px 0 #FFF, 0px 1px 0 #da4c9e, 3px 3px 0 rgba(0, 0, 0, 0.25);
}
   
.notepad1:before,
.notepad1:after {
  position: absolute;
  content: '';
}
   
.notepad1:before {
  top: 8px;
  left: 10px;
  width: 7px;
  height: 6px;
  margin: auto;
  border-radius: 2px;
  box-shadow: inset 0 0 0 5px #CCC, 15px 0 0 #CCC, 30px 0 0 #CCC, 45px 0 0 #CCC, 60px 0 0 #CCC, 75px 0 0 #CCC, 90px 0 0 #CCC, 105px 0 0 #CCC;
}
   
.notepad1:after {
  top: -8px;
  left: 0;
  right: 0;
  width: 82%;
  height: 20px;
  margin: auto;
  background-image: -webkit-repeating-linear-gradient(left, #333 0, #333 3px, transparent 3px, transparent 15px);
  background-image: repeating-linear-gradient(90deg, #333 0, #333 3px, transparent 3px, transparent 15px);
}
   
.notepad2 {
  width: 175px;
  height: 250px;
  border-radius: 0 0 2px 2px;
  background: #FFF;
  background-image: -webkit-linear-gradient(left, transparent 0, transparent 18px, red 18px, red 19px, transparent 19px, transparent 20px, red 20px, red 21px, transparent 21px), -webkit-repeating-linear-gradient(#2196f3 0, #2196f3 1px, transparent 1px, transparent 10px);
  background-image: linear-gradient(90deg, transparent 0, transparent 18px, red 18px, red 19px, transparent 19px, transparent 20px, red 20px, red 21px, transparent 21px), repeating-linear-gradient(#2196f3 0, #2196f3 1px, transparent 1px, transparent 10px);
  background-size: 100% 100%, 100% 85%;
  background-position: 0 0, 0 80%;
  background-repeat: no-repeat;
  box-shadow: inset 0 10px #255654, inset 0px -4px 0 rgba(0, 0, 0, 0.25), 3px 3px 0 rgba(0, 0, 0, 0.25)
}
</style>

На этом все! Находите применения данной реализации в своих проектах.

Источник: http://art-ucoz.ru/
Добавлять комментарии могут только зарегистрированные пользователи.