CSS: Desenvolvimento rápido de botões sem imagem

Com tantas ferramentas e técnicas para conhecer, muitas vezes torna-se difícil para designers e desenvolvedores acompanharem seus projetos e gerenciar seus trabalhos.

CSS: Desenvolvimento rápido de botões sem imagem

Com tantas ferramentas e técnicas para conhecer, muitas vezes torna-se difícil para designers e desenvolvedores acompanharem seus projetos e gerenciar seus trabalhos. Uma das coisas que devemos levar em consideração no fluxo de trabalho diário são as facilidades que a internet nos proporciona. Geradores online podem ser extremamente úteis para a criação de pequenos detalhes.

Apresentarei um recurso muito interessante e de fácil manuseio que podemos adotar no desenvolvimento de ferramentas para web. O CSS Generator é uma ferramenta útil, gratuita e online que pode ajudá-lo a reduzir o tempo na criação de botões sem o uso de imagens e disponibilizando o código em CSS para implementação.

CSS: Desenvolvimento rápido de botões sem imagem

Figura 1 - apresentação do botão

Painel de controle dos estilos

Neste painel configuramos as propriedades do CSS e quando gerado o código será dado suporte aos navegadores Mozilla (Firefox), Webkit (Safari / Chrome / Konqueror), o Opera e o IE9. Embora o navegador Mozilla e Webkit ainda exija a inserção dos prefixos -moz- e -webkit- (nota Mozilla Firefox 4.0 + não requer mais o -moz- prefixo).

1a Parte - Criando o elemento

  • Button Text - Valor que será incluído no botão;
  • CSS Class Name - Nome da classe que será inserida no código;
  • Font - Família da fonte;
  • B - Inserir a fonte em negrito;
  • Show style tag? - Apresentação ou não da tag style no código;
  • Font Size - Tamanho da fonte;
  • Border Radius - Arredondamento da borda;
  • Border Size - Espessura da borda
  • Vertical Size - Altura;
  • Horizontal Size - Largura.
CSS: Desenvolvimento rápido de botões sem imagem

Figura 2 - Criando o elemento

2a Parte - Propriedade da Sombra

Quando assinalada esta propriedade permite aos designers facilmente implementar sombras múltiplas (externo ou interno) nos elementos especificando valores para cor, tamanho e blur. É um efeito muito interessante e de grande utilidade já que substitui imagens.

  • Vertical Position - Eixo vertical para o posicionamento da sombra;
  • Horizontal Position - Eixo horizontal para o posicionamento da sombra;
  • Blur Radius - Efeito de ofuscamento;
  • Spread Radius - Aumenta o efeito da sombra sem criar ofuscamento.
CSS: Desenvolvimento rápido de botões sem imagem

Figura 3 - propriedade da sombra do elemento

3a Parte - Propriedades da sombra do texto

Essas propriedades do CSS podem tornar o texto mais legível se o contraste entre o primeiro plano e o fundo for pequeno.

  • Vertical Position - Eixo vertical para o posicionamento da sombra;
  • Horizontal Position - Eixo horizontal para o posicionamento da sombra;
  • Blur Radius - Efeito de ofuscamento da sombra;
CSS: Desenvolvimento rápido de botões sem imagem

Figura 4 - propriedade sombra do texto

4a Parte - Paleta de cores

Para facilitar a adequação ao seu layout, a ferramenta proporciona a opção de temas pré-definidos, no quesito cor, além da possibilidade de colocar transparente ou sólido o botão.

CSS: Desenvolvimento rápido de botões sem imagem

Figura 5 - Paleta de cor

Após toda a etapa de configuração do botão, podemos verificar o código gerado clicando no botão, conforme figura abaixo.

CSS: Desenvolvimento rápido de botões sem imagem

Figura 6 - código gerado

Autor: Mauricio Mello é Diretor de Novos Negócios na empresa Proevo Soluções em TI - www.proevo.com.br

Review TV 4K TCL: Android TV é top!

Analisamos a P715 da TCL. SmartTv de 2020 que chega para ser um excelente custo benefício entre os produtos 4K. Seu trunfo é contar com Android TV, sistema que funciona bem e tem muitos aplicativos.

Comentários

Conteúdo relacionado

Samsung Galaxy S21 com Exynos 2100 é bom para jogos? - Roda Liso
Roda Liso

Samsung Galaxy S21 com Exynos 2100 é bom para jogos? - Roda Liso

Analisamos o Galaxy S21 em onze diferentes jogos de Play Store, dentre eles, Free Fire, Fortnite, PUBG, Call of Duty Mobile, Genshin Impact e outros. Como é jogar com um Galaxy topo de linha?

Chefe da Ericsson critica proibição sueca do 5G da Huawei
Mercado Tech

Chefe da Ericsson critica proibição sueca do 5G da Huawei

Borje Ekholm diz que a ação contra seu rival prejudica a livre concorrência e o comércio.

Ericsson comprará Cradlepoint, empresa de rede sem fio dos Estados Unidos, por US $ 1,1 bilhão
Tecnologia

Ericsson comprará Cradlepoint, empresa de rede sem fio dos Estados Unidos, por US $ 1,1 bilhão

Foi anunciado hoje pela Ericsson que a empresa realizou a compra da companhia de redes sem fio dos EUA Cradlepoint. Confira quais são as intenções por trás.

Claro inaugura a primeira rede 5G DDS do Brasil em parceria com a Ericsson
Tecnologia

Claro inaugura a primeira rede 5G DDS do Brasil em parceria com a Ericsson

Claro anuncia hoje a chegada da internet móvel 5G para os seus clientes. Agora você poderá navegar com uma conexão até 12 vezes mais rápida que o 4G!

EUA considera a aquisição da Ericsson na luta contra a Huawei
Mercado Tech

EUA considera a aquisição da Ericsson na luta contra a Huawei

Por mais difícil que seja para os EUA admitirem, o 5G da Huawei é um dos mais sofisticados do mundo. Além disso é mais barato e se não bastasse isso, a empresa também possui mais variedade de equipamentos em seu portfólio.

O Adobe Flash realmente vai morrer desta vez
Tecnologia

O Adobe Flash realmente vai morrer desta vez

Confira o que a Adobe declarou recentemente sobre a sua plataforma Flash, tão utilizada no passado, mas que agora está obsoleta.

Ericsson mostra liderança no mercado de equipamentos de rede 5G, deixando a Huawei pra trás...
Mercado Tech

Ericsson mostra liderança no mercado de equipamentos de rede 5G, deixando a Huawei pra trás...

... segundo a Ericsson, é ela quem lidera o segmento de equipamentos de rede 5G e não a Huawei, como muitos, inclusive eu, falam por aí. Mas estamos aqui para trazer a notícia.

Samsung repensa sobre sua ida ao MWC (Mobile World Congress) 2020 devido ao Coronavirus
Smartphones

Samsung repensa sobre sua ida ao MWC (Mobile World Congress) 2020 devido ao Coronavirus

Após diversos surtos do Coronavirus em diversos países do mundo, a Samsung, desenvolvedora de smartphones, esta repensando a sua ida ao MWC (Mobile World Congress) 2020.

Futurecom 2019: Ericsson demonstra como o 5G pode transformar nossas vidas em diversos setores
Ciência

Futurecom 2019: Ericsson demonstra como o 5G pode transformar nossas vidas em diversos setores

A empresa promoveu uma demonstração do 5G em 10 áreas diferentes, com destaque para: Saúde, Segurança, Mobilidade Urbana, Educação, Indústria 4.0 e Entretenimento