blob: effd65b84d8cc08ca149e59be1938e1ebed5dcc5 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
---
title: Eyedropper
slug: Tools/Eyedropper
tags:
- CSS
- Design
- Eyedropper
- colors
translation_of: Tools/Eyedropper
---
<div>{{ToolsSidebar}}</div><div class="geckoVersionNote">
<p>O Eyedropper é novidade no Firefox 31.</p>
</div>
<p>A ferramenta Eyedropper permite que você selecione cores na página atual. Funciona como uma lupa através da página, permitindo que você selecione com uma precisão de pixels. Abaixo da lupa é mostrado o valor da cor do pixel atual, baseado na representação selecionada em <a href="/en-US/docs/Tools/Settings#Inspector">Settings > Inspector</a> > Default color unit:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7749/eyedropper.png" style="display: block; height: 204px; margin-left: auto; margin-right: auto; width: 305px;">Você pode usar para as seguintes finalidades:</p>
<ul>
<li>para selecionar uma cor de uma página e copiá-la para a área de transferência.</li>
<li>para mudar o valor da cor nas Regras do Inspetor para uma nova cor que tenha sido selecionada na página.</li>
</ul>
<h2 id="Copiando_a_cor_para_a_clipboard">Copiando a cor para a clipboard</h2>
<p>Abra o Eyedropper usando uma das seguintes maneiras:</p>
<ul>
<li>selecione "Eyedropper" no menu "Web Developer"</li>
<li>click no botão do eyedropper na <a href="/en-US/docs/Tools_Toolbox#Toolbar">Toolbox toolbar</a> (note que este butão não é mostrado por padrão: você precisa adicioná-lo marcando "Grab a color from the page" <a href="/en-US/docs/Tools_Toolbox#Settings">Configurações do Developer Tools</a>)</li>
</ul>
<p>A medida que você movimenta o mouse através da página, você verá o valor da cor atual sendo alterado no Eyedorpper. Ao clicar, a cor atual será copiada à área de trasnferência.</p>
<p>{{EmbedYouTube("xf2uk6UyRB8")}}</p>
<h2 id="Alterando_o_valor_de_uma_cor_no_visualizador_de_regras.">Alterando o valor de uma cor no visualizador de regras. </h2>
<p>Valores de cores que aparecem nas regras do Inspetor possuem amostras de cores próximas a elas: clicar na amostra habilita uma <a href="/en-US/docs/Tools/Page_Inspector#Color_picker">popup de seleção de cores</a>. Desde o Firefox 31, a popup possui um ícone do eyedropper: clique neste ícone para ativar o Eyedropper.</p>
<p>Assim, quando você clicar no Eyedropper, a cor no visualizador de regras estará atribuída com o valor selecionado.</p>
<p>{{EmbedYouTube("0Zx1TN21QOo")}}</p>
<h2 id="Keyboard_shortcuts">Keyboard shortcuts</h2>
<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "eyedropper") }}</p>
|
