Волнообразный эффект для изображения
Код оформления изображения найден на сайте 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>
Картинка будет на всю страницу. Чтобы изменить размер, в коде поменяйте ширину и высоту - выделила красным и синим цветом.Жирным в коде выделила место, куда нужно вставить своё изображение.
Красивый текст
Нашла интересное оформление текста на сайте https://codepen.io. У автора Oscar-Jite. Данным текстом можно оформить название сайта, заголовки или поздравить читателей с каким-либо праздником.
Текст получается анимационный. Буквы как бы расплываются в воде. Посмотреть вживую эффект можно в редакторе. Скопируйте код и вставьте в первое окошко. Нажмите на кнопку "Показать результат".
Поменять в коде можно:
Далее ⇒
Красивое оформление названия сайта и заголовков играет очень важную роль. Они служат визитной карточкой сайта, привлекая внимание посетителей и создавая первое впечатление. Красиво оформленные названия и заголовки помогают сделать сайт более привлекательным и запоминающимся.
Кроме того, хорошо подобранные цвета, шрифты и стиль оформления помогают улучшить удобство использования сайта. Правильно оформленные заголовки сразу же привлекают внимание и помогают быстро ориентироваться на сайте. Это особенно важно в условиях информационного перенасыщения, когда пользователи проводят всего несколько секунд на каждой странице.
Красивое оформление названия сайта и заголовков также способствует улучшению SEO-оптимизации. Хорошо подобранные заголовки помогают улучшить понимание контента сайта поисковыми системами, что в свою очередь позитивно влияет на его ранжирование в поисковой выдаче.
Таким образом, красивое оформление названия сайта и заголовков не только придает сайту профессиональный вид, но и влияет на его эффективность и успех в целом. Однако следует помнить, что красота должна сочетаться с функциональностью, иначе она может оказаться бессмысленной.
Про красивый текст можно прочитать на сайте:
Выглядит текст так:
Не менее интересно будет выглядеть надпись на чёрном фоне:
Код
<div class="text">
<h2>HELLO!</h2>
</div>
<svg>
<filter id="spot">
<feTurbulence id="turbulence" type="turbulence" numOctaves="1" result="NOISE" seed="3"></feTurbulence>
<feDisplacementMap in="SourceGraphic" in2="NOISE" scale="25" />
<animate xlink:href="#turbulence" attributeName="baseFrequency" dur="10s"
values="0.1 0.1;0.12 0.12" repeatCount="indefinite"></animate>
</filter>
</svg>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.text {
position: relative;
width: 100%;
text-align: center;
filter: url(#spot);
}
.text h2 {
position: relative;
color: #495518;
font-weight: 600;
font-family: 'Arial', sans-serif;
font-size: 10rem;
text-shadow: 0 0 20px #fff, 0 0 40px #fff, 0 0 60px #fff;
}
svg{
width: 0;
height: 0;
}
</style>
Текст — выделила красным.
Цвет текста — синим.
Размер текста — зелёным цветом.
Шрифт — голубым.
Толщина букв — оранжевый оттенок.
Оформление кнопок
Красивые кнопки на сайте выполняют ряд важных функций. Во-первых, они делают интерфейс более привлекательным и современным, что помогает удерживать внимание посетителей и повышает вероятность того, что они выполнят нужное действие. Кроме того, красивые кнопки улучшают пользовательский опыт, делая навигацию более интуитивной и удобной. Также они могут быть использованы для привлечения внимания к важным элементам сайта или для подчеркивания ключевых действий, которые хочет сделать посетитель. В целом, красивые кнопки помогают улучшить конверсию и повысить уровень вовлеченности пользователей на сайте.
Кнопка 1
<div class="grid">
<div class="button-container">
<button class="stretch-up">Название</button>
</div></div>
<style>
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-gap: 2rem;
}
.button-container {
width: 170px;
height: 60px;
margin-inline: auto;
}
button {
width: 100%;
height: 100%;
background: linear-gradient(#b4ce24, #788532, #546022);
border: 1px solid #495518;
border-radius: 10px;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
font-size: 16pt;
text-align: center;
color: #fff;
}
button:hover {
cursor: pointer;
}
.button-container:hover .stretch-up {
animation: stretchUp 0.6s forwards;
}
@keyframes stretchUp {
70% {
transform: translateY(-20px) scale(1, 1.6);
}
73% {
transform: translateY(-40px) scale(1, 1);
}
76% {
transform: translateY(-5px) scale(1, 1);
}
85% {
transform: translateY(-10px) scale(1, 1);
}
90% {
transform: translateY(0) scale(1, 1);
}
}</style>
Кнопка 2
<div class="grid">
<div class="button-container">
<button class="stretch-out">Название</button>
</div></div>
<style>
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-gap: 2rem;
}
.button-container {
width: 170px;
height: 60px;
margin-inline: auto;
}
button {
width: 100%;
height: 100%;
background: linear-gradient(#b4ce24, #788532, #546022);
border: 1px solid #495518;
border-radius: 10px;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
font-size: 16pt;
text-align: center;
color: #fff;}
button:hover {
cursor: pointer;
}
.button-container:hover .stretch-out {
animation: stretchOut 0.6s forwards;
}
@keyframes stretchOut {
45% {
transform: scale(1.5, 0.7);
border-radius: 15px;
}
50% {
transform: scale(0.5, 1.3);
}
55% {
transform: scale(1.3, 0.8);
}
60% {
transform: scale(1, 1.2);
}
65% {
transform: scale(1.1, 0.9);
}
70% {
transform: scale(1, 1);
}
75% {
transform: scale(1.1, 1);
}
100% {
transform: scale(1, 1);
}
}
</style>
Читайте на блоге:
Кнопка 3
<div class="grid">
<div class="button-container">
<button class="squish-in">Название </button>
</div></div>
<style>
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-gap: 2rem;
}
.button-container {
width: 170px;
height: 60px;
margin-inline: auto;
}
button {
width: 100%;
height: 100%;
background: linear-gradient(#b4ce24, #788532, #546022);
border: 1px solid #495518;
border-radius: 10px;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
font-size: 16pt;
text-align: center;
color: #fff;}
button:hover {
cursor: pointer;
}
.button-container:hover .squish-in {
animation: squish-in 0.5s forwards;
}
@keyframes squish-in {
60% {
transform: scale(0.5, 1.6);
border-radius: 45% 45% 45% 45% / 40% 40% 40% 40%;
}
70% {
transform: scale(1.5, 0.7);
border-radius: 15px;
}
80% {
transform: scale(0.9, 1.3);
border-radius: 25% 25% 25% 25% / 20% 20% 20% 20%;
}
85% {
transform: scale(1.2, 0.9);
border-radius: 15px;
}
90% {
transform: scale(1, 1.1);
border-radius: 15px;
}
}
</style>
Кнопка 4
<div class="grid">
<div class="button-container">
<button class="squish-down">Название</button>
</div>
</div>
<style>
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-gap: 2rem;
}
.button-container {
width: 170px;
height: 60px;
margin-inline: auto;
}
button {
width: 100%;
height: 100%;
background: linear-gradient(#b4ce24, #788532, #546022);
border: 1px solid #495518;
border-radius: 10px;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
font-size: 16pt;
text-align: center;
color: #fff;}
button:hover {
cursor: pointer;
}.button-container:hover .squish-down {
animation: squish-down 0.5s forwards;
}
@keyframes squish-down {
70% {
transform: scale(1, 0.3) translateY(70px);
}
75% {
transform: scale(1, 1.5) translateY(-15px);
}
80%,
90% {
transform: scale(1, 1.2) translateY(-10px);
}
85% {
transform: scale(1, 0.9) translateY(0);
}
}
</style>
Текст на кнопке — выделила в коде жирным, меняйте на свой.
Градиент кнопок — выделила красным.
Окантовку — выделила синим.
Скругление углов — меняйте значение на большее или меньшее. В коде отметила зелёным цветом.
Размер шрифта — оранжевым.
Цвет шрифта — голубым
Интересный эффект для оформления картинок
Код оформления найден на https://codepen.io. Автор Chris Smith. 
Далее ⇒
Слайдер на CSS, без скриптов. Оформить можно 3 картинки. Добавляется код в статью или на страницу Блогспота, в редактор, в режиме HTML.
Выглядит слайдер так: в спокойном состоянии видны две картинки, а при наведении курсора они открываются по типу штор и исчезают. Видна только большая центральная картинка, которая слегка увеличивается(приближается). Эффект подходит для оформления разнообразных фото загадок, когда за шторками прячут отгадку. Например: "сколько лет этому человеку" или "где прячется предмет". А так же для показа картинок "до и после". Например: "как выглядит девушка до стрижки и после".
Код
<center><div id="grid">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
<style>* {
padding: 0;
margin: 0;
box-sizing: border-box;
transition: 0.75s ease;
}
#grid {
width: calc(100% - 20vmin);
aspect-ratio: 16 / 7;
background: linen;
display: grid;
grid-template-columns: 1fr 0fr 1fr;
place-items: center;
outline: 2px solid #804a00;
border-radius: 5vmin;
box-shadow: 0 1rem 2rem -1rem rgba(68 50 4 / 1);
overflow: hidden;
}
.left,
.right,
.middle {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
transform-origin: center;
}
.left {
background-image: url("ваше фото");
border-right: 1px solid #804a00;
}
.middle {
font-size: 0rem;
background-image: url("ваше фото");
}
.right {
background-image: url("ваше фото");
border-left: 1px solid #804a00;
}
#grid:hover {
grid-template-columns: 0fr 1fr 0fr;
}
</style> </center>
Изменения
Красным в коде выделила цвет рамки — меняете на свой цвет.
Синим выделила место, куда добавляется адрес картинок. Вставляет урл своих изображений.
Слайдер довольно объёмный, почти на всю страницу статьи. Маленькие фото в слайдере будут растягиваться и терять качество изображения, поэтому добавляйте картинки среднего размера. А чтобы они не были большими по весу и не нагружали страницу, поработайте над уменьшением их веса. На блоге есть об этом статья.
Трудности с установкой картинок на Блоггере
Сегодня статья будет небольшая и связана она с проблемами на Блогспот. Последнее время на Блоггере через раз или совсем не срабатывает функция вставки фото в статью в меню редактора. Возможно проблема проявляется не у всех. С чем это связано — не понятно. Удаляла историю браузера, меняла браузер — проблема остаётся. Видимо это не из-за браузера.
Так же не срабатывает установка через окно добавления картинки с рабочего стола.
Так же выскакивает ошибка.
Если вариант не срабатывает, то сохраните написанное, нажав на облачко в редакторе, и обновите страницу.
Далее ⇒
Решение
Если у вас такие же проблемы при установке изображений в статью, совет один. Перебрасывайте картинки вручную прямо с рабочего стола в поле редактора.
Установка срабатывает не каждый раз, но по крайней мере изображения устанавливаются.
P. S.
Если у вас есть другое решение проблемы или вы знаете почему это происходит — напишите в комментариях или в контакты.
