Projeto Calculadora – Parte 3: Estilizando a Interface com CSS

Introdução

Neste tutorial, terceira parte de como criar uma calculador com HTML, CSS e Javascript, vamos aprender a criar a estilizar a calculadora utilizando CSS. Vamos adicionar um visual moderno e atrativo, alinhando a calculadora no centro da página, aplicando estilos ao display e aos botões, e garantindo uma boa experiência de usuário com transições e efeitos de hover.

Passo 1: Estilizando o Body

Vamos começar estilizando o body da nossa página:

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
    font-family: 'Arial', sans-serif;
    margin: 0;
}

Aqui, usamos flex para centralizar a calculadora vertical e horizontalmente na tela. Também definimos uma altura de 100vh (viewport height) e um fundo cinza claro, além de remover as margens padrão.

Passo 2: Estilizando o Contêiner da Calculadora

Agora, vamos estilizar o contêiner da calculadora:

.calculator {
    background-color: #aa4444;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    width: 300px;
    padding: 20px;
    margin: 1px red solid;
}

A calculadora tem um fundo vermelho, bordas arredondadas, uma sombra suave e uma largura de 300px. Também adicionamos um padding interno e uma margem vermelha.

Passo 3: Estilizando o Display

Em seguida, estilizamos o display da calculadora:

.display {
    background-color: #131212;
    max-width: 91%;
    color: #fff;
    font-size: 2em;
    padding: 10px;
    border-radius: 5px;
    text-align: right;
    margin-bottom: 20px;
}

O display tem um fundo preto, texto branco, fonte grande, padding e bordas arredondadas. O texto está alinhado à direita e há uma margem inferior para separar dos botões.

Passo 4: Estilizando os Botões

Vamos estilizar os botões da calculadora:

.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

button {
    background-color: #e0e0e0;
    border: none;
    border-radius: 5px;
    padding: 20px;
    font-size: 1.2em;
    cursor: pointer;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #d0d0d0;
}

button:active {
    background-color: #c0c0c0;
}

Os botões são organizados em um grid com 4 colunas. Cada botão tem um fundo cinza claro, bordas arredondadas, padding, e um cursor de ponteiro ao passar o mouse. Também adicionamos transições para efeitos de hover e active.

Passo 5: Estilizando Botões Específicos

Finalmente, vamos aplicar estilos específicos para os operadores e o botão de igual:

button.operator {
    background-color: #ff9500;
    color: #fff;
}
button.operator:hover {
    background-color: #e08900;
}
button.operator:active {
    background-color: #cc7a00;
}
button.equal {
    background-color: #34c759;
    color: #fff;
    grid-column: span 2;
}
button.equal:hover {
    background-color: #2dbb4f;
}
button.equal:active {
    background-color: #27a645;
}

Os botões de operadores têm um fundo laranja e o botão de igual é verde. Eles também têm estilos para os estados de hover e active. O botão de igual ocupa duas colunas no grid.

Conclusão

Com este tutorial, estilizamos uma calculadora funcional em CSS, aprimorando não apenas a aparência, mas também a usabilidade da aplicação. A centralização com flexbox assegura que a calculadora esteja sempre visível e acessível, enquanto o uso de grids facilita a disposição dos botões de forma ordenada e consistente. Os efeitos de transição e hover adicionam um toque interativo, proporcionando uma experiência de usuário mais agradável e dinâmica. Este conhecimento pode ser aplicado a diversos projetos web, ajudando a criar interfaces mais atraentes e funcionais.