Интересное оформление страницы 404 Blogger

Страница 404 является неотъемлемой частью любого веб-сайта. Несмотря на то, что она обозначает ошибку или отсутствие страницы, она имеет важное значение для пользователей и владельцев сайта.
Прежде всего, страница 404 помогает улучшить пользовательский опыт. Когда пользователь попадает на несуществующую страницу, он может испытать разочарование и путаницу. Однако благодаря странице 404, пользователю предоставляется информация, что произошла ошибка, и предлагается вернуться на главную страницу или воспользоваться поиском. Это позволяет сохранить позитивное впечатление о сайте.
Кроме того, страница 404 полезна для SEO. Правильно настроенная страница 404 может помочь поисковым системам понять, что страница не существует, и помочь им проиндексировать более важные страницы сайта. Это позволяет улучшить позиции сайта в поисковой выдаче.
На Блоггере так же есть возможность установить 404 страницу. Читайте информацию:
Таким образом, страница 404 необходима на веб-сайте как инструмент для улучшения пользовательского опыта и SEO. Ее наличие помогает сохранить доверие пользователей и улучшить видимость сайта в поисковых системах.
Предлагаю посмотреть на интересные страницы ошибки 404. Проверить работоспособность кода можно в редакторе.

Вариант 1

Автор Muhammad Rauf
Вариант 1
<img src="https://i.ibb.co/W6tgcKQ/softcodeon.gif"> <h2 class="error-text">Упс, похоже такой страницы нет на сайте</h2> <p class="text">Проверьте правильность написания адреса страницы или перейдите на...</p> <div class="btn1"> <a class="error" href="Адрес вашего сайта">Главная</a> </div> <style> *{padding:0;margin:0;background:#f0f0f0;} img{display: block; margin-left: auto; margin-right: auto;} .btn1{text-align:center;} .text{text-align:center;font-size:20px;margin-bottom:40px;} .error-text{text-align:center;padding:20px; font-family: Cursive; } .error{font-family: 'Roboto', sans-serif;font-size:1.5rem;text-decoration:none;padding:15px;background:#003c54;color:#fff;border-radius:10px;} </style>
Поменяйте текст и пропишите адрес вашей главной страницы. Отметила в коде красным цветом. Картинку лучше перенести на свой сайт:
  1. скачайте её, перейдя по адресу изображения (выделила зелёным)
  2. загрузите в редактор блога 
  3. скопируйте адрес картинки
  4. удалите картинку
Так же можно поменять цвет кнопки — выделила синим цветом.

Вариант 2

Автор Anh Nhim
Вариант 2
Код:
<div id="container-error"> <div class="minion"> <div class="hands"> <div class="left"></div> <div class="right"></div> <div class="fingers-l"></div> <div class="fingers-r"></div> <div class="glove-l"></div> <div class="glove-r"></div> </div> <div class="glasses"> <div class="glassesline1"></div> <div class="glassesline2"></div> <div class="glass1"> <div class="eye1"></div> </div> <div class="glass2"> <div class="eye2"></div> </div> </div> <div class="mouth"> <ul class="teeth"> <li></li> <li></li> <li></li> <li></li> </ul> </div> <div class="belt-left"></div> <div class="belt-right"></div> <div class="pants"></div> <div class="legs"> <div class="left"></div> <div class="right"></div> <div class="shoe-l"></div> <div class="shoe-r"></div> </div> </div> <div id="buttonerror"> <a href="адрес сайта">Главная</a></div> </div> <style> { background: #f5f5f5; font-family: 'Open Sans', sans-serif; margin: 0; padding: 0; position: relative; } a, a:visited { color: #fff; outline: none; text-decoration: none; } a:hover, a:focus, a:visited:hover { color: #fff; text-decoration: none; } #container-error { text-align: center; z-index: 9999; width: 100%; height: 100%; position: fixed; top: 0; right: 0; bottom: 0; left: 0; padding: 0; background-color: #0dea99; color: #fff; } #buttonerror { clear: both; position: absolute; background-color: rgba(255, 255, 255, .05); color: #0dea99; position: absolute; left: 0; right: 0; bottom: 15%; margin: auto; max-width: 250px; padding: 20px; z-index: 99999; border-radius: 10px; border: 5px solid #fff; transition: all .5s; } #buttonerror a { color: #fff; font-weight: 700; font-size: 1.5rem; text-transform: uppercase; letter-spacing: 1px; } #buttonerror:hover { background-color: rgba(255, 255, 255, 1); } #buttonerror:hover a, #buttonerror a:hover { color: #0dea99; } .minion { position: absolute; background-color: #ffed41; height: 360px; width: 218px; border-radius: 218px 218px 130px 130px; position: absolute; left: 50%; top: 45%; margin: -180px 0 0 -109px; z-index: 99999; } .glassesline1 { background-color: #494949; border-radius: 4px; height: 12px; width: 238px; position: relative; top: 98px; margin: 0 -10px; } .glassesline2 { background-color: #2d2d2d; border-radius: 4px; height: 12px; width: 238px; position: relative; top: 98px; margin: 0 -10px; box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.15); } .glass1, .glass2 { background-color: #e2e2e0; height: 102px; width: 102px; border-radius: 102px; position: absolute; top: 55px; box-shadow: -4px 4px 0px 0px rgba(50, 50, 50, 0.15), 1px -1px 0px 0px rgba(255, 255, 255, 1); } .glass1 { left: 10px; right: auto; z-index: 2; } .glass2 { right: 10px; left: auto; z-index: 1; } .glass1:before, .glass2:before { background-color: #e5bf36; height: 78px; width: 78px; border-radius: 78px; display: block; position: relative; top: 12px; left: 12px; content: ""; } .glass1:after, .glass2:after { background-color: #FFF; height: 58px; width: 78px; border-radius: 78px; position: absolute; top: 22px; left: 12px; content: ""; animation: eyes 5s linear 1s infinite; } .eye1, .eye2 { background-color: #724c25; height: 28px; width: 28px; border-radius: 28px; position: absolute; top: 44px; z-index: 3; } .eye1 { left: 46px; } .eye2 { right: 46px; } .eye1:before, .eye2:before { background-color: #2c2d2f; height: 12px; width: 12px; border-radius: 12px; display: block; position: relative; top: 8px; left: 8px; content: ""; } .eye1:after, .eye2:after { background-color: #FFF; height: 8px; width: 8px; border-radius: 8px; position: absolute; top: 6px; left: 12px; content: ""; } .mouth { background-color: #603814; height: 36px; width: 106px; position: absolute; border-radius: 0 0 106px 106px; top: 182px; left: 55px; overflow: hidden; } .mouth:before { background-color: #FFED41; height: 80px; width: 205px; position: relative; display: block; border-radius: 0 0 150px 150px; top: -70px; left: -50px; content: ""; z-index: 2; box-shadow: 0px 3px 0px 0px rgba(50, 50, 50, 0.15); } ul.teeth { list-style: none; z-index: 1; position: absolute; top: -10px; left: -25px; } ul.teeth li { float: left; height: 15px; width: 20px; background: #FFF; display: inline-block; border-radius: 0 0 15px 15px; } ul.teeth li:first-child, ul.teeth li:last-child { height: 10px; } .pants { background-color: #2b5b89; height: 66px; position: relative; top: 270px; border-radius: 0 0 128px 128px; z-index: 2; } .pants:before { background-color: #2b5b89; height: 58px; width: 138px; display: block; position: relative; top: -58px; margin: 0 auto; content: ""; } .pants:after { background-color: #224467; height: 44px; width: 58px; display: block; position: relative; top: -76px; border-radius: 0 0 58px 58px; margin: 0 auto; content: ""; } .belt-left, .belt-right { background-color: #224467; height: 16px; width: 70px; position: absolute; top: 225px; z-index: 3; } .belt-left { left: -10px; transform: scale(1) rotate(24deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); } .belt-right { right: -10px; transform: scale(1) rotate(-28deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); } .belt-left:after, .belt-right:after { background-color: #2d2d2b; height: 11px; width: 11px; border-radius: 11px; position: absolute; content: ""; } .belt-left:after { left: 56px; top: 3px; } .belt-right:after { right: 57px; top: 3px; } .legs .left, .legs .right { background: #224467; height: 22px; width: 44px; position: absolute; top: 358px; z-index: 1; } .legs .left { left: 60px; } .legs .right { right: 60px; } .legs .left:after { position: absolute; content: ""; height: 0; width: 0; border-bottom: 22px solid #0dea99; border-right: 10px solid transparent; left: 0; } .legs .right:after { position: absolute; content: ""; height: 0; width: 0; border-bottom: 22px solid #0dea99; border-left: 10px solid transparent; right: 0; } .shoe-l, .shoe-r { background-color: #424242; width: 52px; height: 18px; position: absolute; top: 380px; } .shoe-l { left: 50px; border-radius: 18px 0 0 0; } .shoe-r { right: 50px; border-radius: 0 18px 0 0; } .shoe-l:after, .shoe-r:after { background-color: #2d2d2d; width: 56px; height: 5px; position: absolute; content: ""; top: 18px; left: -2px; } .shoe-l:before { position: absolute; content: ""; height: 0; width: 0; border-top: 5px solid #224467; border-left: 34px solid transparent; left: 20px; } .shoe-r:before { position: absolute; content: ""; height: 0; width: 0; border-top: 5px solid #224467; border-right: 34px solid transparent; right: 20px; } .hands .left, .hands .right { background-color: #e5c034; height: 100px; width: 16px; position: absolute; top: 242px; } .hands .left { left: -16px; border-radius: 16px 0 0 0; } .hands .right { right: -16px; border-radius: 0 16px 0 0; } .hands .fingers-l, .hands .fingers-r { background-color: #424242; position: absolute; content: ""; height: 16px; width: 16px; top: 350px; z-index: 1; } .hands .fingers-l { left: -6px; border-radius: 0 16px 0 0; } .hands .fingers-r { right: -6px; border-radius: 16px 0 0 0; } .hands .fingers-l:after, .hands .fingers-r:after { background-color: #383838; height: 16px; width: 16px; content: ""; border-radius: 16px; position: absolute; top: 15px; z-index: 2; } .hands .fingers-l:after { left: 0px; } .hands .fingers-r:after { right: 0px; } .hands .fingers-l:before, .hands .fingers-r:before { background-color: #2c2c2c; height: 16px; width: 16px; content: ""; border-radius: 16px; position: absolute; top: 8px; z-index: 1; } .hands .fingers-l:before { left: 5px; } .hands .fingers-r:before { right: 5px; } .hands .glove-l, .hands .glove-r { background-color: #424242; position: absolute; height: 36px; width: 16px; border-radius: 0 0 16px 16px; top: 342px; z-index: 3; } .hands .glove-l { left: -15px; } .hands .glove-r { right: -15px; } .hands .glove-l:before, .hands .glove-r:before { position: absolute; content: ""; height: 0; width: 0; top: -15px; border-bottom: 30px solid #424242; border-left: 30px solid transparent; transform: scale(1) rotate(45deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); } .hands .glove-l:before { left: -7px; } .hands .glove-r:before { right: -7px; } </style>
Вставляйте адрес с нужной страницей своего блога и её название — выделила в коде красным.

Вариант 3

Автор Kilchenmann
Вариант 3
<div class='container'> <div class='post-module hover'> <div class='thumbnail'> <img src='http://media.lakto.org/error.jpg'> </div> <div class='post-content'> <div class='category'>Error 404</div> <h1 class='title'>Это не та страница, которую вы ищите.</h1> <h2 class='sub_title'>404 (Страница не найдена) Ошибка</h2> <p class='description'> </p> <div class='post-meta'> <span class='comments'> <a href='адрес блога'>&#8592; Перейти на главную страницу</a> </span> </div> </div> </div> </div> <style> { background: #f2f2f2; font-family: 'proxima-nova-soft', sans-serif; font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .post-module { position: relative; z-index: 1; display: block; background: #ffffff; min-width: 270px; width: 340px; height: 470px; -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15); -webkit-transition: all 0.3s linear 0s; -moz-transition: all 0.3s linear 0s; -ms-transition: all 0.3s linear 0s; -o-transition: all 0.3s linear 0s; transition: all 0.3s linear 0s; margin-left: auto; margin-right: auto; margin-top: 80px; } .post-module:hover, .hover { -webkit-box-shadow: 0px 1px 35px 0px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 1px 35px 0px rgba(0, 0, 0, 0.3); box-shadow: 0px 1px 35px 0px rgba(0, 0, 0, 0.3); } .post-module:hover .thumbnail img, .hover .thumbnail img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); transform: scale(1.1); opacity: 1; } .post-module .thumbnail { background: #000000; height: 400px; overflow: hidden; } .post-module .thumbnail img { display: block; width: 110%; -webkit-transition: all 0.3s linear 0s; -moz-transition: all 0.3s linear 0s; -ms-transition: all 0.3s linear 0s; -o-transition: all 0.3s linear 0s; transition: all 0.3s linear 0s; } .post-module .post-content { position: absolute; bottom: 0; background: #e0e0e0; width: 100%; padding: 30px; -webkti-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s; -moz-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s; -ms-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s; -o-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s; transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s; } .post-module .post-content .category { position: absolute; top: -36px; left: 0; background: #e74c3c; padding: 10px 15px; color: #ffffff; font-size: 14px; font-weight: 600; text-transform: uppercase; } .post-module .post-content .title { margin: 0; padding: 0 0 10px; color: #333333; font-size: 26px; font-weight: 700; } .post-module .post-content .sub_title { margin: 0; padding: 0 0 20px; color: #e74c3c; font-size: 20px; font-weight: 400; } .post-module .post-content .description { display: none; color: #666666; font-size: 14px; line-height: 1.8em; } .post-module .post-content .post-meta { margin: 30px 0 0; color: #999999; } .post-module .post-content .post-meta .timestamp { margin: 0 16px 0 0; } .post-module .post-content .post-meta a { color: #999999; text-decoration: none; } .hover .post-content .description { display: block !important; height: auto !important; opacity: 1 !important; } .container { max-width: 800px; min-width: 640px; margin: 0 auto; } .container:before, .container:after { content: ''; display: block; clear: both; } .container .column { width: 50%; padding: 0 25px; -webkti-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .container .column .demo-title { margin: 0 0 15px; color: #666666; font-size: 18px; font-weight: bold; text-transform: uppercase; } .container .info { width: 300px; margin: 50px auto; text-align: center; } .container .info h1 { margin: 0 0 15px; padding: 0; font-size: 24px; font-weight: 400; color: #333333; } .container .info span { color: #666666; font-size: 12px; } .container .info span a { color: #000000; text-decoration: none; } .container .info span .fa { color: #e74c3c; } </style>
Перенесите, на всякий случай, изображение из кода на свой блог - выделила синим цветом. Меняйте текст и добавьте адрес главной страницы своего блога - в коде выделала красным цветом.

Вариант 4

Автор Aleena Pathan
Вариант 4
<h1>Произошла ошибка </h1> <p class="zoom-area"><b>Поломка! </b> К сожалению такой страницы здесь нет.</p> <section class="error-container"> <span><span>4</span></span> <span>0</span> <span><span>4</span></span> </section> <div class="link-container"> <a target="_blank" href="адрес сайта" class="more-link">Перейдите на главную страницу</a> </div> <style> .error-container { text-align: center; font-size: 180px; font-family: 'Catamaran', sans-serif; font-weight: 800; margin: 20px 15px; } .error-container > span { display: inline-block; line-height: 0.7; position: relative; color: #FFB485; } .error-container > span > span { display: inline-block; position: relative; } .error-container > span:nth-of-type(1) { perspective: 1000px; perspective-origin: 500% 50%; color: #F0E395; } .error-container > span:nth-of-type(1) > span { transform-origin: 50% 100% 0px; transform: rotateX(0); animation: easyoutelastic 8s infinite; } .error-container > span:nth-of-type(3) { perspective: none; perspective-origin: 50% 50%; color: #D15C95; } .error-container > span:nth-of-type(3) > span { transform-origin: 100% 100% 0px; transform: rotate(0deg); animation: rotatedrop 8s infinite; } @keyframes easyoutelastic { 0% { transform: rotateX(0); } 9% { transform: rotateX(210deg); } 13% { transform: rotateX(150deg); } 16% { transform: rotateX(200deg); } 18% { transform: rotateX(170deg); } 20% { transform: rotateX(180deg); } 60% { transform: rotateX(180deg); } 80% { transform: rotateX(0); } 100% { transform: rotateX(0); } } @keyframes rotatedrop { 0% { transform: rotate(0); } 10% { transform: rotate(30deg); } 15% { transform: rotate(90deg); } 70% { transform: rotate(90deg); } 80% { transform: rotate(0); } 100% { transform: rotateX(0); } } /* demo stuff */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { background-color: #f4f4f4; margin-bottom: 50px; } html, button, input, select, textarea { font-family: 'Montserrat', Helvetica, sans-serif; color: #bbb; } h1 { text-align: center; margin: 30px 15px; } .zoom-area { max-width: 490px; margin: 30px auto 30px; font-size: 19px; text-align: center; } .link-container { text-align: center; } a.more-link { text-transform: uppercase; font-size: 13px; background-color: #bbb; padding: 10px 15px; border-radius: 0; color: #fff; display: inline-block; margin-right: 5px; margin-bottom: 5px; line-height: 1.5; text-decoration: none; margin-top: 50px; letter-spacing: 1px; } </style>
Так же выделила в коде красным цветом текст, который можно поменять и место, куда вставить ссылку на главную страницу вашего блога.
Далее ⇒

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

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

В сегодняшнем сообщении покажу новые интересные градиентные анимированные стили оформления текста. Все их можно посмотреть в живую в редакторе. Вставляете код и нажимаете кнопку "Показать результат". Текст можно использовать для названия сайта, заголовков, поздравлений и объявлений. Теги h1 class можно менять на свои, например h2, 3, 4 или strong. Можно менять шрифт, его размер, толщину. Все коды найдены на сайте https://codepen.io.

Вариант 1

Автор Rloria7
Вариант 1


Градиент мягко переливается разными цветами одного оттенка — зелёный, фиолетовый, синий и т.д. 
Код:
<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

Вариант 3
Градиент очень медленно и незаметно меняет свои цвета. 
Код:
<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
Вариант 4
Градиент плавно меняется снизу вверх.
Код:
<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
вариант 5
Градиент плавно перетекает снизу вверх, сверху вниз.
Код:
<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
Вариант 6
Градиент движется из угла в другой укол текста с небольшим ускорением. Создаётся впечатление, что буквы слегка приподнимаются. 
Код: 
<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> 
Далее ⇒

Стили оформления цитат для Блогспот

Оформление цитат красиво и эстетично на сайтах имеет ряд важных причин. Во-первых, красиво оформленные цитаты привлекают внимание посетителей и делают контент более привлекательным и запоминающимся. Это помогает удержать посетителей на сайте дольше и повысить его популярность.
Кроме того, красиво оформленные цитаты делают контент более удобным для восприятия и понимания. Они помогают выделить ключевые мысли и идеи, делая текст структурированным и легким для чтения.
Также, оформление цитат улучшает визуальное восприятие контента и создает положительное впечатление о сайте. Эстетически приятные элементы помогают укрепить имидж сайта и привлечь новых посетителей.
В целом, красиво оформленные цитаты на сайтах играют важную роль в создании качественного и интересного контента, который будет привлекать и удерживать внимание аудитории.
На сайте есть много стилей оформления цитат:
Но сегодня предлагаю посмотреть ещё несколько. Все коды устанавливаем так:
Заходим в шаблон: Тема — Изменить HTML.  Находим тег ]]></b:skin> и выше него вставляем выбранный код.

3 стиля цитаты

Стили найдены на https://codepen.io, у автора Mark Boots.

1 вариант
1 вариант
2вариант
2 вариант
3 вариант
3 стиля цитаты
blockquote { --accent-color: rgb(32 32 54); --bg-color: rgb(30 145 254); --dot-color: rgb(255 255 255 / .35); --text-color: rgb(243 243 243); } blockquote{ --padding: 1rem; padding: var(--padding); color: var(--text-color, black); font-weight: 600; background-color: var(--bg-color, white); display: grid; gap: 1rem; background-image: radial-gradient( circle, var(--dot-color, rgb(0 0 0 / .125)) calc(25% - 1px), transparent 25% ); background-size: 0.5rem 0.5rem; border-radius: 0.25rem; box-shadow: 0.5rem 0.5rem 2rem rgb(0 0 0 / .5) } blockquote::before{ --qHeight: 4rem; content: ""; margin-left: calc(var(--padding) * -1); margin-top: calc(var(--padding) * -1); height: var(--qHeight); width: calc(var(--qHeight) * 1.1); background-image: radial-gradient( circle at bottom right, transparent calc(var(--qHeight) / 4 - 1px), var(--accent-color, black) calc(var(--qHeight) / 4) calc(var(--qHeight) / 2), transparent calc(var(--qHeight) / 2 + 1px) ), linear-gradient(var(--accent-color, black), var(--accent-color, black)); background-size: calc(var(--qHeight) / 2) calc(var(--qHeight) / 2); background-position: top left, bottom left; background-repeat: space no-repeat }
Чтобы поменять стиль, отрезок, выделенный в коде синим, меняем на:
2 вариант
blockquote{
  --accent-color: rgb(243 243 243);
  --bg-color: rgb(33 29 30);
  --dot-color: rgb(255 255 255 / .125);
  --text-color: rgb(243 243 243);
}
3 вариант
blockquote{
  --accent-color: rgb(30 145 254);
  --bg-color: rgb(32 32 54);
  --dot-color: rgb(255 255 255 / .125);
  --text-color: rgb(243 243 243);
}

Оформление цитаты тенями

Оформление цитаты тенями
blockquote {
  margin: 3.7em auto;
  padding: 2em;
  background: linear-gradient (white, white) padding-box, border-box  0 / cover;
  border: 2em solid transparent;
  box-shadow: 5px 3px 30px black;
  font-size: 1.4em;
  font-family: 'Lora', serif;
  font-style: italic;
  line-height: 1.5;
  width: 40%;
}

Стиль цитаты с цветным текстом (2 варианта)

Цвет текста, пунктирной линии и обычной линии можно менять. Отметила в кодах красным.
1 вариант
1 стиль
blockquote {
color: #8ABA9C;text-align:left;border-left:5px solid #8ABA9C;
padding: 21px;line-height: 20px;
margin: 30px 40px;float: left;}
2 вариант
2 стиль
blockquote {
border-left:2px dashed #FACC2E;color:#FACC2E;font-size:14px;
line-height:18px;font-style:italic;
text-align:justify;margin:15px 30px;padding-left:20px;
font-family:Georgia,"Times New Roman",Times,serif;}

Стиль цитаты с тенями и широкой полосой

Цвет полосы меняем на свой вкус — выделила красным. Так же можно поменять ширину полосы — выделила синим.
Стиль цитаты с тенями и широкой полосой
blockquote {background: #fafafa;font-style: italic;margin: 1em 1em 1.5em 1em;
font-size: 16px;padding: 2.1em 1.5em;
border-radius: 5px;border-left: 15px solid #1ABC9C;box-shadow: 11px 10px 0px #eee;}

Стиль цитаты с двумя линиями и кавычками

Так же можно поменять цвет линий — выделила красным цветом.
Стиль цитаты с двумя линиями и кавычками
blockquote {position: relative;
display: block;border-left: 5px solid #21610B;
padding: 1.5em 1.5em 1.5em 3.5em;border-right: 2px dashed #21610B;margin: 0 0 1.5em;}
blockquote::before {position: absolute;font-size: 62px;font-weight: bold;
content: "\201C";line-height: 1;top: 10px;left: 10px;}
Далее ⇒

Последние сообщения для Блоггер

На сайте виджеты последних сообщений играют важную роль для удобства пользователей. Они позволяют посетителям быстро ознакомиться с самой актуальной информацией, не заходя на каждую страницу отдельно. Виджеты последних сообщений делают сайт более интерактивным, увеличивая его привлекательность и повышая уровень вовлеченности пользователей. Благодаря этим виджетам пользователи могут легко следить за обновлениями, новостями, акциями и другой интересной информацией, что делает опыт использования сайта более комфортным и информативным.
Другие виджеты можно найти на сайте:
Предлагаю вашему вниманию три интересных гаджета "Последних сообщений" для Блоггер. Коды виджета "гуляют" в сети, и видела их на нескольких блогах, поэтому написать авторство не могу.
Устанавливаются гаджеты просто, что очень удобно для новичков. Заходим в Дизайн, нажимаем Добавить гаджет (в боковой панели), выбираем HTML/JavaScript. В открывшемся окне вставляем код.

Виджет 1

Последние сообщения в виде сетки из 9 ячеек, расположенных 3*3. Название статьи появляется при наведении курсора. Если картинки в статье не окажется, то вместо неё будет показана белая с восклицательным знаком в треугольнике. Её можно заменить на любую свою. Отметила в коде синим цветом. Если три ряда гаджета не умещаются в боковой панели, значит её нужно немного расширить. Делается это в Тема/Настроить/Регулировка ширины.
Код:
<style> .recent-grid {padding:0;clear:both;} .recent-grid:after {content:"";clear:both;display:table;} .recent-grid .galleryview{position:relative;display:inline-block;margin:6px 0;overflow:hidden;} .recent-grid .galleryview a{text-decoration:none;float:left;position:relative;margin:0 6px} .recent-grid .galleryview .ptitle{display:block;background:rgba(0,0,0,.7);clear:left;position:absolute;font-size:10px;line-height:1.3em;text-align:left;bottom:3px;left:3px;right:3px;top:3px;color:#fff;overflow:hidden;padding:5px;word-wrap:break-word;visibility:hidden;opacity:0;backface-visibility:hidden;transition:all .2s} .recent-grid .galleryview:hover .ptitle{visibility:visible;opacity:1} .recent-grid a img{background:#fdfdfd;float:left;padding:2px;border:1px solid #e3e3e3;transition:all .3s} .recent-grid a:hover img {border-color:#bbb;} </style> <script type='text/javascript'> //<![CDATA[ // Recent Post Gallery function gallerygrid(a){for(var t=a.feed.entry||[],e=['<div class="recent-grid">'],i=0;i<t.length;++i){for(var l=t[i],r=l.title.$t,n=l.media$thumbnail?l.media$thumbnail.url:"http://2.bp.blogspot.com/-4fCf53FqYKM/Vccsy7apoZI/AAAAAAAAK4o/XJkv3RkC0pw/s1600/default%2Bimage.png",s=n.replace("s72-c","s"+recentpost_thumbs+"-c"),h=l.link||[],c=0;c<h.length&&"alternate"!=h[c].rel;++c);var d=h[c].href,m='<img src="'+s+'" width="'+recentpost_thumbs+'" height="'+recentpost_thumbs+'"/>',p=recentpost_title?'<span class="ptitle">'+r+"</span>":"",g='<a href="'+d+'" target="_blank" title="'+r+'">'+m+p+"</a>";e.push('<div class="galleryview">',g,"</div>")}e.push("</div>"),document.write(e.join(""))} //]]> </script> <script> var recentpost_thumbs = 72; var recentpost_title = true; </script> <script src="/feeds/posts/summary?max-results=9&amp;alt=json-in-script&amp;callback=gallerygrid"></script>

Виджет 2

В нём указывается дата сообщения и ссылка Читать далее, которая переносит читателя на страницу сообщения. Её можно заменить на свой текст. В коде выделила оранжевым. 
Гаджет разноцветный. Цвета можно менять по своему вкусу. Например, каждую ячейку по разным оттенкам одного цвета или сделать всё однотонным. Цвета выделила красным. 
Так же в коде можно поменять картинку, которая будет показана, если в посте не будет фотографий. Ссылку на картинку в коде выделила синим цветом. 
Кроме этого, покопавшись в коде, можно заменить шрифт, его размеры и цвет. А так же сделать картинку квадратной, если такая вам больше нравится.
Количество постов можно менять — отметила в коде жирным шрифтом.
Код:
<style type="text/css"> img.recent-post-thumbnail{float:right;height:50px;width:50px;margin:5px -5px 0px 0px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;padding:3px;background: #fff} ul.recent-posts-wrap {background: #fff;list-style-type: none; margin: 5px 0px 5px 0px; padding: 0px;font:12px 'Ubuntu Condensed', sans-serif;} ul.recent-posts-wrap li:nth-child(1n+0) {background: #FCD092; width: 94%} ul.recent-posts-wrap li:nth-child(2n+0) {background: #FFE0B4; width: 94%} ul.recent-posts-wrap li:nth-child(3n+0) {background: #FFF59E; width: 94%;} ul.recent-posts-wrap li:nth-child(4n+0) {background: #E1EFA0; width: 94%;} ul.recent-posts-wrap li:nth-child(5n+0) {background: #B1DAEF; width: 94%;} ul.recent-posts-wrap li {padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #777;} .recent-posts-wrap a { text-decoration:none; } .recent-posts-wrap a:hover { color: #222;} .post-date {color:#e0c0c6; font-size: 11px; } .recent-post-title a {font-size: 14px;font-weight: bold;color: #444;} .recent-post-title {padding: 6px 0px;} .recent-posts-details a{ color: #222;} .recent-posts-details {padding: 5px 0px 5px; } </style> <script type="text/javascript"> function showrpwiththumbs(t){document.write('<ul class="recent-posts-wrap">');for(var e=0;e<posts_number;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBhOseCw1K97LoIepa_HY52MoEAjtJnT7uMo6YBbaKNqfXT5F7vRUpQmNOQTlnapHje6wbF09lfG9sWNvvZgPBphaU5UuOszBNHCBpGOUzwGFcFICl9KTrBQB0u1U_wbRp7FHo0ZJbhSkP/s1600/no-thumb.png"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li class="recent-posts-list">'),1==showpostswiththumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumbnail" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>"),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var _="",$=0;document.write('<br><div class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==insidereadmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Читать дальше</a>',$=1),1==showcomments&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")} </script> <script type="text/javascript"> var posts_number = 5; var showpostswiththumbs = true; var insidereadmorelink = true; var showcomments = false; var posts_date = true; var post_summary = true; var summary_chars = 70; </script> <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrpwiththumbs"></script> <noscript>Your browser does not support JavaScript!</noscript> <link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />

Виджет 3

Виджет 3
В этом гаджете прописана дата поста и количество комментариев. Есть ссылка Далее — отметила оранжевым, меняйте на свой текст. Поменять в коде можно количество постов — отметила красным. Картинку, если в сообщении не будет своего изображения, отметила в коде синим. Изменяем цвет гаджета — отметила в коде зелёным (несколько раз) .
При желании можно поменять шрифт, цвет шрифта и его размер - ищите в коде тег font-size.
<script type="text/javascript"> function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(p){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKKd3H0-ETWEfXQ8wmxwSgflChAi-_cDp0aRDwCWTmnXGnaTxWLJ1hA39ptgd8dHfoWXjdAHN01qGRhWVW1itzYuj3Wk8k2RSaGTzvS253oV-X1vgUMwKOENqNmx7L1-DtxtTebCKQ_Nkv/s1600/no-thumb.png"}var h=n.published.$t,f=h.substring(0,4),w=h.substring(5,7),v=h.substring(8,10),A=new Array;A[1]="Jan",A[2]="Feb",A[3]="Mar",A[4]="Apr",A[5]="May",A[6]="Jun",A[7]="Jul",A[8]="Aug",A[9]="Sep",A[10]="Oct",A[11]="Nov",A[12]="Dec",document.write('<li class="recent-posts-list">'),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>");var g="",k=0;document.write('<div class="recent-posts-details">'),1==posts_date&&document.write('<span class="post-date">'+v+" "+A[parseInt(w,10)]+" "+f+" </span> | "),1==showcommentslink&&(1==k&&(g+=" <br> "),"1 Comment"==l&&(l="1 Comment"),"0 Comment"==l&&(l="No Comment"),l='<a href="'+m+'" target ="_top">'+l+"</a>",g+=l,k=1),1==readmorelink&&(1==k&&(g+=" | "),g=g+'<a class="readmorelink" href="'+r+'" class="url" target ="_top">Далее</a>',k=1),document.write(g),document.write("</div>"),document.write("</li>")}document.write("</ul>")} </script> <script type="text/javascript"> var posts_no = 5; var showpoststhumbs = true; var readmorelink = true; var showcommentslink = true; var posts_date = true; </script> <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs" rel="nofollow"></script> <noscript>Your browser does not support JavaScript!</noscript> <style type="text/css"> #HTML1 .widget-content{margin: auto; width: 95%;} img.recent-post-thumb{width:50px;height:50px;float:right;margin:-4px -20px 0 0;border:4px solid #00A0B0;border-radius:100%}.recent-posts-container{float:left;width:100%;min-height:55px;margin:5px 0 5px 0;padding:0;font-size:12px}ul.recent-posts-container{counter-reset:countposts;list-style-type:none;background:#fff}ul.recent-posts-container li:before{content:counter(countposts,decimal);counter-increment:countposts;z-index:2;position:absolute;font-size:16px;color:#FFFFFF;background:#00A0B0;padding:7px 13px;border-radius:100%;margin-top:32px;margin-left:-21px}ul.recent-posts-container li{padding:5px 0;min-height:50px;list-style-type:none;margin:-2px 5px 5px 5px;border-bottom:2px solid #00A0B0}ul.recent-posts-container{border:2px solid #00A0B0}.recent-posts-container a{text-decoration:none}.recent-posts-container a:hover{color:#222}.post-date{color:#8F9596;font-size:11px}.recent-post-title a{font-size:14px;color:#616662}.recent-post-title{padding:0 17px}.recent-posts-details a{color:#888}.recent-posts-details{margin-left:12px;padding:5px}a.readmorelink{color:#FFFFFF;background:#00A0B0;padding:2px;border-radius:3px} </style> <div class='clear'></div>
Далее ⇒

Волнообразный эффект для изображения

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

Код

<div class="photowave"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <style> .photowave { --index: calc(1vw + 1vh); --transition: cubic-bezier(.1, .7, 0, 1); margin: 20px 0; display: flex; justify-content: center; gap: 0.4%; perspective: calc(var(--index) * 50); width: 100%; position: relative; z-index: 10; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1)) drop-shadow(0 12px 16px rgba(0,0,0,0.05)); } .photowave div { width: 7.5%; height: 400px; background-image: url('ваше фото'); background-repeat: no-repeat; background-size: 1300% auto; filter: contrast(1) brightness(1) saturate(1); transition: transform 1.25s var(--transition), filter 3s var(--transition), width 1.25s var(--transition); will-change: transform, filter, rotateY, width; } @media (max-width: 991px) { .photowave div { height: 250px; } } @media (max-width:575px) { .photowave div { height: 150px; } } .photowave div:nth-child(1) { background-position: 0 center; } .photowave div:nth-child(2) { background-position: 8.33333% center; } .photowave div:nth-child(3) { background-position: 16.66666% center; } .photowave div:nth-child(4) { background-position: 24.99999% center; } .photowave div:nth-child(5) { background-position: 33.33332% center; } .photowave div:nth-child(6) { background-position: 41.66665% center; } .photowave div:nth-child(7) { background-position: 49.99998% center; } .photowave div:nth-child(8) { background-position: 58.33331% center; } .photowave div:nth-child(9) { background-position: 66.66664% center; } .photowave div:nth-child(10) { background-position: 74.99997% center; } .photowave div:nth-child(11) { background-position: 83.3333% center; } .photowave div:nth-child(12) { background-position: 91.6666% center; } .photowave div:nth-child(13) { background-position: 100% center; } .photowave div:before, .photowave div:after { content: ''; position: absolute; height: 100%; width: 30px; right: calc(var(--index) * -1); } .photowave div:after { left: calc(var(--index) * -1); } .photowave div:hover { filter: contrast(1.3) brightness(1.3) saturate(1.3); transform: translateZ(calc(var(--index) * 10)); } .photowave div:hover + * { filter: contrast(1.25) brightness(1.25) saturate(1.25); transform: translateZ(calc(var(--index) * 8.5)) rotateY(35deg); z-index: -1; } .photowave div:hover + * + * { filter: contrast(1.2) brightness(1.2) saturate(1.2); transform: translateZ(calc(var(--index) * 5.6)) rotateY(40deg); z-index: -2; } .photowave div:hover + * + * + * { filter: contrast(1.15) brightness(1.1) saturate(1.1); transform: translateZ(calc(var(--index) * 2.5)) rotateY(30deg); z-index: -3; } .photowave div:hover + * + * + * + * { filter: contrast(1.1) brightness(1.05) saturate(1.05); transform: translateZ(calc(var(--index) * .6)) rotateY(15deg); z-index: -4; } .photowave div:has( + :hover) { filter: contrast(1.25) brightness(1.25) saturate(1.25); transform: translateZ(calc(var(--index) * 8.5)) rotateY(-35deg); } .photowave div:has( + * + :hover) { filter: contrast(1.2) brightness(1.2) saturate(1.2); transform: translateZ(calc(var(--index) * 5.6)) rotateY(-40deg); } .photowave div:has( + * + * + :hover) { filter: contrast(1.15) brightness(1.1) saturate(1.1); transform: translateZ(calc(var(--index) * 2.5)) rotateY(-30deg); } .photowave div:has( + * + * + * + :hover) { filter: contrast(1.1) brightness(1.05) saturate(1.05); transform: translateZ(calc(var(--index) * .6)) rotateY(-15deg); } </style>
Картинка будет на всю страницу. Чтобы изменить размер, в коде поменяйте ширину и высоту - выделила красным и синим цветом.
Жирным в коде выделила место, куда нужно вставить своё изображение.
Далее ⇒