En Popüler CSS Efektleri (Sayfa 82)

Canlı incele Navigasyon

Glow Segmented Control

Dark segmented control with a neon glow on the active segment.

#hover #shadow #border

Canlı incele Navigasyon

Pill Segmented Control

Segmented control with a sliding pill background that follows selection.

#hover #gradient #transform

Canlı incele Navigasyon

Shadow Grow Hover Navbar

Hovered links grow a deep multi-layer shadow beneath them.

#hover #transform #shadow

Canlı incele Navigasyon

Shake Jitter Navbar

Links shake-jitter on hover with a horizontal animation.

#hover #animation #transform

Canlı incele Navigasyon

Bottom Sheet Navbar

Mobile bottom sheet that slides up to reveal nav links.

#hover #animation #transform

Canlı incele Navigasyon

Back Arrow Sheet Navbar

Sheet with a back arrow navigation button at the top.

#hover #animation #gradient

Canlı incele Navigasyon

Close X Sheet Navbar

Bottom sheet with an X close button in the corner.

#hover #animation #gradient

Canlı incele Navigasyon

Grip Handle Sheet Navbar

Bottom sheet with a prominent grip handle and drag indicator.

#hover #animation #gradient

Canlı incele Navigasyon

Left Slide Sheet Navbar

Vertical sheet sliding in from the left with stacked links.

#hover #animation #transform

Canlı incele Navigasyon

Right Slide Sheet Navbar

Vertical sheet sliding in from the right with profile-style links.

#hover #animation #transform

Canlı incele Navigasyon

Top Drop Sheet Navbar

Sheet that drops down from the top of the navbar revealing links.

#hover #animation #transform

Canlı incele Navigasyon

Shutter Blade Close Nav

Camera shutter blades that close in to hide nav, opening on hover.

#hover #gradient #transform

Canlı incele Navigasyon

Shutter Blade Open Nav

Shutter blades that open outward radially to reveal nav links.

#hover #gradient #transform

Canlı incele Navigasyon

3D Sidebar

Sidebar with 3D perspective tilt.

#hover #gradient #transform

Canlı incele Navigasyon

Brutalist Sidebar

Raw brutalist sidebar with thick borders.

#hover #transform #shadow

Canlı incele Navigasyon

Collapsible Sidebar

Sidebar that collapses to icons only.

#hover #gradient

Canlı incele Navigasyon

Dark Sidebar

Dark themed sidebar with subtle highlights.

#hover #gradient #shadow

Canlı incele Navigasyon

Elevated Sidebar

Sidebar with elevated card design.

#hover #gradient #transform

Canlı incele Navigasyon

Expand on Hover Sidebar

Sidebar expands to show labels on hover.

#hover #gradient

Canlı incele Navigasyon

Glow Sidebar

Dark sidebar with glowing active link.

#hover #shadow #border

Canlı incele Navigasyon

Gradient Sidebar

Sidebar with gradient background.

#hover #gradient #shadow

Canlı incele Navigasyon

Icons Only Sidebar

Minimal sidebar with only icons.

#hover #gradient #transform

Canlı incele Navigasyon

Light Sidebar

Light themed sidebar with soft shadow.

#hover #gradient #shadow

Canlı incele Navigasyon

Mini Sidebar

Compact mini sidebar.

#hover #gradient #shadow

Canlı incele Navigasyon

Neon Sidebar

Dark neon themed sidebar.

#hover #transform #shadow

Canlı incele Navigasyon

Neumorphic Sidebar

Soft neumorphic sidebar.

#hover #shadow

Canlı incele Navigasyon

Overlay Sidebar

Sidebar that overlays content when opened.

#hover #gradient

Canlı incele Navigasyon

Pinned Sidebar

Full-height pinned sidebar.

#hover #transform #border

Canlı incele Navigasyon

Push Content Sidebar

Sidebar that pushes content when expanded.

#hover #gradient #shadow

Canlı incele Navigasyon

Rounded Sidebar

Sidebar with rounded pill links.

#hover #gradient #shadow

Canlı incele Navigasyon

Square Sidebar

Sidebar with sharp square links.

#hover #transform #border

Canlı incele Navigasyon

Skew Diagonal Navbar

Links skew diagonally on hover with a sharp directional motion.

