Красивый текст для оформления блога
Красиво оформленный текст можно установить в шапке, как название блога. Или оформить как заголовок статьи. Текстом можно поздравлять читателей с праздником или писать объявления и различную информацию.
Можно брать гифку не только течение воды, но и движущиеся языки огня, переливы блеска, капающий дождь и т.д.
Текст 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>
Картинку можно вставлять любого формата, но лучше смотрится анимированная гифка. Красным выделила в коде текст, меняем на свой.
Синим — окантовка букв.
Зелёным — адрес картинки.
Комментарии со спамом удаляются.