Интернет shabashka: Результаты поиска для Красивый текст

Главная » Все статьи рубрики Результаты поиска для Красивый текст

Показаны все сообщения, соответствующие вашему запросу Красивый текст

Показанные сообщения отсортированы по дате запроса (Красивый текст). Сортировать по релевантности Показать все сообщения

Готовые анимированные градиентные тексты

Яркий градиентный анимированный текст на сайте привлекает внимание посетителей и делает контент более привлекательным и интересным. Он помогает подчеркнуть важные моменты и информацию, делает сайт более запоминающимся и оригинальным. Такой текст создает атмосферу динамизма и современности, привлекая пользователей к более внимательному и длительному взаимодействию с контентом. В итоге яркий градиентный анимированный текст на сайте является мощным инструментом для привлечения внимания, улучшения визуального восприятия и повышения пользовательского опыта.

На блоге уже есть статьи о красивом тексте, в том числе анимированном:

Анимированный градиентный текст
Текстовые эффекты для Блоггер
Тени для текста сss на Блоггер
Неоновая надпись css
Красивый текст для оформления блога
Красивый текст для поздравлений
Красивый текст для статьи на Блоггер

В сегодняшнем сообщении покажу новые интересные градиентные анимированные стили оформления текста. Все их можно посмотреть в живую в редакторе. Вставляете код и нажимаете кнопку "Показать результат". Текст можно использовать для названия сайта, заголовков, поздравлений и объявлений. Теги 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>

Далее ⇒

Красивый текст

Нашла интересное оформление текста на сайте https://codepen.io. У автора Oscar-Jite. Данным текстом можно оформить название сайта, заголовки или поздравить читателей с каким-либо праздником.

Красивое оформление названия сайта и заголовков играет очень важную роль. Они служат визитной карточкой сайта, привлекая внимание посетителей и создавая первое впечатление. Красиво оформленные названия и заголовки помогают сделать сайт более привлекательным и запоминающимся.

Кроме того, хорошо подобранные цвета, шрифты и стиль оформления помогают улучшить удобство использования сайта. Правильно оформленные заголовки сразу же привлекают внимание и помогают быстро ориентироваться на сайте. Это особенно важно в условиях информационного перенасыщения, когда пользователи проводят всего несколько секунд на каждой странице.

Красивое оформление названия сайта и заголовков также способствует улучшению SEO-оптимизации. Хорошо подобранные заголовки помогают улучшить понимание контента сайта поисковыми системами, что в свою очередь позитивно влияет на его ранжирование в поисковой выдаче.

Таким образом, красивое оформление названия сайта и заголовков не только придает сайту профессиональный вид, но и влияет на его эффективность и успех в целом. Однако следует помнить, что красота должна сочетаться с функциональностью, иначе она может оказаться бессмысленной.

Про красивый текст можно прочитать на сайте:
Красивый текст для статьи на Блоггер
Красивый текст для поздравлений
Красивый текст для оформления блога
Текстовые эффекты для Блоггер
Неоновая надпись css

Выглядит текст так:

Текст получается анимационный. Буквы как бы расплываются в воде. Посмотреть вживую эффект можно в редакторе. Скопируйте код и вставьте в первое окошко. Нажмите на кнопку "Показать результат".

Не менее интересно будет выглядеть надпись на чёрном фоне:

Код

  <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>

Поменять в коде можно:

Текст — выделила красным.

Цвет текста — синим.

Размер текста — зелёным цветом.

Шрифт — голубым.

Толщина букв — оранжевый оттенок.

Далее ⇒

Раскрывающийся цветок на css

Необыкновенно красивый пульсирующий цветок увидела на сайте https://atuin.ru. Украшение отлично установилось на блоге Блогспот и как гаджет, и в статье как анимированная картинка.

Эффект сделан на CSS.

Цветок можно использовать для поздравления с каким-либо торжеством, добавив к нему текст. Либо установить для украшения как гаджет или добавить в статью.

Выглядит изображение так:

Вживую посмотреть на цветок можно в визуальном редакторе, вставив код в первое окошко.

Код цветка