#hover #transform

Canlı incele Navigasyon

Slant 3D Fold Navbar

Nav with a 3D fold effect along the diagonal axis.

#hover #transform #3d

Canlı incele Navigasyon

Slant Both Cuts Navbar

Nav bar with diagonal cuts on both top corners.

#hover

Canlı incele Navigasyon

Slant Bottom Cut Navbar

Nav bar with a slanted diagonal cut at the bottom edge.

#hover

Canlı incele Navigasyon

Slant Clip Path Navbar

Nav bar with a custom angled clip-path creating a parallelogram.

#hover

Canlı incele Navigasyon

Slant Cut Corner Navbar

Nav with a folded corner cut on the top-right.

#hover

Canlı incele Navigasyon

Slant Glow Edge Navbar

Slanted nav with glowing edge accents along the cuts.

#hover #shadow #border

Canlı incele Navigasyon

Slant Gradient Flow Navbar

Slanted nav with an animated gradient background flow.

#hover #animation #gradient

Canlı incele Navigasyon

Slant Left Cut Navbar

Nav bar with a slanted diagonal cut on the left edge.

#hover

Canlı incele Navigasyon

Slant Neon Edge Navbar

Slanted nav with pulsing neon pink edge accents.

#hover #animation #shadow

Canlı incele Navigasyon

Slant Right Cut Navbar

Nav bar with a slanted diagonal cut on the right edge.

#hover

Canlı incele Navigasyon

Slant Rotate Tilt Navbar

Nav with the entire bar slightly rotated for a tilted slant.

#hover #gradient #transform

Canlı incele Navigasyon

Slant Skew Tilt Navbar

Nav with skew-tilted active item creating a slanted look.

#hover #transform

Canlı incele Navigasyon

Slant Top Cut Navbar

Nav bar with a slanted diagonal cut at the top edge.

#hover

Canlı incele Navigasyon

Soft Pink Navbar

Soft pink themed navbar with rose accents.

#hover #gradient #shadow

Canlı incele Navigasyon

Split Arrow Flow Navbar

Nav links separated by arrow flow indicators pointing right.

#hover #animation #transform

Canlı incele Navigasyon

Split Chevron Flow Navbar

Nav links separated by double-chevron flow indicators.

#hover

Canlı incele Navigasyon

Split Curve Wave Navbar

Nav links with a wavy curve separator between them.

#hover #transform

Canlı incele Navigasyon

Split Diagonal Cut Navbar

Nav links with diagonal cut separators between them.

#hover

Canlı incele Navigasyon

Split Dot Flow Navbar

Nav links separated by pulsing dot flow indicators.

#hover #animation #transform

Canlı incele Navigasyon

Split Greater Flow Navbar

Nav links separated by greater-than flow indicators.

#hover

Canlı incele Navigasyon

Split Half Divider Navbar

Nav split into two halves with a central vertical divider.

#hover #gradient #shadow

Canlı incele Navigasyon

Split Horizontal Divider Navbar

Nav links separated by horizontal lines stacked vertically.

#hover #shadow #border

Canlı incele Navigasyon

Split Layout Navbar

Navbar with brand on left, links center, actions on right.

#hover #border

Canlı incele Navigasyon

Split Line Dashed Navbar

Nav links separated by dashed line dividers.

#hover #gradient #shadow

Canlı incele Navigasyon

Split Line Dotted Navbar

Nav links separated by dotted line dividers.

#hover #gradient

Canlı incele Navigasyon

Split Line Glow Navbar

Nav links separated by glowing line separators.

#hover #shadow

Canlı incele Navigasyon

Split Pipe Flow Navbar

Nav links separated by vertical pipe flow indicators.

#hover

Canlı incele Navigasyon

Split Quad Grid Navbar

Nav split into four equal quadrants with cross divider.

#hover

Canlı incele Navigasyon

Split Slash Flow Navbar

Nav links separated by slash flow indicators.

#hover #shadow

Canlı incele Navigasyon

Split Thirds Grid Navbar

Nav split into three equal columns separated by dividers.

#hover #border

Canlı incele Navigasyon

Split Vertical Divider Navbar

Nav with prominent vertical divider bars between links.

#hover #border

Canlı incele Navigasyon

