Окно с заметками и кнопкой закрыть в любой части блога

Всем, привет. Иногда бывает, что возникает необходимость заострить внимание посетителя на на таких моментах, как объявления, предупреждения или просто поздравления к какому - то значимому дню. Для этого можно сделать окно с нужным текстом на цветном фоне и кнопкой закрытия.

Во - первых оно обратит внимание читателя и в то же время его легко можно закрыть одним нажатием кнопки если уж очень "режет глаз".

Блок с такими заметками можно расположить в любом месте блога - над шапкой, под шапкой, над сообщениями. В теле самого поста можно размещать любое количество блоков с информацией. В последнем варианте в посте такие блоки блоки можно сделать разным цветом. Думаю, каждый найдёт применение.

Скопируйте приведённый ниже код и установите его в этом редакторе для просмотра.

Код

<style>.note{padding:2px;margin:0;font-size:16px;font-weight:400;position:relative;color:black}
.note p{margin:0;padding:8px 30px 8px 10px;line-height:1.5;font-size:16px;font-weight:400;background:rgba(255,255,255,.8)}
.note .close-note{position:absolute;top:5px;right:5px;width:20px;height:20px;line-height:20px;text-align:center;font-size:24px;font-weight:500;color:black;opacity:.3;cursor:pointer}
.note b,.note a{font-weight:500;}
.note .close-note:hover{opacity:1}
.note .close-note:focus,.note .close-note:active{outline:0}
.gradient{background:#2b0c93;background:-moz-linear-gradient(left,#2b0c93 0,#a54098 56%,#f84272 100%);background:-webkit-linear-gradient(left,#2b0c93 0,#a54098 56%,#f84272 100%);background:linear-gradient(to right,#2b0c93 0,#a54098 56%,#f84272 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b0c93', endColorstr='#f84272', GradientType=1 )}
</style>
<div class='note gradient'>
  <p>здесь любой ваш текст <b>и здесь ваш текст</b></p>
<div aria-label='Close Note' class='close-note' onclick='this.parentElement.style.display=&quot;none&quot;' role='button' tabindex='0'>&times;</div>
</div>

Можно отрегулировать padding:2px;margin:0 отступы, чтобы выровнять расстояние.

Можно изменить свойство gradient, выделенное зелёным, в зависимости от вашего дизайна. Есть замечательный генератор градиент фона. https://www.colorzilla.com/gradient-editor/

Чтобы изменить цвет фона, пожалуйста, замените background:#2b0c93 на возможные

.red{background:#E53935}
.pink{background:#D81B60}
.purple{background:#8E24AA}
.indigo{background:#3949AB}
.blue{background:#1E88E5}
.cyan{background:#00ACC1}
.teal{background:#00897B}
.green{background:#43A047}
.yellow{background:#FDD835}
.orange{background:#FB8C00}
.brown{background:#6D4C41}
.grey{background:#546E7A}

Если возникнет идея и захочется в сообщении выделить несколько блоков разным цветом и в разных местах поста, тогда в каждом следующем варианте замените в коде везде note на note1, note2, note3 и  так далее.  И значение цвет background, соответственно. Я выше привела некоторые из них. 

Сейчас, когда определились с местом положения блока и фоном, устанавливайте код в гаджет HTML/JavaScript в любом месте макета блога. Или же в теле поста в нужном месте, перейдя в режим HTML.

Если нужно без разрыва сделать разноцветные блоки, как на первой картинке, код HTML можно прописать так

<style>
.note{padding:2px;margin:0;font-size:16px;font-weight:400;position:relative;color:black}
.note p{margin:0;padding:8px 30px 8px 10px;line-height:1.5;font-size:16px;font-weight:400;background:rgba(255,255,255,.8)}
.note .close-note{position:absolute;top:5px;right:5px;width:20px;height:20px;line-height:20px;text-align:center;font-size:24px;font-weight:500;color:black;opacity:.3;cursor:pointer}
.note b,.note a{font-weight:500;}
.note .close-note:hover{opacity:1}
.note .close-note:focus,.note .close-note:active{outline:0}
.gradient{background:#2b0c93;background:-moz-linear-gradient(left,#2b0c93 0,#a54098 56%,#f84272 100%);background:-webkit-linear-gradient(left,#2b0c93 0,#a54098 56%,#f84272 100%);background:linear-gradient(to right,#2b0c93 0,#a54098 56%,#f84272 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b0c93', endColorstr='#f84272', GradientType=1 )}
.red{background:#E53935}
.pink{background:#D81B60}
.purple{background:#8E24AA}
.indigo{background:#3949AB}
</style>

<br />
<div class="note gradient">
Здесь блок с классом note gradient<br />
<div aria-label="Close Note" class="close-note" onclick="this.parentElement.style.display=&quot;none&quot;" role="button" tabindex="0">
×</div>
</div>
<br />
<div class="note red">
Здесь второй блокс классом note red<br />
<div aria-label="Close Note" class="close-note" onclick="this.parentElement.style.display=&quot;none&quot;" role="button" tabindex="0">
×</div>
</div>
<br />
<div class="note pink">
Здесь третий блок с note pink<br />
<div aria-label="Close Note" class="close-note" onclick="this.parentElement.style.display=&quot;none&quot;" role="button" tabindex="0">
×</div>
</div>
<br />
<div class="note purple">
Блок с note purple<br />
<div aria-label="Close Note" class="close-note" onclick="this.parentElement.style.display=&quot;none&quot;" role="button" tabindex="0">
×</div>
</div>
<br />
<div class="note indigo">
И блок с note indigo<br />
<div aria-label="Close Note" class="close-note" onclick="this.parentElement.style.display=&quot;none&quot;" role="button" tabindex="0">
×</div>
</div>

Так же скопируйте код и просмотрите в редакторе, ссылка на который выше.

Вот такие разноцветные блоки (окно для заметок, важных моментов, объявлений) можно легко и оригинально использовать на своих блогах.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email