Bordas Arredondadas Internas com CSS
Código CSS – Container Subir .contSubir:before{ content: “”; width: 20px; height: 20px; position: absolute; background-color: transparent; border: none; border-radius: 50%; top: 0; left: 0; box-shadow: -10px -10px 0px #222222 } .contSubir:after{ content: “”; width: 20px; height: 20px; position: absolute; background-color: #222222; border: none; border-radius: 50%; bottom: 0; right: -20px; box-shadow: -10px 10px 0px white } […]
Cursor Neon
Código HTML Código CSS *{ padding: 0; margin: 0; } #cursorNeon{ width: 100%; height: 100vh; } #app { overflow: hidden; } #cursorNeon canvas { display: block; position: fixed; z-index: -1; top: 0; } Código JS <script type=”module”> import { neonCursor } from ‘https://unpkg.com/threejs-toys@0.0.8/build/threejs-toys.module.cdn.min.js’; neonCursor({ el: document.getElementById(‘cursorNeon’), shaderPoints: 16, curvePoints: 80, curveLerp: .8, radius1: 5, radius2: […]
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; }
