bbb2f41591
- Created `openspec-ff-change` skill for fast-forward artifact creation. - Introduced `openspec-new-change` skill for structured change creation. - Developed `openspec-onboard` skill for guided onboarding through OpenSpec workflow. - Added `openspec-sync-specs` skill for syncing delta specs to main specs. - Implemented `openspec-verify-change` skill for verifying implementation against change artifacts. - Updated `.gitignore` to exclude OpenSpec generated files. - Added `skills-lock.json` to manage skill dependencies.
2.3 KiB
2.3 KiB
name, description
| name | description |
|---|---|
| visual-effects | Box shadow, opacity, mix-blend, and filter effects |
Effects
Utilities for box shadow, opacity, mix-blend, and filters.
Usage
Box shadow
<div class="shadow-sm">Small</div>
<div class="shadow">Default</div>
<div class="shadow-md">Medium</div>
<div class="shadow-lg">Large</div>
<div class="shadow-xl">Extra large</div>
<div class="shadow-2xl">2xl</div>
<div class="shadow-none">None</div>
<div class="shadow-lg shadow-blue-500/50">Colored shadow</div>
<div class="shadow-[0_0_15px_rgba(0,0,0,0.2)]">Arbitrary</div>
Opacity
<div class="opacity-0">Invisible</div>
<div class="opacity-50">50%</div>
<div class="opacity-100">Full</div>
Mix blend mode
<div class="mix-blend-normal">Normal</div>
<div class="mix-blend-multiply">Multiply</div>
<div class="mix-blend-screen">Screen</div>
<div class="mix-blend-overlay">Overlay</div>
Backdrop blur and filter
<div class="backdrop-blur-sm">Blur backdrop</div>
<div class="backdrop-blur-md">Medium blur</div>
<div class="backdrop-blur-none">No blur</div>
<div class="backdrop-opacity-50">Backdrop opacity</div>
Filter (blur, brightness, contrast, etc.)
<div class="blur-sm">Blur</div>
<div class="brightness-90">Brightness</div>
<div class="contrast-125">Contrast</div>
<div class="grayscale">Grayscale</div>
<div class="invert">Invert</div>
<div class="sepia">Sepia</div>
<div class="blur-none">No filter</div>
Object fit (images/video)
<img class="object-contain" /> <!-- Fit within bounds -->
<img class="object-cover" /> <!-- Cover area, may crop -->
<img class="object-fill" /> <!-- Stretch -->
<img class="object-none" /> <!-- No resize -->
<img class="object-scale-down" /> <!-- contain or none, whichever is smaller -->
<img class="object-top object-cover" /> <!-- Position -->
Key Points
- Shadow:
shadow-{size},shadow-{color}/opacity,shadow-none - Opacity:
opacity-{0-100} - Mix blend:
mix-blend-{mode} - Backdrop:
backdrop-blur-*,backdrop-opacity-* - Filter:
blur-*,brightness-*,contrast-*,grayscale,invert,sepia