P11 Blazor UI Library – Bootstrap 5.3 Components

P11 CSS Effects

P11HoverEffect and P11ShadowEffect let you apply modern interactive animations and depth without writing custom CSS. Just wrap any content (buttons, cards, images, badges, etc.) inside the respective component (P11HoverEffect or P11ShadowEffect), and select one of the predefined Variant options.

Available effect variants for P11HoverEffect include Scale, ShadowLift, ScaleAndShadow, BorderGlow, QuickTilt, BrightnessPulse, and BorderFlash. P11ShadowEffect variants include Subtle, Medium, and Deep. Each can be applied dynamically by simply wrapping your markup in the corresponding component.

How to Use

P11HoverEffect Example:

<P11HoverEffect HoverEffectVariant="HoverEffectVariant.Scale">
    <div class="your-content">Any content here</div>
</P11HoverEffect>

P11ShadowEffect Example:

<P11ShadowEffect ShadowEffectVariant="ShadowEffectVariant.Medium">
    <div class="your-content">Any content here</div>
</P11ShadowEffect>

That's it ✔️ Just wrap your markup and choose the desired effect and variant.

For detailed API parameters and live examples of the **Hover Effect**, jump to the dedicated page: Go to Hover Effects Documentation

For detailed API parameters and live examples of the **Shadow Effect**, jump to the dedicated page: Go to Shadow Effects Documentation

Real-World Usage - Just Wrap & Go! (Hover Effects)

Buttons with Hover Effects

Interactive Cards

Product Card

Lifts on hover

Item Card

Lifts on hover

Feature Card

Scale & shadow combo

Premium Card

Glowing border effect

Custom Card

Border bottom gradient

Tilt Card

3D tilt effect

Tilt left

3D tilt effect

FRONT

BACK

Rotate

Rotate left

Pulse

Pulse effect

Shake

Shake effect

Swing

Swing effect

Skew

Skew right effect

Skew

Skew left effect

FRONT

SLIDE-IN FROM BOTTOM

FRONT

SLIDE-IN FROM TOP

FRONT

SLIDE IN FROM THE RIGHT

FRONT

SLIDE IN FROM THE LEFT

Navigation Items

Images with Effects

Interactive Badges

New

Popular

Featured

Hot

Shadow Effects (Non-Interactive / Always-On)

This section showcases standard CSS shadow utilities that are applied permanently to the elements, not just on hover. These effects are useful for giving elements a sense of depth and separation without interaction. We use standard utility classes like shadow-sm, shadow, and shadow-lg.

Shadow Examples on Cards

Small Shadow

Applied using class shadow-sm

Regular Shadow

Applied using class shadow

Large Shadow

Applied using class shadow-lg

Shadow on Other Elements

Small Shadow Div

Regular Shadow Div

Large Shadow Div

Available Hover Effects

Effect	Description
`None`	No visual effect is applied on hover.
`Scale`	Slightly scales up the wrapped element (e.g., transform: scale(1.03)).
`ShadowLift`	Increases the box shadow to a large size, creating a "lifting" effect.
`ScaleAndShadow`	Combines the scaling and shadow lifting for a classic interactive effect.
`BorderGlow`	Adds a subtle colored border glow.
`QuickTilt`	Applies a quick, slight rotation on the Y-axis.
`BrightnessPulse`	Increases the brightness of the element, often used for images.
`BorderFlash`	Adds a noticeable, solid border flash.
`PressDown`	Simulates a button being pressed down (slight shrink + darker shadow).
`QuickTiltLeft`	Applies a quick, slight rotation on the Y-axis (left).
`BorderBottomGradient`	Applies a border bottom slide (gradient).
`Flip`	Applies a flip effect to element.
`RotateRight`	Rotate element to right.
`RotateLeft`	Rotate element to left.
`Pulse`	Creates a rhythmic pulsing animation by smoothly scaling the element up and down, drawing attention to interactive elements.
`Shake`	Applies a rapid horizontal shaking motion, ideal for error states or to grab user attention.
`Swing`	Creates a pendulum-like swinging motion by rotating the element back and forth from its top anchor point.
`SkewRight`	Applies a skew transformation tilting the element to the right, creating a dynamic slanted appearance.
`SkewLeft`	Applies a skew transformation tilting the element to the left, creating a dynamic slanted appearance.
`SlideIn`	Creates a smooth sliding animation revealing hidden content on hover. To use this effect, add a child element with the class `slide-in-content` combined with one of the directional classes: `slide-from-bottom`, `slide-from-top`, `slide-from-right`, or `slide-from-left`. The parent element should have `position-relative` applied.

Available Shadow Effects

Effect	Description
`None`	No shadow is applied.
`Subtle`	A subtle, flat shadow. Ideal for a minimal lift effect.
`Medium`	A standard shadow, perfect for cards or mid-level elements.
`Lifted`	A deeper shadow that simulates the element being significantly elevated.
`Inset`	An inner shadow effect, making the element appear sunken.
`ColorGlow`	A prominent, colored shadow (requires setting a color property).
`TopOnly`	A shadow visible only on the top edge of the element (e.g., for sticky headers).
`BottomOnly`	A soft, wide shadow visible only on the bottom edge (e.g., for floating action elements).
`Sharp`	A sharper shadow with low blur, similar to the Material Design 3 style.
`Ambient`	A very wide, transparent shadow that simulates ambient lighting.
`Pulse`	An animated shadow that gently pulsates to draw attention.
`DoubleLayer`	Combines two different shadow values for a richer, multi-layered depth.
`ZDepth`	Simulates a strong, soft shadow for elements floating high above the surface (e.g., modals).
`SoftHover`	Sets the shadow to 'Lifted' or 'Medium' upon hover/focus for dynamic interaction (requires CSS combination).
`Concave`	A stronger inset shadow that simulates a concave indentation.
`FocusRing`	A very thin, colored shadow primarily used as a focus indicator.
`Neumorphic`	Uses two shadows (light/dark) for a raised, soft 3D effect (Neumorphism).