Последние сообщения для Блоггер
На сайте виджеты последних сообщений играют важную роль для удобства пользователей. Они позволяют посетителям быстро ознакомиться с самой актуальной информацией, не заходя на каждую страницу отдельно. Виджеты последних сообщений делают сайт более интерактивным, увеличивая его привлекательность и повышая уровень вовлеченности пользователей. Благодаря этим виджетам пользователи могут легко следить за обновлениями, новостями, акциями и другой интересной информацией, что делает опыт использования сайта более комфортным и информативным.
Код:
Код:
Далее ⇒
Другие виджеты можно найти на сайте:
Предлагаю вашему вниманию три интересных гаджета "Последних сообщений" для Блоггер. Коды виджета "гуляют" в сети, и видела их на нескольких блогах, поэтому написать авторство не могу.
Устанавливаются гаджеты просто, что очень удобно для новичков. Заходим в Дизайн, нажимаем Добавить гаджет (в боковой панели), выбираем 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&alt=json-in-script&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
В этом гаджете прописана дата поста и количество комментариев. Есть ссылка Далее — отметила оранжевым, меняйте на свой текст. Поменять в коде можно количество постов — отметила красным. Картинку, если в сообщении не будет своего изображения, отметила в коде синим. Изменяем цвет гаджета — отметила в коде зелёным (несколько раз) .
При желании можно поменять шрифт, цвет шрифта и его размер - ищите в коде тег 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>
Картинка будет на всю страницу. Чтобы изменить размер, в коде поменяйте ширину и высоту - выделила красным и синим цветом.Жирным в коде выделила место, куда нужно вставить своё изображение.
Красивый текст
Нашла интересное оформление текста на сайте 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>
Изменения
Красным в коде выделила цвет рамки — меняете на свой цвет.
Синим выделила место, куда добавляется адрес картинок. Вставляет урл своих изображений.
Слайдер довольно объёмный, почти на всю страницу статьи. Маленькие фото в слайдере будут растягиваться и терять качество изображения, поэтому добавляйте картинки среднего размера. А чтобы они не были большими по весу и не нагружали страницу, поработайте над уменьшением их веса. На блоге есть об этом статья.
