Краткое видео о том как Стилизовать элемент список

Урок о том как сделать динамический слайдер используя webflow cms и swiper slider

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

<style>
.swiper-container {
width: 100%;
padding-top: 0px;
padding-bottom: 0px;
}
</style>

————————————————
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<!-- Initialize Swiper -->

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<script>
var swiper = new Swiper(".swiper-container", {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
scrollbar: {
el: ".swiper-scrollbar",
hide: true,
},
//autoplay: {
// delay: 2500,//
// disableOnInteraction: false,//
// },//
//direction: "vertical",//
spaceBetween: 20,
slidesPerView: 1,
centeredSlides: false,
freeMode: false,
loop: false,
mousewheel: true,
breakpoints: {
640: {
slidesPerView: 2,
spaceBetween: 20,
},
768: {
slidesPerView: 3,
spaceBetween: 20,
},
1024: {
slidesPerView: 3,
spaceBetween: 20,
},
},
});
</script>

<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