Показаны все сообщения, соответствующие вашему запросу Красивый текст
Показанные сообщения отсортированы по релевантности запросу "Красивый текст". Сортировать по дате Показать все сообщения
Красивый текст для статьи на Блоггер
Доброго времени суток. Красивый текст радует глаз, и смотрится великолепно, и читать приятно. Ещё по школе помню, как писали красивые стенгазеты фломастерами и карандашами и они висели на стене, пока не выцветали. Сейчас всё намного проще можно красиво оформить всё в интернете и распечатать. А как красивые тексты добавить в блог? Конечно, через код. Коды можно найти в интернете или воспользоваться генераторами. Я предлагаю сегодня несколько готовых кодов на CSS. Вставил в статью и всё.
Проверить тексты визуально можно в редакторе.
Код:
Текст 1
<div class="hit-the-floor">
Ваш текст</div>
<style>.hit-the-floor {
color: #fff;
font-size: 2em; /* размер текста */
font-weight: bold;
font-family: Helvetica;
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}
.hit-the-floor {
text-align: center;
}
background-color: #f1f1f1;
}
</style>
Ваш текст</div>
<style>.hit-the-floor {
color: #fff;
font-size: 2em; /* размер текста */
font-weight: bold;
font-family: Helvetica;
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}
.hit-the-floor {
text-align: center;
}
background-color: #f1f1f1;
}
</style>
Текст 2
Исчезающий бегущий текст.
код:
Код:
Синим цветом в коде выделила цвет букв. Можно поменять на свои.
<div class="text">
Ваш текст</div>
<style>
{
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #000;
}
.text {
position: relative;
font-family: sans-serif;
text-transform: uppercase;
font-size: 1.5em;
letter-spacing: 4px;
overflow: hidden;
background: linear-gradient(90deg, #000, #fff, #000);
background-repeat: no-repeat;
background-size: 80%;
animation: animate 3s linear infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: rgba(255, 255, 255, 0);
}
@keyframes animate {
0% {
background-position: -500%;
}
100% {
background-position: 500%;
}
}</style>
Ваш текст</div>
<style>
{
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #000;
}
.text {
position: relative;
font-family: sans-serif;
text-transform: uppercase;
font-size: 1.5em;
letter-spacing: 4px;
overflow: hidden;
background: linear-gradient(90deg, #000, #fff, #000);
background-repeat: no-repeat;
background-size: 80%;
animation: animate 3s linear infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: rgba(255, 255, 255, 0);
}
@keyframes animate {
0% {
background-position: -500%;
}
100% {
background-position: 500%;
}
}</style>
Текст 3
Выглядит оформление, как будто один текст накладывается на другой. Но это всего лишь тени.
<div class="text1">
Ваш текст</div>
<style>
{
display: grid;
grid-template-areas: ". . ." ". text ." ". . .";
grid-template-rows: 1fr auto 1fr;
grid-template-columns: 1fr auto 1fr;
height: 100vh;
width: 100vw;
margin: 0;
overflow: hidden;
background-image: radial-gradient(circle, #333333, #222222)
}
.text1 {
transform: skew(#{$rotationAmt}deg) rotate(#{$rotationAmt}deg);
grid-area: text;
font-family: 'Sarpanch', sans-serif;
font-size: 10vmin; /* размер букв */
margin: 0;
padding: 20px;
color: #1d9099;
text-shadow: 1vmin 1vmin 0 #E79C10, -1vmin -1vmin 0 #D53A33;
}</style>
Ваш текст</div>
<style>
{
display: grid;
grid-template-areas: ". . ." ". text ." ". . .";
grid-template-rows: 1fr auto 1fr;
grid-template-columns: 1fr auto 1fr;
height: 100vh;
width: 100vw;
margin: 0;
overflow: hidden;
background-image: radial-gradient(circle, #333333, #222222)
}
.text1 {
transform: skew(#{$rotationAmt}deg) rotate(#{$rotationAmt}deg);
grid-area: text;
font-family: 'Sarpanch', sans-serif;
font-size: 10vmin; /* размер букв */
margin: 0;
padding: 20px;
color: #1d9099;
text-shadow: 1vmin 1vmin 0 #E79C10, -1vmin -1vmin 0 #D53A33;
}</style>
Синим цветом в коде выделила цвет букв. Можно поменять на свои.
Текст 4
Код:
Код:
Код:
<p class="gradient-text">Ваш текст</p>
<style>.gradient-text {
font-family: 'Rubik One', sans-serif; /* шрифт */
font-size: 50px; /* размер текста */
text-transform: uppercase;
background: linear-gradient(45deg, #0084f0 33%, #003366 66%, #9090e8); /* цвет градиента */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bolder;
color: #002f55;
display: table;
margin: 20px auto;
} </style>
<style>.gradient-text {
font-family: 'Rubik One', sans-serif; /* шрифт */
font-size: 50px; /* размер текста */
text-transform: uppercase;
background: linear-gradient(45deg, #0084f0 33%, #003366 66%, #9090e8); /* цвет градиента */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bolder;
color: #002f55;
display: table;
margin: 20px auto;
} </style>
Текст 5
<div class="striped-text">
Полоски тоже красиво!</div>
<style>.striped-text {
font-family: 'Rubik One', sans-serif;
font-size: 50px;
text-transform: uppercase;
background: repeating-linear-gradient(white, white 2px, #ff0000 2px, #ff0000 3px);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: #b8001d;
display: table;
margin: 20px auto;
}</style>
Полоски тоже красиво!</div>
<style>.striped-text {
font-family: 'Rubik One', sans-serif;
font-size: 50px;
text-transform: uppercase;
background: repeating-linear-gradient(white, white 2px, #ff0000 2px, #ff0000 3px);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: #b8001d;
display: table;
margin: 20px auto;
}</style>
Текст 6
<p class="striped-shadow">Ваш текст</p>
<style>.striped-shadow {
font-family: 'Rubik One', sans-serif;
font-size: 40px; /* размер букв */
text-transform: uppercase;
text-shadow: -4px -4px 0px #c791f1; /* цвет букв */
background: repeating-linear-gradient(45deg, #7001a5, #7001a5 1px, white 2px, white 3px); /* цвет тени */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: table;
margin: 20px auto;
}</style>
<style>.striped-shadow {
font-family: 'Rubik One', sans-serif;
font-size: 40px; /* размер букв */
text-transform: uppercase;
text-shadow: -4px -4px 0px #c791f1; /* цвет букв */
background: repeating-linear-gradient(45deg, #7001a5, #7001a5 1px, white 2px, white 3px); /* цвет тени */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: table;
margin: 20px auto;
}</style>
Текст 7
Код:
<div class="reflect_1" style="border-top: 1px solid #f9f5ed; border-bottom: 6px solid #f9f5ed; color: rgb(0, 0, 139); font-size: 60px; line-height: 0.2em; margin: 0pt; padding: 0pt 0pt 0pt 10px;">
Ваш текст 1</div>
<div class="reflect_2" style="border-top: 1px solid #fff; color: rgb(0, 103, 138); font-size: 60px; line-height: 0.7em; margin: 0pt; padding: 0pt 0pt 0pt 10px;">
Ваш текст 2</div>
Текст 8
Код:
Если ссылка не нужна, удалите слова Адрес ссылки не задевая знаков рядом. Выделенный цвет в коде можно поменять.
<a href="Адрес ссылки" id="mig">Ваш текст</a><style>
@keyframes pulsate{50%{color:#fff;text-shadow:0 -1px rgba(0,0,0,.3),0 0 5px #9acd32,0 0 8px #9acd32;}
}
#mig {
color: rgb(245,245,245);
text-shadow: 0 -1px rgba(0,0,0,.1);
font-size: 50px;
font-weight: 600;
text-decoration: none;
-webkit-animation: pulsate 1.2s linear infinite;
animation: pulsate 1.2s linear infinite;
}</style>
@keyframes pulsate{50%{color:#fff;text-shadow:0 -1px rgba(0,0,0,.3),0 0 5px #9acd32,0 0 8px #9acd32;}
}
#mig {
color: rgb(245,245,245);
text-shadow: 0 -1px rgba(0,0,0,.1);
font-size: 50px;
font-weight: 600;
text-decoration: none;
-webkit-animation: pulsate 1.2s linear infinite;
animation: pulsate 1.2s linear infinite;
}</style>
Если ссылка не нужна, удалите слова Адрес ссылки не задевая знаков рядом. Выделенный цвет в коде можно поменять.
Текст 9
Код:
Зелёным выделила - 1-ый цвет свечения
Красным - 2-ой цвет свечения
Синим - размер букв
Голубым - цвет букв
Салатовым - тень текста
Разные тексты на CSS - с тенями, анимированные, с градиентом и так далее, можно найти в сети или сделать самим по урокам, которых в интернете видимо-невидимо. Использовать красивый текст на сайте можно в заголовках, на странице 404, в текстовых гаджетах, в статье и в других местах, как подскажет ваша фантазия.
<style>
#blink-2{
color: #eee;
font-size: 50px;
font-weight: 700;
text-align: center;
animation:blur 1.5s ease-out infinite;
text-shadow:text-shadow: 0 0 5px #abc, 0 0 7px #abc;
}
@keyframes blur{
from{
text-shadow:0px 0px 10px #c4f,
0px 0px 10px #c4f,
0px 0px 25px #c4f,
0px 0px 25px #c4f,
0px 0px 25px #c4f,
0px 0px 25px #c4f,
0px 0px 25px #c4f,
0px 0px 25px #c4f,
0px 0px 50px #c4f,
0px 0px 50px #c4f,
0px 0px 50px #d2bcf3,
0px 0px 150px #d2bcf3,
0px 10px 100px #d2bcf3,
0px 10px 100px #d2bcf3,
0px 10px 100px #d2bcf3,
0px 10px 100px #d2bcf3,
0px -10px 100px #d2bcf3,
0px -10px 100px #d2bcf3;}
}
</style>
<p id="blink-2">Ваш текст</p>
#blink-2{
color: #eee;
font-size: 50px;
font-weight: 700;
text-align: center;
animation:blur 1.5s ease-out infinite;
text-shadow:text-shadow: 0 0 5px #abc, 0 0 7px #abc;
}
@keyframes blur{
from{
text-shadow:0px 0px 10px #c4f,
0px 0px 10px #c4f,
0px 0px 25px #c4f,
0px 0px 25px #c4f,
0px 0px 25px #c4f,
0px 0px 25px #c4f,
0px 0px 25px #c4f,
0px 0px 25px #c4f,
0px 0px 50px #c4f,
0px 0px 50px #c4f,
0px 0px 50px #d2bcf3,
0px 0px 150px #d2bcf3,
0px 10px 100px #d2bcf3,
0px 10px 100px #d2bcf3,
0px 10px 100px #d2bcf3,
0px 10px 100px #d2bcf3,
0px -10px 100px #d2bcf3,
0px -10px 100px #d2bcf3;}
}
</style>
<p id="blink-2">Ваш текст</p>
Зелёным выделила - 1-ый цвет свечения
Красным - 2-ой цвет свечения
Синим - размер букв
Голубым - цвет букв
Салатовым - тень текста
Разные тексты на CSS - с тенями, анимированные, с градиентом и так далее, можно найти в сети или сделать самим по урокам, которых в интернете видимо-невидимо. Использовать красивый текст на сайте можно в заголовках, на странице 404, в текстовых гаджетах, в статье и в других местах, как подскажет ваша фантазия.
Красивый текст
Нашла интересное оформление текста на сайте https://codepen.io. У автора Oscar-Jite. Данным текстом можно оформить название сайта, заголовки или поздравить читателей с каким-либо праздником.
Текст получается анимационный. Буквы как бы расплываются в воде. Посмотреть вживую эффект можно в редакторе. Скопируйте код и вставьте в первое окошко. Нажмите на кнопку "Показать результат".
Поменять в коде можно:
Далее ⇒
Красивое оформление названия сайта и заголовков играет очень важную роль. Они служат визитной карточкой сайта, привлекая внимание посетителей и создавая первое впечатление. Красиво оформленные названия и заголовки помогают сделать сайт более привлекательным и запоминающимся.
Кроме того, хорошо подобранные цвета, шрифты и стиль оформления помогают улучшить удобство использования сайта. Правильно оформленные заголовки сразу же привлекают внимание и помогают быстро ориентироваться на сайте. Это особенно важно в условиях информационного перенасыщения, когда пользователи проводят всего несколько секунд на каждой странице.
Красивое оформление названия сайта и заголовков также способствует улучшению SEO-оптимизации. Хорошо подобранные заголовки помогают улучшить понимание контента сайта поисковыми системами, что в свою очередь позитивно влияет на его ранжирование в поисковой выдаче.
Таким образом, красивое оформление названия сайта и заголовков не только придает сайту профессиональный вид, но и влияет на его эффективность и успех в целом. Однако следует помнить, что красота должна сочетаться с функциональностью, иначе она может оказаться бессмысленной.
Про красивый текст можно прочитать на сайте:
Выглядит текст так:
Не менее интересно будет выглядеть надпись на чёрном фоне:
Код
<div class="text">
<h2>HELLO!</h2>
</div>
<svg>
<filter id="spot">
<feTurbulence id="turbulence" type="turbulence" numOctaves="1" result="NOISE" seed="3"></feTurbulence>
<feDisplacementMap in="SourceGraphic" in2="NOISE" scale="25" />
<animate xlink:href="#turbulence" attributeName="baseFrequency" dur="10s"
values="0.1 0.1;0.12 0.12" repeatCount="indefinite"></animate>
</filter>
</svg>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.text {
position: relative;
width: 100%;
text-align: center;
filter: url(#spot);
}
.text h2 {
position: relative;
color: #495518;
font-weight: 600;
font-family: 'Arial', sans-serif;
font-size: 10rem;
text-shadow: 0 0 20px #fff, 0 0 40px #fff, 0 0 60px #fff;
}
svg{
width: 0;
height: 0;
}
</style>
Текст — выделила красным.
Цвет текста — синим.
Размер текста — зелёным цветом.
Шрифт — голубым.
Толщина букв — оранжевый оттенок.
Сервисы для сайта
На сайте есть статьи о полезных сервисах и инструментах, которые необходимы для ведения блога. В сегодняшней статье продолжаю список программ и ссылок на нужные для работы ресурсы.
https://wordstat.yandex.ru
Эти два генератора помогут дать название статье или тему для статьи по вашему запросу. Вводите тему статьи, к примеру — рамки своими руками и узнаете на каком месте стоит подобный вопрос у людей в поисковике. Соответственно, если такой запрос сделали всего 2 человека, то лучше поменять название статьи или тему.
https://www.impactbnd.com/blog-title-generator/blogabout
http://title.web-canape.ru
https://seogift.ru/tools/generator-zagolovkov/
https://www.portent.com/tools/title-maker
https://showmethetitle.ru
http://lozyuk.ru/tools/4u-title/
Сервисы предложат яркие, запоминающиеся заголовки статей.
http://online-letters.ru
Здесь текст просто генерируется в выбранный шрифт и цвет.
http://textanim.com - анимированный текст, русских шрифтов крайне мало.
https://ru.bloggif.com - блестящий текст, помимо текста на сайте можно найти много других генераторов изображения, русских шрифтов мало.
http://wigflip.com/screedbot/ru/ - печатающий текст
http://smayli.ru/generatonadpisey/ - текст со смайликом
https://text.livetyping.ru - ещё один печатающийся текст
https://cooltext.com
У программы есть недостаток - русских шрифтов мало
http://x-lines.ru - красивые шрифты
http://www.sitehere.ru/css-generator-3d-teksta - генератор 3Д текста
https://www.coollogo.com - мало русских шрифтов
https://pr-cy.ru/favicon/- на сайте помимо фавиконки есть много других полезных сервисов
https://bestwebservice.ru/ico_converter/ - конвертер фавиконок
https://www.favicon.by
https://www.favicon-generator.org
https://be1.ru/generator-favicon/ - посмотрите на сайте и другие полезные предложения
https://ru.inettools.net/image/generator-favicon-onlayn
https://seolik.ru/favicon-generator
https://www.favicon.cc - можно нарисовать иконку самому
https://perfecto-web.pro/ru/devtools/favicon-generator.html
https://www.cy-pr.com - сайт предлагает также провести анализ вашего ресурса
http://onlinefavicon.com
https://www.favicongenerator.com
В сети большое количество и других сервисов по созданию фавикона.
https://rifmus.net/
http://rifmovnik.ru/find.htm
http://stihidl.ru/rifma/
https://www.stihi.ru/assist/
http://www.rifmik.net
http://neogranka.ru/podbor_rifmy.html
https://castlots.org/podbor-rifmi-k-slovu/
и большое количество других, но аналогичных ресурсов в помощь поэтам.
https://imagecompressor.com/ru/
https://ru.inettools.net/image/umenshit-i-uvelichit-foto-onlayn
http://ru.imageresizer.net/image-compressor/
https://tinypng.com
https://www.jpegmini.com/main/shrink_photo
https://imagecompressor.com/ru/
https://compressor.io/compress
https://compressjpeg.com/ru/
Далее ⇒
Проверка поисковых запросов
https://trends.google.comhttps://wordstat.yandex.ru
Эти два генератора помогут дать название статье или тему для статьи по вашему запросу. Вводите тему статьи, к примеру — рамки своими руками и узнаете на каком месте стоит подобный вопрос у людей в поисковике. Соответственно, если такой запрос сделали всего 2 человека, то лучше поменять название статьи или тему.
Генераторы заголовков статей и тем для статьи
https://tweakyourbiz.com/title-generatorhttps://www.impactbnd.com/blog-title-generator/blogabout
http://title.web-canape.ru
https://seogift.ru/tools/generator-zagolovkov/
https://www.portent.com/tools/title-maker
https://showmethetitle.ru
http://lozyuk.ru/tools/4u-title/
Сервисы предложат яркие, запоминающиеся заголовки статей.
Книга
Можно прочитать книгу Джо Витале (https://readli.net/chitat-online/?b=252273&pg=1) о создании заголовков. Книга маленькая, прочтёте буквально за 5 минут. Там есть неплохие советы и рекомендации по составлению заголовков.
Генераторы красивого текста
Для блога обязательно понадобится красивый текст, можно создать его в ручную в программах Paint.NET, Photoshop на компьютере или сгенерировать онлайн.
http://gfto.ru
Здесь текст просто генерируется в выбранный шрифт и цвет.
https://ru.bloggif.com - блестящий текст, помимо текста на сайте можно найти много других генераторов изображения, русских шрифтов мало.
У программы есть недостаток - русских шрифтов мало
http://www.sitehere.ru/css-generator-3d-teksta - генератор 3Д текста
https://www.coollogo.com - мало русских шрифтов
Генераторы кнопок
https://daruse.ru/generator-knopok-online
https://maxzon.ru/button_gen/index.html
https://inter-net.pro/btn-generator
https://css-tricks.com/examples/ButtonMaker/
http://www.dextronet.com/css-buttons-generator/
https://www.cssportal.com/css3-button-generator/
http://css3button.net
https://dabuttonfactory.com
http://buttonoptimizer.com
http://www.cssbuttongenerator.com
http://button.csscook.com
https://cssgradientbutton.com
https://buttons.cm
http://www.cssdrive.com/css3button/
https://mastersite24.ru
http://vorabota.ru/zdes-mozhno-samostoyatelno-sozdat-knopki-dlya-sayta-v-graficheskom-onlayn-generatore.html
В основном сервисы на английском языке. Но всё интуитивно понятно, так же можно воспользоваться переводчиком.
Генераторы фонов
Фоны тоже нужны для сайта. Посмотрите несколько из предложенных мной сервисов по генерации фонов:
https://patternizer.com
https://patterncooler.com
http://www.bgpatterns.com
https://trianglify.io
http://www.stripegenerator.com
http://www.tartanmaker.com - клетчатые фоны
http://bgmaker.ventdaval.com - нарисовать фон самостоятельно
http://www.colourlovers.com/patterns/add
https://www.svgbackgrounds.com/
Генераторы логотипов
https://flamingtext.ru
https://crello.com/ru
https://www.canva.com
http://www.logowiks.com
https://logomak.com/ru/
http://logoservis.ru
https://logotypemaker.com
https://genlogo.com
https://www.logaster.ru
https://www.logogarden.com/
https://www.graphicsprings.com/
Генераторы таблиц ХТМЛ
Статьи, где присутствуют таблицы с материалом, читаются и воспринимаются посетителями сайта легче. Читателю намного интереснее просмотреть таблицу, чем читать длинную и нудную информацию текстом.
Создать таблицу быстро и легко можно с помощью генераторов таблиц:
http://www.tablesgenerator.com/
http://sdelatlending.ru/generator-tablicy-html
https://www.randomes.top/besplatnyy-generator-tablits/
https://html-cleaner.com/html-table-generator/
https://tableed.com
http://www.apsolyamov.ru/files/html-table-generator.html
https://daruse.ru/html-table-generator
https://realadmin.ru/saytostroy/generator-html-table.html
https://divtable.com
и другие
Генераторы создают и простые таблицы, и сложные. Выбирайте на свой вкус.
Генератор фавиконок
https://bestwebservice.ru/ico_converter/ - конвертер фавиконок
https://www.favicon.by
https://www.favicon-generator.org
https://be1.ru/generator-favicon/ - посмотрите на сайте и другие полезные предложения
https://ru.inettools.net/image/generator-favicon-onlayn
https://seolik.ru/favicon-generator
https://www.favicon.cc - можно нарисовать иконку самому
https://perfecto-web.pro/ru/devtools/favicon-generator.html
https://www.cy-pr.com - сайт предлагает также провести анализ вашего ресурса
http://onlinefavicon.com
https://www.favicongenerator.com
В сети большое количество и других сервисов по созданию фавикона.
Генераторы слоганов
Генератор скорее шутливый, но возможно вам слоган понравится.
Помимо слогана вверху на скриншоте, мне выдали в других сервисах вот такие перлы:
- интернет шабашка. Защитил бы даже мужчину, но создан специально для женщин!
- интернет шабашка. Начало озарения
- интернет шабашка. Неповторимые ощущения.
- интернет шабашка не даст скучать вам и вашим рукам.
- Все в мире для тебя, если у тебя есть интернет шабашка
- Газенвагены интернет шабашка — надёжность и долговечность!
- интернет шабашка. Миру нужен новый герой
- Для счастливой жизни вашего питомца используйте интернет шабашка.
- Побалуй себя. Интернет Шабашка.
http://slogen.ru/
https://castlots.org/generator-sloganov/
https://genword.ru/generators/slogan/
http://megagenerator.ru/slogan/
http://киберпро.рф/slogan/
http://supergenerators.ru/random_slogan.php
http://free-generator.ru/slogans.html - можно подбирать слоган по разным темам
http://generatorslogan.com
https://www.shopify.com/tools/slogan-maker
http://www.slogangenerator.org
http://free-generator.ru/slogans.html - можно подбирать слоган по разным темам
http://generatorslogan.com
https://www.shopify.com/tools/slogan-maker
http://www.slogangenerator.org
Генератор рифм
https://rifme.nethttps://rifmus.net/
http://rifmovnik.ru/find.htm
http://stihidl.ru/rifma/
https://www.stihi.ru/assist/
http://www.rifmik.net
http://neogranka.ru/podbor_rifmy.html
https://castlots.org/podbor-rifmi-k-slovu/
и большое количество других, но аналогичных ресурсов в помощь поэтам.
Генераторы и сервисы для изображений
Сжать картинку: https://www.iloveimg.com/ru/compress-imagehttps://imagecompressor.com/ru/
https://ru.inettools.net/image/umenshit-i-uvelichit-foto-onlayn
http://ru.imageresizer.net/image-compressor/
https://tinypng.com
https://www.jpegmini.com/main/shrink_photo
https://imagecompressor.com/ru/
https://compressor.io/compress
https://compressjpeg.com/ru/
Сжать и редактировать анимацию
На момент написания статьи все сервисы работают.
https://www.iloveimg.com/ru/compress-image/compress-gif
https://ezgif.com/optimize (пользуюсь в основном им, есть всё что необходимо из инструментов)
https://gifcompressor.com/ru/
https://online-converting.ru/gif-optimize/
https://giphy.com/create/gifmaker
https://icons8.com/animizer/ru
Создать анимацию
https://multator.ru/draw/
https://makeagif.com/
http://gifovina.ru
https://www.gifpal.com
https://gifmaker.me/
http://gickr.com
http://picasion.com
http://freegifmaker.me
А так же большой список по категориям программ для редактирования фото можно найти здесь.На момент написания статьи все сервисы работают.
Готовые анимированные градиентные тексты
Яркий градиентный анимированный текст на сайте привлекает внимание посетителей и делает контент более привлекательным и интересным. Он помогает подчеркнуть важные моменты и информацию, делает сайт более запоминающимся и оригинальным. Такой текст создает атмосферу динамизма и современности, привлекая пользователей к более внимательному и длительному взаимодействию с контентом. В итоге яркий градиентный анимированный текст на сайте является мощным инструментом для привлечения внимания, улучшения визуального восприятия и повышения пользовательского опыта.
Градиент мягко переливается разными цветами одного оттенка — зелёный, фиолетовый, синий и т.д. 
Далее ⇒
На блоге уже есть статьи о красивом тексте, в том числе анимированном:
В сегодняшнем сообщении покажу новые интересные градиентные анимированные стили оформления текста. Все их можно посмотреть в живую в редакторе. Вставляете код и нажимаете кнопку "Показать результат". Текст можно использовать для названия сайта, заголовков, поздравлений и объявлений. Теги h1 class можно менять на свои, например h2, 3, 4 или strong. Можно менять шрифт, его размер, толщину. Все коды найдены на сайте https://codepen.io.
Вариант 1
Автор Rloria7
Код:
<h1 class="gradient">Градиентный текст</h1><style>.gradient {font-family: Poppins, sans-serif;font-size: 8rem;font-weight: bold;text-align: center;color: #ff0003;background-image: -webkit-linear-gradient(84deg, #FF0003, #FF8F3C);-webkit-background-clip: text;-webkit-text-fill-color: transparent;-webkit-animation: hue 5s infinite linear;}@-webkit-keyframes hue {from {-webkit-filter: hue-rotate(0deg);}to {-webkit-filter: hue-rotate(-240deg);}}</style>
Вариант 2
Автор Zeeshan Mukhtar
Градиент довольно динамично переходит по буквам из одного цвета в другой.
Код:
<div class="txt">Градиентный текст</div><style>.txt {display: grid;place-items: center;position: absolute;top: 50%;left: 50%;text-transform: uppercase;transform: translate(-50%, -50%);background: linear-gradient(-45deg, #6355a4, red, #e89a3e, aqua);background-size: 300%;font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;font-weight: 900;font-size: 5vw;letter-spacing: px;word-spacing: 10px;-webkit-background-clip: text;background-clip: text;color: transparent;/* -webkit-text-fill-color: transparent;/ */animation: zee 1s linear infinite;}@keyframes zee {0% {background-position: 0px 50%;}50% {background-position: 100% 50%;}100% {background-position: 0px 50%;}}</style>
Вариант 3
Автор Patrick Freedom Mayer
Градиент очень медленно и незаметно меняет свои цвета.
Код:
<div class="gradient-text">Градиентный текст</div><style>@keyframes gradient {0% { background-position: 0% 0; }50% { background-position: 100% 0; }100% { background-position: 0% 0; }}.gradient-text {animation: gradient 20s linear infinite;background: linear-gradient(70deg, rgba(255,38,163,1) 0%, rgba(0,73,176,1) 16%, rgba(238,130,178,1) 33%, rgba(0,194,229,1) 50%, rgba(238,130,178,1) 66%, rgba(0,73,176,1) 83%, rgba(255,38,163,1) 100%);background-size: 200% 100%;background-clip: text;color: transparent;font-family: Arial;font-size: 60px;font-weight: 800;letter-spacing: -4px;line-height: 1.2;padding: 10px;}</style>
Вариант 4
Автор Alex Araújo
Градиент плавно меняется снизу вверх.
Код:
<div><h1 class="text">Efeito Gradiente</h1></div><style>div{display:flex;height: 30vh;justify-content:center;align-items:center;}.text{font-family:Helvetica Neue, Helvetica, Arial, sans-serif;padding:30px;font-size:80px;font-weight:100;letter-spacing:2px;color:#f35626;background-image: -webkit-linear-gradient(92deg, #6e26f3, #feab3a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;-webkit-animation: hue 2s infinite linear;}@-webkit-keyframes hue{from{-webkit-filter:hue-rotate(0deg);}to{-webkit-filter:hue-rotate(-360deg);}}</style>
Вариант 5
Автор: Ritika Agrawal
Градиент плавно перетекает снизу вверх, сверху вниз.
Код:
<h1>Gradient Text</h1><style>h1 {text-transform: uppercase;font-size: 72px;font-family: Verdana, Geneva, Tahoma, sans-serif;background: linear-gradient(180deg,#fd004c,#fe9000,#fff020,#3edf4b,#3363ff,#b102b7,#fd004c);background-size: 200% 200%;color: transparent;background-clip: text;-webkit-background-clip: text;animation: change 5s ease-in-out infinite;}@keyframes change {0% {background-position: 0 0;}50% {background-position: 0 100%;}100% {background-position: 0 0;}}@media(max-width:576px){h1{font-size:32px;}}</style>
Вариант 6
Автор JR
Градиент движется из угла в другой укол текста с небольшим ускорением. Создаётся впечатление, что буквы слегка приподнимаются.
Код:
<h1 class='trippytext'>Градиентный текст<br>Пример</h1><style>.trippytext {font-family: "Open Sans", Helvetica, Arial, sans-serif;font-weight: 900;letter-spacing: .02em;font-size: 7em;line-height:1em;text-shadow: 10px 10px 8px rgba(0, 0, 0, 0.15);background: linear-gradient(45deg, #58c8e8, #a8cb2d, #f1b007, #f1b007, #cb502d, #f1b007, #a8cb2d, #58c8e8, #a8cb2d, #f1b007, #f1b007, #cb502d, #f1b007, #a8cb2d, #58c8e8);background-size:250% 500%;-webkit-background-clip: text;-webkit-text-fill-color: transparent;-webkit-animation: textAnim 5s ease-out infinite;-webkit-transform: translate3d(0,0,0);-webkit-backface-visibility: hidden;}@-webkit-keyframes textAnim {0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}</style>
Вариант 7
Автор Coding Tanu
Текст подходит для тёмного фона. На белом фоне эффект смотрится не так ярко. Градиент с мерцанием бежит по буквам.
Код:
<div class="container"><div class="wrapper"><span class="text"> Анимированный градиент</span><span class="gradient"></span><span class="dodge"></span></div></div><style>.container{height: 800px;display: flex;align-items: center;justify-content: center;}.wrapper{display: inline-flex;filter: brightness(200%);overflow: hidden;}.text{color: #ffffff;font-size: 70px;font-weight: bold;font-family:'Dancing Script',cursive;text-transform: capitalize;background: #000000;background-size: 100%;padding: 30px;}.text::before{content: "Анимированный градиент";position: absolute;mix-blend-mode: difference;filter: blur(1px);}.gradient{background: linear-gradient(90deg,rgb(235, 34, 70) 20.25%,rgb(218, 7, 49) 20.25%,rgb(70, 1, 104) 80.25%);position: absolute;top: 0;left: 0;width: 100%;height: 100%;mix-blend-mode: soft-light;}.dodge{background: radial-gradient(circle,white, black 45%) center / 15% 15%;position: absolute;top: -100%;left: -100%;right: 0%;bottom: 0%;mix-blend-mode: color-dodge;animation: light 3s linear infinite;}@keyframes light{to{transform: translate(50%,50%);}}</style>
Красивый текст для оформления блога
В прошлой статье я писала о красивом тексте, а сегодня продолжу тему.
Далее ⇒
Красиво оформленный текст можно установить в шапке, как название блога. Или оформить как заголовок статьи. Текстом можно поздравлять читателей с праздником или писать объявления и различную информацию.
Можно брать гифку не только течение воды, но и движущиеся языки огня, переливы блеска, капающий дождь и т.д.
Текст 3D триколор
<p data-text=РОССИЯ>РОССИЯ</p>
<style>
:root {
--3DshadowE1: 0 0 1px, 0 0 1.1px rgba(0, 0, 0, .7), 0 1px 1px rgba(0, 0, 0, .7), -1px 0 1px, -1px 1px 1px rgba(0, 0, 0, .7), -2px 0 1px, -2px 1px 1px rgba(0, 0, 0, .7), -3px 0 1px, -3px 1px 1px rgba(0, 0, 0, .7), -4px 0 1px, -4px 1px 1px rgba(0, 0, 0, .7), -5px 0 1px, -5px 1px 1px rgba(0, 0, 0, .7), -6px 0 1px, -6px 1px 1px rgba(0, 0, 0, .7), -7px 0 1px, -7px 1px 1px rgba(0, 0, 0, .7), -8px 0 1px, -8px 1px 1px rgba(0, 0, 0, .7), -9px 0 1px, -9px 1px 1px rgba(0, 0, 0, .7), -10px 0 1px, -10px 1px 1px rgba(0, 0, 0, .4), -1px 0 1px rgba(0, 0, 0, .7), -2px 0 1px rgba(0, 0, 0, .7), -3px 0 1px rgba(0, 0, 0, .7), -4px 0 1px rgba(0, 0, 0, .7), -5px 0 1px rgba(0, 0, 0, .7), -6px 0 1px rgba(0, 0, 0, .7), -7px 0 1px rgba(0, 0, 0, .7), -8px 0 1px rgba(0, 0, 0, .7), -9px 0 1px rgba(0, 0, 0, .7), -10px 0 1px rgba(0, 0, 0, .4);
--clip28: polygon(0 0, 100% 0, 100% 39%, 0 39%);
--clip29: polygon(0 39%, 100% 39%, 100% 60%, 0 60%);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box
}
p {
position: relative;
font-size: 8rem;
font-weight: bold;
text-align: center;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
margin: 2rem auto 0;
padding: 0 .25em;
color: red;
text-shadow: var(--3DshadowE1)
}
p:before,
p:after {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
content: attr(data-text)
}
p:before {
color: white;
-webkit-clip-path: var(--clip28);
clip-path: var(--clip28)
}
p:after {
color: royalblue;
-webkit-clip-path: var(--clip29);
clip-path: var(--clip29)
}</style>
Что бы триколор был полностью виден на буквах, писать нужно заглавными буквами. Меняем свой текст дважды - в коде отметила красным. Синим отметила цвета триколора, меняйте на свои.
Проверить текст можно в редакторе — скопируйте и вставьте код в первое окно.
Текст-сэндвич
<h1 class="sandwich">Доброго дня, читатель</h1>
<style>
h1{ font-family: 'Lato', sans-serif;
font-size:92px;
color:#222222;
padding: 80px 50px;
text-align:center;
text-transform: uppercase;
text-rendering: optimizeLegibility;
}
.sandwich {
color: #552906;
background-color: #ffffff;
letter-spacing: .15em;
text-shadow:
1px -1px 0 #767676,
-1px 2px 1px #FFF,
-2px 3px 1px #F6FBF2,
-3px 4px 1px #FFF,
-4px 5px 2px #FFF,
-5px 6px 3px #FFF,
-6px 7px 5px #FFF,
-7px 8px 0 #552906,
-8px 9px 0 #552906,
-9px 10px 0 #552906;
}
</style>
Меняйте текст — выделен в коде красным.Синим выделила шрифт — можно поменять на свой.
Зелёным — размер текста.
Голубым — цвет верхних букв "сэндвича".
Оранжевым — цвет нижних букв "сэндвича".
Розовым — цвет фона подложки надписи.
Проверить текст можно в редакторе — скопируйте и вставьте код в первое окно. Нажмите кнопку показать результат.
Если поменять цвета, то текст выглядит так:
Бегающий текст
<svg>
<symbol id="s-text">
<text text-anchor="middle" x="50%" y="50%">Яркий текст</text>
</symbol>
<g class="g-ants">
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
</g>
</svg>
<style>
symbol{
font-family: "Passion One", cursive;
margin: 0;
top: 0;
font-size: 140px;
background-size: 200px;
}
svg {
position: absolute;
width: 100%;
height: 100%;
}
.text-copy {
fill: none;
stroke: #000;
stroke-dasharray: 7% 28%;
stroke-width: 3px;
animation: stroke-offset 4s infinite linear;
}
.text-copy:nth-child(1) {
stroke: #52BE80;
stroke-dashoffset: 5%;
}
.text-copy:nth-child(2) {
stroke: #e013c8;
stroke-dashoffset: 20%;
}
.text-copy:nth-child(3) {
stroke: #3498DB;
stroke-dashoffset: 35%;
}
.text-copy:nth-child(4) {
stroke: #138D75;
stroke-dashoffset: 50%;
}
.text-copy:nth-child(5) {
stroke: #420bee;
stroke-dashoffset: 75%;
}
@keyframes stroke-offset {
0% {
stroke-dashoffset: 5%;
}
100% {
stroke-dasharray: 0%;
}
}
</style>
Автор кода jihyunКрасным в коде выделила место, где нужно поменять текст на свой.
Синим — цвета текста.
Проверить текст можно в редакторе.
Текст с анимированной картинкой
<div class="water-effect">
<h1 class="water-text">Огненный текст</h1></div>
<style>
.water-effect{
text-align: center;
}
h1 {
font-size: 100px;
display: inline-block;
color: transparent;
position: relative;
background-clip: text;
-webkit-background-clip: text;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWKnHTg_AJ8kkLELBhDbCcWhKXAwdNIRfWYgB1dC8vjJpk9o9RYaANA6W54ZjV6xq_bP_e5XxYKw_g4JiGW-evD21C0I9PjVkqCLnVUrk8fldKsfQgi9d9H2QDTtZV_V-lsR50VnspbNe1/s600/fire-95.gif');
background-repeat: repeat-x;
animation: watereffect 5s infinite normal linear;
-webkit-text-stroke: 1px #fa1007;
}
@keyframes watereffect{
0%{background-position: 0 10px}
5%{background-position: 5% 5px}
10%{background-position: 10% -10px}
15%{background-position: 15% -20px}
20%{background-position: 20% -30px}
25%{background-position: 25% -40px}
30%{background-position: 30% -50px}
40%{background-position:35% -55px}
50%{background-position:40% -55px}
60%{background-position:50% -55px}
70%{background-position:60% -55px}
80%{background-position:70% -55px}
90%{background-position:80% -55px}
100%{background-position:90% -55px}
}
</style>
Картинку можно вставлять любого формата, но лучше смотрится анимированная гифка. Красным выделила в коде текст, меняем на свой.
Синим — окантовка букв.
Зелёным — адрес картинки.
Красивый текст для поздравлений
Я писала не так давно о горящем тексте, который подходит для поздравления на 9 Мая. А в этой статье предлагаю посмотреть ещё несколько текстов, которыми можно поздравить читателей. И не только с Днём Победы. Коды нашла в интернете, большинство с сайта http://usefulscript.ru/
Красивый текст можно добавлять в гаджеты, например, в боковую панель или в статью.
Все тексты созданы с помощью скриптов, поэтому советую ставить их только на некоторое время, а после праздника удалить.
Работу кодов смотрите в визуальном редакторе.
Исчезающий текст
В коде можно поменять текст, цвет текста, размер, толщину.
<div class="fading">Ваш текст</div><style>.fading {color: #ff0808;font-size: 35px;font-weight: 600;line-height: 32px;text-align: center;text-transform: uppercase;letter-spacing: 2px;margin: 30px 0;}.fading span {animation: fading 3s alternate infinite;opacity: 0;}@keyframes fading {0% {opacity: 0;filter: blur(10px);}50%, 100% {opacity: 1;filter: blur(0px);}}</style><script>let fadingHeading = document.querySelectorAll('.fading');for (let a = 0; a < fadingHeading.length; a++){let letters = fadingHeading[a].textContent.split('');let content = letters.map((val, i) => {let delay = Math.floor((Math.random() * 1000) + 1);return ('<span style="animation-delay: '+ delay + 'ms">'+ val +'</span>');});fadingHeading[a].innerHTML = "";for (let i = 0; i < content.length; i++) {fadingHeading[a].innerHTML += content[i];}}</script>
Текст с эффектом волны
Текст замените своим.<script type="text/javascript">function next_Size(i, Length) {return (14 + 22 * Math.abs(Math.sin(i / Length * 3.14)));}function size_Cycle(Wave, dis, text) {var out = "";for (i = 0; i < text.length; i++) {size = parseInt(next_Size(i + dis, text.length));out += "<b style='font-size: "+ size +"px'>" + text.substring(i,i+1) + "</b>";}if (document.all) document.all(Wave).innerHTML = out;else if (document.getElementById) {rng = document.createRange();el = document.getElementById(Wave);rng.setStartBefore(el);html_Frag = rng.createContextualFragment(out);while (el.hasChildNodes()) el.removeChild(el.lastChild);el.appendChild(html_Frag);}}function Wave_start(id, n, Text) {size_Cycle(id, n, Text);if (n > Text.length) n = 0;setTimeout("Wave_start('" + id + "', " + (n + 1) + ", '" + Text + "')", 90);}</script><div id="Div_Wave" style="text-align: center;"></div><div id="Div_Wave2" style="text-align: center;"></div><script type="text/javascript">Wave_start("Div_Wave", 0, "День Победы! 75 лет");Wave_start("Div_Wave2", 0, "С праздником 9 Мая!");</script>
Печатающий текст
<script type="text/javascript">var mess=new Array("Поздравляю читателей с праздником! ","75 лет со дня Победы! ","С 9 Мая! С днём Победы! ");var size = 32;var txtcol = "#fec41d";var lastcol = "#000000";var pause = 1500;var speed = 70;var i = i_str = 0;var msg = msgpre = msgafter = "";function get_text() {msgpre = mess[i].substring(0, i_str-1);msgafter = mess[i].substring(i_str-1, i_str);msg = "<span style='position: relative; color:" + txtcol + "; font-size: " +size + "px;'>" + msgpre + "<span style='color:" + lastcol + ";'>" + msgafter +"</span></span>";}function go() {if (i_str<=mess[i].length-1) {i_str++;get_text();if (document.all) typewriter.innerHTML = msg;else if (document.layers) {document.typewriter.document.write(msg);document.typewriter.document.close();}else document.getElementById("typewriter").innerHTML = msg;var timer = setTimeout("go()", speed);}else {clearTimeout(timer);var timer = setTimeout("changemess()", pause);}}function changemess() {i++;i_str = 0;if (i>mess.length-1) i = 0;go();}</script><p id="typewriter"></p><script type="text/javascript">go();</script>
Летающий текст
<script type="text/javascript">arrCos = new Array(360);arrSin = new Array(360);for (i=0; i<360; i++) {arrSin[i] = Math.sin(i * Math.PI / 180);arrCos[i] = Math.cos(i * Math.PI / 180);}function rotate(objID, x, y, r, deg, rinc) {y = r * arrSin[deg];x = r * arrCos[deg];document.getElementById(objID).style.left = x + "px";document.getElementById(objID).style.top = y + r + 10 + "px";if (deg % 50 == 0) r += rinc;if (r > 50 || r < 10) {rinc *= -1;r += rinc;}deg += 12;if (deg >= 360) deg = 0;setTimeout("rotate('" + objID + "'," + x + "," + y +"," + r + "," + deg + "," + rinc + ")", 80);}function start() {x=0; y=0; r=10; deg=0; rinc = 1;rotate("obj_1", x, y, r+10, deg, rinc);rotate("obj_2", x, y, r, deg+40, rinc);rotate("obj_3", x, y, r+15, deg+60, rinc);rotate("obj_4", x, y, r, deg+90, rinc);}</script><div style="font-weight: bold; text-align: center; color:#fe1d1d;"><i><span style="position: relative; font-size: 24px;" id="obj_1">9 Мая</span><br><span style="position: relative; font-size: 20px;" id="obj_2">Поздравляю вас с Праздником!</span></i><br><span style="position: relative; font-size: 20px;" id="obj_3">75 лет Великой Победе!</span><br><span style="position: relative; font-size: 18px;" id="obj_4">С Днём Победы!</span></div><script type="text/javascript">start();</script>
Подпрыгивающий текст
<script type="text/javascript">message = "9 Мая! С Днём Победы!";ns6_switch = 1;var ns6 = document.getElementById&&!document.all;var mess = new Array( -1, -5, -9, -13, -9, -5, -1);var num = 0;var scope = 0;var text = "";function start_jumping() {if (ns6&&!ns6_switch) {jumping_text.innerHTML = message;return;}for (n=0; n != message.length; n++) {text += "<span style='position: relative;' id='id_" + n + "'>" +message.charAt(n) + "</span>"}jumping_text.innerHTML = text;text = "";move_left();}function move_left() {first_symbol = document.getElementById("id_0");first_symbol.style.left = -scope + "px";if (scope != 12) {scope += 4;setTimeout("move_left();", 50);}else move_right();}function move_right() {first_symbol.style.left = -scope + "px";if (scope != 0) {scope -= 4;setTimeout("move_right();", 50);}else wave();}function wave() {text = "";for (n=0; n != message.length; n++) {if (n+num > -1 && n+num < 7) {text += "<span style='position: relative; top: " + mess[n+num] + "px'>" +message.charAt(n) + "</span>"}else text += "<span>" + message.charAt(n) + "</span>";}jumping_text.innerHTML = text;text = "";if (num != (-message.length)) {num--;setTimeout("wave();", 50);}else {num = 0;setTimeout("start_jumping();", 50);}}</script><div id="jumping" style="font-weight: bold; font-size: 40px; color: #ff0000;"></div><script type="text/javascript">jumping_text = document.getElementById("jumping");start_jumping();</script>
Меняйте текст на свой. Цвет текста так же можно поменять.
Текстовые эффекты для Блоггер
Про красивый текст я писала очень много:
В зависимости от того, как менять цвет в коде, будет выглядеть надпись.
Далее ⇒
Но невозможно пройти мимо эффектного оформления текста, даже если их тысячи в интернете. Поэтому сегодня посмотрите ещё несколько кодов интересно и красиво оформленных текстов.
Применить такой текст можно для заголовков, названия блога, поздравления, объявления, оформления страницы и сообщения. Придумать, где применить текст, если он вам понравился - не сложно.
Проверяем все коды на работоспособность в визуальном редакторе.
Золотой текст
О том как сделать золотой текст на сайте есть статья, а это ещё один код для реализации данного эффекта.
<div>
<h1 data-heading="Ваш текст" contenteditable>Ваш текст</h1>
</div>
<style>
div {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
h1 {
background: linear-gradient(to bottom, #cfc09f 22%,#634f2c 24%, #cfc09f 26%, #cfc09f 27%,#ffecb3 40%,#3a2c0f 78%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: #fff;
font-family: 'Playfair Display', serif;
position: relative;
text-transform: uppercase;
font-size: 18vw;
margin: 0;
font-weight: 400;
}
h1:after {
background: none;
content: attr(data-heading);
left: 0;
top: 0;
z-index: -1;
position: absolute;
text-shadow:
-1px 0 1px #c6bb9f,
0 1px 1px #c6bb9f,
5px 5px 10px rgba(0, 0, 0, 0.4),
-5px -5px 10px rgba(0, 0, 0, 0.4);
}
</style>
<script>var h1 = document.querySelector("h1");
h1.addEventListener("input", function() {
this.setAttribute("data-heading", this.innerText);
}); </script>
Текст вводим два раза — отметила в коде красным цветом.Размер текста меняем по желанию.
Скорость
Можно сделать три разных варианта текста, цвет можно использовать один, два, а можно тень, буквы спереди и внутри, сделать одинаковыми.
<svg>
<filter id=motion-blur>
<feGaussianBlur stdDeviation='30 1' />
</filter>
</svg>
<p data-text=Скорость>Скорость</p>
<style>
:root {
--3DshadowE8: 0 0 1px, 0 0 1.1px rgba(0, 0, 0, .7), 0 1px 1px rgba(0, 0, 0, .7), 1px 0 1px, 1px 1px 1px rgba(0, 0, 0, .7), 2px 0 1px, 2px 1px 1px rgba(0, 0, 0, .7), 3px 0 1px, 3px 1px 1px rgba(0, 0, 0, .7), 4px 0 1px, 4px 1px 1px rgba(0, 0, 0, .7), 5px 0 1px, 5px 1px 1px rgba(0, 0, 0, .7), 6px 0 1px, 6px 1px 1px rgba(0, 0, 0, .7), 7px 0 1px, 7px 1px 1px rgba(0, 0, 0, .7), 8px 0 1px, 8px 1px 1px rgba(0, 0, 0, .7), 9px 0 1px, 9px 1px 1px rgba(0, 0, 0, .7), 10px 0 1px, 10px 1px 1px rgba(0, 0, 0, .4), 1px 0 1px rgba(0, 0, 0, .7), 2px 0 1px rgba(0, 0, 0, .7), 3px 0 1px rgba(0, 0, 0, .7), 4px 0 1px rgba(0, 0, 0, .7), 5px 0 1px rgba(0, 0, 0, .7), 6px 0 1px rgba(0, 0, 0, .7), 7px 0 1px rgba(0, 0, 0, .7), 8px 0 1px rgba(0, 0, 0, .7), 9px 0 1px rgba(0, 0, 0, .7), 10px 0 1px rgba(0, 0, 0, .4)
}
* {
margin: 0;
padding: 0;
box-sizing: border-box
}
svg {
position: absolute;
top: -999em
}
p {
position: relative;
font-style: italic;
font-size: 8rem;
text-align: center;
color: mediumslateblue;
text-shadow: var(--3DshadowE8);
transform: rotateZ(-2deg)translate3d(0, 0, 0)
}
p:before,
p:after {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
content: attr(data-text);
text-shadow: 0 0 .7px, 0 0 1.1px, 0 0 1.1px
}
p:before {
color: #339;
left: 70px;
top: 2px;
z-index: -1;
filter:url(#motion-blur)
}
p:after {
color: #86f
}
</style>
Дважды пишем ваш текст, в коде отметила красным.Синим — цвет букв впереди.
Зелёным — цвет тени.
Оранжевым — свет букв внутри.
Менять размер текста можно на своё усмотрение.
Код найден в codepen.io
Зеркальный текст
<div class="main">
<div class="box" id="box1">Здравствуйте</div>
<div class="box" id="box2">читатели!</div>
</div>
<style>
.main{
display: inline-flex;
}
.box {
margin-top: 50px;
font-size: 5em;
padding: 20px;
color: thistle;
font-weight: 800;
animation: aniload 3s;
}
#box1::after {
content: "Здравствуйте";
display:flex;
transform:rotateX(180deg);
background-image:
linear-gradient(180deg,rgba(214,166,214,.0) 10%,rgba(214,166,214,.5));
-webkit-background-clip: text;
color: transparent;
}
#box2{
color: rgb(174,203,248);
}
#box2::after {
content: "читатели!";
display:flex;
transform:rotateX(180deg);
background-image:
linear-gradient(180deg,rgba(37,116,236,.0) 10%,rgba(37,116,236,.5));
-webkit-background-clip: text;
color: transparent;
}
@keyframes aniload {
from {
transform: translate(-1000px, 0px)
}
to {
transform: translate(0px, 0px)
}
}
</style>
Красным в коде выделен текст — меняем на свой. Текст меняем дважды.Синим отметила цвет первого слова.
Зелёным — градиентный цвет отражения первого слова. Менять последние цифры не нужно.
Оранжевым — отметила цвет второго слова.
Розовым — градиентное отражение второго слова. Менять последние цифры не нужно
Добавление надписей на картинки
Иногда необходимо для статьи наложить на картинку какую-либо надпись. Это можно сделать с помощью графических редакторов или в онлайн-сервисах, о которых и расскажу в сегодняшней статье.
1. https://picfont.com
3. https://imageshost.ru
4. http://www.editor.pho.to/
15. https://crello.com/ru/features/add-text-to-photo/
17. https://anytools.pro/ru/img/editor/text
Далее ⇒
Список сервисов
Сервис красивый, много украшений, фонов, хороший редактор. Но как мне показалось, слишком хорошо, тоже не хорошо. Делая картинку, я потратила слишком много времени, пытаясь понять: как, куда, зачем. К тому же сайт на английском языке. Слишком мудрёный сервис. На любителя. К тому же клипарт у меня добавился почему-то кодом, а не картинкой.
2. Фотоулица
2. Фотоулица
http://photostreet.ru
Сервис на русском языке, много настроек, с которыми легко справится, так как сайт на русском языке. Не понравилось, что в поле для текста мне не удалось вставить скопированное предложение. Пришлось набирать вручную.
3. https://imageshost.ru
Простенький сервис для наложения текста.
4. http://www.editor.pho.to/
Удобный, легко добавляется текст, много дополнительных инструментов. На русском языке.
5. http://fotoump.ru/ - помимо написания текста на картинке, на сайте можно сделать анимированный текст, найти красивый шаблон с надписью для открытки.
5. http://fotoump.ru/ - помимо написания текста на картинке, на сайте можно сделать анимированный текст, найти красивый шаблон с надписью для открытки.
6. https://www.imgonline.com.ua - отличный сайт, у него много интересных инструментов, помимо наложения текста, но есть одно "но", текст накладывается в слепую. Нет обзорного окна.
7. http://www.effectfree.ru
Сайт простой, наложить текст можно в два счёта. Загрузили картинку, вставили или написали нужный текст, выбрали цвет и шрифт. Вот и всё.
8. https://lolkot.ru
8. https://lolkot.ru
Сайт поможет добавить надпись на картинке или сделать картинку-шутку.
9. https://www.canva.com/
На сайте можно создавать шедевры, а не простые тексты на картинке. Я пользуюсь им давно, поэтому изучила хорошо. Если необходимо быстро наложить текст, этот сайт не подойдёт. Здесь очень много настроек, дополнений, украшений. Удобный сайт, но большой текст у меня не принял, только 2-3 строчки.
10. http://atkritka.com - очень много готовых картинок со смешным текстом. Чтобы написать текст на изображении, нужно зарегистрироваться.
11. https://quotescover.com
Ресурс — создатель цитат. На английском языке. Пишет на картинках красивую графику для социальных сетей, интернета и сайтов. Бесплатный, регистрация не нужна. Есть много готовых цитат.
12. https://pablo.buffer.com
Сайт иностранный. Много нужных интересных настроек и функций.
13. http://www.imagetext.ru
На ресурсе есть готовые картинки с надписями. Имеются готовые стихи и текст.
14. https://mumotiki.ru/imagequote/add
Онлайн-сервис для создания картинок с текстом. Для создания нажать на кнопку Закачать изображение, выбрать тип, размер, цвет шрифта, прозрачность и цвет подложки, затем ввести фразу или цитату.
Удобный сайт наложения картинки. Ресурс платный, но есть бесплатный тарифный план.
16. https://fotoram.io/ru/add-text-to-photo
Может добавить к фото один или несколько текстов. Большой выбор разнообразных шрифтов. Цвет и размер текста можно менять.
Сайт с множеством дополнительных инструментов — фоторедактор, улучшить качество фото, наложить градиент на картинку, изменить насыщенность фото, повернуть изображение.
21. https://www.iloveimg.com/ru/photo-editor
18. https://photowords.ru/textonpics/
Можно написать текст, выбрав шрифт, его размер и цвет.
19 и 20. Аналогичные внешне и по функциям два сайта:
https://watermarkly.com/ru/add-text-to-photo/
https://www.visualwatermark.com/ru/add-text-to-photos/
Можно быстро добавить текст или логотип на изображение. Сервисы просты в использовании, бесплатные.
На картинку можно добавить текст, стикеры, рамки. Скруглить углы, обрезать фото и многое другое.
