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: […]
Card Hover Flex
Código CSS para cada Container Card selector { flex: 1 !important; transition: all .5s } selector:hover { flex: 5 !important; } selector:hover h2{ font-size: 22px !important } selector h2{ font-size: 16px !important; transition: all .5s } selector:hover h3{ font-size: 14px !important } selector h3{ font-size: 12px !important; transition: all .5s }
Menu Slider Tela Cheia
Código HTML Ícone <input type="checkbox" id="nav-control" class="lytbox-nav_control"> <label for="nav-control" class="lytbox-button"> <div class="hamburguer"> <span></span> <span></span> <span></span> </div> </label> <nav class="lytbox-navigation"> </nav> Caixas de ícone /* icone do menu e fechar */ .lytbox-button { –hamburger-color: white; –close-x-color: white; display: block; height: 18px; cursor: pointer; position: relative; z-index: 101; } /* secao em 100% de largura */ .elementor-2164 […]
Tooltip Elementor
Código HTML <span class="tooltip-container"> <img src="https://tutoriais.gustavocampelo.com.br/wp-content/uploads/2024/04/question-mark.png" alt="icone tooltip"> <span class="tooltip">Olá, isso é um tooltip!</span> </span> Código CSS selector img { filter: drop-shadow(8px 12px 12px rgba(0, 6, 58, 0.43)); } .tooltip-container { cursor: pointer; position: relative; display: inline-block; width: 60px; vertical-align: middle; } .tooltip { opacity: 0; z-index: 99; color: #FFF; width: 190px; display: block; font-size: […]
Landing Page Figma
Códigos Header selector.elementor-sticky–effects{ background-color: rgba(255, 255, 255, 0.08); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); } Ícones Neon Blur selector{ filter: blur(200px); } Caixas de ícone selector{ background-color: rgba(255, 255, 255, 0.08); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border-radius: 36px; } Contador .elementor-counter-title { text-align: left !important } Carrossel Depoimentos .elementor-testimonial__icon svg { margin: -20px 0px; } span.swiper-pagination-bullet { width: […]
Carrossel Contínuo
Códigos CSS carrossel selector .swiper-wrapper { transition-timing-function: linear !important; -webkit-transition-timing-function: linear !important; } selector:after { content: ""; width: 100%; height: 100%; background: linear-gradient(to right,#171717, transparent, #171717 ); z-index: 100; position: absolute; top: 0; left: 0; }
Borda Degradê
Códigos CSS Para um botão .elementor-button { background-color: #1B1B1B !important; border-radius: 6px } .elementor-button-wrapper { background: linear-gradient(96deg, #C41EDF 0.01%, #4D00EF 100.7%); padding: 2px; border-radius: 6px } Códigos CSS em uma caixa de imagem selector .elementor-widget-container { background: linear-gradient(115deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.00) 100%); border-radius: 6px; } .elementor-image-box-wrapper { background-color: #2b2b2b; […]
