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.
91 lines
2.3 KiB
Markdown
91 lines
2.3 KiB
Markdown
---
|
|
name: visual-effects
|
|
description: Box shadow, opacity, mix-blend, and filter effects
|
|
---
|
|
|
|
# Effects
|
|
|
|
Utilities for box shadow, opacity, mix-blend, and filters.
|
|
|
|
## Usage
|
|
|
|
### Box shadow
|
|
|
|
```html
|
|
<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
|
|
|
|
```html
|
|
<div class="opacity-0">Invisible</div>
|
|
<div class="opacity-50">50%</div>
|
|
<div class="opacity-100">Full</div>
|
|
```
|
|
|
|
### Mix blend mode
|
|
|
|
```html
|
|
<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
|
|
|
|
```html
|
|
<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.)
|
|
|
|
```html
|
|
<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)
|
|
|
|
```html
|
|
<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`
|
|
|
|
<!--
|
|
Source references:
|
|
- https://tailwindcss.com/docs/box-shadow
|
|
- https://tailwindcss.com/docs/opacity
|
|
- https://tailwindcss.com/docs/backdrop-blur
|
|
-->
|