Split Wave Edge Navbar

Nav with a wave-edge border between active and inactive items.

#hover #gradient

Canlı incele Navigasyon

Split Zigzag Edge Navbar

Nav links with zigzag-edged separators between items.

#hover #transform

Canlı incele Navigasyon

Spring Pop Navbar

Active link springs outward with a playful pop animation.

#hover #gradient #transform

Canlı incele Navigasyon

Square Sharp Navbar

Sharp-edged navbar with no rounding.

#hover #transform #border

Canlı incele Navigasyon

Stamp Ink Rotate Nav

Active link shows a rotated ink stamp badge with skewed impression.

#hover #gradient #transform

Canlı incele Navigasyon

Stamp Paper Fold Nav

Paper sheet nav with folded corner revealing the active item underneath.

#hover #gradient #transform

Canlı incele Navigasyon

3D Step Indicator

3D extruded step indicator.

#hover #transform #shadow

Canlı incele Navigasyon

Checkmarks Step Indicator

Step indicator with checkmarks for done steps.

#hover

Canlı incele Navigasyon

Circular Step Indicator

Step indicator with circular progress ring.

#hover #transform #shadow

Canlı incele Navigasyon

Dots Step Indicator

Step indicator with dots between numbers.

#hover #transform #shadow

Canlı incele Navigasyon

Floating Step Indicator

Floating step indicator with hover lift.

#hover #transform #shadow

Canlı incele Navigasyon

Glow Step Indicator

Dark step indicator with glowing active step.

#hover #shadow

Canlı incele Navigasyon

Gradient Step Indicator

Step indicator with animated gradient on active.

#hover #animation #gradient

Canlı incele Navigasyon

Horizontal Step Indicator

Horizontal step indicator with connecting lines.

#hover #shadow

Canlı incele Navigasyon

Neon Step Indicator

Neon themed step indicator.

#hover #transform #shadow

Canlı incele Navigasyon

Numbered Step Indicator

Horizontal numbered step indicator.

#hover

Canlı incele Navigasyon

Pill Step Indicator

Step indicator with pill-shaped markers.

#hover

Canlı incele Navigasyon

Progress Bar Step Indicator

Step indicator with connecting progress bar.

#hover #gradient #transform

Canlı incele Navigasyon

Rounded Step Indicator

Step indicator with rounded square markers.

#hover #gradient #transform

Canlı incele Navigasyon

Vertical Step Indicator

Vertical step indicator with connecting line.

#hover #shadow

Canlı incele Navigasyon

Sticky Shadow Navbar

Navbar that grows a deep shadow when stuck to top.

#hover #shadow

Canlı incele Navigasyon

Sticky Shrink Navbar

Navbar that shrinks padding on hover simulating sticky state.

#hover #shadow #border

Canlı incele Navigasyon

Sunset Orange Navbar

Sunset orange navbar with warm gradient.

#hover #gradient #shadow

Canlı incele Navigasyon

Swing Pendulum Navbar

Links swing like a pendulum anchored at the top on hover.

#hover #animation #transform

Canlı incele Navigasyon

3D Flip Tabs

Tabs with 3D flip animation on active state.

#hover #transform #shadow

Canlı incele Navigasyon

3D Shadow Tabs

Tabs with deep 3D shadow on active.

#hover #gradient #transform

Canlı incele Navigasyon

Animated Underline Tabs

Tabs with continuously animated underline.

#hover #animation #gradient

Canlı incele Navigasyon

Arrow Indicator Tabs

Tabs with an arrow indicator under active tab.

#hover #transform #border

Canlı incele Navigasyon

Bar Grow Tabs

Tabs with a top bar that grows from center on active.

#hover #transform

Canlı incele Navigasyon

Icon Tab Bar

A mobile style tab bar where the selected item lifts and reveals its caption.

#hover #transform #shadow

Canlı incele Navigasyon

Circle Background Tabs

Tabs with circle background morph on hover.

#hover #transform

Canlı incele Navigasyon

Square Background Tabs

Tabs with square background morph on hover.

#hover #gradient #transform

Canlı incele Navigasyon

Border Bottom Tabs

Classic tabs with active border bottom.

#hover #border

Kategoriye göre gez

Popüler etiketler