Paramos nosso site já tendo configurado o fundo da aplicação. Agora iremos criar o círculo central usando CSS.
Relembrando nosso HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Exercício para respiração</title>
</head>
<body>
<h1>Exercício para respiração</h1>
<div class="container" id="container">
<div class="circle"></div>
<p id="text">Inspire...</p>
<div class="pointer-container">
<span class="pointer"></span>
</div>
<div class="gradient-circle"></div>
</div>
<script src="main.js"></script>
</body>
</html>
Agora iremos configurar tudo que está dentro da classe container.
Iremos transformar esse container em um flex container para podermos posicionar mais facilmente os elementos na tela. Transformaremos o container em um flex container e centralizaremos tudo ao centro usando as propriedades align-items e justify-content atribuindo os valores center para essas propriedades, juntamente com a margem automática para que tudo fique ao centro:
* {
box-sizing: border-box;
}
body {
color: #fff;
font-family: 'Quicksand', sans-serif;
background: #224941 url('./img/bg5.jpg') no-repeat center center/cover;
min-height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
}
.container {
display: flex;
align-items: center;
justify-content: center;
margin: auto;
}
Agora nossa mensagem de inspire estará ao centro da tela:
Percebam no HTML que o parágrafo que contém essa mensagem está dentro do .container, e transformando esse container em um flex container e centralizando tudo, a mensagem ficou centralizada na tela.
Agora iremos criar nosso círculo interno. Vamos dizer que esse container tem uma altura de 300px e uma largura de 300px. Para vocês visualizarem melhor o que tou fazendo, vou adicionar um fundo preto a esse container só para ficar mais fácil de ver como essa altura e essa largura delimitam o espaço do meu container:
.container {
display: flex;
align-items: center;
justify-content: center;
margin: auto;
height: 300px;
width: 300px;
background-color: #000;
}
Nosso site fica assim:
Agora eu preciso alterar a propriedade position desse meu container para o valor relative, pois irei posicionar os elementos nesse container pai de acordo com o espaço que ele ocupa no meu site. Dúvidas sobre essa questão de posicionamento podem ser tiradas nestes chats aqui:
.container {
display: flex;
align-items: center;
justify-content: center;
margin: auto;
height: 300px;
width: 300px;
position: relative;
background-color: #000;
}
Como eu vou precisar aumentar e diminuir o círculo de acordo com o movimento de inspiração e expiração, preciso adicionar o valor scale(1), que é o padrão, para a propriedade transform dentro do meu container. Vou apagar a cor de fundo pois ela só foi colocada para vermos o espaço que meu container está ocupando na tela. Dúvidas sobre a propriedade transform podem ser tiradas aqui:
CSS transform property.container {
display: flex;
align-items: center;
justify-content: center;
margin: auto;
height: 300px;
width: 300px;
position: relative;
transform: scale(1);
}
Agora vamos mexer na div que tem a classe circle, que é ela que irá ter uma cor de fundo, que será um verde bem escuro, quase preto, e irá representar meu círculo principal de cor mais escura. Eu quero que essa div circle ocupe todo o espaço disponível no container pai, ou seja, os 300px de largura e de altura, então as propriedades height e width de circle serão iguais a 100%, pois assim eu espalho minha div filha totalmente na div pai que é a div container:
.circle {
background-color: #010f1c;
height: 100%;
width: 100%;
}
Dando uma olhada no site agora:
Percebam que temos um probleminha. Vou criar uma borda no meu container pai, na cor vermelha, para vocês verem o que tá acontecendo aqui:
.container {
display: flex;
align-items: center;
justify-content: center;
margin: auto;
height: 300px;
width: 300px;
position: relative;
transform: scale(1);
border: 2px solid red;
}
.circle {
background-color: #010f1c;
height: 100%;
width: 100%;
}
O site fica assim:
Notem que minha div circle tenta ocupar todo o espaço disponível na div pai, o container, mas ela tem que dividir espaço com seus elementos irmãos, e um deles é o parágrafo que contém o texto "inspire...". Preciso que esse parágrafo fique dentro da div circle.
Eu ajusto isso mudando o position do circle para absolute, dessa forma ele irá se posicionar de forma absoluta em relação ao elemento pai, ocupando todo o espaço disponível esquecendo seus irmãos. Vamos posicionar o elemento de forma absoluta e fazer com que ele comece no ponto 0 no topo e à esquerda:
.circle {
background-color: #010f1c;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
Agora nosso site está assim:
Notem que agora o circle ocupou realmente todo o espaço disponível. Mas ele ficou por cima do parágrafo com o texto. Vou fazer com que o circle fique "por baixo" dos outros elementos alterando a propriedade z-index para um número negativo. Dessa forma ele fica por baixo de outros elementos irmãos.
Vamos também enfim transformar nosso circle em um círculo mudando a propriedade border-radius para 50%. E já podemos apagar a borda vermelha do elemento pai.
.container {
display: flex;
align-items: center;
justify-content: center;
margin: auto;
height: 300px;
width: 300px;
position: relative;
transform: scale(1);
}
.circle {
background-color: #010f1c;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
border-radius: 50%;
}
Agora nosso círculo está formado, com o texto por cima dele:
Pronto, desenhamos nosso círculo interno.
Amanhã prosseguiremos desenhando nosso círculo externo e o ponteiro que irá ditar o ritmo da respiração no aplicativo.
