Главная » Текст » Текст на тетрадном листе на Blogger
Текст на тетрадном листе на Blogger
Часто в статье нужно выделить важные моменты, информацию, сообщения, цитаты, коды и так далее.
Выделить так, что бы посетитель обратил на сообщение внимание.
Я уже писала ранее о выделении важного текста в статье, но предлагала оформление с использованием картинок, а сегодня предлагаю оформить участок текста градиентом CSS.
Проверить коды на работоспособность можно в визуальном редакторе.
Первый код нужно обернуть тегами <style></style>, второй оставить как есть.
На основе этого кода можно сделать другой фон, так же на CSS.
Для этого понадобятся паттерны и градиенты.
На их основе можно сделать новое оформление.
Код:
![Тетрадный лист в клетку Тетрадный лист в клетку](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkGDsy3kNHkZ1e2ephIX9XQG-TI3AiKuM0UZj7j1xX2tNkTVHAArEheIaj0_uOapIzFlvVa97AKxBWftBh8YFfCs2vgzEtwyKwFKn9CABes3GR2txu-k9xmFn7dmjG006EcdKUtu50qkgTzmjtJiL8gLo46eDxKt-y-YG8I0fmaSc8l1ngryhqcwtn9g/w320-h201-rw/%D1%81%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82-0648-2022.jpg)
Оформление текста
Добавляем код в шаблон, выше тега ]]></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 в режиме XTML в редакторе сообщения.
Код №2
<div class="quote">И получится вот такой результат:
УЧАСТОК ТЕКСТА
</div>
![Вид 1 Вид 1](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOoHIh3Xlc856VStNMSNNQIaW98Zcvdk4_QtZjZJN6vYvtosn2-ypDBnE_U_ouUSBU6C4xCOeXQ1ln02lloRY0NdR6aAwLCXpQRkcw-Kva8z_rzU15Ot50YqvqfKJ-xCZeDay5FAJmXvAuXs8FziDucE-DUXPMetQamhjhQH3a--wYyUYo_C5QBfZULA/w400-h39-rw/%D1%81%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82-0646-2022.jpg)
Градиент в полоску
![Градиент в полоску Градиент в полоску](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4wTm0aS0FfSfWYhTcxgA0PbjvQ-ZtC6Vd_9f3w6-0CbN9u-iWcQNzNx9_YUwE1GkERMPjtK0hdig0nx2qNzueVNdbAFqXOAg7keDnYl8A2TcK5j0X8KCfRvNGbCHmWtleXJkol6KsXyX1nsouOGlnK-gqflKewZgqkhp9XGt0B__pZoTSyQXKbvaBtQ/w320-h125-rw/%D1%81%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82-0647-2022.jpg)
.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;
}
Тетрадный лист в клетку
![Тетрадный лист в клетку Тетрадный лист в клетку](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkGDsy3kNHkZ1e2ephIX9XQG-TI3AiKuM0UZj7j1xX2tNkTVHAArEheIaj0_uOapIzFlvVa97AKxBWftBh8YFfCs2vgzEtwyKwFKn9CABes3GR2txu-k9xmFn7dmjG006EcdKUtu50qkgTzmjtJiL8gLo46eDxKt-y-YG8I0fmaSc8l1ngryhqcwtn9g/w320-h201-rw/%D1%81%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82-0648-2022.jpg)
Код:
.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;
}
Градиент — косая полоска
![Градиент — косая полоска Градиент — косая полоска](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhbLpl64TFGWWz6SKTTXmyqES70dMs9_GAXdstG7yYfy3yCgu569V9kiuxQw5vpirDMQoRL8_f31dz_LAt83l9v-eDy--C_rifc0KEwJr1rO_5inKo9IFqYrb45MDSxipRQV4WO7RkZE3C0gJtRPIEx9HHnAE0yRc3t7LVfWNVJsgzdifyPNTz9G8YlQ/w320-h177-rw/%D1%81%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82-0649-2022.jpg)
.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
}
У полосок можно поменять цвет - я выделила в коде красным.
Можно поменять ширину полос - выделила синим, чем меньше число, тем уже полосы.
Что бы шрифт был не жирным, удалите строку, выделенную зелёным.
Убрать наклон - удалите строку, выделенную розовым.
Изменить размер букв - выделила салатовым, чем больше число, тем крупнее шрифт
Шрифт можно поменять, здесь можно посмотреть семейства шрифтов и названия.
Синим выделила цвет волны - можно поменять.Можно поменять ширину полос - выделила синим, чем меньше число, тем уже полосы.
Что бы шрифт был не жирным, удалите строку, выделенную зелёным.
Убрать наклон - удалите строку, выделенную розовым.
Изменить размер букв - выделила салатовым, чем больше число, тем крупнее шрифт
Шрифт можно поменять, здесь можно посмотреть семейства шрифтов и названия.
Градиент волна
![Градиент волна Градиент волна](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirDWRXvtCmilbWyK3t84u6q_gd8aWLIoPB7pZ1quXdegXwGdikx29i8fwlgdAW6nOOHDV5w0zNiS4een5VexxSkgyyYn5GMLkvrt_P66-eUc3HCzuadn9R-MP3vt4dLRrcDHj47KvCTGu5lgC3DsX9Z7vh0NTcNlyPkiSN9bs6I4jg66zg2ch6cOPMGQ/w320-h167-rw/%D1%81%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82-0650-2022.jpg)
Код:
.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
}
Оформление соты
![Оформление соты Оформление соты](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR19p2dnIshGueabrOqrT9GaKxSPSCaVt1E30YZAHG2463elK62kTDMkSMtxkxI0fXwWiwBgjkHPZBtBpHkn0QbCcDa2m8nEIcbiUoZA3kALAEyU0ZuhoV53xP-DPnYlDZNHAspF2OvNttmQxh2PtqJ_y_gVzaidZZYR3OccVDWYyv03mUxA1sVnjZXA/w320-h186-rw/%D1%81%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82-0651-2022.jpg)
.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;
}
Красным выделила цвет шрифта.
Код:
Код:
Код:
Вертикальные волнистые линии
![Вертикальные волнистые линии Вертикальные волнистые линии](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyr5S-6fWHUO0NkyP8ivPoGsmkhgmqzTKkO0vRv3hwamvcCLMdZjIxbOFjfdx4OtrXwE51k0Xeje4UrBJWSpWe4q5CPKweSVmKovG5QPBgDpxqwWpK08taQgrDupN-Dl6ao417b0WgHiNvZgRidfU3L-3Rl0YjX96w80IMJKoLJlnW1v3UCOqACKb9dA/w320-h210-rw/%D1%81%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82-0652-2022.jpg)
.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;
}
Тетрадный лист в клетку с полями
![Тетрадный лист в клетку с полями Тетрадный лист в клетку с полями](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4HRntta6EOWPGHgVEgpHvSeUZp0H6_8nRUW8SWSNjYt-gnbUTpoF1hXQn8b_dWZTc59845WWhKsIhH591TpfPSi0bGgqTO7FKuw4DTTIcuEiH394KaouYSGabE1jXfPh1cFBRbmdZ0Xv9vCMc4ZZfmiic09gwDRfT5dEMeS4nZgr9wpJ65tCDyjsxmw/w320-h208-rw/%D1%81%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82-0653-2022.jpg)
.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;
}
Оформление кирпичики
![Оформление кирпичики Оформление кирпичики](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaRTpsUsULbxrkE8PyIGj5PoKkWdcRhOw5UqyvMvCuYot0_W-_Vm1lI1VdEORuc7TL29zO05mxbVnhlBcGr-zL-VG14yoURyNA1Gzc9eYSRuPrWA_uYN_jYAFmtjqcHaNHU4NAFEVuDlP-fbUJFI5DIMiCdj60IR98WYmJIL_5BO-wTgEQbeYYzVtgqg/w320-h246-rw/%D1%81%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82-0654-2022.jpg)
Код:
.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;
}
Красным выделила цвет полос между кирпичами.
Синим - цвет кирпичей.
Код:
Код:
Синим - цвет кирпичей.
Градиентный фон
![Градиентный фон Градиентный фон](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKTUgmIj0PGIvCwBRtCcKERJ1yOjCBt1tpLTwU-FyeiLRIP3yh3KIky3TC5tPbb4Xtmmd6NpusG0E4iOqszQo9C_9fo3WdfWK2ikJMuOqp4ZUipMnQuQ8Q7aXHjz3WyosR-UarN1GdO_RmXTaBZyk9rtuRRw9cCoLVnF0QPmYZ4iCVwWTTdTI5xwTQuA/w320-h200-rw/%D1%81%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82-0655-2022.jpg)
.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;
}
Градиент ночное небо
![Градиент ночное небо Градиент ночное небо](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhggHGIIox4GEijXLTStqTfwrD4UT1x8wHoAdNQ6nKB6G6J96nyL1vLAb3lbSV4eJ3Viedk1FhC7Wg1Fyki0D6eiy61C2uqeO57mr_5VmIvrMqNpdGVZ5f81HyW7AzsYzmu5ViJJzr0rSwdIPe48DfhGmrbE88YzgY4VdIAz5OUALcBcqx_hb5BZoN3cA/w320-h172-rw/%D1%81%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82-0656-2022.jpg)
Код:
.quote{Надеюсь вы поняли, что в коде я меняла. Код градиента вставляла сразу после .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;
}
Сами коды узоров можно брать по адресам ниже:
Готовые паттерны
Готовые паттерны
- http://css.yoksel.ru//css-patterns/
- https://leaverou.github.io/css3patterns/#
- https://freefrontend.com/css-background-patterns/
- http://ilyakhasanov.ru/baza-znanij/css-html-javascript/magiya-css-stilej/141-besshovnyj-css3-fon-bez-ispolzovaniya-izobrazheniya
- https://inter-net.pro/css/patterns
- https://cssgradient.io/blog/gradient-patterns/
- http://flatonika.ru/css-gradient-generator-onlajn/ - градиент цветной
- https://www.ccbg.io/ - градиент цветной
- https://www.css-gradient.com/ - градиент цветной
- https://mycolor.space - градиент цветной
- http://angrytools.com/gradient/ - градиент цветной
- https://colorspark.app/gradients - градиент цветной
- https://webkul.github.io/coolhue/ - градиент цветной
- https://www.gradient-animator.com/ - градиент цветной
- https://www.eggradients.com/category/dark-purple-gradient - градиент цветной
- https://www.cssmatic.com/gradient-generator - градиент цветной
- https://superdevresources.com/tools/gradient-generator - градиент цветной
- https://pinetools.com/image-gradient-generator - градиент цветной
- https://cssgenerator.org/gradient-css-generator.html - градиент цветной
- https://sdelatlending.ru/gradient-css-generator- градиент цветной
- https://css3gen.com/gradient-generator/ - градиент цветной
- http://westciv.com/ - градиент цветной
- https://online-free-tools.com/en/css_pattern_generator_background - генератор полос, квадратов, горошка
- http://stripesgenerator.com/ - генератор полос на css
- https://galactic.ink/bg
- https://www.heropatterns.com/
- https://www.svgbackgrounds.com/#radiant-gradient
Комментарии со спамом удаляются.