Эффект радуги для рамки CSS

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

Она несла в руках отвратительные, тревожные желтые цветы. Черт их знает, как их зовут, но они первые почему-то появляются в Москве. И эти цветы очень отчетливо выделялись на черном ее весеннем пальто. Она несла желтые цветы! Нехороший цвет.

Код.

<style>.box {
  width: 100%;
  padding: 4px;
  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82); /* цветовая гамма */
  border-radius: 6px;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  box-sizing:border-box
}
.content {
  background: #fff; /*цвет фона внутри  */
  padding: 12px;
  font-size: 16px;/* размер шпифта */
  border-radius: 6px;/* рамка */
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .3);
}</style>

<div class="box">
  <div class="content">
    <p>
Она несла в руках отвратительные, тревожные желтые цветы.
Черт их знает, как их зовут, но они первые почему-то появляются в Москве.
И эти цветы очень отчетливо выделялись на черном ее весеннем пальто.
Она несла желтые цветы! Нехороший цвет.
    </p>
  </div>
</div>

Для картинок изменим немного стили  - ширину и высоту всего блока, картинки и убираем размер шрифта. А в коде HTML заменяем текст на путь к картинке (её URL адрес). Результат.

Код примерно такой.

<style>.box1 {
  width: 300px;
  height: 300px;
  padding:5px;
  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82); /* цветовая гамма */
  border-radius: 6px;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  box-sizing:border-box
}
.content1 {
width: 290px;
height: 290px;
background: #fff; /*цвет фона внутри  */
padding: 2px;

  border-radius: 6px;/* рамка */
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .3);
}</style>

<div class="box1">
<div class="content1">
<a href="адрес страници, куда пользователь перейдёт при клике">
<img src="адрес картинки
" /></a>
    </div>
</div>

Воспользуйтесь этой таблицей цветов. Задайте нужную ширину рамки border-radius: 6px; И замените в коде HTML мой текст. Результат можно увидеть в режиме "Просмотр".
Сегодня у меня всё. Удачи всем и до встречи.

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

Введите Ваш email