Уважаемые друзья и пользователи сайта ART-UCOZ!
Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!
Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.
Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!
Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.
Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!
Подобные просьбы и вопросы - будут игнорироваться!
Блокнот на CSS
Дата добавления: 07.03.2017 - 12:56
Категория: Хаки / Дополнения
Добавил: Buger
Количество просмотров: 1.6k
Количество комментариев: 0
Размер файла: 3.0 Kb
Рейтинг материала: 5.0 / 1
БЕСПЛАТНО
рейтинг
5.0
/
голосов
1
В этом материале мы рассмотрим, как создать блокнот на чистом css, без использования каких либо изображений. Что нам для этого потребуется, это указать HTML разметку и задать CSS стили. Не знаю конечно где можно использовать данную реализацию, но думаю все же кому-то она пригодится.
Демонстрацию вы сможете увидеть в скачанном файле.
И так давайте приступим к установке.
Первым, что нам надо сделать, это указать HTML разметку для элементов, к которым мы будем задавать стили.
DIV с классом "container" можете убрать, так как он отвечает только за место расположение нашего блокнота.
То есть, вам понадобится прописать только два DIV элемента:
Отлично, теперь давайте пропишем для них наши стили CSS:
На этом все! Находите применения данной реализации в своих проектах.
Источник: http://art-ucoz.ru/
Демонстрацию вы сможете увидеть в скачанном файле.
И так давайте приступим к установке.
Первым, что нам надо сделать, это указать HTML разметку для элементов, к которым мы будем задавать стили.
Код
<div class="container">
<div class="notepad1"></div>
<div class="notepad2"></div>
</div>
<div class="notepad1"></div>
<div class="notepad2"></div>
</div>
То есть, вам понадобится прописать только два DIV элемента:
Код
<div class="notepad1"></div>
<div class="notepad2"></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>
* {
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/
Добавлять комментарии могут только зарегистрированные пользователи.
Поделись с друзьями: