Slider Colorado
Código CSS /* LATAS */ .lataSlider{ transform: translateY(220%); transition: all 0s; } .lataSlider.ativo{ position: static; transition: all .6s .3s ease-out; transform: translateY(0%); } .lataSlider.lataSubiu{ transition: all .6s ease-in; transform: translateY(-220%); } /* CONTAINER ESQUERDA */ .containerEsquerda{ transition: all .6s; opacity: 0; z-index: -1; } .containerEsquerda.ativo{ position: static; transform: translateX(0%); transition: all .6s; opacity: 1; } […]
Efeito Hover em Cards
Código CSS .card{ transition: all .3s } .containerCards:hover .card{ opacity: .5; filter: blur(6px) saturate(0); scale: .95; transform: translatey(12px); } .containerCards .card:hover{ opacity: 1; transform: translatey(-20px); filter: blur(0px); scale: 1.1 }
Barra branca lateral
Código CSS html, body{ overflow-x: hidden; }
Slider Interativo Responsivo
CSS Container Pai (as-slider) selector{ background: #fff; –background-speed: 0.5s; } selector .elementor-background-slideshow{ display: none; } selector .as-slider-background, selector .as-slider-background img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: all 1s ease-in-out; } selector .as-slider-background img{ object-fit: cover; opacity: 0; transform: scale(1.1); } selector .as-slider-background img.prev, selector .as-slider-background img.currentBackward, selector .as-slider-background img.currentForward{ opacity: […]
Menu Lateral Interativo
Código JS para colar no Widget HTML <script> const controle = document.querySelector("#controle"); const menuLateral = document.getElementById("menuLateral"); const menuMobile = document.querySelector(".menuMobile"); const secoes = document.querySelectorAll(".secao"); const itensLista = document.querySelectorAll(".listaNav a"); console.log(itensLista) controle.onclick = () => { menuLateral.classList.toggle("ativo"); }; if (window.innerWidth < 767) { menuLateral.classList.remove("ativo"); document.addEventListener("click", (event)=>{ let widthMenu = menuLateral.contains(event.target); let widthBotaoMenu = menuMobile.contains(event.target); if(!widthMenu && […]
Botão Líquido
Cole isso no Widget HTML | leia as informações abaixo Insira o link desejado do botão entre as áspas na parte a href=”COLOQUE SEU LINK AQUI”. Se quiser que o link abra na mesma página, remova o target=”_blank”. <div class="containerBotoes"> <a href=" COLOQUE SEU LINK AQUI " target= "_blank"> <button class="botaoSuperior">APROVEITAR DESCONTO</button> <button class="botaoInferior">APROVEITAR DESCONTO</button> […]
Faixa Animada com CSS
CSS selector .elementor-widget-container{ display: flex; color: rgba(255,255,255,.82); width: max-content; background-color: rgba(255,255,255,.2); transform: translateX(-50%); } selector h2{ animation: faixaAnimada 4s infinite linear; padding-left: 10px; font-size: 24px; } @keyframes faixaAnimada{ to{ transform: translateX(100%); } } /* SE NAO QUISER QUE PARE QUANDO PASSAR O MOUSE, EXCLUA DAQUI PARA BAIXO */ selector .elementor-widget-container:hover h2{ animation-play-state: paused }
Cursor personalizado com CSS
HTML body{ cursor: url(‘link do cursor aqui’), auto; } a{ cursor: url(“link do cursor click aqui”), auto; }
Botão Ícone Animado
HTML ENVIAR CSS .botaoAnimado{ padding: 14px 24px; display: flex; gap: 8px; background: linear-gradient(130deg, blue, rgb(136, 0, 255),rgb(195, 10, 176)); background-size: 600%; border: none; border-radius: 12px; box-shadow: 0px 0px 40px rgba(206, 150, 255, 0.179), 4px 4px 6px rgba(255, 255, 255, 0.293) inset, -4px -4px 6px rgba(255, 255, 255, 0.293) inset; color: rgba(255, 255, 255, 0.831); font-size: […]
Máscara em Telefones
JavaScript <script> function mask(o,f){ v_obj=o v_fun=f setTimeout("execmask()",1) } function execmask(){ v_obj.value=v_fun(v_obj.value) } function masktel(v){ v=v.replace(/D/g,""); v=v.replace(/^(d{2})(d)/g,"($1) $2"); v=v.replace(/(d)(d{4})$/,"$1-$2"); return v; } function idcss( el ){ return document.getElementById( el ); } window.onload = function(){ idcss('form-field-telefone').setAttribute('maxlength', 14); idcss('form-field-telefone').onkeypress = function(){ mask( this, masktel ); } } </script>
