[Filtro] Vidro GLASS
[Filtro] Vidro GLASS Para aplicar esse efeito, basta colocar o código CSS (abaixo) dentro do container que você quer o efeito, para que o efeito seja visível tenha uma imagem de Background. Código CSS Copiar Código selector { backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); }
[Carrossel] Perspectiva Vertical
[Carrossel] Perspectiva Vertical Adicione um Widget de Carrossel de Imagens no Elementor Não precisa definir Classe Aplique esse código CSS no Elemento (Avançado/Custom CSS) Código CSS Copiar Código selector .elementor-image-carousel-wrapper{ transform: perspective(100rem) translate3d(0, 0, -5rem) rotateX(50deg) scale(1, 1) !important; }
[Carrossel] Slide próximo aparecendo metade
[Carrossel] Slide próximo aparecendo metade Adicione um Widget de Carrossel de Imagens no Elementor Não precisa definir Classe Aplique esse código CSS no Elemento (Avançado/Custom CSS) Código CSS Copiar Código selector .swiper{ padding-inline-end: 100px; }
[Carrossel] Navegação Posição Cima
[Carrossel] Navegação Posição Cima Adicione um Widget de Carrossel de Imagens no Elementor Não precisa definir Classe Aplique esse código CSS no Elemento (Avançado/Custom CSS) Deixe nas configurações ativo a navegação de Setas Código CSS Copiar Código selector .elementor-swiper-button-prev{ top: -18% !important; left: calc(50% – 50px); transform: translate-x(-50%); } selector .elementor-swiper-button-next{ top: -18% !important; right: calc(50% – 50px); transform: translate-x(-50%); }
[Carrossel] 1 Destacado
[Carrossel] 1/3 Destaque Adicione um Widget de Carrossel de Imagens no Elementor Não precisa definir Classe Configuração dentro do Widget de Carrossel de Imagens podendo ser alterado. (obs: recomendo um carrossel, recomendo usar 3 no slides a mostrar) Aplique esse código CSS no Elemento (Avançado/Custom CSS) Código CSS Copiar Código .swiper-slide-prev { filter: blur(10px); transform: scale(0.5); transition: 0.5s; } .swiper-slide-active{ filter: blur(3px); transform: scale(0.7); transition: 0.5s; } .swiper-slide-next ~ .swiper-slide{ transform: scale(0.7); transition: 0.5s; } .swiper-slide-next ~ .swiper-slide{ filter: blur(3px); transform: scale(0.7); transition: 0.5s; }}
[Carrossel] Blur Looping
[Carrossel] Blur Looping Adicione um Widget de Carrossel de Imagens no Elementor Não precisa definir Classe Configuração dentro do Widget de Carrossel de Imagens Aplique esse código CSS no Elemento (Avançado/Custom CSS) Código CSS Copiar Código .swiper-wrapper{ transition-timing-function: linear !important; } .swiper-slide{ opacity: 1; animation: opacity 3s infinite; transition: 0.5s; } .swiper-slide[data-swiper-slide-index=”0″]{ animation-delay: 0.3s; } .swiper-slide[data-swiper-slide-index=”1″]{ animation-delay: 0.6s; } .swiper-slide[data-swiper-slide-index=”2″]{ animation-delay: 0.9s; } .swiper-slide[data-swiper-slide-index=”3″]{ animation-delay: 1.2s; } @keyframes opacity{ 0%, 100%{ opacity: 0.4; /*defina a menor opacidade*/ filter: blur(10px); /*defina o blur*/ } 50%{ opacity: 1; filter: blur(0px); } } selector::before { content:””; pointer-events: none; width: 550px; /*defina otamanho do círculo*/ height:550px; /*defina otamanho do círculo*/ border-radius: 50%; position: absolute; top: 0; left: 0; z-index:2; transform: translate(-50%, -50%); background: black; /*defina a cor do círculo*/ animation: circulo 5s infinite alternate ease-out; /*defina o tempo do círculo*/ transition: 0.5s all; filter: blur(100px); /*defina o blur do círculo*/ z-index: 0; } @keyframes circulo{ 0%, 100%{ transform: translatex(50em); } 50%{ transform: translatex(0em); } } selector{ overflow: hidden !important; }
[Carrossel] Fade nas Laterais
[Carrossel] Fade nas Laterais Adicione um Widget de Carrossel de Imagens no Elementor Não precisa definir Classe Configuração dentro do Widget de Carrossel de Imagens Aplique esse código CSS no Elemento (Avançado/Custom CSS) Código CSS Copiar Código selector::before{ content: “”; position: absolute; top: 0; left: 0; width: 500px; /* Largura da máscara esquerda */ height: 100%; background: linear-gradient(to right, #090909 30%, transparent); /* Gradiente de cor escura para simular o blur */ z-index: 2; /* Acima do conteúdo */ /* backdrop-filter: blur(5px); REMOVIDO pois é inconsistente/causa bugs */ /* webkit-backdrop-filter: blur(5px); REMOVIDO */ } selector::after{ content: “”; position: absolute; top: 0; right: 0; width: 500px; /* Largura da máscara direita */ height: 100%; background: linear-gradient(to left, #090909 30%, transparent); /* Gradiente de cor escura para simular o blur */ z-index: 2; /* Acima do conteúdo */ /* backdrop-filter: blur(5px); REMOVIDO */ /* webkit-backdrop-filter: blur(5px); REMOVIDO */ }
[Carrossel] Slide Contínuo
[Carrossel] Slide Contínuo Adicione um Widget de Carrossel de Imagens no Elementor Não precisa definir Classe Configuração dentro do Widget de Carrossel de Imagens Aplique esse código CSS no Elemento (Avançado/Custom CSS) Código CSS Copiar Código selector .swiper-wrapper{ -webkit-transition-timing-function: linear !important; transition-timing-function: linear !important; }
[Carrossel] Paginação V1
[Carrossel] Paginação V1 Adicione um Widget de Carrossel de Imagens no Elementor Não precisa definir Classe Aplique esse código CSS no Elemento (Avançado/Custom CSS) Código CSS Copiar Código selector .swiper-pagination-bullet-active{ width: 30px; /*mude a largura por aqui*/ border-radius: 2px; } selector .swiper-pagination-bullet{ transition: 0.5s; }
[Light/Bg] Linhas Horizontais
[Light/Bg] Linhas Horizontais Coloque um widget HTML Coloque este código HTML dentro do Widget Código HTML Copiar Código Coloque este código CSS dentro do Widget de HTML Código CSS Copiar Código .container { width: 100%; height: 100%; background-image: repeating-linear-gradient( 0deg, rgba(0, 255, 115, 1), /*mude a cor da linha*/ 1px, transparent 10px, /*espessura da linha*/ transparent ); background-size: 100% 40px; /*dstância das linhas nos 30px*/ } selector{ position: fixed; top: 0; left: 0; z-index: 0; width: 100vw; height: 100vh; pointer-events: none; opacity: .4; /*opacidade das linhas*/ /*as 2 linhas abaixo são para fazer um gradient suave*/ mask-image: linear-gradient(to top, transparent, #000000 35%, transparent 100%); -webkit-mask-image: linear-gradient(to top, transparent, #000000 35%, transparent 100%); }