Learn Google Sheets

  Video Tutorial Text Reflection CSS  Snippet selector { -webkit-box-reflect: below 1px linear- gradient ( transparent, transparent, rgba ( 0 , 0 , 0 ,. 5 ) ) ; } Rotation Effect CSS  Snippet selector{ -webkit-transform-origin: center; transform-origin: center; -webkit-transform: perspective(800px) rotateY(-25deg); transform: perspective(800px) rotateY(-25deg); -webkit-transition: 0.8s; transition: 0.8s; } selector:hover{ -webkit-transform: perspective(800px) rotateY(0deg); transform: perspective(800px) rotateY(0deg); -webkit-transition: 0.8s; transition: 0.8s; }

  Video Tutorial Text Highlight Snippet <span style="background:yellow; color: unset"> Your Text Here </span>

  Video Tutorial Stroke CSS Snippet :root{ --myText : 'Text Stroke Slide'; --textColor: #00FFBD; --textStroke: 1px; --anDuration: 8s; } selector{ -webkit-text-stroke: var(--textStroke) var(--textColor); display: table; width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; text-align: center; margin: 0 auto } selector .elementor-heading-title::before{ content: var(--myText); color: var(--textColor); position: absolute; top: 0; width: 0%; height: 100%; text-align: left; overflow: hidden; white-space: nowrap; border-right: var(--textStroke) solid var(--textColor); -webkit-animation:animateX var(--anDuration) linear infinite; animation:animateX var(--anDuration) linear infinite; } @-webkit-keyframes animateX{ 0%,10%,100%{ width:0%; } 70%, 90%{ width: 100%; } }

  Video Tutorial Heading Stroke CSS selector{ -webkit-text-stroke: 2px #03a9f4; } Wave Animation CSS selector{ -webkit-animation: water 4s ease-in-out infinite; animation: water 4s ease-in-out infinite; } @-webkit-keyframes water{ 0%, 100%{ -webkit-clip-path: polygon(0 80%, 9% 61%, 22% 51%, 41% 53%, 55% 63%, 65% 72%, 76% 78%, 90% 81%, 100% 80%, 100% 100%, 0% 100%); clip-path: polygon(0 80%, 9% 61%, 22% 51%, 41% 53%, 55% 63%, 65% 72%, 76% 78%, 90% 81%, 100% 80%, 100% 100%, 0% 100%); } 50%{ -webkit-clip-path: polygon(0 80%, 15% 81%, 31% 75%, 41% 68%, 51% 59%, 64% 53%, 79% 53%, 92% 64%, 100% 80%, 100% 100%, 0% 100%); clip-path: polygon(0 80%, 15% 81%, 31% 75%, 41% 68%, 51% 59%, 64% 53%, 79% 53%, 92% 64%, 100% 80%, 100% 100%, 0% 100%); } } @keyframes water{ 0%, 100%{ -webkit-clip-path: polygon(0 80%, 9% 61%, 22% 51%, 41% 53%, 55% 63%, 65% 72%, 76% 78%, 90% 81%, 100% 80%, 100% 100%, 0% 100%)...

  Video Tutorial Image Box Widget Code snippet selector{ transform: translateY(-50%); } Image Hover Effect Code Snippet selector{ --width: 2px; --color: #00F1FF; --angle: -7deg; } selector .elementor-widget-divider .elementor-widget-container{ overflow: hidden; transition: all 0.3s ease-in-out; } selector .elementor-widget-divider .elementor-divider, selector .elementor-widget-divider .elementor-widget-container{ position: relative; } selector .elementor-widget-divider .elementor-widget-container:before, selector .elementor-widget-divider .elementor-widget-container:after, selector .elementor-widget-divider .elementor-divider:before, selector .elementor-widget-divider .elementor-divider:after{ content: ""; position: absolute; background: var(--color); } selector .elementor-widget-divider .elementor-widget-container:before, selector .elementor-widget-divider .elementor-widget-container:after{ height: var(--width); width: 100%; ...

  Video Tutorial JavaScript code snippet < script src= "https://code.jquery.com/jquery-3.6.0.min.js" >< /script > < script > var $ = jQuery $ ( document ) . ready ( function (){ $ ( '.shadow .elementor-heading-title' ) . each ( function (){ $ ( this ) . html ( $ ( this ) . text () . replace ( /\S/g, '<span>$&</span>' )) }) }) < /script > Text Reflection CSS selector { -webkit-box-reflect: below 10px linear- gradient ( to bottom, rgba ( 0 , 0 , 0 , 0 . 0 ) 0 %, rgba ( 0 , 0 , 0 , 0.1 ) 100 % ) ; }

  Video Tutorial Image Scroll CSS selector { height: 400px; overflow-y: scroll !important; overflow-x: hidden !important; } ScrollBar Color CSS selector::-webkit-scrollbar { width: 4px; background: #777777; } selector::-webkit-scrollbar-thumb { background: green; }

  Video Tutorial JavaScript Code Snippet <style> model-viewer{ width:100%; height: 100vh; } @media (max-width: 1024px) { model-viewer{ height:600px; } } @media (max-width: 767px) { model-viewer{ height:350px; } } </style> <script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.1.3/webcomponents-loader.js"></script> <model-viewer src="ADD_GLTF_FILE_URL_HERE" shadow-intensity="1" disable-zoom camera-controls auto-rotate > </model-viewer> <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script> <script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>

Video Tutorial Code Snippet selector svg{ animation: rotate 20s linear infinite; } @-webkit-keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

  Video Tutorial CSS Code Snippet selector{ --speed: 1s; animation: none !important; } selector > *{ clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); transition: all var(--speed) ease-in-out; } selector.animated > *{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }

  Video Tutorial JavaScript Code Snippet selector{ overflow: hidden !important; } selector .elementor-background-overlay{ -webkit-transition: all 0.7s !important; transition: all 0.7s !important; -webkit-transform-origin: left; transform-origin: left; } selector:hover .elementor-background-overlay{ -webkit-transform: scale(1.75); transform: scale(1.75); } selector .elementor-column{ opacity: 0; -webkit-transition: all 0.80s !important; transition: all 0.80s !important; } selector:hover .elementor-column{ opacity: 1; }

  Video Tutorial JavaScript Code Snippet document.addEventListener('DOMContentLoaded', function() { jQuery(function($){ $('.showsection').each(function(i){ $(this).click(function(){ $('.hidesection').eq(i).show(); $('.showsection'); }); }); }); }); </script> <style> .showsection{ cursor: pointer; } .hidesection{ display: none; } </style> }

  Video Tutorial Sound Effect JavaScript Snippet <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() {   //Audio 1 Starts   var audio1 = new Audio('')   $(".click-sound").mousedown(function() {     audio1.load();     audio1.play();   });   //Audio 1 Ends    }); </script>

  Video Tutorial CSS to Add in Section selector:before{ content: ""; position: absolute; width: 100%; height: 100%; background-color: #ffffff; mix-blend-mode: difference; pointer-events: none; }

  Video Tutorial CSS to Add in Widget selector{ position: absolute; width: 100%; height: 100%; mix-blend-mode: lighten; filter: brightness(1.2); }

  Video Tutorial Do you want to add background music in Elementor? This Elementor tutorial will show you how to add background music in Elementor. Learn how to add background music in Elementor | WordPress Website 2022 JAVA SCRIPT Code Snippet <iframe style="display: none;" src=""></iframe> <audio id="myaudio" autoplay="autoplay" loop="loop" controls="controls"> <source src="**paste url here**" type="audio/mp3" /> </audio> <script>   var audio = document.getElementById("myaudio");   audio.volume = 0.2; </script>

  Video Tutorial CSS to Add in Section selector{ position: absolute; width: 100%; height: 100%; mix-blend-mode: lighten; filter: brightness(1.2); } Button Attribute data-showme|IMAGE-ID-NAME Image Show/Hide JavaScript Snippet <script src= "https://code.jquery.com/jquery-3.6.0.min.js" ></script> <script> var $ = jQuery $ ( document ) . ready ( function ( ) { $ ( '[data-showme]' ) . on ( 'click' , function ( ) { var showme = $ ( this ) . attr ( 'data-showme' ) $ ( '.img-all' ) . hide ( ) $ ( '#' + showme ) . show ( ) } ) } ) </script>