<div class="flower">
    <div class="x"></div>
    <div class="x"></div>
    <div class="x"></div>
    <div class="x"></div>
    <div class="x"></div>
    <div class="x"></div>
    <div class="x"></div>
    <div class="x"></div>
    <div class="x"></div>
    <div class="x"></div>
    <div class="x"></div>
    <div class="x"></div>
    <div class="x"></div>
    <div class="x"></div>
    <div class="x"></div>
    <div class="x"></div>
    <div class="x"></div>
    <div class="x"></div>
    <div class="x"></div>
    <div class="x"></div>
</div>
<style>
.flower {
    display: grid;
    font-size: 0.3em;
    height: 110em;
    place-items: center;
}
.x {
    grid-row: 1/-1;
    grid-column: 1/-1;
    border-radius: 12px;
    animation: ease 2s alternate infinite;
}
.x:nth-of-type(1) {
    box-shadow: 0 0 0.5em rgba(255,255,255,0.1);
    border-radius: 1.2em;
    width: 4em;
    height: 4em;
    background: hsl(270,60%,98%);
    animation-name: x-1;
    animation-delay: 80ms;
    transform: rotate(36deg);
    z-index: 99;
}
@keyframes x-1 {
    to {
        transform: rotate(36deg) scale(0.6);
    }
}
.x:nth-of-type(2) {
    box-shadow: 0 0 1em rgba(255,255,255,0.1);
    border-radius: 1.4em;
    width: 8em;
    height: 8em;
    background: hsl(278,52%,96%);
    animation-name: x-2;
    animation-delay: 160ms;
    transform: rotate(72deg);
    z-index: 98;
}
@keyframes x-2 {
    to {
        transform: rotate(72deg) scale(0.6);
    }
}
.x:nth-of-type(3) {
    box-shadow: 0 0 1.5em rgba(255,255,255,0.1);
    border-radius: 1.6em;
    width: 12em;
    height: 12em;
    background: hsl(275,55%,94%);
    animation-name: x-3;
    animation-delay: 240ms;
    transform: rotate(108deg);
    z-index: 97;
}
@keyframes x-3 {
    to {
        transform: rotate(108deg) scale(0.6);
    }
}
.x:nth-of-type(4) {
    box-shadow: 0 0 2em rgba(255,255,255,0.1);
    border-radius: 1.8em;
    width: 16em;
    height: 16em;
    background: hsl(277,56%,92%);
    animation-name: x-4;
    animation-delay: 320ms;
    transform: rotate(144deg);
    z-index: 96;
}
@keyframes x-4 {
    to {
        transform: rotate(144deg) scale(0.6);
    }
}
.x:nth-of-type(5) {
    box-shadow: 0 0 2.5em rgba(255,255,255,0.1);
    border-radius: 2em;
    width: 20em;
    height: 20em;
    background: hsl(277,57%,90%);
    animation-name: x-5;
    animation-delay: 400ms;
    transform: rotate(180deg);
    z-index: 95;
}
@keyframes x-5 {
    to {
        transform: rotate(180deg) scale(0.6);
    }
}
.x:nth-of-type(6) {
    box-shadow: 0 0 3em rgba(255,255,255,0.1);
    border-radius: 2.2em;
    width: 24em;
    height: 24em;
    background: hsl(278,56%,86%);
    animation-name: x-6;
    animation-delay: 480ms;
    transform: rotate(216deg);
    z-index: 94;
}
@keyframes x-6 {
    to {
        transform: rotate(216deg) scale(0.6);
    }
}
.x:nth-of-type(7) {
    box-shadow: 0 0 3.5em rgba(255,255,255,0.1);
    border-radius: 2.4em;
    width: 28em;
    height: 28em;
    background: hsl(277,56%,84%);
    animation-name: x-7;
    animation-delay: 560ms;
    transform: rotate(252deg);
    z-index: 93;
}
@keyframes x-7 {
    to {
        transform: rotate(252deg) scale(0.6);
    }
}
.x:nth-of-type(8) {
    box-shadow: 0 0 4em rgba(255,255,255,0.1);
    border-radius: 2.6em;
    width: 32em;
    height: 32em;
    background: hsl(276,57%,80%);
    animation-name: x-8;
    animation-delay: 640ms;
    transform: rotate(288deg);
    z-index: 92;
}
@keyframes x-8 {
    to {
        transform: rotate(288deg) scale(0.6);
    }
}
.x:nth-of-type(9) {
    box-shadow: 0 0 4.5em rgba(255,255,255,0.1);
    border-radius: 2.8em;
    width: 36em;
    height: 36em;
    background: hsl(277,56%,76%);
    animation-name: x-9;
    animation-delay: 720ms;
    transform: rotate(324deg);
    z-index: 91;
}
@keyframes x-9 {
    to {
        transform: rotate(324deg) scale(0.6);
    }
}
.x:nth-of-type(10) {
    box-shadow: 0 0 5em rgba(255,255,255,0.1);
    border-radius: 3em;
    width: 40em;
    height: 40em;
    background: hsl(277,57%,72%);
    animation-name: x-10;
    animation-delay: 800ms;
    transform: rotate(360deg);
    z-index: 90;
}
@keyframes x-10 {
    to {
        transform: rotate(360deg) scale(0.6);
    }
}
.x:nth-of-type(11) {
    box-shadow: 0 0 5.5em rgba(255,255,255,0.1);
    border-radius: 3.2em;
    width: 44em;
    height: 44em;
    background: hsl(277,56%,66%);
    animation-name: x-11;
    animation-delay: 880ms;
    transform: rotate(396deg);
    z-index: 89;
}
@keyframes x-11 {
    to {
        transform: rotate(396deg) scale(0.6);
    }
}
.x:nth-of-type(12) {
    box-shadow: 0 0 6em rgba(255,255,255,0.1);
    border-radius: 3.4em;
    width: 48em;
    height: 48em;
    background: hsl(277,57%,62%);
    animation-name: x-12;
    animation-delay: 960ms;
    transform: rotate(432deg);
    z-index: 88;
}
@keyframes x-12 {
    to {
        transform: rotate(432deg) scale(0.6);
    }
}
.x:nth-of-type(13) {
    box-shadow: 0 0 6.5em rgba(255,255,255,0.1);
    border-radius: 3.6em;
    width: 52em;
    height: 52em;
    background: hsl(277,56%,56%);
    animation-name: x-13;
    animation-delay: 1040ms;
    transform: rotate(468deg);
    z-index: 87;
}
@keyframes x-13 {
    to {
        transform: rotate(468deg) scale(0.6);
    }
}
.x:nth-of-type(14) {
    box-shadow: 0 0 7em rgba(255,255,255,0.1);
    border-radius: 3.8em;
    width: 56em;
    height: 56em;
    background: hsl(277,57%,50%);
    animation-name: x-14;
    animation-delay: 1120ms;
    transform: rotate(504deg);
    z-index: 86;
}
@keyframes x-14 {
    to {
        transform: rotate(504deg) scale(0.6);
    }
}
.x:nth-of-type(15) {
    box-shadow: 0 0 7.5em rgba(255,255,255,0.1);
    border-radius: 4em;
    width: 60em;
    height: 60em;
    background: hsl(277,56%,42%);
    animation-name: x-15;
    animation-delay: 1200ms;
    transform: rotate(540deg);
    z-index: 85;
}
@keyframes x-15 {
    to {
        transform: rotate(540deg) scale(0.6);
    }
}
.x:nth-of-type(16) {
    box-shadow: 0 0 8em rgba(255,255,255,0.1);
    border-radius: 4.2em;
    width: 64em;
    height: 64em;
    background: hsl(277,56%,36%);
    animation-name: x-16;
    animation-delay: 1280ms;
    transform: rotate(576deg);
    z-index: 84;
}
@keyframes x-16 {
    to {
        transform: rotate(576deg) scale(0.6);
    }
}
.x:nth-of-type(17) {
    box-shadow: 0 0 8.5em rgba(255,255,255,0.1);
    border-radius: 4.4em;
    width: 68em;
    height: 68em;
    background: hsl(277,56%,26%);
    animation-name: x-17;
    animation-delay: 1360ms;
    transform: rotate(612deg);
    z-index: 83;
}
@keyframes x-17 {
    to {
        transform: rotate(612deg) scale(0.6);
    }
}
.x:nth-of-type(18) {
    box-shadow: 0 0 9em rgba(255,255,255,0.1);
    border-radius: 4.6em;
    width: 72em;
    height: 72em;
    background: hsl(277,56%,20%);
    animation-name: x-18;
    animation-delay: 1440ms;
    transform: rotate(648deg);
    z-index: 82;
}
@keyframes x-18 {
    to {
        transform: rotate(648deg) scale(0.6);
    }
}
.x:nth-of-type(19) {
    box-shadow: 0 0 9.5em rgba(255,255,255,0.1);
    border-radius: 4.8em;
    width: 76em;
    height: 76em;
    background: hsl(277,56%,16%);
    animation-name: x-19;
    animation-delay: 1520ms;
    transform: rotate(684deg);
    z-index: 81;
}
@keyframes x-19 {
    to {
        transform: rotate(684deg) scale(0.6);
    }
}
.x:nth-of-type(20) {
    box-shadow: 0 0 10em rgba(255,255,255,0.1);
    border-radius: 5em;
    width: 80em;
    height: 80em;
    background: hsl(279,56%,10%);
    animation-name: x-20;
    animation-delay: 1600ms;
    transform: rotate(720deg);
    z-index: 80;
}
@keyframes x-20 {
    to {
        transform: rotate(720deg) scale(0.6);
    }
}
</style>

