Learn Google Sheets

  Video Tutorial Javascript Snippet for 3D Image Gallery <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> var $ = jQuery $(document).ready(function(){ var className = '3dGallery' $('.' + className).each(function(){ var span = $(this).find('.elementor-widget-image'), len = span.length span.each(function(i){ $(this).css('transform', 'rotateY(' + i*360/len + 'deg) translateZ(calc(' + ((len + 1) * 31 + len*1) + 'px))') }) $(this).parent().addClass('3dGalleryParent') }) }) </script> CSS Snippet for 3D Image Gallery selector .elementor-widget-wrap{ width: 200px; height:300px; transform-style: preserve-3d; } selector .elementor-widget-image{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-origin: center; transform-style: preserve-3d; -webkit-box-reflect: bel...

  Video Tutorial CSS Code snippet for Neon Light Glow selector{ --color: #00E5FC; } selector a{ text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em var(--color); box-shadow: inset 0 0 0.5em 0 var(--color), 0 0 0.5em 0 var(--color); transition: box-shadow 2s !important; position: relative; } CSS  Code snippet for Hover Effect selector a::after{ content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; box-shadow: 0 0 2em 0.5em var(--color); opacity: 0; transition: opacity 100ms linear; } selector a:hover::after{ opacity: 0.9; } CSS  Code snippet for Button Reflection selector a::before { pointer-events: none; content: ""; position: absolute; background: var(--color); top: 110%; left: 0; width: 95%; height: 100%; transform: perspective(1em) rotateX(40deg) scale(1, 0.35); filter: blur(2em); opacity: 0.7; } selector a:hover::before { opacity: 0.9; }

Video Tutorial CSS Code snippet selector{ --distance: 25px; } selector{ transition: 0.7s; } selector:hover{ transform: rotate(5deg) skew(-5deg); } selector .elementor-widget-image{ padding-left: 0 !important; padding-right: 0 !important; transition: 0.5s; } selector:hover .elementor-widget-image:nth-child(1){ transform: translate(calc(-1*var(--distance)), calc(-1*var(--distance))); } selector .elementor-widget-image:nth-child(2){ opacity: 0.7; z-index: -1; } selector:hover .elementor-widget-image:nth-child(2){ transform: translate(0, 0); } selector .elementor-widget-image:nth-child(3){ opacity: 0.5; z-index: -2; } selector:hover .elementor-widget-image:nth-child(3){ transform: translate(var(--distance), var(--distance)); }  

  Video Tutorial Text Smoke Animation Code snippet <style> .smoke .elementor-widget-container span{ cursor: default; position: relative; display: inline-block; } .smoke .elementor-widget-container span.active{ animation: smoke 1s linear; } @keyframes smoke{ 50%{ opacity: 1; } 100%{ opacity: 0; filter: blur(20px); transform: translateX(300px) translateY(-300px) rotate(360deg) scale(4); } } .smoke .elementor-widget-container span.back{ opacity: 0; filter: blur(20px); animation: back 1s linear 0.5s; } @keyframes back{ 100%{ opacity: 1; filter: blur(0); } } </style> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> (function($){ $(document).ready(function(){ var heading = $('.smoke .elementor-widget-container').children() heading.each(function(){ $(this).html($(this).text().replace(/\S/g, '<span>$...

  Video Tutorial Code snippet for Custom Mouse Cursor <link rel="stylesheet" href="https://unpkg.com/kursor/dist/kursor.css"> <script src="https://unpkg.com/kursor"></script> <script> new kursor({ type: 1, color: '#000000', removeDefaultCursor: false, }) </script>

  Video Tutorial CSS Snippet for Auto Background Color Changing  selector{ --color-1: #F16232; --color-2: #17F197; --color-3: #FF3B6C; --color-4: #28A2FC; --color-5: #92003B; --changing-time: 7.5s; } selector{ animation: background-color infinite var(--changing-time); } @keyframes background-color{ 0%{ background: var(--color-1); } 20%{ background: var(--color-2); } 40%{ background: var(--color-3); } 60%{ background: var(--color-4); } 80%{ background: var(--color-5); } 100%{ background: var(--color-1); } }

  Video Tutorial Custom Gradirnt ScrollBar CSS Snippet ::-webkit-scrollbar{ width: 10px; background: #000; } ::-webkit-scrollbar-thumb{ background: -webkit-linear-gradient(transparent,#48b1bf); background: linear-gradient(transparent,#48b1bf); border-radius: 20px; } Hover CSS Code Snippet ::-webkit-scrollbar-thumb:hover{ background: -webkit-linear-gradient(transparent, #30ff00); background: linear-gradient(transparent, #30ff00); }

  Video Tutorial Javascript Code Snippet <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> var $ = jQuery $(document).ready(function(){ $('.elementor-section[link], .elementor-column[link] > .elementor-widget-wrap').on('click', function(){ var $this = $(this).hasClass('elementor-widget-wrap') ? $(this).parent() : $(this), link = $this.attr('link'), newtab = $this.attr('newtab'), openIn = typeof newtab !== 'undefined' && newtab !== false ? '_blank' : '_self' window.open(link, openIn) }) }) </script> <style> .elementor-section[link], .elementor-column[link] > .elementor-widget-wrap { cursor: pointer; } </style>

  Video Tutorial CSS Code Snippet selector .hover{ position: absolute; } selector .elementor-top-column > .elementor-widget-wrap{ overflow: hidden; } selector .hover{ pointer-events: none; } selector .hover, selector .elementor-widget-divider{ transition: all 0.5s ease-in-out !important; } selector .elementor-widget-wrap:hover .hover{ transform: rotate(-45deg); } selector .elementor-widget-wrap:hover .elementor-widget-divider{ transform: scaleX(2) translateX(20px); transform-origin: left; } selector .elementor-widget-wrap:hover .elementor-widget-heading + .elementor-widget-divider{ transform: scaleX(2) translateX(-20px); transform-origin: right; }

  Video Tutorial CSS Code Snippet :root { --width: 55%; --height: 65%; --bottom: 25px; --origin: 8%; --opacity: 0.4; } selector{ position: relative; z-index: 9; } selector::before{ content: ''; height: var(--height); position: absolute !important; bottom: var(--bottom); right: var(--origin); width: var(--width); background: #000; -webkit-transform-origin: left; transform-origin: left; -webkit-transform: skewY(7.5deg); transform: skewY(7.5deg); -webkit-filter: blur(15px); filter: blur(15px); opacity: var(--opacity); z-index: -9 !important; } selector::after{ content: ''; height: var(--height); position: absolute !important; bottom: var(--bottom); left: var(--origin); width: var(--width); background: #000; -webkit-transform-origin: right; transform-origin: right; -webkit-transform: skewY(-7.5deg); transform: skew...

  Video Tutorial CSS code snippet selector{ --text-hover-color: #000; } selector .elementor-button-wrapper{ position: relative; transition: 0.5s; } selector .elementor-button-wrapper a{ background: #fff; -webkit-mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.png"); mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.png"); -webkit-mask-size: 2300% 100%; mask-size: 2300% 100%; -webkit-mask-position: 100% 0; mask-position: 100% 0; color: var(--text-hover-color); } selector.anim .elementor-button-wrapper a{ animation: anim2 0.7s steps(22) forwards; } selector.anim .elementor-button-wrapper a:hover { animation: anim1 0.7s steps(22) forwards; } selector .elementor-button-wrapper .before{ position: absolute; } @keyframes anim1 { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { ...

  Video Tutorial CSS code snippet selector{ --drop-height: 1650px; } selector{ overflow: hidden !important; } selector .elementor-container{ z-index: 1; } selector .raindrop{ position: absolute; height: 100%; top: 0; } selector .raindrop span{ height: var(--drop-height); border-radius: 4.5px; animation: raining 5s linear infinite; display: block; position: relative; } @keyframes raining{ 0%{ top: calc(-1 * var(--drop-height)); } 100%{ top: calc( 100% + var(--drop-height) ); } } JavaScript code snippet <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script> <script> var desktopAmount = 350, tabletAmount = 150, mobileAmount = 100, minSpeed = 3, maxSpeed = 7, minWidth = 2, maxWidth = 4, minOpacity = 0.3, maxOpacity = 0.7, colors = [ '#00FFFF', '#00FF00', '#FF0000', '#F57C00', ], $ = jQu...

  Video Tutorial Open Book Effect CSS Snippet .cover{ --open-time: 1s; } .cover{ transform: perspective(2000px); transition: all var(--open-time); position: relative; } .cover .book-cover{ transition: all var(--open-time); transform-origin: left; } .cover:hover .book-cover{ transform: perspective(2000px) rotateY(-135deg); } .cover>.elementor-widget-wrap{ box-shadow: inset 300px 0px 50px rgba(0,0,0,0.5); transition: all var(--open-time) !important; } .cover:hover>.elementor-widget-wrap{ box-shadow: inset 20px 0px 50px rgba(0,0,0,0.5); } .cover:hover{ transform: perspective(2000px) translateX(40%); z-index: 10 !important; } .book-opened{ position: absolute; left: 0; top: 0; } @media (max-width: 767px) { .cover:hover .book-cover{ transform: unset; } .cover>.elementor-widget-wrap{ box-shadow: none; } .cover:hover>.elementor-widget-wrap{ box-shadow: none; } .cover...