Ícone Modelos CSS

Modelos CSS de ícones funcionais estilizadoss para cartões e controlos clicáveis

Cada ícone envolve decisões discretas: as suas dimensões, a forma que surge por trás e o que acontece quando o cursor passa por cima. Os modelos CSS de ícones já trazem essas decisões definidas. Os blocos variam desde cartões de serviços e linhas de contacto até botões com ícones. Classes partilhadas estilizam cada item de um grupo com consistência, para que um novo cartão assuma automaticamente o mesmo tamanho e a mesma cor.

Regras integradas em cartões típicos

Os blocos desta categoria costumam incluir regras como estas:

1. uma largura e altura idênticas para cada ícone do grupo, para que nenhum pareça involuntariamente maior;
2. um círculo preenchido ou com contorno atrás do símbolo, ou um quadrado com cantos arredondados;
3. um espaçamento fixo entre o ícone e o respetivo título que mantém as linhas alinhadas quando os textos quebram em várias linhas;
4. uma cor de destaque associada à paleta do tema, permitindo que todo o conjunto se atualize em simultâneo.

Estas regras aplicam-se igualmente a ícones SVG e a glifos de fontes de ícones. Numa linha de contactos, todos os ícones de canais partilham o mesmo tamanho. A linha de e-mail pode receber um destaque mais vivo caso seja o seu canal principal. A espessura do traço também importa, uma vez que ícones de linha fina perdem nitidez nos ecrãs de telemóveis muito antes dos ícones preenchidos.

Células repetidas e estados clicáveis

No Nicepage, o elemento Grid Repeater Element repete o esquema e o estilo das suas células. Cada coluna mantém o seu próprio ícone e texto. Altere a cor do círculo numa célula e as restantes seguirão o mesmo padrão. Uma grelha de serviços estática raramente necessita de mais do que isso. Já os ícones clicáveis para pesquisa, partilha ou fecho de painéis são diferentes, e o modelo deve definir estes estados:

1. um aspeto padrão equilibrado junto ao texto circundante;
2. um estado hover que altera a cor ou o fundo assim que o cursor se aproxima;
3. um estado ativo ou de foco para o próprio clique e para utilizadores de teclado;
4. um estado destacado que assinala a opção atual, como um filtro selecionado.

Mudar a cor de grupos inteiros de uma só vez

Com as cores do tema nas definições do site do Nicepage, alterar um destaque atualiza todos os ícones que o utilizam nas páginas do projeto. Símbolos de aviso e confirmação devem ficar fora desse destaque, combinando com os vizinhos em tamanho e utilizando a sua própria cor. As dimensões também podem mudar por modo responsivo, encolhendo um símbolo decorativo grande em telemóveis. Quando os controlos visuais não chegam, o Custom CSS Code adiciona uma regra a um único elemento, a uma só página ou a todo o site.

Um modelo de grelha de serviços pode funcionar muito bem com um único estilo de ícone estático. Para botões e interruptores, verifique os estados antes da paleta, pois um controlo que não reage ao clique parece avariado.