Meta tags:
description= Use a propriedade CSS scrollbar para criar temas personalizados para barras de rolagem. Veja valores e exemplos.;
Headings (most frequently used words):
scrollbar, pseudo, elementos, exemplo, dos, webkit, propriedade, css, sintaxe, barras, de, rolagem, padrão, entre, navegadores, prática, com, track, thumb,
Text of the page (most frequently used words):
the (72), #scrollbar (63), text (62), type (46), and (41), border (40), div (40), lorem (40), ipsum (40), dummy (40), industry (40), webkit (39), css (31), typesetting (30), has (30), color (29), width (28), standard (21), font (21), background (20), simply (20), printing (20), been (20), ever (20), since (20), 1500s (20), when (20), unknown (20), printer (20), took (20), galley (20), scrambled (20), make (20), specimen (20), book (20), style (19), grid (18), rolagem (17), html (15), aprender (15), overflow (15), only (14), body (13), column (13), pseudo (12), elementos (12), thumb (11), not (11), para (10), track (10), survived (10), five (10), centuries (10), but (10), also (10), leap (10), into (10), electronic (10), remaining (10), essentially (10), unchanged (10), margin (10), break (10), position (9), radius (9), top (9), right (9), left (9), bottom (9), image (9), animation (9), barras (8), propriedades (8), que (8), barra (8), padding (8), height (8), stroke (8), padrão (7), navegadores (7), são (7), scrolling (7), element (7), auto (7), decoration (7), offset (7), flex (7), page (6), box (6), title (6), outline (6), align (6), variant (6), w3docs (5), todos (5), scroll (5), size (5), controle (5), elemento (5), copiar (5), 666 (5), f5f5f5 (5), chromium (5), shadow (5), max (5), 100 (5), transition (5), line (5), last (5), child (5), formatter (5), generator (4), prática (4), trilha (4), não (4), thin (4), head (4), mode (4), transform (4), fill (4), list (4), template (4), row (4), gap (4), rule (4), nth (4), first (4), json (3), code (3), encoder (3), editor (3), quizzes (3), exercícios (3), php (3), javascript (3), entre (3), sintaxe (3), shape (3), canto (3), vertical (3), deslizante (3), quando (3), apenas (3), aos (3), com (3), firefox (3), como (3), você (3), property (3), rgba (3), inset (3), solid (3), exemplo (3), propriedade (3), word (3), wrap (3), spacing (3), range (3), origin (3), justify (3), items (3), before (3), after (3), letter (3), content (3), columns (3), direction (3), clip (3), string (3), tools (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), beautifier (2), diff (2), password (2), ferramentas (2), python (2), java (2), git (2), livros (2), exemplos (2), snippets (2), this (2), outside (2), behavior (2), orientation (2), space (2), quais (2), utilizadas (2), alterar (2), aparência (2), das (2), arrastável (2), aparece (2), inferior (2), resizer (2), horizontal (2), corner (2), piece (2), botões (2), button (2), use (2), precisar (2), mais (2), estilizar (2), partes (2), informação (2), safari (2), uma (2), primeiro (2), regras (2), duas (2), cores (2), cor (2), baseados (2), experimente (2), mesmo (2), example (2), hidden (2), document (2), doctype (2), dos (2), eee (2), styles (2), diretamente (2), maior (2), por (2), sete (2), esses (2), suportados (2), criar (2), temas (2), personalizados (2), visibility (2), unicode (2), timing (2), function (2), duration (2), delay (2), rendering (2), skip (2), perspective (2), inside (2), anchor (2), path (2), object (2), blend (2), min (2), rows (2), start (2), end (2), flow (2), feature (2), display (2), empty (2), counter (2), count (2), repeat (2), read (2), hash (2), 2026, direitos, reservados, feito, desenvolvedores, idioma, política, privacidade, contato, sobre, empresa, try, tutoriais, gratuitos, web, desde, 2014, next, previous, yes, was, helpful, verificar, redimensionamento, alguns, onde, encontram, parte, coberta, pelo, própria, descrição, recolorir, tornar, fina, modernos, recorra, somente, individuais, peça, alcançam, arredondamento, exclusivo, detailed, styling, based, browsers, modern, abordagem, robusta, declarar, base, seguida, acrescentar, detalhado, nos, precisam, disso, recebe, depois, define, espessura, aceita, palavras, chave, oculta, mantendo, rolável, none, funcionam, working, group, introduziu, suporta, atualmente, motores, blink, agora, também, reconhecem, 666666, cccccc, 550, ececec, serif, georgia, 600, código, aplica, contêiner, possível, direcionar, qualquer, definido, conteúdo, sua, caixa, portanto, estilizá, está, relacionado, família, permitem, controlar, forma, independente, compostos, diferentes, juntas, formam, interface, completo, seguintes, expostos, meio, prefixo, fornecedor, principalmente, compatibilidade, considere, usar, conjunto, hook, estilo, proprietário, permite, designers, nativas, navegador, veja, valores, zoom, index, writing, will, change, widows, white, user, select, bidi, underline, indent, ink, combine, upright, table, layout, tab, linecap, dashoffset, dasharray, speak, resize, quotes, pointer, events, place, orphans, order, opacity, rotate, distance, fit, mix, media, lines, clamp, keyframes, isolation, initial, import, hyphens, hanging, punctuation, areas, area, weight, numeric, ligatures, east, asian, caps, alternates, stretch, language, override, adjust, kerning, values, settings, family, face, float, shrink, grow, basis, filter, cells, cursor, reset, increment, span, clear, charset, caret, caption, side, sizing, source, slice, outset, collapse, block, bleed, attachment, backface, appearance, play, state, name, iteration, self, all, properties, visited, valid, target, selection, scope, root, required, write, placeholder, out, optional, link, lang, invalid, indeterminate, hover, fullscreen, focus, enabled, disabled, dir, default, checked, active, seletores, selectors, css3, guia, flexbox, guides, gradientes, nomes, tabelas, links, class, uso, introdução, basic, entrar, pesquisar, formatters, url, reverse, sha256, md5, length, calculator, colors, hsl, hex, mixer, converter, picker, general, cursos,
Text of the page (random words):
render javascript aprender git aprender java aprender php aprender python cursos quizzes exercícios snippets ferramentas general tools html editor password generator html encoder code diff json beautifier todos os 13 color tools color picker color converter color mixer color hex colors hsl todos os 10 string tools string length calculator md5 hash generator sha256 hash generator string reverse url encoder todos os 19 code formatters javascript formatter css formatter html formatter json formatter php formatter pesquisar na w3docs k pt english en deutsch de русский ru français fr español es português pt italiano it entrar aprender css css basic introdução ao css uso do css sintaxe css css id e class css text css font css links tabelas css css border css padding css margin nomes de cores css gradientes css css guides guia do flexbox propriedades css3 css selectors seletores css active after before checked default dir disabled empty enabled first child first letter first line first of type focus fullscreen hover in range indeterminate invalid lang last child last of type link not nth child nth last child nth last of type nth of type only child only of type optional out of range placeholder read only read write required root scope selection target valid visited css properties align content align items all animation align self animation delay animation direction animation duration animation fill mode animation iteration count animation name animation play state animation timing function appearance backface visibility background background attachment background blend mode background clip background color background image background origin background position background position x background position y background repeat background size bleed block overflow border border bottom border bottom color border bottom left radius border bottom right radius border bottom style border bottom width border collapse border color border image border image outset border image repeat border image slice border image source border image width border left border left color border left style border left width border radius border right border right color border right style border right width border spacing border style border top border top color border top left radius border top right radius border top style border top width border width bottom box decoration break box shadow box sizing break after break before break inside caption side caret color charset clear clip clip path color columns column count column fill column gap column rule column rule color column rule style column rule width column span column width content counter increment counter reset cursor direction display empty cells fill filter flex flex basis flex direction flex flow flex grow flex shrink flex wrap float font font face font display font family font feature settings font feature values font kerning font size font size adjust font language override font stretch font style font variant font variant alternates font variant caps font variant east asian font variant ligatures font variant numeric font weight grid grid area grid auto columns grid auto flow grid auto rows grid column grid column end grid column gap grid column start grid gap grid row grid row end grid row gap grid row start grid template grid template areas grid template columns grid template rows hanging punctuation height hyphens image rendering import initial letter isolation justify content justify items keyframes left letter spacing line break line clamp line height list style list style image list style position list style type margin margin bottom margin left margin right margin top max height max lines max width media min height min width mix blend mode object fit object position offset offset anchor offset distance offset path offset position offset rotate opacity order orphans outline outline color outline offset outline style outline width overflow overflow anchor overflow wrap overflow x overflow y padding padding bottom padding left padding right padding top page break page break after page break before page break inside perspective perspective origin place items pointer events position quotes resize right scroll behavior scrollbar shape outside speak stroke stroke dasharray stroke dashoffset stroke linecap stroke width tab size table layout text align text align last text combine upright text decoration text decoration color text decoration line text decoration skip text decoration skip ink text decoration style text fill color text indent text justify text orientation text overflow text rendering text shadow text stroke text stroke color text stroke width text transform text underline position top transform transform origin transform style transition transition delay transition duration transition property transition timing function unicode bidi unicode range user select vertical align visibility white space widows width will change word break word spacing word wrap writing mode z index zoom propriedade css scrollbar use a propriedade css scrollbar para criar temas personalizados para barras de rolagem veja valores e exemplos o conjunto de pseudo elementos css webkit scrollbar é um hook de estilo proprietário que permite aos designers criar temas personalizados para as barras de rolagem nativas do navegador i informação esses pseudo elementos são expostos por meio do prefixo de fornecedor webkit e são suportados principalmente em navegadores baseados em chromium não são suportados no firefox ou safari para maior compatibilidade entre navegadores considere usar as propriedades padrão scrollbar width e scrollbar color os pseudo elementos webkit scrollbar são compostos por sete partes diferentes que juntas formam um elemento de interface de barra de rolagem completo esses sete pseudo elementos são os seguintes webkit scrollbar webkit scrollbar button webkit scrollbar track webkit scrollbar track piece webkit scrollbar thumb webkit scrollbar corner webkit scrollbar resizer uma barra de rolagem só aparece quando o conteúdo de um elemento é maior que sua caixa portanto estilizá la está diretamente relacionado à família de propriedades overflow overflow x e overflow y permitem controlar a rolagem horizontal e vertical de forma independente sintaxe para estilizar barras de rolagem você aplica regras css diretamente aos pseudo elementos webkit scrollbar no contêiner de rolagem é possível direcionar qualquer elemento com overflow definido como scroll ou auto não apenas o body scrolling element webkit scrollbar scrollbar styles scrolling element webkit scrollbar thumb thumb styles copiar exemplo dos pseudo elementos scrollbar exemplo de código css scrollbar doctype html html head title title of the document title style html height 100 overflow hidden body height 100 background eee overflow scroll width 85 max width 600 px margin 0 auto padding 3 em font 100 1 4 georgia serif border 1 px solid 666 p margin 0 0 1 5 em body webkit scrollbar width 1 em body webkit scrollbar track webkit box shadow inset 0 0 6 px rgba 0 0 0 0 3 body webkit scrollbar thumb background color 666 outline 1 px solid eee style head body h2 scrollbar property example h2 div lorem ipsum is simply dummy text of the printing and typesetting industry lorem ipsum has been the industry s standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book it has survived not only five centuries but also the leap into electronic typesetting remaining essentially unchanged div div lorem ipsum is simply dummy text of the printing and typesetting industry lorem ipsum has been the industry s standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book div div lorem ipsum is simply dummy text of the printing and typesetting industry lorem ipsum has been the industry s standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book div div lorem ipsum is simply dummy text of the printing and typesetting industry lorem ipsum has been the industry s standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book it has survived not only five centuries but also the leap into electronic typesetting remaining essentially unchanged div div lorem ipsum is simply dummy text of the printing and typesetting industry lorem ipsum has been the industry s standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book div div lorem ipsum is simply dummy text of the printing and typesetting industry lorem ipsum has been the industry s standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book div div lorem ipsum is simply dummy text of the printing and typesetting industry lorem ipsum has been the industry s standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book it has survived not only five centuries but also the leap into electronic typesetting remaining essentially unchanged div div lorem ipsum is simply dummy text of the printing and typesetting industry lorem ipsum has been the industry s standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book div div lorem ipsum is simply dummy text of the printing and typesetting industry lorem ipsum has been the industry s standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book it has survived not only five centuries but also the leap into electronic typesetting remaining essentially unchanged div div lorem ipsum is simply dummy text of the printing and typesetting industry lorem ipsum has been the industry s standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book it has survived not only five centuries but also the leap into electronic typesetting remaining essentially unchanged div body html copiar experimente você mesmo exemplo dos pseudo elementos scrollbar com webkit scrollbar track e webkit scrollbar thumb doctype html html head title title of the document title style html height 100 overflow hidden body height 100 background ececec overflow scroll width 90 max width 550 px margin 0 auto padding 2 em border 2 px solid cccccc p margin 0 0 1 5 em body webkit scrollbar track webkit box shadow inset 0 0 6 px rgba 0 0 0 0 3 border radius 10 px background color f5f5f5 body webkit scrollbar width 5 px background color f5f5f5 body webkit scrollbar thumb border radius 10 px webkit box shadow inset 0 0 6 px rgba 0 0 0 3 background color 666666 style head body h2 scrollbar property example h2 div lorem ipsum is simply dummy text of the printing and typesetting industry lorem ipsum has been the industry s standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book it has survived not only five centuries but also the leap into electronic typesetting remaining essentially unchanged div div lorem ipsum is simply dummy text of the printing and typesetting industry lorem ipsum has been the industry s standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book div div lorem ipsum is simply dummy text of the printing and typesetting industry lorem ipsum has been the industry s standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book div div lorem ipsum is simply dummy text of the printing and typesetting industry lorem ipsum has been the industry s standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book it has survived not only five centuries but also the leap into electronic typesetting remaining essentially unchanged div div lorem ipsum is simply dummy text of the printing and typesetting industry lorem ipsum has been the industry s standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book div div lorem ipsum is simply dummy text of the printing and typesetting industry lorem ipsum has been the industry s standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book div div lorem ipsum is simply dummy text of the printing and typesetting industry lorem ipsum has been the industry s standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book it has survived not only five centuries but also the leap into electronic typesetting remaining essentially unchanged div div lorem ipsum is simply dummy text of the printing and typesetting industry lorem ipsum has been the industry s standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book div div lorem ipsum is simply dummy text of the printing and typesetting industry lorem ipsum has been the industry s standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book it has survived not only five centuries but also the leap into electronic typesetting remaining essentially unchanged div div lorem ipsum is simply dummy text of the printing and typesetting industry lorem ipsum has been the industry s standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book it has survived not only five centuries but also the leap into electronic typesetting remaining essentially unchanged div body html copiar experimente você mesmo barras de rolagem padrão entre navegadores como os pseudo elementos webkit scrollbar funcionam apenas em navegadores baseados em chromium o css working group introduziu duas propriedades padrão que o firefox suporta atualmente e que os motores webkit blink agora também reconhecem scrollbar width e scrollbar color scrollbar width define a espessura aceita as palavras chave auto padrão thin ou none oculta a barra de rolagem mantendo o elemento rolável scrollbar color recebe duas cores primeiro a cor do thumb controle deslizante e depois a cor da track trilha scrolling element scrollbar width thin scrollbar color 666 f5f5f5 thumb track copiar uma abordagem robusta é declarar as propriedades padrão primeiro como base e em seguida acrescentar as regras webkit scrollbar para um controle mais detalhado nos navegadores chromium que precisam disso ...
|
