Extensão Chrome: CSS Peeper – Visualizador Inteligente de CSS

Instalação em 1 minuto

Se você trabalha com construção de sites e lojas virtuais, não deixe de usar a extensão CSS Peeper do Chrome, um poderoso visualizador gratuito de CSS.

Instalação e Configuração

Clique no link e instale a extensão diretamente da Chrome Web Store. Após acessar a página da extensão, basta clicar no botão “Usar no Chrome” e concluir a instalação.

Extensão Chrome: CSS Peeper - Visualizador Inteligente de CSS 1

Depois clique no ícone de “Extensões do Chrome” e fixe o CSS Peeper clicando no ícone indicado na imagem abaixo.

Extensão Chrome: CSS Peeper - Visualizador Inteligente de CSS 2

O ícone do CSS Peeper passará a ser exibido na barra superior do Chrome.

Extensão Chrome: CSS Peeper - Visualizador Inteligente de CSS 3

Como usar?

Acesse o site desejado e clique no ícone do CSS Peeper.

Identifique os fonts usados em um site

Ao carregar o CSS Peeper, a ferramenta irá identificar todos os fonts usados na página do site.

Extensão Chrome: CSS Peeper - Visualizador Inteligente de CSS 4

Inspecione itens do site de forma visual

Clique no item desejado como títulos, parágrafos, imagens, ou qualquer outro elemento HTML de um site e obtenha as configurações usadas como fonts, cores, classes e outras informações úteis.

Extensão Chrome: CSS Peeper - Visualizador Inteligente de CSS 5

Identifique as cores de um site

Clique no ícone Colors.

Extensão Chrome: CSS Peeper - Visualizador Inteligente de CSS 6

A ferramenta irá exibir toda a paleta de cores da página do site, permitindo inclusive a exportação da paleta e a cópia da cor desejada com apenas um clique.

Extensão Chrome: CSS Peeper - Visualizador Inteligente de CSS 7

Identifique e baixe as imagens de um site

Clique no ícone Assets.

Extensão Chrome: CSS Peeper - Visualizador Inteligente de CSS 8

Todas as imagens da página do site serão exibidas. Passe o mouse sobre a imagem desejada e clique na opção Export para baixar a imagem ou clique na opção Export All localizada no topo da janela da ferramenta, para baixar um zip com todas as imagens.

Extensão Chrome: CSS Peeper - Visualizador Inteligente de CSS 9

COMPARTILHE
Se você gostou deste artigo, ajude a compartilhar este conteúdo.