Поменять в коде можно размер цветка — выделила синим цветом.

Цвет можно изменить, заменив параметры background: hsl(208,100%,...%) — выделила в коде синим.

Менять цвета лучше по оттенкам в генераторе оттенков hsl:

https://atuin.ru/tools/shades/

Располагать тона можно от светлого к тёмному или наоборот.

Далее ⇒

Красивый текст для оформления блога

В прошлой статье я писала о красивом тексте, а сегодня продолжу тему.

Красиво оформленный текст можно установить в шапке, как название блога. Или оформить как заголовок статьи. Текстом можно поздравлять читателей с праздником или писать объявления и различную информацию.

Текст 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>

Меняйте текст — выделен в коде красным.

Синим выделила шрифт — можно поменять на свой.

Зелёным — размер текста.

Голубым — цвет верхних букв "сэндвича".

Оранжевым — цвет нижних букв "сэндвича".

Розовым — цвет фона подложки надписи.

Проверить текст можно в редакторе — скопируйте и вставьте код в первое окно. Нажмите кнопку показать результат.

Если поменять цвета, то текст выглядит так:

Бегающий текст

Автор кода 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>

Картинку можно вставлять любого формата, но лучше смотрится анимированная гифка.

Можно брать гифку не только течение воды, но и движущиеся языки огня, переливы блеска, капающий дождь и т.д.

