» » Текст на тетрадном листе на Blogger

Текст на тетрадном листе на Blogger

Часто в статье нужно выделить важные моменты, информацию, сообщения, цитаты, коды и так далее.
Выделить так, что бы посетитель обратил на сообщение внимание.
Я уже писала ранее о выделении важного текста в статье, но предлагала оформление с использованием картинок, а сегодня предлагаю оформить участок текста градиентом CSS.
Проверить коды на работоспособность можно в визуальном редакторе.
Первый код нужно обернуть тегами <style></style>, второй оставить как есть.

Оформление текста

Добавляем код в шаблон, выше тега ]]></b:skin>

Код №1
.quote {
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 1.8em, rgba(34, 136, 187, .5) 2em)
      3em 0 repeat-y,
    linear-gradient(
      rgba(255,255,255, 0) 1.9em, rgba(0, 0, 0, .15) 2em)
    0 0;
  background-size: 2em 2em;
  background-color: #f2f9fc;
  margin: 1em 0em 1em 0em;
  padding: 2.5em 2em 1em 6em;
  font: 16px/2 Georgia;
  font-style:italic;
}
Можно поменять:
Цвет вертикальной полоски — выделен красным в коде.
Синим выделен цвета фона.
Когда понадобится выделить в статье часть текста, добавляем код №2 в режиме XTML в редакторе сообщения.
Код №2
<div class="quote">
УЧАСТОК ТЕКСТА
</div>
И получится вот такой результат: 
Вид 1
На основе этого кода можно сделать другой фон, так же на CSS. Для этого понадобятся паттерны и градиенты. На их основе можно сделать новое оформление.

Градиент в полоску

Градиент в полоску
Код: 
.quote {
  background: linear-gradient( 90deg,
      rgba(255, 225, 132, .7) 50%, rgba(255,255,255, 0) 50%),
    linear-gradient( 90deg,
      rgba(32, 113, 120, .3) 50%, rgba(255,255,255, 0) 50%),
    linear-gradient( 90deg,
      rgba(255, 150, 102, .3) 50%, rgba(255,255,255, 0) 50%),
    linear-gradient( 90deg,
      rgba(23, 76, 79, .1) 50%, rgba(255,255,255, 0) 50%);
  background-size: 7em 7em, 5em 5em, 3em 3em, 1em 1em;
  background-color: #F5E9BE;
  font: 18px/1.4 'Trebuchet MS', Verdana, sans-serif;
  }

Тетрадный лист в клетку

Тетрадный лист в клетку
Код:
.quote{
   background:
 linear-gradient(
      rgba(255,255,255, 0) .9em, rgba(0, 0, 0, .15) 1em)
    0 0,
    linear-gradient(90deg,
      rgba(255,255,255, 0) .9em, rgba(0, 0, 0, .15) 1em)
    0 0;
  background-size: 1em 1em;
  background-color: ivory;
  font: italic 16px/2 'Trebuchet MS', Verdana, sans-serif;
  }
P {
  margin: 2.55em 3em 1em;
}

Градиент — косая полоска

