divienginesupport’s gists

divienginesupport / apple-liquid-glass-fancy.js

Created August 7, 2025 07:16

Apple Liquid Glass CSS JS

	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
	<script src="https://cdn.jsdelivr.net/gh/naughtyduk/liquidGL/scripts/liquidGL.js"></script>

	<script>
	/*
	* =================================================================================
	* PART 1: Initialize the Glass Effect

divienginesupport / apple-liquid-glass-fancy.css

Created August 7, 2025 07:16

Apple Liquid Glass CSS

	/*
	* ===================================================================
	* Main Glass Container Styles
	* This block controls the fixed element that holds the glass effect.
	* ===================================================================
	*/

	/* Rule for the parent container that is fixed on the page. */
	.fixed-glass-container {

divienginesupport / liquid_glass_easy_svg.html

Last active August 7, 2025 07:14

Apple Liquid Glass SVG

	<svg style="display: none">
	<!--
	This SVG defines a custom filter for a liquid glass distortion effect.
	It should be placed somewhere in your HTML (preferably near the top, such as in the <head> or before closing </body>).
	-->
	<filter id="de-glass-distortion" x="0%" y="0%" width="100%" height="100%" filterUnits="objectBoundingBox">

	<!--
	1) Turbulence: Generates a noise texture for the distortion
	- `type="fractalNoise"` creates a smoother, cloudy noise

divienginesupport / liquid_glass_easy.css

Created August 6, 2025 11:49

Poor Mans Liquid Glass

	/*
	1) Base wrapper
	- Creates a positioned container that clips overflow.
	- All visual effects will be applied within this boundary.
	*/
	.de-liquidGlass-wrapper {
	position: relative;
	overflow: hidden;
	}

divienginesupport / scroll-tabs.js

Created July 10, 2025 12:14

scroll-tabs.js

	<script>
	jQuery(document).ready(function($) {
	// --- UTILITY: Throttle function to limit execution frequency ---
	// Prevents the scroll handler from firing too often, improving performance
	function throttle(func, limit) {
	let inThrottle;
	return function() {
	const args = arguments;
	const context = this;
	if (!inThrottle) {

divienginesupport / scroll-tabs.css

Created July 10, 2025 12:13

scroll-tabs.css

	/* === Sticky Tab Scroll Section Styles === */

	/* Main wrapper for the scroll-based tab system */
	.scroll-tabs {
	position: relative; /* Establishes a reference point for absolute or sticky positioning within */
	}

	/* Makes the row inside .scroll-tabs sticky so it stays fixed while scrolling */
	.scroll-tabs .et_pb_row {
	position: -webkit-sticky; /* For Safari support */

divienginesupport / de-custom-loop-template.css

Created July 31, 2023 13:39

Divi custom coded Loop Layout Template - CSS

	.grid-col,
	.grid-col > div,
	.grid-col > div > article {
	height:100%;
	margin-bottom: 0;;
	}
	.card {
	width:100%; /* Ensure the card is 100% width of the column */
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; /* Add a shadow to make it stand out */
	border-radius:10px; /* Subtle rounding on the corners */

divienginesupport / de-custom-loop-template.php

Created July 31, 2023 13:38

Divi custom coded Loop Layout Template - PHP

	<?php

	if ( ! defined( 'ABSPATH' ) ) exit;

	// get the post ID
	$post_id = get_the_ID();

	?>
	<article id="<?php echo $post_id; ?>" <?php post_class( 'et_pb_post clearfix grid-item'); ?>>
	<div class="card">

divienginesupport / change-woocommerce-mobile-column-count.css

Created May 9, 2023 12:50

	/**
	* Adjust the value 2 and 2fr according to the column count you need
	**/

	@media (max-width: 767px) {
	.default-style ul.products {
	grid-template-columns: repeat(2,minmax(10px,2fr))!important;
	}
	}

divienginesupport / de-menu_CTA_button.css

Created April 19, 2023 09:45

Divi Snippet - Turn a menu link into a CTA button

	/* Menu CTA (Call to Action) button style, just make sure you add the class to the menu link */

	/* Target elements with class 'de-menu-cta' */
	.de-menu-cta {
	/* Set the background color of the CTA button */
	background-color: #0fe5a8; /* Change button background color here */
	/* Set the border radius of the CTA button (rounded corners) */
	border-radius: 50px; /* Set this to 0px if you want a square CTA button */
	-webkit-border-radius: 50px; /* For WebKit browsers (e.g., Safari) */
	-moz-border-radius: 50px; /* For Mozilla browsers (e.g., Firefox) */