Красным выделила в коде текст, меняем на свой.

Синим — окантовка букв.

Зелёным — адрес картинки.

Далее ⇒

Текстовые эффекты для Блоггер

Про красивый текст я писала очень много:

https://inshabashka.blogspot.com/2021/01/tekst-neonovyj-migayushchij-na-css.html

https://inshabashka.blogspot.com/2020/12/neonovaya-nadpis-css.html

https://inshabashka.blogspot.com/2020/05/krasivyj-tekst-dlya-pozdravlenij.html

https://inshabashka.blogspot.com/2019/09/teni-dlya-teksta-sss-na-blogger.html

https://inshabashka.blogspot.com/2019/08/krasivyj-tekst-dlya-stati-na-blogger.html

Но невозможно пройти мимо эффектного оформления текста, даже если их тысячи в интернете. Поэтому сегодня посмотрите ещё несколько кодов интересно и красиво оформленных текстов.

Применить такой текст можно для заголовков, названия блога, поздравления, объявления, оформления страницы и сообщения. Придумать, где применить текст, если он вам понравился - не сложно.

Проверяем все коды на работоспособность в визуальном редакторе.

Золотой текст

О том как сделать золотой текст на сайте есть статья, а это ещё один код для реализации данного эффекта.

<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>

Текст вводим два раза — отметила в коде красным цветом.

