Modelo de Caixa CSS e Margens

Introdução

No movimentado cenário digital de "Pet's House", um website dedicado a fornecer serviços premium de cuidados com animais de estimação, nosso protagonista, Jordan, um talentoso desenvolvedor web, é encarregado de aprimorar o layout e o design do website. A cena se passa em um escritório aconchegante com vista para o horizonte da cidade, onde Jordan está determinado a otimizar a experiência do usuário, aplicando meticulosamente os princípios do CSS Box Model e Margins.

Neste laboratório, usaremos propriedades como CSS Box Model e Margins para refinar o layout.

Entendendo o Modelo de Caixa

Pense em como podemos fazer com que os elementos apareçam onde os projetamos para aparecer.

Nesta etapa, você se aprofundará no CSS Box Model, um conceito fundamental que rege o layout das páginas web. Cada elemento em uma página é considerado uma caixa, consistindo em margens, bordas, preenchimento (padding) e o conteúdo real. Este modelo permite que os desenvolvedores controlem o espaçamento e o dimensionamento dos elementos com precisão.

Ao pressionar F12 para abrir as ferramentas de desenvolvedor, como mostrado na figura abaixo ao selecionar um elemento <li>, podemos ver o box model do elemento na seção Computed.

Em seguida, vamos apresentar três propriedades importantes do box model:

• border (borda)
• padding (preenchimento)
• margin (margem)

Borda

A propriedade abreviada CSS border define a borda de um elemento. Ela define os valores de border-width (largura da borda), border-style (estilo da borda) e border-color (cor da borda).

O formato de uso é o seguinte:

border: width style color;

Por exemplo, para adicionar uma borda a um elemento <p>, você pode usar o seguinte CSS:

Na página de animais de estimação, se os botões dentro do formulário tiverem borda, você pode adicionar o seguinte conteúdo ao arquivo style.css para estilizá-los:

form .btn {
  text-align: center;
  background-color: #e6e8e8;
  color: #000;
  font-weight: 700;
  letter-spacing: 2px;
  border: 2px solid #eaeaea;
}

Adicionalmente, podemos obter um efeito de cantos arredondados nos botões usando a propriedade border-radius. Veja como você pode adicioná-la:

form .txt-box {
  width: 100%;
  border-radius: 2px;
  border: 2px transparent;
  color: #3d3939;
}
form .btn {
  text-align: center;
  background-color: #e6e8e8;
  color: #000;
  font-weight: 700;
  letter-spacing: 2px;
  border: 2px solid #eaeaea;
  border-radius: 4px;
}

Na seção "Sobre Nós", para exibir um efeito de imagem circular, você pode, de fato, usar a propriedade border-radius. Veja como aplicá-la:

.circle {
  width: 950px;
  height: 650px;
}
.circle img {
  border-radius: 100%;
  width: 70%;
  height: 100%;
}

Padding (Preenchimento)

A propriedade abreviada CSS padding define a área de preenchimento em todos os quatro lados de um elemento de uma só vez.

O formato de uso é o seguinte:

padding: top right bottom left;

padding-top: top padding value;
padding-left: left padding value;
padding-right: right padding value;
padding-bottom: bottom padding value;

Por exemplo, para adicionar um preenchimento a um elemento <p>, você pode usar o seguinte CSS:

Adicione o seguinte ao arquivo style.css:

h1 {
  padding-bottom: 30px;
  padding-left: 0.5em;
  text-align: center;
  font-size: 4em;
}
h2 {
  font-size: 2.8vw;
  padding-bottom: 15px;
  text-transform: uppercase;
}
header {
  background-color: rgb(233, 174, 87);
  width: 100%;
  max-height: max-content;
  min-height: 1em;
  padding-top: 1%;
  padding-bottom: 1%;
  text-transform: uppercase;
}
.navigation li a {
  text-decoration: none;
  color: black;
  padding: 10px;
}
.container {
  padding: 0px;
  padding-top: 1em;
  width: 100%;
}
section {
  width: 100%;
  padding: 10% 0;
}
.cover-sect {
  padding: 5% 0;
}
.title-text {
  width: 40%;
  text-align: center;
  color: black;
  padding: 0 20px;
}
.service figcaption {
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
}
.contact-section p {
  padding-right: 2em;
  padding-left: 3em;
}

