Componentes

backdrop

Explore prévias interativas, encontre os componentes ideais e incorpore componentes abertos ao seu projeto com o código-fonte incluído.

Crie com um guia Conecte seu agente Explorar modelos de páginas

18 de 18

1668Blinking grid patternFundosUma grade quadrada fina onde células dispersas desaparecem e desaparecem, cada uma saltando para uma célula nova quando seu piscar termina.

1688Drifting Light BeamsFundosAltas barras inclinadas de luz sobem em diferentes velocidades e se misturam em uma névoa que se move lentamente.

1691Firework burst canvasFundosOs projéteis são lançados da borda inferior, formam um arco e depois explodem em faíscas que caem sob a ação da gravidade.

1695Flowing line currentsFundosDezenas de longos traços curvos percorrem diagonalmente a moldura em três faixas de profundidade, entrelaçando-se e balançando como uma corrente lenta.

1698Funnel vortex backdropFundosUm funil de estrutura de arame com anéis encolhíveis e raios radiais fluindo para uma garganta iluminada, com partículas subindo de volta.

1706Hex cell gridFundosUm favo de mel de células hexagonais recortadas que acendem sob o ponteiro e esfriam novamente, deixando um rastro desbotado.

1722Merging blob backdropFundosUm amplo cenário de bolhas suaves de grandes dimensões que deslizam e orbitam em loops escalonados, fundindo-se numa massa líquida com um desfoque e uma passagem limiar onde quer que se encontrem.

1727Parallax StarfieldFundosTrês camadas de pontos dispersos rolam para cima em taxas diferentes e deslizam contra o ponteiro, para que o campo ganhe profundidade.

1853Edge Faded Plot GridGráficosUm cenário de plotagem com regras tracejadas que desaparecem nas bordas, com uma linha de base destacada e uma faixa de luz que as percorre.

2119Centered modal frameSobreposiçõesUm modal centralizado simples que esmaece e aumenta sobre um fundo esmaecido, com cabeçalho, corpo e rodapé, para formulários e confirmações cotidianas.

2160Grouped backdrop popoverSobreposiçõesUm gatilho popover que se abre perto de sua âncora com um pano de fundo esmaecido opcional e fecha qualquer popover irmão em seu grupo assim que ele abre.

2187Luminous ribbon fieldFundosUm cenário de tela onde algumas fitas brilhantes se entrelaçam na moldura, afinando em pontas em ambas as bordas e florescendo em direção ao branco onde se cruzam.

2204Perspective reveal dialogSobreposiçõesUma caixa de diálogo de uso geral cujo painel se inclina a partir de uma borda escolhida em 3D e depois se achata no lugar, para mostrar conteúdo arbitrário em uma página esmaecida.

2207Pop scale panelSobreposiçõesUm popover que abre pela metade, aponta uma pequena seta para o gatilho, escurece a página atrás dele e fecha com Escape ou um clique externo.

2324Confirm action modalSobreposiçõesUma caixa de diálogo de confirmação centralizada que se abre sobre um fundo escuro, pedindo ao visitante para confirmar ou cancelar uma ação destrutiva.

2325Confirm Delete ModalSobreposiçõesUma caixa de diálogo de confirmação centralizada que aparece gradualmente sobre um fundo esmaecido, solicita ao usuário que confirme uma ação destrutiva e retorna ao cancelamento, confirmação ou clique externo.

2335Dismissible DialogSobreposiçõesUma caixa de diálogo centralizada de uso geral que se abre sobre um fundo desfocado e pode ser descartada casualmente pelo botão Fechar, pelo pano de fundo ou por Escape.

2593Morphing backdrop buttonBotõesUm rótulo de texto simples apoiado por uma placa colorida e um disco de canto translúcido que aumenta e se enquadra em uma nova face de botão ao passar o mouse.

Compare estes componentes

Escolha pelo comportamento e pelo layout; depois confira os frameworks disponíveis e os requisitos de acesso na página de cada componente.

Blinking grid pattern
Uma grade quadrada fina onde células dispersas desaparecem e desaparecem, cada uma saltando para uma célula nova quando seu piscar termina.
Centered modal frame
Um modal centralizado simples que esmaece e aumenta sobre um fundo esmaecido, com cabeçalho, corpo e rodapé, para formulários e confirmações cotidianas.
Confirm action modal
Uma caixa de diálogo de confirmação centralizada que se abre sobre um fundo escuro, pedindo ao visitante para confirmar ou cancelar uma ação destrutiva.

