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; […]
Menu Scroll
Códigos CSS Cores Scroll .menuscroll.elementor-sticky–effects { background-color: green !important } .menuscroll{ transition: background-color 2s ease; } .menuscroll.elementor-sticky–effects .imgscroll img { content: url("") } .menuscroll.elementor-sticky–effects .linksscroll a{ color: red !important } .menuscroll.elementor-sticky–effects .linksscroll a:hover{ color: black !important } Códigos CSS Blur .menuscroll.elementor-sticky–effects { backdrop-filter: blur(30px); } .menuscroll { transition: backdrop-filter 0.5s ease; }
Haloween
Código JS <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> var offset = 00 $(window).on(‘load scroll’, function(){ if( $(window).scrollTop() > offset ){ $(‘body’).addClass(‘show’) }else{ $(‘body’).removeClass(‘show’) } }) </script> Código CSS Abóbora selector { opacity: 1; transition all: 0.3s ease; animation: flutuacao 8s; animation-iteration-count: infinite; } @keyframes flutuacao { 0% { transform: translate(0px,0px) rotate(5deg); } 25% { transform: translate(20px,50px) rotate(-10deg); } […]
Card Hover com Informações
Código para ser inserido no body – end <script> ;(function(){ let chck_if_gsap_loaded = setInterval(function(){ const eleBuilder = document.querySelector(‘body’).classList.contains("elementor-editor-active"); if(window.gsap && window.ScrollTrigger && !eleBuilder){ gsap.registerPlugin(ScrollTrigger); hover_card() clearInterval(chck_if_gsap_loaded); } }, 500); function hover_card() { const cardContainers = document.querySelectorAll(".card-container"); cardContainers.forEach((cardContainer) => { let tl = gsap.timeline({ paused: true, timeScale: 4 }); tl.to(cardContainer.querySelector(".card-overlay"), { backgroundColor: "rgba(0, 0, 0, 0.8)", […]
Efeito Card 3D Hover
CSS Containert Card .card3d { height: 360px; width: 300px; transform-style: preserve-3d; transition: all 0.8s ease; } selector:hover{ transform: rotatey(180deg) } CSS Containert Frente .cardfrente{ height: 100%; backface-visibility: hidden; } CSS Containert Frente .cardback{ height: 100%; backface-visibility: hidden; transform: rotatey(180deg); }
