Рамки для текста на Блоггер

Рамки для фотографий я представила вашему вниманию в предыдущей статье, а сегодня предлагаю рамочки для текста. 

Они так же сделаны на CSS+HTML. 

Рамочками можно выделить что-то важное в тексте или 

какое-либо объявление для читателей.

Рамку добавляем в статью в редакторе блога, в режиме XTML.

Проверить работу кода можно в визуальном редакторе на блоге.

Градиентная рамка

Код:

<div id="gradient">
текст</div>
<style>
#gradient {
  width: 600px; /* ширина рамки */
  border: 30px solid;
  border-image: repeating-linear-gradient(45deg, #b86, #fc8, #fed 30px) 60;
  padding: 20px;
}
</style>

Синим в коде выделила цвета рамки, меняйте на свои.

Градиентная рамка с тёмным фоном

Код:

div class="module-border-wrap"><div class="module">
текст.</div></div>
<style>{
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background: #222;
}
.module-border-wrap {
  max-width: 700px;  /* ширина рамки */
  padding: 1rem;
  position: relative;
  background: linear-gradient(to right, red, purple);
  padding: 4px;
}
.module {
  background: #222;
  color: white;
  padding: 2rem;
}</style>

Рамка из двух полос с тёмным фоном

Код:

<div class="module">
Ваш текст.</div>
<style>{
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background: #222;
}
.module {
  max-width: 700px; /* ширина рамки */
  padding: 1rem;
  color: white;
  border-width: 6px;
  border-style: solid;
  border-image:
    linear-gradient(
      to bottom,
      red,
      rgba(0, 0, 0, 0)
    ) 1 100%;
}.module {
  background: #222;
  color: white;
  padding: 2rem;
}
</style>

Рамка анимированная

Код:

<div class="sardware-sincemid vered">
Ваш текст.</div>
<style>
.sardware-sincemid {
  color: #555555;
  padding: 16px;
  text-align: center;
  border-radius: 5px;
}
.sardware-sincemid {
  position: relative;
}
.sardware-sincemid:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 3px;
  background: linear-gradient(120deg, #1af370, #258af1, #13f36c);
  background-size: 300% 300%;
  clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), 3px calc(100% - 3px), 3px 100%, 100% 100%, 100% 0%, 0% 0%);
}
.sardware-sincemid.vered:after {
  animation: frame-enter 1s forwards ease-in-out reverse, gradient-animation 4s ease-in-out infinite;
}
@keyframes gradient-animation {
  0% {
  background-position: 15% 0%;
  }
  50% {
  background-position: 85% 100%;
  }
  100% {
  background-position: 15% 0%;
  }
}
@keyframes frame-enter {
  0% {
  clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), 3px calc(100% - 3px), 3px 100%, 100% 100%, 100% 0%, 0% 0%);
  }
  25% {
  clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 100% 100%, 100% 0%, 0% 0%);
  }
  50% {
  clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, 100% 0%, 0% 0%);
  }
  75% {
  -webkit-clip-path: polygon(0% 100%, 3px 100%, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 0%, 0% 0%);
  }
  100% {
  -webkit-clip-path: polygon(0% 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 0% 100%);
  }
}
</style>

Градиентная рамка со светлым фоном

Код:

<div id="box">Текст.</div>
<style>
#box {
    background:lavender;
    border-left:6px solid; /* толщина полосы рамки*/
    border-right:6px solid; /* толщина полосы рамки */
    border-image: linear-gradient(to bottom, blue, red) 1 100%;
    height:100px; /* высота рамки */
    padding:10px;
}</style>

Двойная рамка

Код:

<style type="text/css">
.ramka {
border:2px #854d98 solid; /* размер и цвет линий рамки */
border-radius:1px;
box-shadow: 0px 0px 5px 2px #f6f6f6, 0px 0px 5px 7px #cccccc;
width:700px; /* ширина рамки */
padding:10px;
}
</style>
<div class="ramka">
текст</div>

Рамка с разрывом

Код:

<center>
<fieldset style="border: 3px #b22222 solid;
 box-shadow: 0.4em 0.4em 5px rgba(122 , 122 , 122 , 0.5); margin: 0px 0px 0px 0px; padding: 14px;">
<legend><span style="color: firebrick;">
<b>Название текста</b></span></legend>
<div style="background-color: white; box-sizing: inherit;
color: #1a1a1a; font-family: sans-serif; font-size: 16px;
margin-bottom: 1.75em; text-align: start;">
текст</div>
</fieldset>
</center>

Синим выделила в коде цвет рамки
Зелёным — размер рамки

Синяя рамка

Код:

<div style="border: 15px outset #0a78f0; box-shadow: inset 0 0 6px; padding: 15px;">
текст</div>

Красным выделила в коде цвет и размер рамки.

Рамка с тенью

Код:

<div class="block">текст</div>
 <style type="text/css">
 .block {
 color: #000; /* цвет текста */
 background: #fff; /* фон рамки */
 border: 3px #c33 solid; /* размер и цвет рамки */
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 padding: 5px;
box-shadow: 0 0 5px 2px orangered; /* размер и цвет тени */
 }
 </style>