Criando Badges

 


Não é difícil ver projetos e perfis pela internet que usam badges, realmente elas nos dão um visual mais atrativo e destaque a tecnologias que usamos ou nossas redes sociais por exemplo.

Neste artigo vou ensinar a fazer badges estáticas simples, usando apenas uma URL. Mãos a obra!


Entendendo a URL

Vamos usar o link abaixo como exemplo:

https://img.shields.io/badge/YouTube-%23FF0000.svg?style=for-the-badge&logo=YouTube&logoColor=white

O link gera esta badge:



Vamos analisar esta URL mais de perto


URL

Texto

-

Cor Fundo

Formato Imagem

https://img.shields.io/badge/

YouTube

-

%23FF0000

.svg?



Estilo

&

-

Ícone

-

Cor Ícone

style=for-the-badge

&

logo=

YouTube

&logoColor=

white


Vamos alterar os seguintes campos da url:

  • Texto
  • Cor Fundo/Ícone
  • Estilo
  • Ícone


Texto

Não é permitido usar “espaço” e nem “-” para separar as palavras, uma opção é em vez de escrever:

“You Tube”, escreva “YouTube”.


Cor

A url aceita vários tipos de cor, vou mostrar as duas mais comuns: Hexadecimal e CSS Named Color.


Hexadecimal


É um código de cor que começa sempre com “#” seguido de 6 caracteres.

Por exemplo o código #FFFFFF é a cor Branca

O google possui um gerador de código hex, basta digitar na busca “cor hex” e escolher a cor





O problema é que nossa url não aceita “#” em vez disso temos que usar “%23” que é o código que representa a “#”. 


Então não esqueça de substituir o “#” por “%23”.


Exemplo: cor branca: “%23FFFFFF”


CSS Named Color

Basicamente é o nome da cor em inglês. Exemplo: “black”, “white”, “blue”, “green’…


Segue abaixo uma tabela com vários nomes de cor que podemos usar.

https://www.w3.org/wiki/CSS/Properties/color/keywords


Este tipo de cor é mais simples de usar, o ponto negativo é não poder variar o tom das cores como acontece no tipo hexadecimal.


Cor do texto


A cor do texto é automática e muda conforme a cor de fundo. Para fundo de cor clara, o texto é preto e para fundo escuro, o texto é branco.


Estilo


Abaixo alguns estilos que podemos usar na url.


Estilo

Exemplo

Observações

style=plastic

Plástico

style=flat

Canto arredondado

style=flat-square

Canto reto

style=for-the-badge

Grande

style=social

Não muda a cor de fundo.


Ícones


Escolha o ícone no site abaixo


https://simpleicons.org





Ao encontrar o ícone copie o nome dele igual aparece no site.


Caso o nome tenha mais de uma palavra separada por “espaço”, elimine o “espaço”. Exemplo:





“Buy Me A Coffee” deve ser colocado na url desta forma: “BuyMeACoffee”.


O site também dá uma sugestão de cor para cada ícone, logo abaixo do nome, mais podemos usar a cor que quisermos.


Documentação

O site abaixo nos fornece todo o suporte para gerar as badges e contém toda a documentação explicando como usar.

 https://shields.io/ 


Agora estamos prontos para fazer nossas badges personalizadas, aproveite!



Comentários

Postar um comentário

Postagens mais visitadas deste blog

Testes unitários com Jest no Node.JS

Imagem
Uma parte importante do nosso trabalho como desenvolvedor é fazer testes. Durante a construção do nosso código mesmo sem perceber fazemos testes o tempo todo. O grande problema é que quando nosso código vai se tornando grande, com vários arquivos  e funções, fica mais difícil testar tudo. Muitas vezes um código que estamos fazendo, pode causar um erro em uma outra parte do código que fizemos antes. A solução é automatizar nossos testes, podemos fazer isso por meio de um framework. Hoje vou te ensinar a como usar o Jest para fazer seus testes. A configuração do Jest é fácil e vai fazer você ganhar tempo, em segundos toda sua aplicação será testada. Instalando o Jest Antes de começar quero lembrar que todos os arquivos deste tutorial, estão disponíveis para download no fim do artigo Vou iniciar um projeto novo, com o código: npm init -y Com o arquivo " pakage.json " criado vamos a instalação do Jest como dependência. npm install jest –save-dev Compati...
Leia mais

EsLint no Visual Studio Code - Tutorial Rápido!

Imagem
  Para que serve? O EsLint é uma ferramenta que nos ajuda a automatizar a padronização do nosso código. Com ele criamos regras, encontramos códigos fora do padrão e conseguimos corrigir tudo de forma rápida. Por que usar?   É importante seguir o mesmo padrão de código durante o projeto, muitas vezes não trabalhamos sozinhos, o que acaba variando ainda mais os estilos de código. O EsLint acaba com esse problema, pois todos vão manter o mesmo padrão e regras. Instalando   Acesse a pasta raiz do seu projeto, ou crie um novo projeto usando o comando npm init -y Agora que temos o arquivo " pakage.json "  na pasta raiz do nosso projeto. Podemos fazer a instalação do EsLint como desenvolvimento, desta forma quando nosso projeto for para produção os arquivos do EsLint não precisam ir com ele. npm eslint --save-dev Configurando Para iniciar a configuração do EsLint precisamos estar na pasta raiz do projeto. Vamos usar um dos comandos abaixo...
Leia mais

CSS Flex box e Grid - Saiba de uma vez por todas, como alinhar e posicionar elementos no HTML.

Imagem
CSS - Flex-Box e Grid Se você é aquela pessoa que quando precisa alinhar itens no HTML, fica fazendo tentativas no CSS até dar certo. Este artigo é para você. No CSS o flex-box torna os itens flexíveis para que possamos alinha-los e posicioná-los da forma que desejarmos. O GRID transforma um conjunto de itens da nossa página em uma tabela, onde cada item pode ser posicionado em determinada linha e coluna. Temos um desafio para você. Aprender na prática é sempre melhor, no final deste artigo temos um desafio. Que tal alinhar os produtos de uma loja virtual usando "flex-box" e "grid"? Continue lendo e no fim baixe os arquivos do desafio!
Leia mais