mycsslab/src/utilities/effects.css

MyCSSLab Quantum v3.0 - Revolutionary CSS framework with AI-powered intelligence, holographic UI, neural networks, and quantum effects

/**
 * FluxCSS Effect Utilities
 * Opacity, filters, blend modes, and visual effects
 */

/* Opacity */
.my-opacity-0 { opacity: 0; }
.my-opacity-5 { opacity: 0.05; }
.my-opacity-10 { opacity: 0.1; }
.my-opacity-20 { opacity: 0.2; }
.my-opacity-25 { opacity: 0.25; }
.my-opacity-30 { opacity: 0.3; }
.my-opacity-40 { opacity: 0.4; }
.my-opacity-50 { opacity: 0.5; }
.my-opacity-60 { opacity: 0.6; }
.my-opacity-70 { opacity: 0.7; }
.my-opacity-75 { opacity: 0.75; }
.my-opacity-80 { opacity: 0.8; }
.my-opacity-90 { opacity: 0.9; }
.my-opacity-95 { opacity: 0.95; }
.my-opacity-100 { opacity: 1; }

/* Blur */
.my-blur-none { filter: blur(0); }
.my-blur-sm { filter: blur(4px); }
.my-blur { filter: blur(8px); }
.my-blur-md { filter: blur(12px); }
.my-blur-lg { filter: blur(16px); }
.my-blur-xl { filter: blur(24px); }
.my-blur-2xl { filter: blur(40px); }
.my-blur-3xl { filter: blur(64px); }

/* Brightness */
.my-brightness-0 { filter: brightness(0); }
.my-brightness-50 { filter: brightness(0.5); }
.my-brightness-75 { filter: brightness(0.75); }
.my-brightness-90 { filter: brightness(0.9); }
.my-brightness-95 { filter: brightness(0.95); }
.my-brightness-100 { filter: brightness(1); }
.my-brightness-105 { filter: brightness(1.05); }
.my-brightness-110 { filter: brightness(1.1); }
.my-brightness-125 { filter: brightness(1.25); }
.my-brightness-150 { filter: brightness(1.5); }
.my-brightness-200 { filter: brightness(2); }

/* Contrast */
.my-contrast-0 { filter: contrast(0); }
.my-contrast-50 { filter: contrast(0.5); }
.my-contrast-75 { filter: contrast(0.75); }
.my-contrast-100 { filter: contrast(1); }
.my-contrast-125 { filter: contrast(1.25); }
.my-contrast-150 { filter: contrast(1.5); }
.my-contrast-200 { filter: contrast(2); }

/* Saturation */
.my-saturate-0 { filter: saturate(0); }
.my-saturate-50 { filter: saturate(0.5); }
.my-saturate-100 { filter: saturate(1); }
.my-saturate-150 { filter: saturate(1.5); }
.my-saturate-200 { filter: saturate(2); }

/* Sepia */
.my-sepia-0 { filter: sepia(0); }
.my-sepia { filter: sepia(1); }

/* Grayscale */
.my-grayscale-0 { filter: grayscale(0); }
.my-grayscale { filter: grayscale(1); }

/* Invert */
.my-invert-0 { filter: invert(0); }
.my-invert { filter: invert(1); }

/* Hue Rotate */
.my-hue-rotate-0 { filter: hue-rotate(0deg); }
.my-hue-rotate-15 { filter: hue-rotate(15deg); }
.my-hue-rotate-30 { filter: hue-rotate(30deg); }
.my-hue-rotate-60 { filter: hue-rotate(60deg); }
.my-hue-rotate-90 { filter: hue-rotate(90deg); }
.my-hue-rotate-180 { filter: hue-rotate(180deg); }

