Home
Imagem-Perfil-Circulo com Efeitos

Formulário Elementor PRO

JavaScript para colar no Widget HTML (Formato Telefone) <script type="text/javascript"> /* Máscaras ER */ function mascara(o,f){ v_obj=o v_fun=f setTimeout("execmascara()",1) } function execmascara(){ v_obj.value=v_fun(v_obj.value) } function mtel(v){ v=v.replace(/D/g,""); //Remove tudo o que não é dígito v=v.replace(/^(d{2})(d)/g,"($1) $2"); //Coloca parênteses em volta dos dois primeiros dígitos v=v.replace(/(d)(d{4})$/,"$1-$2"); //Coloca hífen entre o quarto e o quinto dígitos return […]

Botão Pulsar

Pulsar Padrão selector .elementor-button { animation: pulse 2s ease infinite } selector .elementor-button:hover { animation-play-state: paused } Efeito Neon selector .elementor-button { animation: pulsarneon 3s ease; animation-iteration-count: infinite } @keyframes pulsarneon { 0% { box-shadow: 0px 0px 0px 0px #D201FF, 0px 0px 0px 0px #0C18FF; } 50% { box-shadow: -6px -6px 40px 0px #D201FF, 6px […]

Efeito Degradê Animado

Imagem post Degradê Animado

CSS Hover com Sombras 3D .elementor-button:hover { background: linear-gradient(123deg, #ff0000, #ff00bd, #005fff, #72ff00); background-size: 800% 800%; -webkit-animation: AnimationName 30s ease infinite; -moz-animation: AnimationName 30s ease infinite; animation: AnimationName 30s ease infinite; box-shadow: 0px 11px 20px 0px rgba(0, 0, 0, 0.25), 0px -7px 7px 0px rgba(0, 0, 0, 0.25) inset, 0px 4px 6px 0px rgba(255, 255, […]

Efeito de Ruído

Imagem post Ruído Animado

Código HTML Código CSS .ruido { display: block; width: 100vw; height: 100vh; opacity: .17; background-image: url(‘LINK AQUI’); overflow: hidden; position: fixed; top: 0; left: 0; pointer-events: none; z-index: 1; mix-blend-mode: plus-lighter; //opcional

Efeito Parallax

Imagem post Efeito Parallax

Código CSS Flutuação selector { animation: flutuacao 12s; animation-iteration-count: infinite; } @keyframes flutuacao { 0% { transform: translatey(20px) rotate(5deg); } 50% { transform: translatey(-10px) rotate(-5deg); } 100% { transform: translatey(20px) rotate(5deg); } }

Slider de Imagens Automático

Imagem post Slider Atuomático de Imagens

Código CSS selector{ –direction: 1; –speed: 50; –image-aspect-ratio: false; –pause-on-hover: true; –pause-on-hover-mobile: false; } selector{ visibility: hidden; overflow: hidden; } selector.showing{ visibility: visible; } selector .e-con, selector .e-container{ -webkit-animation: sliding calc(var(–est-speed,10) * 1s * 50 / var(–speed)) linear infinite; -moz-animation: sliding calc(var(–est-speed,10) * 1s * 50 / var(–speed)) linear infinite; -o-animation: sliding calc(var(–est-speed,10) * 1s […]

Card Mágico

Imagem post Card Mágico

Código CSS Testimonial Carousel selector{ –first-color: #5ddcff; –second-color: #3c67e3; –third-color: #4e00c2; } @property –rotate { syntax: “”; initial-value: 132deg; inherits: false; } selector::before, selector::after{ opacity: 0; content: “”; transition: all 0.5s ease-in-out; } selector:hover::before, selector:hover::after{ position: absolute; z-index: -1; background-image: linear-gradient( var(–rotate) , var(–first-color), var(–second-color) 43%, var(–third-color)); animation: spin 2.5s linear infinite; opacity: 1; } […]

Barra de Rolagem em Textos

Imagem post Barra de Rolagem em Textos

Código CSS Testimonial Carousel selector .swiper-slide[data-swiper-slide-index=”2″] .elementor-testimonial__text{ padding-right:20px; height: 200px; overflow-y: scroll; overflow-x: hidden; } .swiper-slide[data-swiper-slide-index=”2″] .elementor-testimonial__text::-webkit-scrollbar { width: 6px; } .swiper-slide[data-swiper-slide-index=”2″] .elementor-testimonial__text::-webkit-scrollbar-thumb{ background: #616161; border-radius: 40px; } .swiper-slide[data-swiper-slide-index=”2″] .elementor-testimonial__text::-webkit-scrollbar-track { background:#dedede; border-radius: 40px; } CSS Texto Normal selector { height: 128px; overflow-y: scroll; overflow-x: hidden; padding-right: 20px; } .scrollbar::-webkit-scrollbar { width: 6px; } .scrollbar::-webkit-scrollbar-thumb{ […]

Botão Voltar ao Topo

Imagem post Botão Voltar ao Topo

Código JS <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> //You can replace offset value from here var offset = 300 $(window).on(‘load scroll’, function(){ if( $(window).scrollTop() > offset ){ $(‘body’).addClass(‘show’) }else{ $(‘body’).removeClass(‘show’) } }) </script> CSS Botão selector{ opacity: 0; transition: all 0.3s ease-in-out; } body.show selector{ opacity: 1; }

Borda Animada

Imagem post Borda Animada

CSS Borda Animada selector{ –animated-color-1: #c705fd; –animated-color-2: #2716ff; –border-width: 140px; } selector{ height: var(–c-height); } selector:before{ content: “”; position: absolute; inset: -140px var(–border-width); background: linear-gradient(315deg, var(–animated-color-1), var(–animated-color-2)); width: auto; height: auto; transition: all .3s; animation: animate 4s linear infinite; } @keyframes animate{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } }

Recupere seu investimento

Depois de passar pelas aulas principais, você estará pronto para conquistar clientes e começar a oferecer serviços. Acredite ou não, com apenas um site, que pode ser criado em cerca de 2 a 3 dias, você já terá a chance de recuperar o investimento feito no curso!