DEV Community

Marina
Marina

Posted on

Estruturas de estilização de página CSS

Estilização CSS:

Ferramentas que moldam o conteúdo da página

  • Width: largura } auto/ initial
  • heigt: altura } min/ max

  • inherit: mantém a medida já definida

  • margin: top/ left/ right/ bottom

  • padding: espaço do conteúdo interno com o externo

  • box sizing: retorna o elemento aos tamanhos pré-definidos

Cores no CSS

  • RGB: Valores entre 0 e 255 para definir os tons de vermelho, verde e azul, separados por virgula. Exemplo:
#rgb{
   color: rgb(250, 30, 70);
}
Enter fullscreen mode Exit fullscreen mode

O valor 250 representa o red,30 representa o green, e 70 o blue, que no caso resultaria em algo parecido como:

Imagem de tonalidade avermelhada

  • RGBA: Muito semelhante ao RGB, mas se adiciona o fator transparência que varia entre 0 e 1;
  • HEX: Hexadecimal definidas entre 0 e 9, e A até F, onde F é o valor mais alto, seguindo um padrão parecido do rgb. Exemplo:

00FF00 -> Verde
FF0000 -> Vermelho
0000FF -> Azul

#hex{
  color: #03BB76;
}
Enter fullscreen mode Exit fullscreen mode

Resultaria em algo como:

Imagem de tonalidade esverdeada

  • HSL (hue, saturation, lightness): definindo a cor através na sua matiz (0 vermelho, 120 verde, 240 azul), saturação (0% tom de cinza, 100% cor total), luminosidade (0% preto, 100% branco) - Existe também o HSLA, que conta com o fator alpha (0 a 1) para medir o nível de transparência. Exemplo:
#hsl{
  color: hsla(120, 100%, 50%, 1.0);
}
Enter fullscreen mode Exit fullscreen mode

Essa programação resultaria em uma cor completamente verde, mas pode buscar outros tons utilizando o circulo cromático HSL.

Circulo cromático


Fundos

  • background-color: cor sólida do fundo
  • background-image: referenciar imagem no fundo
  • linear-gradient: degrade linear
  • radial-gradient: degrade circular
  • repeating: repetir efeito

background-size: define o tamanho do fundo do elemento, acompanhada das configurações:

  • auto: ajuste automático
  • cover: cobrir todo o espaço do elemento
  • contain: redimensionar o conteúdo para que apareça a imagem completa/ sem cortes
  • valor: Definir o tamanho da imagem dentro do elemento

Repetição background-repeat: define o eixo a qual a imagem se repete:

  • repeat: máximo de repetições possíveis
  • repeat-x: só repete no eixo x (horizontal)
  • repeat-y: só repete no eixo y (vertical)
  • space: se repete em ambos os eixos sem ser cortada com espaços
  • round: se repete em todas as direções sem ser cortada, apenas redimensionada
  • no-repeat: sem repetições

Background-position: Posicionamento das imagens de fundo
center, left, right, x%,y%

background-attachment: Como a imagem vai se comportar de acordo com a janela do navegar

  • fixed: não sai do lugar
  • scroll: ela está fixada a um objeto
  • local: "rola" junto ao conteúdo

background-origin: Define a área de posicionamento da imagem

  • padding-box: canto de origem junto ao padding
  • border-box: a imagem começa junto a área externa da borda
  • content-box: inferior ao padding, alinhada ao conteúdo do elemento

background-flip: Define se a cor do elemento cobre ou não as bordas

  • padding-box: alinhada ao padding
  • border-box: alinhada a borda
  • content-box: preenche a área do conteúdo
  • clip-text: fundo no texto (a cor tem que ser transparente)

background-bland-mode: efeitos no fundo dos elementos


Bordas

  • border-width: tamanho que o contorno terá
  • border-style: tipo do contorno
  • border-color: cor do contorno
  • border-radius: Arredonda borda

border-image

  • source: definir o caminho da imagem
  • widht: largura da imagem da borda
  • repeat: controlar se a imagem repete ou não
  • outset: distancia da borda sobre o elemento
  • slice: dividir em regiões

Conteúdo (imagem ou vídeo)

object-fit : Como o conteúdo de um elemento se comporta na caixa estabelecida

  • fill: preencher todo o espeço e distorcer
  • contain: não fica distorcida, mas vai se encaixar nas medidas estabelecidas
  • cover: preencher todo o espaço sem distorcer
  • none: ignora as medidas do objeto pai e usa suas medidas originais
  • scale-down: menor configuração de imagem sem distorcer

object-position: Centralizar a imagem

  • eixo x e eixo y
  • left, right, center, top, bottom

Top comments (0)