<style>
.gooey{
background-image: linear-gradient(120deg, #34e0f0 0%, #c20000 100%);
border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
width: 150px; height: 144px;
animation: morph 3s linear infinite;
transform-style: preserve-3d;
outline: 1px solid transparent;
will-change: border-radius;
}
.gooey:before,
.gooey:after{
content: '';
width: 100%;
height: 100%;
display: block;
position: absolute;
left: 0; top: 0;
border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
box-shadow: 5px 5px 89px rgba(0, 102, 255, 0.21);
will-change: border-radius, transform, opacity;
animation-delay: 200ms;
background-image: linear-gradient(120deg, rgba(0,67,255,.55) 0%, rgba(0,103,255,.89) 100%);
}

.gooey:before{
animation: morph 3s linear infinite;
opacity: .21;
animation-duration: 1.5s;
}

.gooey:after{
animation: morph 3s linear infinite;
animation-delay: 400ms;
opacity: .89;
line-height: 120px;
text-indent: -21px;
}

@keyframes morph{
0%,100%{
border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
transform: translate3d(0,0,0) rotateZ(0.01deg);
}
34%{
border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%;
transform: translate3d(0,5px,0) rotateZ(0.01deg);
}
50%{
opacity: .89;
transform: translate3d(0,0,0) rotateZ(0.01deg);
}
67%{
border-radius: 100% 60% 60% 100% / 100% 100% 60% 60% ;
transform: translate3d(0,-3px,0) rotateZ(0.01deg);
}
}

@keyframes fadeIn{
100%{
transform: scale(1.03);
opacity: 0;
}
</style>

Анимация цикличное вращение
https://youtu.be/hCNJWCI96d0

<style>
.marquee-track {
position: absolute;
white-space: nowrap;
will-change: transform;
animation: marquee-horizontal 5s linear infinite;
/* manipulate the speed of the marquee by changing "40s" line above*/
}

@keyframes marquee-horizontal {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}

@media only screen and (min-width: 992px) {
.marquee-track:hover {
animation-play-state: pausd;
}
}
</style>

Шаблон проекта для тех кому нужна маска с вводом телефона в международном формате

https://webflow.com/made-in-webflow/website/phonenumber-input?ref=made-in-webflow-search&searchValue=mask%20phone

Привет друзья!
Оставлю здесь может еще кому то пригодится.

<style>
select {
appearance: none;
-moz-appearance: none; /* Firefox */
-webkit-appearance: none; /* Chrome/Safari */
background: url('arrow.png') no-repeat right center; /* собственная стрелка */
}
</style>

Этот код убирает стандартную стрелочку из поля формы #SELECT

Так жу буду стараться создавать вот такие хештеги для удобного поиска по каналу

Расширение для сортировки айтемов в cms коллециях webflow

https://chrome.google.com/webstore/detail/webflow-collection-reorde/dgfmdefiehjbcnocbmjepgeichkociih/related

Расширение для генерации ALt-text для наших изображений. Часто требуется такое действие.

https://chrome.google.com/webstore/detail/webflow-extension-by-peek/mfjbmoaliicmnliefefaagcddnjkjamc

Интересное расширение которое копирует код элемента. Например тебе нужно скопировать код SVG что бы подключить к нему анимацию изменения цвета.

https://chrome.google.com/webstore/detail/potato-extension-for-webf/fghlhikadbbichmbfeijofnmcpgeggch/related

Короче !!! Пока ловите и добавляйте себе / потом расскажу как работает Прикольная штука вообще!! Запишу прям видосик!

https://chrome.google.com/webstore/detail/videsigns-extension-for-w/epegfofibengnfhehlblkjpaplobhlmf?utm_source=ext_sidebar&hl=ru

Вот и готов ролик про привлекшее мое внимание расширение

https://youtu.be/KxhyVUlFEuA

Это видео посвещено вопросу из нашего чата о том как сделать элемент background видео, нестандартной формы.

https://youtu.be/zHmasG0maVc

Записал большой гайд про swiper. Рассмотрели все функции и собрали универсальную сборку для общего использования.

https://youtu.be/RtD4NZYj2H0

Так как видео получилось довольно долгим но надеюсь без воды, то я расставил таймкоды что удобной навигации!

миниатюрное обновление. кнопочка выбора режима (дизайнер или редатор)

<style>
.text-class {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; /* number of lines to show */
line-clamp: 3;
-webkit-box-orient: vertical;
}
</style>