Градиент — косая полоска
Код:
.quote{
background: linear-gradient(45deg, white 25%,
    #def 25%, #def 50%,
    white 50%, white 75%,
    #def 75%);
background-size:50px 50px;
 font-style: italic;
font-weight: bolder;
font-size: 18px;
font-family: Lucida Console, Monaco, monospace
} 
У полосок можно поменять цвет - я выделила в коде красным.
Можно поменять ширину полос - выделила синим, чем меньше число, тем уже полосы.
Что бы шрифт был не жирным, удалите строку, выделенную зелёным.
Убрать наклон - удалите строку, выделенную розовым.
Изменить размер букв - выделила салатовым, чем больше число, тем крупнее шрифт
Шрифт можно поменять, здесь можно посмотреть семейства шрифтов и названия.

Градиент волна

Градиент волна
Код:
.quote
{
background: linear-gradient(#ffffff 50%, rgba(255,255,255,0) 0) 0 0,
radial-gradient(circle closest-side, #FFFFFF 53%, rgba(255,255,255,0) 0) 0 0,
radial-gradient(circle closest-side, #FFFFFF 50%, rgba(255,255,255,0) 0) 55px 0 #48B;
background-size: 110px 200px;
background-repeat: repeat-x;
font-style: italic;
font-weight: bolder;
font-size: 16px;
font-family: Arial
  }
Синим выделила цвет волны - можно поменять.

Оформление соты

Оформление соты
Код:
.quote{
background:
radial-gradient(circle farthest-side at 0% 50%,#fb1 23.5%,rgba(240,166,17,0) 0)21px 30px,
radial-gradient(circle farthest-side at 0% 50%,#B71 24%,rgba(240,166,17,0) 0)19px 30px,
linear-gradient(#fb1 14%,rgba(240,166,17,0) 0, rgba(240,166,17,0) 85%,#fb1 0)0 0,
linear-gradient(150deg,#fb1 24%,#B71 0,#B71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#B71 0,#B71 76%,#fb1 0)0 0,
linear-gradient(30deg,#fb1 24%,#B71 0,#B71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#B71 0,#B71 76%,#fb1 0)0 0,
linear-gradient(90deg,#B71 2%,#fb1 0,#fb1 98%,#B71 0%)0 0 #fb1;
background-size: 40px 60px;
font-weight: bolder;
font-style: italic;
color: #16251c;
font-size:18px;
font-family: FreeMono, monospace;
} 
Красным выделила цвет шрифта.

Вертикальные волнистые линии

Вертикальные волнистые линии
Код:
.quote{
 background: radial-gradient(1.5em 6.28571em at 1.95em, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.25) 55%, rgba(255, 255, 255, 0) 55%) 0 0, radial-gradient(1.5em 6.28571em at -0.45em, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.25) 55%, rgba(255, 255, 255, 0) 55%) 1.5em 5.5em, radial-gradient(2.3em 4.57143em at 2.99em, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 55%, rgba(255, 255, 255, 0) 55%) 0 0, radial-gradient(2.3em 4.57143em at -0.69em, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 55%, rgba(255, 255, 255, 0) 55%) 2.3em 4em, radial-gradient(3.5em 6.28571em at 4.55em, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.25) 55%, rgba(255, 255, 255, 0) 55%) 0 0, radial-gradient(3.5em 6.28571em at -1.05em, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.25) 55%, rgba(255, 255, 255, 0) 55%) 3.5em 5.5em, radial-gradient(#15ffa5, #00ced1);
  background-color: mediumspringgreen;
  background-size: 1.5em 11em, 1.5em 11em, 2.3em 8em, 2.3em 8em, 3.5em 11em, 3.5em 11em, 100% 100%;
  background-repeat: repeat;
font-weight: bolder;
font-style: italic;
color: #16251c;
font-size:18px;
font-family: FreeMono, monospace;
}

Тетрадный лист в клетку с полями

Тетрадный лист в клетку с полями
Код:
.quote{
background: background-color: #FFFFEF;
background-image:
linear-gradient(90deg, transparent 98px, #ED82AD 98px, #ED82AD 100px, transparent 100px),
linear-gradient(#eee 1px, transparent 0px),
linear-gradient(90deg, #eee 1px, transparent 0px);
background-size:100% 100%, 20px 20px, 20px 20px;
background-position: 0 0, -1px -1px, -1px 1px;
font-style: italic;
color: #16251c;
font-size:18px;
font-family: FreeMono, monospace;
}

Оформление кирпичики

Оформление кирпичики

Код:
.quote{
background-color: #eef1ef;
background-image: linear-gradient(335deg, #fadbc8 23px, transparent 23px),
linear-gradient(155deg, #fadbc8 23px, transparent 23px),
linear-gradient(335deg, #fadbc8 23px, transparent 23px),
linear-gradient(155deg, #fadbc8 23px, transparent 23px);
background-size: 58px 58px;
background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
font-style: italic;
color: #16251c;
font-size:18px;
font-family: FreeMono, monospace;
} 
Красным выделила цвет полос между кирпичами.
Синим - цвет кирпичей.

Градиентный фон

Градиентный фон
Код:
.quote{
background-color: background:
    -webkit-linear-gradient(315deg, hsla(18.11, 95%, 55%, 1) 0%, hsla(18.11, 95%, 55%, 0) 70%),
    -webkit-linear-gradient(65deg, hsla(185.66, 89.99%, 50%, 1) 10%, hsla(185.66, 89.99%, 50%, 0) 80%),
    -webkit-linear-gradient(135deg, hsla(278.49, 95%, 50%, 1) 15%, hsla(278.49, 95%, 50%, 0) 80%),
    -webkit-linear-gradient(205deg, hsla(43.02, 100%, 55%, 1) 100%, hsla(43.02, 100%, 55%, 0) 70%);
  background:
    linear-gradient(135deg, hsla(18.11, 95%, 55%, 1) 0%, hsla(18.11, 95%, 55%, 0) 70%),
    linear-gradient(25deg, hsla(185.66, 89.99%, 50%, 1) 10%, hsla(185.66, 89.99%, 50%, 0) 80%),
    linear-gradient(315deg, hsla(278.49, 95%, 50%, 1) 15%, hsla(278.49, 95%, 50%, 0) 80%),
    linear-gradient(245deg, hsla(43.02, 100%, 55%, 1) 100%, hsla(43.02, 100%, 55%, 0) 70%);
font-style: italic;
color: #16251c;
font-size:18px;
font-family: Bradley Hand, cursive;
}

Градиент ночное небо

Градиент ночное небо

Код: 
.quote{
background-color:black;
background-image:
radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
font-style: italic;
color: #f7fdff;
font-size:18px;
font-family: Bradley Hand, cursive;
}
Надеюсь вы поняли, что в коде я меняла. Код градиента вставляла сразу после .quote{ а, затем идёт код оформления текста — цвет, размер шрифта и так далее. Всё довольно просто. 
Сами коды узоров можно брать по адресам ниже:
 Готовые паттерны
  1. http://css.yoksel.ru//css-patterns/
  2. https://leaverou.github.io/css3patterns/#
  3. https://freefrontend.com/css-background-patterns/
  4. http://ilyakhasanov.ru/baza-znanij/css-html-javascript/magiya-css-stilej/141-besshovnyj-css3-fon-bez-ispolzovaniya-izobrazheniya
  5. https://inter-net.pro/css/patterns
  6. https://cssgradient.io/blog/gradient-patterns/
Генераторы паттернов
  1. http://flatonika.ru/css-gradient-generator-onlajn/ - градиент цветной
  2. https://www.ccbg.io/ - градиент цветной
  3. https://www.css-gradient.com/ - градиент цветной
  4. https://mycolor.space - градиент цветной
  5. http://angrytools.com/gradient/ - градиент цветной
  6. https://colorspark.app/gradients - градиент цветной
  7. https://webkul.github.io/coolhue/ - градиент цветной
  8. https://www.gradient-animator.com/  - градиент цветной
  9. https://www.eggradients.com/category/dark-purple-gradient - градиент цветной
  10. https://www.cssmatic.com/gradient-generator - градиент цветной
  11. https://superdevresources.com/tools/gradient-generator - градиент цветной
  12. https://pinetools.com/image-gradient-generator - градиент цветной
  13. https://cssgenerator.org/gradient-css-generator.html - градиент цветной
  14. https://sdelatlending.ru/gradient-css-generator- градиент цветной
  15. https://css3gen.com/gradient-generator/ - градиент цветной
  16. http://westciv.com/ - градиент цветной
  17. https://online-free-tools.com/en/css_pattern_generator_background - генератор полос, квадратов, горошка
  18. http://stripesgenerator.com/ - генератор полос на css
Генераторы градиента с картинкой
  1. https://galactic.ink/bg
  2. https://www.heropatterns.com/
  3. https://www.svgbackgrounds.com/#radiant-gradient

Ваши комментарии:

Комментарии со спамом удаляются.