review-css-layout-and-effects
Voltar à Trilha

Revisão de Layouts e Efeitos CSS

Propriedade CSS Overflow

  • Definição: Overflow refere-se à forma como os elementos lidam com conteúdo que excede, ou "transborda", o tamanho do elemento contêiner. Overflow é bidimensional.
  • overflow-x: O eixo x determina o transbordamento horizontal.
  • overflow-y: o eixo y determina o transbordamento vertical.
  • overflow: Propriedade abreviada para overflow-x e overflow-y. Se for dado um valor, ambos os overflows o utilizarão. Se forem dados dois valores, o overflow-x usará o primeiro e o overflow-y usará o segundo.
<link rel="stylesheet" href="styles.css">
<div class="overflow-box">
  This is very long content that will overflow horizontally and vertically.
  <br />
  This is very long content that will overflow horizontally and vertically.
  <br />
  This is very long content that will overflow horizontally and vertically.
  <br />
  This is very long content that will overflow horizontally and vertically.
  <br />
  This is very long content that will overflow horizontally and vertically.
  <br />
  This is very long content that will overflow horizontally and vertically.
</div>
.overflow-box {
  width: 140px;
  height: 70px;
  border: 2px solid black;
  overflow-x: auto;
  overflow-y: auto;
  white-space:nowrap;
}

Propriedade CSS Transform

  • Definição: Esta propriedade permite que você aplique várias transformações aos elementos, como rotacionar, escalar, inclinar ou transladar (mover) eles no espaço 2D ou 3D.
  • Função translate(): Esta função é usada para mover um elemento de sua posição atual.
  • Função scale(): Esta função permite que você altere o tamanho de um elemento.
  • Função rotate(): Esta função permite que você gire um elemento.
  • Função skew(): Esta função permite que você distorça um elemento.
  • Transformações e Acessibilidade: Se você estiver usando transform para ocultar ou revelar conteúdo, certifique-se de que o conteúdo ainda seja acessível para leitores de tela e navegação por teclado. O conteúdo oculto deve estar realmente oculto, como ao usar display: none ou visibility: hidden, em vez de simplesmente ser movido visualmente para fora da tela.
<link rel="stylesheet" href="styles.css">
<div class="container">
  <div class="transform-box translate">Translate</div>
  <div class="transform-box scale">Scale</div>
  <div class="transform-box rotate">Rotate</div>
  <div class="transform-box skew">Skew</div>
</div>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.transform-box {
  width: 100px;
  height: 100px;
  background: coral;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* translate() */
.translate {
  transform: translateX(20px);
}

/* scale() */
.scale {
  transform: scale(1.2);
}

/* rotate() */
.rotate {
  transform: rotate(15deg);
}

/* skew() */
.skew {
  transform: skew(10deg, 5deg);
}

O Modelo de Caixa

  • Definição: No modelo de caixa do CSS, todo elemento é cercado por uma caixa. Essa caixa consiste em quatro componentes: a área de conteúdo, padding, border e margin.
  • Área de Conteúdo: A área de conteúdo é a parte mais interna da caixa. É o espaço que contém o conteúdo real de um elemento, como texto ou imagens.
  • padding: O padding é a área imediatamente após a área de conteúdo. É o espaço entre a área de conteúdo e a borda de um elemento.
  • border: A borda é a borda externa ou contorno de um elemento no modelo de caixa CSS. É o limite visual do elemento.
  • margin: A margem é o espaço fora da borda de um elemento. Ela determina a distância entre um elemento e outros elementos ao seu redor.
<link rel="stylesheet" href="styles.css">
<div class="box-model">Content</div>
.box-model {
  width: 120px;
  background: lightblue;
  padding: 16px;
  border: 4px solid teal;
  margin: 20px;
  text-align: center;
}

Colapso de Margem

  • Definição: Esse comportamento ocorre quando as margens verticais de elementos adjacentes se sobrepõem, resultando em uma única margem igual à maior das duas. Esse comportamento se aplica apenas às margens verticais (superior e inferior), não às margens horizontais (esquerda e direita).

Os Valores da Propriedade content-box e border-box

  • Propriedade box-sizing: Esta propriedade é usada para determinar como o width e o height finais são calculados para um elemento HTML.
  • Valor content-box: No modelo content-box, o width e o height que você define para um elemento determinam as dimensões da área de conteúdo, mas eles não incluem o padding, border ou margin.
  • Valor border-box: Com border-box, a width e a height de um elemento incluem a área de conteúdo, o padding e o border, mas não incluem o margin.
<link rel="stylesheet" href="styles.css">
<div class="sizing-box content-box">Content-box</div>
<div class="sizing-box border-box">Border-box</div>
.sizing-box {
  width: 150px;
  padding: 10px;
  border: 4px solid teal;
  margin-bottom: 10px;
  background: peachpuff;
  text-align: center;
}

.content-box {
  box-sizing: content-box;  
}

.border-box {
  box-sizing: border-box;
  background: lightgreen;
}

Reset de CSS

  • Definição: Um reset de CSS é uma folha de estilo que remove toda ou parte da formatação padrão que os navegadores aplicam aos elementos HTML. Opções de terceiros para resets de CSS incluem sanitize.css e normalize.css.

Propriedade CSS Filter

  • Definição: Esta propriedade pode ser usada para criar vários efeitos como desfoque, mudança de cor e ajuste de contraste.
  • Função blur(): Esta função aplica um desfoque Gaussiano ao elemento. A quantidade é definida em pixels e representa o raio do desfoque.
  • Função brightness(): Esta função ajusta o brilho do elemento. Um valor de 0% deixará o elemento completamente preto, enquanto valores acima de 100% aumentarão o brilho.
  • Função contrast(): Esta função ajusta o contraste do elemento. Um valor de 0% deixará o elemento completamente cinza, 100% fará o elemento aparecer normalmente e valores maiores que 100% aumentarão o contraste.
  • Função grayscale(): Esta função converte o elemento para escala de cinza. A quantidade é definida como uma porcentagem, onde 100% é completamente em escala de cinza e 0% deixa a imagem inalterada.
  • Função sepia(): Esta função aplica um tom sépia ao elemento. Como o grayscale, ela usa um valor percentual.
  • Função hue-rotate(): Esta função aplica uma rotação de matiz ao elemento. O valor é definido em graus e representa uma rotação ao redor do círculo de cores.
<link rel="stylesheet" href="styles.css">
<div class="container">
  <img class="filter blur" src="https://cdn.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="Blur" />
  <img class="filter brightness" src="https://cdn.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="Brightness" />
  <img class="filter contrast" src="https://cdn.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="Contrast" />
  <img class="filter grayscale" src="https://cdn.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="Grayscale" />
  <img class="filter sepia" src="https://cdn.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="Sepia" />
  <img class="filter hue" src="https://cdn.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="Hue Rotate" />
</div>
.container {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.filter {
  width: 120px;
}

/* blur() */
.blur {
  filter: blur(3px);
}

/* brightness() */
.brightness {
  filter: brightness(130%);
}

/* contrast() */
.contrast {
  filter: contrast(150%);
}

/* grayscale() */
.grayscale {
  filter: grayscale(100%);
}

/* sepia() */
.sepia {
  filter: sepia(100%);
}

/* hue-rotate() */
.hue {
  filter: hue-rotate(90deg);
}