.form-box {
  padding-top: 1em;
}

form .form-content {
  padding: 0.8em 0;
}

form .txt-box {
  width: 100%;
  padding: 0.7em 0;
  border-radius: 2px;
  border: 2px transparent;
  color: #3d3939;
}
form .btn {
  text-align: center;
  background-color: #e6e8e8;
  color: #000;
  font-weight: 700;
  letter-spacing: inherit;
  border: 2px solid #eaeaea;
  border-radius: 4px;
  padding: 0.7em;
}

Margin (Margem)

A propriedade abreviada CSS margin define a área de margem em todos os quatro lados de um elemento.

O formato de uso é o seguinte:

margin: top right bottom left;

margin-top: top margin value;
margin-left: left margin value;
margin-right: right margin value;
margin-bottom: bottom margin value;

Por exemplo, para adicionar uma margem a um elemento <p>, você pode usar o seguinte CSS:

Adicione o seguinte ao arquivo style.css:

* {
  margin: auto;
}
.logo-section {
  width: 10%;
  margin-left: initial;
}
.logo {
  margin-left: 0.8em;
  max-width: 60%;
}
section div {
  width: 50%;
  margin: 0 auto;
}
.cover-sect {
  margin-top: 0px;
  padding: 5% 0;
}
.title-text {
  width: 40%;
  text-align: center;
  color: black;
  margin: auto;
  padding: 0 20px;
}
.circle img {
  border-radius: 100%;
  width: 70%;
  height: 100%;
  margin-left: 15%;
}
.services {
  width: 90%;
  margin: 20px auto;
}
form .txt-box {
  margin-top: 0.3em;
  width: 100%;
  padding: 0.7em 0;
  border-radius: 2px;
  border: 2px transparent;
  color: #3d3939;
}
footer div {
  margin-right: 2em;
}

footer span {
  text-align: center;
  margin-left: 2em;
}

footer .company-info {
  margin-left: 20em;
}

footer .contact-us {
  margin-left: 25em;
}

Box Shadow (Sombra da Caixa)

Na página do pet, para adicionar um efeito de sombra ao botão de envio no formulário, você pode usar a propriedade box-shadow.

A propriedade box-shadow é usada para adicionar uma ou mais sombras de caixa, criando um efeito visual como se a caixa tivesse uma sombra.

Sua sintaxe é a seguinte:

box-shadow: h-shadow v-shadow blur spread color inset;

O significado de cada valor é descrito abaixo:

Adicione o seguinte ao arquivo style.css:

form .btn {
  text-align: center;
  background-color: #e6e8e8;
  color: #000;
  font-weight: 700;
  letter-spacing: inherit;
  border: 2px solid #eaeaea;
  box-shadow: 0px 0px 10px 1px #29393e;
  border-radius: 4px;
  padding: 0.7em;
}

Nota: Embora tenhamos coberto muitas propriedades CSS, é compreensível que o layout da página ainda possa parecer desorganizado. Não se preocupe, apresentaremos várias técnicas de layout de página mais tarde. Essas técnicas ajudarão a organizar e estruturar a página de forma mais eficaz, incluindo Flexbox, Grid e outros modelos de layout CSS. Esses modelos fornecem ferramentas poderosas para projetar layouts responsivos, flexíveis e bem organizados.

Resumo

Neste laboratório, você viajou pelas complexidades do Modelo de Caixa CSS e Margens com Jordan, aprimorando o layout e o design do site "Pet's House". Começando com a compreensão dos componentes do modelo de caixa — margens, bordas, preenchimento (padding) e conteúdo — você aplicou esses princípios para melhorar a estrutura e a interface do usuário do site. Ao manipular as margens, você aprendeu a controlar o espaçamento entre os elementos de forma eficaz. Ajustes de preenchimento foram feitos para garantir que o conteúdo dentro dos elementos seja apresentado de forma clara e atraente. Este laboratório não apenas aprimorou suas habilidades em CSS, mas também enfatizou a importância do design de layout meticuloso na criação de experiências web envolventes e fáceis de usar.