Menu Fixo estilo Aplicativo
CSS .containerMenu{ background-color: #EBEAEB; } .iconePreenchido{ opacity: 0; transition: all .5s; padding: 0px 2px; border-radius: 50%; margin: 16px 18px; } .containerIcone.ativo .iconePreenchido{ background-color: #EBEAEB; opacity: 1; padding: 12px 16px; margin: 0px 2px; transition: all .3s .1s; } .containerIcone{ transition: all .3s .2s; position: relative; } .containerIcone.ativo{ transform: translateY(-32px); transition: all .3s } .tituloIcone{ opacity: 0; […]
Botão com Efeito de Reflexo
HTML CLIQUE AQUI CLIQUE AQUI CSS *{ margin: 0; } .containerPai{ width: 100%; height: 100vh; background-color: rgb(29, 29, 31); display: flex; justify-content: center; align-items: center; flex-direction: column; } .botoes{ display: flex; flex-direction: column; } button{ padding: 14px 32px; border-radius: 12px; letter-spacing: 1px; border: none; transition: all .3s; z-index: 2; cursor: pointer; border-radius: 12px; color: rgba(255, […]
Preloader HTML CSS JS
Preloader 1 (Utilizado no CodeSnippets) HTML function adicionar_preloader_html() { echo '<div id="preloader"> <img src="https://tutoriais.gustavocampelo.com.br/wp-content/uploads/2024/06/Logotipo.png" alt="Carregando…"> </div>'; } add_action('wp_body_open', 'adicionar_preloader_html'); JS function adicionar_preloader_js() { ?> <script> document.addEventListener("DOMContentLoaded", function() { document.body.classList.add("loading"); }); window.addEventListener("load", function() { document.body.classList.remove("loading"); document.body.classList.add("loaded"); document.getElementById('preloader').style.display = 'none'; }); </script> <?php } add_action('wp_footer', 'adicionar_preloader_js'); CSS #preloader { position: fixed; top: 0; left: 0; right: 0; […]
Efeitos em Botões 1#
Código CSS selector a.elementor-button{ width: 180px; height: 44px; display: flex; justify-content: center; align-items: center; overflow: hidden; transition: all .5s; } selector span.elementor-button-icon.elementor-align-icon-right{ transition: all .6s; transform: translateX( 0px); } selector:hover span.elementor-button-icon.elementor-align-icon-right{ transform: translateX( 50px); } .elementor-button-text{ transition: all .6s } selector:hover .elementor-button-text{ transform: translateX( 12px); } /* EFEITOS DE SOMBRA*/ selector:hover a.elementor-button{ box-shadow: -4px -4px […]
Efeito Pulsar com HTML e CSS
Código HTML Código CSS *{ margin: 0px; padding: 0px; } #containerPai{ background-color: #d6d6d6; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; } .pulsar{ width: 100px; height: 100px; background-color: blueviolet; border-radius: 50%; position: relative; & span{ width: 100%; height: 100%; background-color: inherit; position: absolute; border-radius: 50%; animation: pulsar 4s infinite; animation-delay: calc(1s * var(–span)); […]
Redirecionar Página com JS
Código HTML com o Js <script> setTimeout(redirecionar, 5000); function redirecionar(){ window.location.href = "https://gustavocampelo.com.br/webhub/" } </script>
Botão com Efeito Cometas
Código HTML <div id="botao"> <button>CLIQUE AQUI</button> <div id="cometas"> <span class="cometa" style="–cometaPosicao: 20"></span> <span class="cometa" style="–cometaPosicao: 40"></span> <span class="cometa" style="–cometaPosicao: 58"></span> <span class="cometa" style="–cometaPosicao: 78"></span> <span class="cometa" style="–cometaPosicao: 84"></span> <span class="cometa" style="–cometaPosicao: 14"></span> <span class="cometa" style="–cometaPosicao: 32"></span> <span class="cometa" style="–cometaPosicao: 28"></span> <span class="cometa" style="–cometaPosicao: 64"></span> </div> </div> Código CSS #botao{ width: 220px; height: 60px; position: relative; […]
Troca de Cor com Scroll
Código JS utilizado <script> document.addEventListener("scroll", function(){ const containerCor = document.querySelector(".containerCor"); const scrollAtual = window.scrollY; const scrollCor = 300; if(scrollAtual >= scrollCor){ containerCor.style.backgroundColor = "blue" }else{ containerCor.style.backgroundColor = "white" } }) </script>
Slider personalizável tela cheia
Código CSS para Carousel Widget .swiper-pagination-bullet{ background-color: transparent !important; border: 1px solid black; } .swiper-pagination-bullet-active{ background-color: black !important } .swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal{ margin-top: -60px; }
Customizando Navegação de Sliders
Código CSS para cada Container Card selector .elementor-swiper-button{ z-index: 10 !important; } .eicon-chevron-right{ background-color: white; padding: 8px 10px; border-radius: 0px 12px 12px 0px; } .eicon-chevron-left{ background-color: white; padding: 8px 10px; border-radius: 12px 0px 0px 12px } selector .elementor-swiper-button.elementor-swiper-button-next{ top: 97%; left: 100%; } selector .elementor-swiper-button.elementor-swiper-button-prev{ top: 97%; left: calc(100% – 40px); } selector .swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal{ text-align: […]