Orientações de design

Abrir o índice completo

Etiquetas

3d (16)accessible (4)accordion (9)action (3)actions (6)activity (5)add (7)admin (12)agent (12)alert (8)align (3)ambient (39)analytics (13)anchored (3)animated (82)animation (4)annotation (3)app shell (3)arc (4)arcs (3)area (12)area chart (4)arrow (32)audio (3)aurora (4)auth (11)authentication (12)auto height (4)autocomplete (4)avatar (10)avatars (3)axis (5)backdrop (18)backer (3)background (54)badge (21)band (6)banner (9)bar (16)bar chart (3)bars (6)beam (6)beams (5)bevel (12)bezel (3)billing (10)bin (3)blend (4)blob (4)blobs (3)bloom (10)blur (15)booking (9)bookmark (3)border (16)bounce (6)brackets (3)breadcrumb (4)breathing (3)broadcast (3)burst (7)busy (5)button (397)button group (5)buttons (4)calendar (32)call to action (11)callout (3)canvas (89)capsule (12)caption (8)card (35)cards (7)caret (5)carousel (11)cascade (3)category (3)cells (4)chain (3)characters (4)chart (59)chat (4)check (3)checkbox (13)checklist (7)checkmark (5)chevron (10)chip (22)chips (4)circle (9)circular (5)click (7)clip (9)clipboard (3)close (4)cloud (3)cluster (3)code (6)collapse (11)collapsible (6)collision (3)column (4)columns (3)combobox (4)command palette (3)commercial (10)compact (8)comparison (8)composer (4)concentric (4)confetti (4)confirm (24)confirmation (7)console (5)contact (3)context menu (4)controlled-state (18)copy (4)corner (6)corners (7)count (7)count-up (3)counter (18)crossfade (5)crosshair (6)cta (28)cue (4)cursor (26)curtain (7)curve (4)customer (13)cycle (6)dark (15)dark mode (4)dashboard (9)dashed (5)data (13)date picker (16)date range (13)deck (3)delay (5)delete (8)depth (32)destructive (9)destructive-action (4)device mockup (3)diagonal (13)diagram (3)dial (5)dialog (17)digits (5)direction (5)disc (5)disclosure (8)dismiss (6)displacement (3)distortion (5)divider (4)dock (4)donut (7)dots (15)download (10)drag (21)draw (3)drawer (10)drift (17)dropdown (18)dropdown menu (3)duration (3)easing (4)echo (3)edge (7)edge light (3)editor (3)elastic (8)elevation (6)ellipsis (3)email (3)emboss (4)emphasis (3)empty state (3)entrance (14)error state (3)events (3)exit (3)expand (23)explorer (3)fade (9)falling (3)falloff (4)fan (6)faq (4)feed (3)feedback (12)field (6)fill (46)film (3)filter (13)finance (10)flat (6)flat shadow (3)flight (3)flip (10)floating panel (4)flood (14)flow (5)fluid (3)flyout (3)focus (19)focus ring (5)focus trap (6)folder (5)follow (11)form (47)form-control (12)formatting (3)frame (19)gallery (15)game (3)gap (4)gauge (5)gesture (6)ghost (7)glare (3)glitch (9)glow (39)glyph (7)gradient (38)grain (10)gravity (3)grid (35)group (8)guide (3)hairline (8)halftone (4)halo (15)hamburger (4)hard shadow (6)heading (8)headline (19)hero (11)hexagon (3)highlight (22)hinge (4)hint (12)hold (6)horizon (3)horizontal (4)hover (251)hover card (10)hover reveal (3)icon (121)icon-button (23)icons (4)identity (3)indeterminate (4)indicator (9)inertia (4)initials (3)ink (4)inline (5)input (20)input group (3)inset (11)interactive (50)invert (26)italic (3)key (11)keyboard (20)keyboard navigation (6)keycap (10)knob (4)kpi (5)label (14)label reveal (3)label swap (9)labels (7)lag (4)lattice (4)launch (3)layered (9)layers (3)layout (18)ledge (6)legend (9)lens (4)letters (10)lift (19)light (22)lightbox (4)like (4)line (11)line chart (4)lines (8)link (11)link preview (7)liquid (7)list (13)live (3)loader (9)loading (27)log (3)login (10)loop (42)magnet (5)magnetic (3)magnify (3)map (4)marker (3)markers (6)marquee (8)mask (9)matrix (4)media (4)menu (23)merge (3)mesh (5)message (4)metal (10)meter (5)metric (10)metrics (5)minimal (10)modal (19)monospace (12)monthly (12)morph (14)motion (3)motion tuning (3)moulded (6)multi-select (4)nav (3)navbar (3)navigation (21)nested (7)neutral (4)night (4)noise (16)notification (3)notifications (4)nudge (4)number (11)odometer (5)offset (7)on-off (4)onboarding (3)one time code (5)options (5)orb (4)orbit (13)otp (3)outline (63)outlined (4)overflow (7)overlay (24)overshoot (3)page (18)palette (3)panel (31)panels (6)paper plane (4)paragraph (3)parallax (15)particles (18)paste (3)path (4)pattern (9)percentage (4)perimeter (3)perspective (20)photo (5)physics (5)picker (3)pie (7)pill (83)pill switch (4)pin (3)pinned (3)pixel (3)placeholder (4)plane (5)plate (9)play (4)playful (7)pointer (65)polar (8)pop (4)popover (17)post card (3)power (3)press (77)pressed (6)pricing (3)primitive (4)print (4)product (6)profile (8)progress (27)proportion (4)providers (4)pulse (17)queue (3)quiet (5)radar (9)radial (8)radio (4)radio group (8)raised (3)ramp (5)ranking (3)rays (4)readout (4)record (4)registration (3)relay (3)relief (6)remove (3)reorder (3)resize (4)restore (3)retro (4)retry (3)reveal (80)ribbon (6)rim (8)ring (25)rings (10)ripple (18)rise (3)roll (6)rotate (21)rotating text (4)rotation (6)round (5)rounded (3)row (11)rows (4)save (5)scale (20)scan (5)scatter (4)scheduler (3)scramble (5)screen (3)screenshot frame (3)scroll (38)scrub (5)search (8)section (4)sections (4)segmented (7)segmented control (12)select (5)selection (5)send (23)sequence (8)series (7)settings (21)shadow (28)shape (3)share (25)shared element (4)sheen (14)sheet (4)shell (3)shimmer (8)shine (5)shortcut (4)shuffle (3)shutter (5)sidebar (7)sign in (11)signal (8)signup (9)silhouette (3)sizes (4)skew (9)slab (6)slide (20)slider (10)sliding highlight (7)sliding indicator (3)snap (4)social (6)soft (6)space (5)spark (3)sparkline (3)spin (15)spinner (9)split (9)split-flap (3)split text (3)spotlight (7)spring (63)square (5)squash (4)stack (17)stacked (7)stagger (40)staircase (3)star (3)stars (6)stat (5)state (11)static (3)status (21)stepper (3)steps (3)sticker (4)sticky (4)streaks (3)strikethrough (3)stripes (5)stroke (6)submenu (9)submit (7)subtle (3)success (3)surface (5)svg (102)swap (12)sweep (40)swell (4)swipe (5)swirl (3)switch (16)tabs (22)tactile (26)tap (4)target (3)task (3)team (5)terminal (3)text (40)text button (3)text-effect (3)text field (4)text transition (3)textarea (4)texture (11)theme (3)theme toggle (4)thumbnail (4)ticker (5)tile (16)tiles (12)tilt (26)time (3)time range (3)time series (3)timeline (3)timer (3)timing (5)tint (5)toggle (65)toggle group (10)toolbar (25)tooltip (37)total (3)touch (3)trace (4)tracking (6)trail (20)transition (6)translucent (9)travel (6)tray (3)tree (3)trend (10)trigger (4)tunnel (4)twinkle (4)typewriter (9)typing (8)typography (18)underline (10)upload (5)uppercase (14)validation (5)value (3)values (4)variants (4)velocity (3)verification (8)video (4)viewport (6)voice (3)warp (6)wash (5)wave (13)waveform (3)waves (7)window (3)wipe (23)wireframe (3)wireless (3)wobble (6)word swap (3)words (3)workflow (18)workspace (36)wrapper (3)zoom (4)