/css-ptbr

Uma extensão para Visual Studio Code que permite escrever propriedades e valores CSS em português Brasileiro.

MIT LicenseMIT

CSS pt-BR Escreva CSS em português brasileiro

Uma extensão para Visual Studio Code que permite escrever propriedades e valores CSS em português Brasileiro.

Simples demonstração do CSS pt-BR em ação

Motivação

Sou voluntário em um projeto onde tentamos dar as crianças possibilidade de terem um primeiro contato com programação, elas começam com o Scratch em português, depois vão para HTML & CSS e no final para Python. Muitas dessas crianças não tem nem computador em casa. Nos encontramos 1x por semana e percebemos que o inglês é uma das barreiras que pode fazer a criança querer desistir. O objetivo da extensão é diminuir essa barreira, principalmente no começo.

Em nenhum momento defendo que isso deve substituir o aprendizado de inglês, o que desejo é que isso facilite, ao invés de a criança ir no Google Translator digitar “largura” e clicar em traduzir ela pode fazer isso diretamente no editor.

Instalação

Para instalar clique aqui.

Contribuindo

Veja aqui como contribuir

Licença

MIT


Opções Disponíveis

  1. Aligns
  2. Animações
  3. Backgrounds
  4. Bordas
  5. Cores
  6. Snippets

Aligns

Propriedade Prefix
align-content alinhar conteúdo / alinhar-conteúdo
align-items alinhar itens / alinhar-itens
align-self alinhar-se

Animações

Propriedade Prefix
animation-delay animação atraso / atraso-da-animação
animation-direction animação direção / direção-da-animação
animation-duration animação duração / duração-da-animação
animation-fill-mode animação modo aplicação estilo / modo-de-preenchimento-da-animação
animation-iteration-count animação contador iterações / contador-de-iteração-da-animação
animation-name animação nome / nome-da-animação
animation-play-state animação status / status-da-animação

Backgrounds

Propriedade Prefix
background-attachment fundo anexo / fixação-do-fundo
background-blend-mode fundo modo mistura / modo-de-mistura-do-fundo
background-clip fundo extender na borda / extensão-do-fundo
background-color fundo cor / cor-de-fundo
background-image fundo imagem / imagem-de-fundo
background-origin fundo origem / ponto-de-origem-do-fundo
background-position fundo posição / posição-do-fundo
background-repeat fundo repetir / repetição-do-fundo
background-size fundo tamanho / tamanho-do-fundo

Bordas

Propriedade Prefix
border borda
border-bottom borda inferior / borda-inferior
border-bottom-color borda inferior cor / cor-da-borda-inferior
border-bottom-left-radius borda raio canto inferior esquerdo / raio-do-canto-inferior-esquerdo-da-borda
border-bottom-right-radius borda raio canto inferior direito / raio-do-canto-inferior-direito-da-borda
border-bottom-style borda inferior estilo / estilo-da-borda-inferior
border-bottom-width borda inferior comprimento / comprimento-da-borda-inferior
border-color borda cor / cor-da-borda
border-left borda esquerda / borda-esquerda
border-left-color borda esquerda cor / cor-da-borda-esquerda
border-left-style borda esquerda estilo / estilo-da-borda-esquerda
border-left-width borda esquerda comprimento / comprimento-da-borda-esquerda
border-radius borda raio / raio-da-borda
border-right borda direita / borda-direita
border-right-color borda direita cor / cor-da-borda-direita
border-right-style borda direita estilo / estilo-da-borda-direita
border-right-width borda direita comprimento / comprimento-da-borda-direita
border-style borda estilo / estilo-da-borda
border-top borda superior / borda-superior
border-top-color borda superior cor / cor-da-borda-superior
border-top-left-radius borda raio canto superior esquerdo / raio-do-canto-superior-esquerdo-da-borda
border-top-right-radius borda raio canto superior direito / raio-do-canto-superior-direito-da-borda
border-top-style borda superior estilo / estilo-da-borda-superior
border-top-width borda superior comprimento / comprimento-da-borda-superior
border-width borda comprimento / comprimento-da-borda

Cores

Propriedade Prefix
aqua azul-piscina
aquamarine verde-mar
azure azul-celeste
biege bege
black preto
blue azul
brown marrom
chartreuse verde-limão
chocolate chocolate
coral coral
crimson carmim
cyan ciano
darkblue azul-escuro
darkgreen verde-escuro
darkgrey cinza-escuro
darkorange laranja-escuro
fuchsia fúcsia
gold ouro
gray cinza
green verde
lime limão
lightgray cinza-claro
lightblue azul-claro
lightgreen verde-claro
maroon bordô
navy azul-marinho
olive verde-oliva
orange laranja
pink rosa
purple roxo
red vermelho
royalblue azul-royal
salmon salmão
silver prata
snow neve
teal azul-petróleo
white branco
yellow amarelo

Snippets

Propriedade Prefix
center meio
color cor
display exibição
font-family fonte família / família-de-fonte
font-size fonte tamanho / tamanho-da-fonte
height altura
letter-spacing espaço letras / espaçamento-entre-letras
line-height linha altura / altura-da-linha
margin margem
padding espaço interno / espaço-interno
position posição
text-align texto alinhar / alinhar-texto
text-shadow texto sombra / sombreamento-do-texto
transition transição
width largura