Utilizar códigos para criar imagens é sempre a melhor opção. Os benefícios de utilizar códigos são grandes, melhoramos o carregamento das páginas, facilitamos a manutenção e evitamos o trabalho de recortar, salvar e nomear os arquivos criados em ferramentas gráficas.
Quero mostrar neste post algo simples mas muito eficaz na hora de criar setas no formato de triângulo em menus, tooltips e onde mais possam ser inseridos na sua interface, apenas utilizando HTML e CSS.
Neste exemplo vamos criar um tooltip:
CSS
.tooltip { background: #f90; color: #fff; padding: 15px; position: relative; width: 200px; } .tooltip:before { width: 0; height: 0; border: 10px solid transparent; border-right-color: #f90; content: ""; left: -20px; position: absolute; }
HTML
Veja como ficou:
Simples assim, mas como isso funciona? Bom o triângulo é formado pela borda que criamos no nosso CSS na classe .tooltip:before temos sempre que dizer que a altura e largura tenham tamanho de 0px, a quantidade de pixels que colocamos na borda é o que ira dizer qual o tamanho do triangulo, o elemento border-right-color cria o formato, a ponta do triângulo sempre está oposta ao lado do elemento, então se queremos que a seta aponte para a direita escrevemos border-left-color, se quisermos que a ponta fique para cima colocamos border-bottom-color e assim sucessivamente. Com esta dica fica muito mais fácil criar elementos apenas utilizando códigos.
Pseudo-elemento :before ou :after
Em nosso exemplo utilizamos o pseudo-elemento :before você também pode utilizar o :after para quem não sabe esses elementos criam uma especie de <span> onde dizemos que todo os elementos que estão dentro do CSS desta classe fique dentro do elemento content:””; . Não irei me aprofundar nessa questão mas caso queira ler um texto detalhado sobre o tema acesse o link: http://tableless.com.br/como-usar-before-after/
Palheta de cor do site Netshoes
Talvez você tenha deparado com aquelas cores cortadas na diagonal para selecionar a cor do tênis no e-commerce Netshoes, e é claro que eles não fazem isso com imagens pois no sistema administrativo essa seleção deve ser fácil e rápida.
Mas com CSS é muito fácil fazer isso, e segue o mesmo principio do código anterior:
.paleta-cores { width: 0; height: 0; border: 50px solid; border-color: #f00 #000 #000 #f00; }
A lógica é a mesma, alterando o tamanho do border nosso quadrado fica maior, e modificando o border-color podemos mudar as cores e a forma como são inseridas.
Agora é só utilizar esses exemplos e dar adeus aos arquivos de imagens com este formato em seus projetos.
Gostou desse artigo? Dá uma forcinha!
A única forma que consigo remunerar meu site é através de anúncios, não esqueça de conferir!