Размер текста меняем по желанию.

Скорость

В зависимости от того, как менять цвет в коде, будет выглядеть надпись.

Можно сделать три разных варианта текста, цвет можно использовать один, два, а можно тень, буквы спереди и внутри, сделать одинаковыми.

Дважды пишем ваш текст, в коде отметила красным.

Синим — цвет букв впереди.

Зелёным — цвет тени.

Оранжевым — свет букв внутри.

Менять размер текста можно на своё усмотрение.

Код найден в 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>

Красным в коде выделен текст — меняем на свой. Текст меняем дважды.

Синим отметила цвет первого слова.

Зелёным — градиентный цвет отражения первого слова. Менять последние цифры не нужно.

Оранжевым — отметила цвет второго слова.

Розовым — градиентное отражение второго слова. Менять последние цифры не нужно

Далее ⇒

Неоновая надпись css

Уважаемые читатели блога. Поздравляю Вас с приближающимся Новым годом. Сегодняшняя статья — последняя в 2020 году.

Хочу пожелать Вам крепкого здоровья! Удачи во всех начинаниях! Отличного настроения и необъятного счастья!

Спасибо, что весь год были со мной!

Сегодняшняя статья будет короткой, что бы не отвлекать вас от праздников.

Предлагаю посмотреть оформление любого текста-поздравления или объявления для блога.

Код увидела на сайте https://atuin.ru

Красивый текст

Код оформления:

<div class="sign-wrap-3">
<span class="sign_word">Поздравляю с Новым годом!</span>
</div>
<style>
.sign-wrap-3 {
background: #f9f1e5;
text-align: center;
padding: 60px 20px;
}
.sign-wrap-3 .sign_word {
font-size: 40px;
font-weight: bold;
line-height: 50px;
color: #FFF;
font-family: 'Roboto Condensed', sans-serif;
text-transform: uppercase;
animation: neon-3 5s steps(1, start) infinite reverse;
}
@keyframes neon-3 {
0%{
color: #0b3960;
text-shadow: 0 0 7px #0b3960, 0 0 8px #0b3960;
}
80%{
color: #fff;
text-shadow: 0 0 6px #fff,0 0 10px #fff,0 0 50px #79a7fc;
}
81%{
color: #E1F5FE;
text-shadow: 0 0 6px #fff,0 0 10px #fff,0 0 50px #79a7fc;
}
82%{color: #0b3960;
text-shadow: 0 0 7px #0b3960, 0 0 8px #0b3960;
}
83%{
color: #E1F5FE;
text-shadow: 0 0 6px #fff,0 0 10px #fff,0 0 50px #79a7fc;
}
84%{
color: #0b3960;
text-shadow: 0 0 7px #0b3960, 0 0 8px #0b3960;
}
85%{
color: #E1F5FE;
text-shadow: 0 0 6px #fff,0 0 10px #fff,0 0 50px #79a7fc;
}
100%{
color: #0b3960;
text-shadow: 0 0 7px #0b3960,0 0 8px #0b3960;
}
}</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>

Меняйте текст на свой. Цвет текста так же можно поменять.

Далее ⇒

Страница 404. Урок 13

Дополнение на 26.09.2021

На Блоггере изменился внешний вид настроек, редактора, некоторых элементов, но функции остались прежними.

В прошлой статье мы закончили рассматривать все настройки блога, но не успели сделать страницу 404, которая сообщает читателю о том, что страницы на блоге нет. Сделать страничку нужно яркой и функциональной для пользователя. Делать её очень просто.

Сообщение об ошибке "Страница не найдена"

Нам нужен любой XTML редактор, желательно визуальный. Я делала в редакторе самого блога. Удобно тем, что картинки не нужно отправлять в фотохостинг. Можно так же делать страницу на тестовом блоге.