/* Drop Shadow */
.my-drop-shadow-sm { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05)); }
.my-drop-shadow { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)); }
.my-drop-shadow-md { filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)); }
.my-drop-shadow-lg { filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)); }
.my-drop-shadow-xl { filter: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)); }
.my-drop-shadow-2xl { filter: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15)); }
.my-drop-shadow-none { filter: drop-shadow(0 0 #0000); }

/* Backdrop Blur */
.my-backdrop-blur-none { backdrop-filter: blur(0); }
.my-backdrop-blur-sm { backdrop-filter: blur(4px); }
.my-backdrop-blur { backdrop-filter: blur(8px); }
.my-backdrop-blur-md { backdrop-filter: blur(12px); }
.my-backdrop-blur-lg { backdrop-filter: blur(16px); }
.my-backdrop-blur-xl { backdrop-filter: blur(24px); }
.my-backdrop-blur-2xl { backdrop-filter: blur(40px); }
.my-backdrop-blur-3xl { backdrop-filter: blur(64px); }

/* Backdrop Brightness */
.my-backdrop-brightness-0 { backdrop-filter: brightness(0); }
.my-backdrop-brightness-50 { backdrop-filter: brightness(0.5); }
.my-backdrop-brightness-75 { backdrop-filter: brightness(0.75); }
.my-backdrop-brightness-90 { backdrop-filter: brightness(0.9); }
.my-backdrop-brightness-95 { backdrop-filter: brightness(0.95); }
.my-backdrop-brightness-100 { backdrop-filter: brightness(1); }
.my-backdrop-brightness-105 { backdrop-filter: brightness(1.05); }
.my-backdrop-brightness-110 { backdrop-filter: brightness(1.1); }
.my-backdrop-brightness-125 { backdrop-filter: brightness(1.25); }
.my-backdrop-brightness-150 { backdrop-filter: brightness(1.5); }
.my-backdrop-brightness-200 { backdrop-filter: brightness(2); }

/* Backdrop Contrast */
.my-backdrop-contrast-0 { backdrop-filter: contrast(0); }
.my-backdrop-contrast-50 { backdrop-filter: contrast(0.5); }
.my-backdrop-contrast-75 { backdrop-filter: contrast(0.75); }
.my-backdrop-contrast-100 { backdrop-filter: contrast(1); }
.my-backdrop-contrast-125 { backdrop-filter: contrast(1.25); }
.my-backdrop-contrast-150 { backdrop-filter: contrast(1.5); }
.my-backdrop-contrast-200 { backdrop-filter: contrast(2); }

/* Backdrop Saturation */
.my-backdrop-saturate-0 { backdrop-filter: saturate(0); }
.my-backdrop-saturate-50 { backdrop-filter: saturate(0.5); }
.my-backdrop-saturate-100 { backdrop-filter: saturate(1); }
.my-backdrop-saturate-150 { backdrop-filter: saturate(1.5); }
.my-backdrop-saturate-200 { backdrop-filter: saturate(2); }

/* Backdrop Sepia */
.my-backdrop-sepia-0 { backdrop-filter: sepia(0); }
.my-backdrop-sepia { backdrop-filter: sepia(1); }

/* Backdrop Grayscale */
.my-backdrop-grayscale-0 { backdrop-filter: grayscale(0); }
.my-backdrop-grayscale { backdrop-filter: grayscale(1); }

/* Backdrop Invert */
.my-backdrop-invert-0 { backdrop-filter: invert(0); }
.my-backdrop-invert { backdrop-filter: invert(1); }

/* Backdrop Hue Rotate */
.my-backdrop-hue-rotate-0 { backdrop-filter: hue-rotate(0deg); }
.my-backdrop-hue-rotate-15 { backdrop-filter: hue-rotate(15deg); }
.my-backdrop-hue-rotate-30 { backdrop-filter: hue-rotate(30deg); }
.my-backdrop-hue-rotate-60 { backdrop-filter: hue-rotate(60deg); }
.my-backdrop-hue-rotate-90 { backdrop-filter: hue-rotate(90deg); }
.my-backdrop-hue-rotate-180 { backdrop-filter: hue-rotate(180deg); }

/* Mix Blend Mode */
.my-mix-blend-normal { mix-blend-mode: normal; }
.my-mix-blend-multiply { mix-blend-mode: multiply; }
.my-mix-blend-screen { mix-blend-mode: screen; }
.my-mix-blend-overlay { mix-blend-mode: overlay; }
.my-mix-blend-soft-light { mix-blend-mode: soft-light; }
.my-mix-blend-hard-light { mix-blend-mode: hard-light; }
.my-mix-blend-color-dodge { mix-blend-mode: color-dodge; }
.my-mix-blend-color-burn { mix-blend-mode: color-burn; }
.my-mix-blend-difference { mix-blend-mode: difference; }
.my-mix-blend-exclusion { mix-blend-mode: exclusion; }
.my-mix-blend-hue { mix-blend-mode: hue; }
.my-mix-blend-saturation { mix-blend-mode: saturation; }
.my-mix-blend-color { mix-blend-mode: color; }
.my-mix-blend-luminosity { mix-blend-mode: luminosity; }

/* Background Blend Mode */
.my-bg-blend-normal { background-blend-mode: normal; }
.my-bg-blend-multiply { background-blend-mode: multiply; }
.my-bg-blend-screen { background-blend-mode: screen; }
.my-bg-blend-overlay { background-blend-mode: overlay; }
.my-bg-blend-soft-light { background-blend-mode: soft-light; }
.my-bg-blend-hard-light { background-blend-mode: hard-light; }
.my-bg-blend-color-dodge { background-blend-mode: color-dodge; }
.my-bg-blend-color-burn { background-blend-mode: color-burn; }
.my-bg-blend-difference { background-blend-mode: difference; }
.my-bg-blend-exclusion { background-blend-mode: exclusion; }
.my-bg-blend-hue { background-blend-mode: hue; }
.my-bg-blend-saturation { background-blend-mode: saturation; }
.my-bg-blend-color { background-blend-mode: color; }
.my-bg-blend-luminosity { background-blend-mode: luminosity; }

/* Filter Combinations */
.my-filter-vintage { filter: sepia(1) hue-rotate(30deg) saturate(1.5); }
.my-filter-cool { filter: brightness(1.1) contrast(1.1) saturate(1.2) hue-rotate(200deg); }
.my-filter-warm { filter: brightness(1.1) contrast(1.1) saturate(1.2) hue-rotate(-30deg); }
.my-filter-dramatic { filter: brightness(0.8) contrast(1.5) saturate(1.3); }
.my-filter-soft { filter: brightness(1.2) contrast(0.9) saturate(0.8); }
.my-filter-sharp { filter: brightness(1.1) contrast(1.3) saturate(1.1); }
.my-filter-muted { filter: brightness(0.9) contrast(0.8) saturate(0.7); }
.my-filter-vibrant { filter: brightness(1.2) contrast(1.2) saturate(1.5); }

/* Backdrop Filter Combinations */
.my-backdrop-filter-glass { backdrop-filter: blur(10px) saturate(1.2) brightness(1.1); }
.my-backdrop-filter-frosted { backdrop-filter: blur(8px) brightness(1.1); }
.my-backdrop-filter-tinted { backdrop-filter: blur(6px) saturate(1.3) hue-rotate(200deg); }
.my-backdrop-filter-dark { backdrop-filter: blur(8px) brightness(0.7) contrast(1.2); }
.my-backdrop-filter-light { backdrop-filter: blur(8px) brightness(1.3) contrast(0.9); }

/* Hover Effects */
.my-hover-opacity-75:hover { opacity: 0.75; }
.my-hover-opacity-80:hover { opacity: 0.8; }
.my-hover-opacity-90:hover { opacity: 0.9; }
.my-hover-opacity-100:hover { opacity: 1; }

.my-hover-blur-sm:hover { filter: blur(4px); }
.my-hover-blur:hover { filter: blur(8px); }
.my-hover-blur-md:hover { filter: blur(12px); }

.my-hover-brightness-105:hover { filter: brightness(1.05); }
.my-hover-brightness-110:hover { filter: brightness(1.1); }
.my-hover-brightness-125:hover { filter: brightness(1.25); }

.my-hover-contrast-105:hover { filter: contrast(1.05); }
.my-hover-contrast-110:hover { filter: contrast(1.1); }
.my-hover-contrast-125:hover { filter: contrast(1.25); }

.my-hover-saturate-105:hover { filter: saturate(1.05); }
.my-hover-saturate-110:hover { filter: saturate(1.1); }
.my-hover-saturate-125:hover { filter: saturate(1.25); }

.my-hover-grayscale:hover { filter: grayscale(1); }
.my-hover-sepia:hover { filter: sepia(1); }
.my-hover-invert:hover { filter: invert(1); }

/* Focus Effects */
.my-focus-opacity-75:focus { opacity: 0.75; }
.my-focus-opacity-80:focus { opacity: 0.8; }
.my-focus-opacity-90:focus { opacity: 0.9; }
.my-focus-opacity-100:focus { opacity: 1; }

.my-focus-blur-sm:focus { filter: blur(4px); }
.my-focus-blur:focus { filter: blur(8px); }

.my-focus-brightness-105:focus { filter: brightness(1.05); }
.my-focus-brightness-110:focus { filter: brightness(1.1); }

.my-focus-contrast-105:focus { filter: contrast(1.05); }
.my-focus-contrast-110:focus { filter: contrast(1.1); }

.my-focus-saturate-105:focus { filter: saturate(1.05); }
.my-focus-saturate-110:focus { filter: saturate(1.1); }

/* Active Effects */
.my-active-opacity-75:active { opacity: 0.75; }
.my-active-opacity-80:active { opacity: 0.8; }
.my-active-opacity-90:active { opacity: 0.9; }
.my-active-opacity-100:active { opacity: 1; }

.my-active-blur-sm:active { filter: blur(4px); }
.my-active-blur:active { filter: blur(8px); }

.my-active-brightness-95:active { filter: brightness(0.95); }
.my-active-brightness-90:active { filter: brightness(0.9); }

.my-active-contrast-95:active { filter: contrast(0.95); }
.my-active-contrast-90:active { filter: contrast(0.9); }

.my-active-saturate-95:active { filter: saturate(0.95); }
.my-active-saturate-90:active { filter: saturate(0.9); }

/* Responsive Effects */
@media (max-width: 640px) {
  .my-sm-opacity-0 { opacity: 0; }
  .my-sm-opacity-25 { opacity: 0.25; }
  .my-sm-opacity-50 { opacity: 0.5; }
  .my-sm-opacity-75 { opacity: 0.75; }
  .my-sm-opacity-100 { opacity: 1; }
  
  .my-sm-blur-none { filter: blur(0); }
  .my-sm-blur-sm { filter: blur(4px); }
  .my-sm-blur { filter: blur(8px); }
  .my-sm-blur-md { filter: blur(12px); }
  .my-sm-blur-lg { filter: blur(16px); }
}

@media (max-width: 768px) {
  .my-md-opacity-0 { opacity: 0; }
  .my-md-opacity-25 { opacity: 0.25; }
  .my-md-opacity-50 { opacity: 0.5; }
  .my-md-opacity-75 { opacity: 0.75; }
  .my-md-opacity-100 { opacity: 1; }
  
  .my-md-blur-none { filter: blur(0); }
  .my-md-blur-sm { filter: blur(4px); }
  .my-md-blur { filter: blur(8px); }
  .my-md-blur-md { filter: blur(12px); }
  .my-md-blur-lg { filter: blur(16px); }
}

@media (max-width: 1024px) {
  .my-lg-opacity-0 { opacity: 0; }
  .my-lg-opacity-25 { opacity: 0.25; }
  .my-lg-opacity-50 { opacity: 0.5; }
  .my-lg-opacity-75 { opacity: 0.75; }
  .my-lg-opacity-100 { opacity: 1; }
  
  .my-lg-blur-none { filter: blur(0); }
  .my-lg-blur-sm { filter: blur(4px); }
  .my-lg-blur { filter: blur(8px); }
  .my-lg-blur-md { filter: blur(12px); }
  .my-lg-blur-lg { filter: blur(16px); }
}

@media (max-width: 1280px) {
  .my-xl-opacity-0 { opacity: 0; }
  .my-xl-opacity-25 { opacity: 0.25; }
  .my-xl-opacity-50 { opacity: 0.5; }
  .my-xl-opacity-75 { opacity: 0.75; }
  .my-xl-opacity-100 { opacity: 1; }
  
  .my-xl-blur-none { filter: blur(0); }
  .my-xl-blur-sm { filter: blur(4px); }
  .my-xl-blur { filter: blur(8px); }
  .my-xl-blur-md { filter: blur(12px); }
  .my-xl-blur-lg { filter: blur(16px); }
}