Home
Imagem-Perfil-Circulo com Efeitos

Máscara em Telefones

Imagem post Máscara formulários no campo telefone com JavaScript

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>

Menu Fixo estilo Aplicativo

Imagem post Menu Fixo Inferior 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

Imagem post Efeito de reflexo no botão com HTML e CSS

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

Imagem post 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#

Imagem post Efeitos em Botões 1 - Icone Sai do Botão

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

Imagem post 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

Imagem post Redirecionar páginas com JavaScript

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

Imagem post Efeito cometa no botão com html e css

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

Imagem post Efeito Scroll troca de Cor

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

Imagem post Slider Customizado 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; }

TESTE POPUP

Recupere seu investimento

Se você for um completo iniciante, levará em média 1 a 2 meses para assistir todas as aulas básicas. Após isso, já estará apto a conseguir seus primeiros clientes. Acredite ou não, com apenas um site, que pode ser criado em 2 ou 3 dias, você já terá a chance de recuperar seu investimento com a comunidade!