Никаких особых, специальных кодов, как для виджетов, нам не потребуется. Нужны только картинки, если есть желание, то можно поискать красивый CSS текст и рамки.
Подойдут анимированные картинки, различные гифки. Одним словом, делайте страничку по своему вкусу.

Открываем редактор и либо пишем текст (в режиме создать), либо ставим какой-нибудь код с красивым текстом (в режиме ХТМЛ). Какой текст писать? На ваш вкус - смешной, серьёзный и так далее, что бы он подходил картинке, если вы её поставите на страницу 404.
В тексте сообщите об ошибке и тут же предложите читателю другие варианты действий, что бы он остался на сайте. Например: перейти на главную страницу блога, посмотреть карту сайта или найти что-нибудь в поиске по блогу. Заинтересуйте посетителя!

Если нет желания заморачиваться - напишите простой текст Ошибка 404 и дайте ссылку на Главную страницу своего блога.

Ещё вариант - поставить на этой странице простенькую игру и конечно не забыть про ссылки на главную страницу вашего сайта.

Созданную страницу копируем из редактора (в режиме XTML!) и вставляем в окно настроек - Персонализированное сообщение об ошибке "Страница не найдена".

Сделала для вас несколько страничек ошибки 404, коды ниже. Если понравились - пользуйтесь. Только внесите несколько изменений в код.

Круги расходятся от центра как радиоволны. Идею нашла на сайте https://atuin.ru/. Можно ничего не менять, если вас устраивает страница, кроме ссылки на Главную страницу - её выделила синим. Иначе, ваши читатели попадут ко мне на блог.
Код:

Зелёным выделила текст, который можно поменять.
Красным - размеры и цвета круга с радиоволнами.

Код:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiD8WSp1cHnBcrZJHRz3brrDSx8dmD2YLM8u8QL9O-7BPBPr5yKHsT6_UIPZizgPqqYWinU2lH0u6BuKBK3cY29h5WX7vwirBOWjvTPpbPLsLCUpXJYgriU6CPHlFnrb9BrcpqMYzaQgaM/s1600/og_og_.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="ошибка 404" border="0" data-original-height="767" data-original-width="1000" height="491" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiD8WSp1cHnBcrZJHRz3brrDSx8dmD2YLM8u8QL9O-7BPBPr5yKHsT6_UIPZizgPqqYWinU2lH0u6BuKBK3cY29h5WX7vwirBOWjvTPpbPLsLCUpXJYgriU6CPHlFnrb9BrcpqMYzaQgaM/s640/og_og_.jpg" title="ошибка 404" width="640" /></a></div>
<style>
.my_tekst-20 {
margin: 40px auto;
text-align: center;
padding: 20px 10px 24px;
color: #444;
font: 300 30px/30px 'Fredoka One', sans-serif;
text-shadow: 0 2px 0 #f6f7f5,
0 3px 0 #ccc,
0 4px 0 #ccc,
0 5px 0 #ccc,
0 6px 0 #ccc;
}
</style>
<div class="my_tekst-20" style="text-align: center;">
Не мучайте кота, нужной вам страницы у него нет.<br />
 Возможно её и никогда не было.<br />
 Лучше посетите <a href="https://inshabashka.blogspot.com/" rel="nofollow" target="_blank">Главную страницу</a> или <a href="https://inshabashka.blogspot.com/p/blog-page.html" rel="nofollow" target="_blank">Карту блога</a>, там вы найдёте много других, интересных сообщений.
</div>

Поменяйте текст и ссылки в коде.

Эта страница с анимированным текстом. Так же поменяйте в коде ссылку и текст.
Код:

<div class="separator" style="clear: both; text-align: center;">
<img alt="ошибка 404" border="0" data-original-height="842" data-original-width="1000" height="538" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9EqKlIU28mGwpOFHXcvgwOGXoEFpSZE8prZGMmXbM_XRHuKC78-U36xGKgzAd1UE_Nuc_qpDODrWZxZi4Pa_FB0IY8O8DdRfGrkpWBW367Y0Bwy_2H5HOFJkQYjm4Hc_QOnkerKvdcp3O/s640/animals.jpg" title="ошибка 404" width="640" /></div>
<div class="pouring">
Уважаемый читатель!<br />
Извините, но похоже что статьи, которую вы искали на сайте нет.<br />
Код ошибки 404<br />
Не злитесь, заходите ко мне в гости на <a href="https://inshabashka.blogspot.com/" rel="nofollow" target="_blank">Главную страницу</a>, уверена вы найдёте там много других интересных статей.</div>
<style>.pouring {
font-size: 30px;
line-height: 40px;
font-family: Verdana, sans-serif;
font-weight: 500;
position: relative;
background: white;
overflow: hidden;
text-align: center;
}
.pouring:before {
content: '';
position: absolute;
filter: blur(10px);
top: 0;
left: 0;
width: 100%;
height: 100%;
mix-blend-mode: screen;
background-image: repeating-linear-gradient(-45deg, transparent, transparent 1em, #ffffff 1em,
#333528 50%), repeating-linear-gradient(45deg, #000000, #000000 1em, #FFF 1em, #262720 50%);
background-size: 3em 3em, 2em 2em;
animation-name: ani;
animation-duration: 10s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes ani {
from {
background-position: 0 0;
}
to {
background-position: 100% 0;
}
}
@media (max-width:690px) {
.pouring {font-size: 20px;}
}</style>

Зелёным выделила цвета букв в тексте.

Код:

<div class="my_tekst-8" style="text-align: center;">
Ошибка 404</div>
<style>
.my_tekst-8 {
margin: 40px auto;
text-align: center;
padding: 20px 10px 20px;
color: red;
font: 100 40px/1 "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
background: transparent;
letter-spacing: 5px;
text-shadow: -1px -1px 0px #420000, 2px 2px 0px #eaeaea, 3px 3px 0px #814359;
}
</style>
<table cellpadding="0" cellspacing="0" style="background: transparent; border: 1px solid transparent; margin: 0 0 10px 0; width: 244px;"><tbody>
<tr><td style="color: black; font-family: "verdana"; font-size: 11px; padding: 5px 5px;"><div style="text-align: center;">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" height="480" width="640"><param name="movie" value="https://www.games68.com/games/bubble_shooter.swf"><param name="quality" value="high"></param>
<param name="menu" value="false"></param>
<embed src="https://www.games68.com/games/bubble_shooter.swf" width="640" height="480" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" menu="false" wmode="direct"></embed></object></div>
</td></tr>
<tr><td align="center" style="border-top: 1px solid transparent; font-family: "verdana"; font-size: 11px; padding: 5px 10px;"><br /></td></tr>
</tbody></table>
<div class="my_tekst-8" style="text-align: center;">
Как только наиграетесь, милости прошу на <a href="https://inshabashka.blogspot.com/" rel="nofollow" target="_blank">Главную страницу</a>!
Жаль только странички, которую вы искали на сайте - нет, но надеюсь вам понравятся другие сообщения.</div>
<style>
.my_tekst-8 {
margin: 40px auto;
text-align: center;
padding: 20px 10px 20px;
color: dimgray;
font: 100 40px/1 "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
background: transparent;
letter-spacing: 5px;
text-shadow: -1px -1px 0px #420000, 2px 2px 0px #eaeaea, 3px 3px 0px #814359;
}
</style>

Меняйте в коде слова и ссылку.
Проверить установилась или нет страница можно вставив в браузерную строку такую строчку:
https://inshabashka.blogspot.com/tratata/
Вместо моего адреса блога, поставьте свой.

Идеи для страниц 404 можно подсмотреть:
https://yraaa.ru/templates/original-404-ucoz
https://freefrontend.com/html-css-404-page-templates/
https://obninsksite.ru/blog/html-and-css/404-oformlenie
http://beloweb.ru/shablonyi/neskolko-besplatnyih-i-adaptivnyih-html-stranits-s-404-oshibkoy.html
https://tproger.ru/devnull/best-404-notfound-pages/
https://nisnom.com/veb-razrabotki/krasivaya-css-animatsiya-dlya-404-stranitsy/

Далее ⇒