Cores

Existem várias formas de se definirem cores utilizando o CSS.

Cores Pré-definidas

Os navegadores disponibilizam cerca de 140 cores pré-definidas que podem ser referenciadas utilizando nomes, como por exemplo blue, red, lightgreen.

A palavra-chave transparent em CSS é usada para definir a transparência completa de um elemento ou cor. Quando aplicada, faz com que o elemento ou a cor se torne totalmente invisível, permitindo que o conteúdo ou o fundo atrás dele seja visível. Isso é útil para criar sobreposições ou para ocultar elementos sem removê-los do layout.

A propriedade opacity em CSS controla o nível de transparência de um elemento. O valor de opacity varia de 0 a 1, onde 0 representa total transparência (o elemento é invisível) e 1 representa total opacidade (o elemento é completamente visível). Valores intermediários, como 0.5, fazem o elemento ser parcialmente transparente.

A palavra reservada currentColor refere-se à cor atual do texto de um elemento. Ao usar currentColor, você pode garantir que a cor aplicada a propriedades como border, background, ou box-shadow corresponda à cor do texto do elemento. Isso é útil para manter a consistência nas cores de um design e facilita a manutenção de estilos, pois qualquer alteração na cor do texto também será refletida automaticamente nas outras propriedades que usam currentColor.

RGB e RGBA

O modelo de cores RGB (Red, Green, Blue) é utilizado em telas digitais para criar uma ampla gama de cores combinando diferentes intensidades de vermelho, verde e azul. Cada cor primária no modelo RGB pode variar de 0 a 255, onde 0 representa a ausência de cor e 255 a intensidade máxima. A combinação desses valores resulta em uma cor específica, como rgb(255, 0, 0) para vermelho puro.

O modelo RGBA é uma extensão do RGB que inclui um quarto valor, o A (Alpha), que controla a opacidade da cor. O valor alfa varia de 0 a 1, onde 0 representa total transparência e 1 total opacidade. Isso permite criar efeitos de sobreposição e transparência em elementos gráficos, como em rgba(255, 0, 0, 0.5), que resultaria em um vermelho semitransparente.

Hexadecimal

Cores hexadecimais são representadas por um código de seis dígitos em CSS, começando com o símbolo #. Esses códigos são divididos em três pares de dois dígitos que correspondem aos valores das cores vermelho, verde e azul (RGB). Cada par pode variar de 00 a FF (0 a 255 em decimal), permitindo uma ampla gama de cores. Por exemplo, o código #FF5733 representa um tom específico de laranja.

Cores hexadecimais transparentes adicionam um valor de opacidade à representação hexadecimal, utilizando um código de oito dígitos. Os primeiros seis dígitos definem a cor, enquanto os últimos dois (que variam de 00 a FF) representam a opacidade, onde 00 é totalmente transparente e FF é totalmente opaco. Por exemplo, #FF573380 representa a mesma cor laranja com 50% de transparência.

HSL e HSLA

O modelo de cores (Hue, Saturation, Lightness) define cores com base em três componentes: matiz (hue), saturação e luminosidade. O matiz é o valor de cor base, expresso em graus de 0 a 360 no círculo de cores (como vermelho a 0°, verde a 120° e azul a 240°). Saturação refere-se à intensidade da cor, variando de 0% (cinza) a 100% (cor pura), enquanto luminosidade ajusta o brilho da cor, de 0% (preto) a 100% (branco).

O modelo HSLA é uma extensão do HSL que adiciona um componente HSLA para controlar a opacidade. O valor alfa varia de 0 a 1, onde 0 é completamente transparente e 1 é totalmente opaco. Por exemplo, hsla(120, 100%, 50%, 0.3) representa uma cor verde com 30% de opacidade. Isso permite aplicar efeitos de transparência e sobreposição mais flexíveis em design web.

Imagens

Propriedade Object-Fit

A propriedade object-fit ("ajuste de objeto") em CSS é usada para controlar como o conteúdo de um elemento substituto, como uma imagem ou vídeo, se ajusta ao seu contêiner. Ela define como o conteúdo deve ser redimensionado e posicionado dentro de seu elemento pai, que tem um tamanho fixo. Os valores comuns incluem:

• fill redimensiona a imagem para cobrir o contêiner, podendo distorcer a imagem. É o valor default dessa propriedade.

  

• contain ajusta a imagem para caber no contêiner mantendo a proporção.

  

• cover preenche o contêiner, podendo cortar partes da imagem.

  

• none não aplica redimensionamento. Esta propriedade é particularmente útil para manter a integridade visual de imagens e vídeos em layouts responsivos.

  

• scale-down ajusta o conteúdo de um elemento substituto (como imagens e vídeos) para que ele se ajuste ao contêiner sem distorção, mantendo a proporção original. Se o conteúdo for menor que o contêiner, ele é exibido em seu tamanho original. Se for maior, é reduzido apenas o suficiente para caber dentro do contêiner, garantindo que não haja ampliação além do tamanho original. Isso permite uma apresentação eficaz e proporcional do conteúdo, sem esticamento ou distorção.

  

Propriedade Object-Position

A propriedade object-position define o alinhamento do conteúdo dentro de um contêiner com um object-fit aplicado. Ela permite ajustar a posição do conteúdo substituto dentro de seu contêiner, especificando onde o conteúdo deve ser alinhado em relação às bordas do contêiner. Os valores padrão incluem center, top, bottom, left, right, e combinações desses valores (por exemplo, top right). Combinando object-position com object-fit, é possível refinar como o conteúdo é exibido dentro de um espaço definido, melhorando a apresentação e a adequação do conteúdo visual a diferentes tamanhos de contêineres.

Além das palavras-chave, também é possível usar valores em unidades de comprimento ou porcentagens, como object-position: 50% 50% para centralizar o conteúdo, ou object-position: 10px 20px para um alinhamento mais personalizado. Isso oferece flexibilidade para controlar exatamente onde o conteúdo aparece dentro de seu contêiner.

Fundos

O fundo dos elementos em CSS é gerenciado pela propriedade background, que oferece grande flexibilidade para definir cores, imagens, gradientes e padrões como fundo de qualquer elemento. Usando background-color, você pode definir uma cor sólida, enquanto background-image permite inserir imagens. Propriedades adicionais, como background-repeat, background-position, e background-size, controlam como a imagem se repete, é posicionada e redimensionada dentro do elemento. Além disso, você pode combinar múltiplas camadas de fundo para criar designs complexos, empilhando várias imagens e cores em um único elemento. Essa versatilidade torna o background uma ferramenta poderosa para estilização visual no design web.

A função linear-gradient() em CSS é usada para criar gradientes de transição suave entre duas ou mais cores ao longo de uma linha reta. Esse gradiente pode ser aplicado como fundo de um elemento, substituindo a necessidade de imagens externas para criar efeitos visuais sofisticados.

O linear-gradient() permite especificar a direção do gradiente, que pode ser definida por ângulos (como 45deg para diagonal) ou palavras-chave (como to right para um gradiente da esquerda para a direita). Além disso, você pode adicionar quantas cores desejar, com transições suaves entre elas, e também ajustar os pontos de parada (stops) para controlar precisamente onde cada cor começa e termina ao longo do gradiente.

A função radial-gradient() em CSS cria um gradiente de transição suave que se expande a partir de um ponto central, irradiando em círculos ou elipses em direção às bordas do elemento. Ao contrário do linear-gradient(), que segue uma linha reta, o radial-gradient() se propaga em todas as direções a partir do centro ou de um ponto especificado. Você pode definir o ponto de origem, o tamanho do gradiente, e as cores com seus respectivos pontos de transição, criando efeitos visuais circulares ou elípticos que são ideais para fundos, botões e outros elementos de design que requerem uma variação de cor mais natural e radial.

A função repeating-linear-gradient() e sua variante repeating-radial-gradient() em CSS permitem criar padrões repetitivos de gradientes, tanto lineares quanto radiais. Esses gradientes funcionam de forma semelhante aos gradientes normais, mas repetem a sequência de cores indefinidamente, preenchendo todo o espaço disponível no elemento. Isso é útil para criar texturas, listras e outros padrões decorativos sem a necessidade de imagens externas. Ao definir os pontos de parada das cores, o gradiente se repetirá a partir do final do ciclo, criando um efeito contínuo que pode ser ajustado em termos de direção, tamanho e densidade do padrão.

Alguns sites oferecem modelos prontos de padrões.

Redimensionando as imagens de fundo dos elementos

A propriedade background-size em CSS3 é usada para controlar o tamanho da imagem de fundo de um elemento.

• auto: Mantém o tamanho original da imagem.

  Imagem sem redimensionar

• cover: Redimensiona a imagem para cobrir completamente o contêiner, podendo cortar partes dela.

  Imagem cobrindo o contêiner

• contain: Redimensiona a imagem para caber dentro do contêiner, mantendo a proporção sem cortes.

  Imagem ajustada ao contêiner

• length (ex: 100px 50px): Define a largura e altura da imagem com valores específicos.

  Imagem com tamanho específico

• percentage (ex: 50% 100%): Define o tamanho da imagem em porcentagem em relação ao tamanho do contêiner.

  Imagem com tamanho percentual

• initial: Define o valor inicial padrão.

  Imagem com valor inicial padrão

• inherit: Herda o valor do elemento pai.

  Imagem herdada do pai

• camadas: Define várias imagens de fundo separando-as por vírgulas. A primeira imagem listada será desenhada sobre as outras, e as imagens seguintes ficarão por trás..

  Camadas de imagens

Repetição das imagens de fundo

A propriedade background-repeat controla a repetição de uma imagem de fundo em um elemento.

• repeat faz com que a imagem de fundo se repita horizontal e verticalmente para cobrir toda a área do elemento.

  Imagem repetida

• repeat-x faz com que a imagem de fundo se repita apenas na direção horizontal.

  Imagem repetida horizontalmente

• repeat-y faz com que a imagem de fundo se repita apenas na direção vertical.

  Imagem repetida verticalmente

• no-repeat faz com que a imagem de fundo não se repita, aparecendo apenas uma vez.

  Imagem não repetida

• space faz com que a imagem de fundo seja repetida o máximo possível sem cortá-la, ajustando o espaço entre as repetições.

  Imagem repetida com espaço

• round faz com que a imagem de fundo seja redimensionada proporcionalmente para caber um número inteiro de vezes, sem deixar espaços em branco.

  Imagem repetida com ajuste

• Colocando dois valores pode-se controlar o comportamento horizontal e vertical separadamente.

  Imagem repetida de acordo com o eixo.

Posicionamento das Imagens de Fundo

A propriedade background-position define a posição da imagem de fundo dentro de um elemento. Você pode especificar a posição usando valores de comprimento, porcentagem ou palavras-chave.

• Para posicionar a imagem de fundo no canto superior esquerdo do elemento, você pode usar a sintaxe left top.

  Imagem posicionada no canto superior esquerdo

• Para posicionar a imagem de fundo no centro do elemento, use a sintaxe center center.

  Imagem posicionada no centro

• Para posicionar a imagem de fundo no canto inferior direito do elemento, use right bottom.

  Imagem posicionada no canto inferior direito

• Você também pode usar valores de comprimento para definir a posição da imagem. Por exemplo, 10px 20px posiciona a imagem 10 pixels da borda esquerda e 20 pixels da borda superior.

  Imagem posicionada a 10px da esquerda e 20px do topo

• Se desejar usar porcentagens, como 50% 50%, a imagem será posicionada no centro do elemento em termos percentuais.

  Imagem posicionada no centro em termos percentuais

Propriedade Background Attachment

A propriedade background-attachment controla como a imagem de fundo é fixada em relação ao viewport ou ao elemento. Pode ser usada para criar efeitos de paralaxe ou de rolagem de fundo.

• Para manter a imagem de fundo fixa em relação ao viewport enquanto o conteúdo é rolado, use a sintaxe fixed.

  Imagem de fundo fixa

  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quia voluptates dignissimos officiis cum commodi veritatis amet delectus porro vel recusandae repudiandae repellat atque, maiores praesentium magni est, ex, natus fugiat!

• Para que a imagem de fundo se mova junto com o conteúdo do elemento, use a sintaxe scroll. Este é o comportamento padrão.

  Imagem de fundo rolável

  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quia voluptates dignissimos officiis cum commodi veritatis amet delectus porro vel recusandae repudiandae repellat atque, maiores praesentium magni est, ex, natus fugiat!

• Para que a imagem de fundo se comporte de forma semelhante ao scroll, mas com um comportamento diferente em alguns navegadores, você pode usar local. Isso é mais útil para elementos com rolagem interna.

  Imagem de fundo com anexo local

  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quia voluptates dignissimos officiis cum commodi veritatis amet delectus porro vel recusandae repudiandae repellat atque, maiores praesentium magni est, ex, natus fugiat!

Propriedade Background Origin

A propriedade background-origin especifica o local a partir do qual a imagem de fundo é posicionada dentro do elemento. Pode ser usada para ajustar a posição da imagem de fundo em relação ao conteúdo, bordas e preenchimento do elemento.

• Para posicionar a imagem de fundo em relação à área do conteúdo do elemento, use a sintaxe content-box.

  Imagem de fundo originada no conteúdo

• Para posicionar a imagem de fundo em relação à área de preenchimento do elemento (incluindo o preenchimento), use a sintaxe padding-box.

  Imagem de fundo originada no preenchimento

• Para posicionar a imagem de fundo em relação à área da borda do elemento (incluindo a borda), use a sintaxe border-box.

  Imagem de fundo originada na borda

Propriedade Background Clip

A propriedade background-clip especifica a área dentro da qual a imagem de fundo é desenhada. Pode ser usada para ajustar a imagem de fundo em relação ao conteúdo, preenchimento ou borda do elemento.

• Para limitar a imagem de fundo à área do conteúdo do elemento, use a sintaxe content-box.

  trilha de css

• Para limitar a imagem de fundo à área de preenchimento do elemento (incluindo o preenchimento), use a sintaxe padding-box.

  trilha de css

• Para limitar a imagem de fundo à área da borda do elemento (incluindo a borda), use a sintaxe border-box.

  trilha de css

• Para aplicar um fundo somente ao texto dentro de um elemento, use a sintaxe text.

  trilha de css

  No Google Chorme pode-se utilizar -webkit-background-clip: text;

Mesclagem

A propriedade background-blend-mode controla como as camadas de fundo se misturam.

• Multiply

• Screen

• Overlay

• Darken

• Lighten

• Color Dodge

• Color Burn

• Saturationn

Propriedade Background

A propriedade background em CSS3 é uma maneira abreviada de definir várias propriedades relacionadas ao fundo de um elemento em uma única linha. Ela permite especificar a cor, a imagem, o posicionamento, o tamanho e o comportamento do fundo do elemento. A ordem dos valores segue a sintaxe: cor, imagem, posição, tamanho, repetição, anexo, origem, recorte e modo de mistura.

Bordas

A propriedade border em CSS permite que você adicione bordas aos elementos HTML. Ela é composta por três propriedades principais: largura da borda (border-width ), estilo da borda (border-style ) e cor da borda (border-color ). Cada uma dessas propriedades pode ser ajustada individualmente ou combinada usando a propriedade abreviada border.

Tamanho da borda

A propriedade border-width em CSS é utilizada para definir a espessura da borda de um elemento. Ela pode ser aplicada de maneira uniforme ou para lados específicos (superior, direito, inferior, esquerdo).

Estilo da borda

A propriedade border-style em CSS define o estilo das bordas de um elemento. Existem vários estilos predefinidos, como sólido, tracejado, pontilhado, etc.

Cor da borda

A propriedade border-color em CSS define a cor das bordas de um elemento. Ela pode ser aplicada a todas as bordas simultaneamente ou a cada lado individualmente (usando border-top-color, border-right-color, etc.). Os valores aceitos incluem cores nomeadas (red, blue ), valores hexadecimais (#FF0000), RGB (rgb(255, 0, 0)) ou HSL (hsl(0, 100%, 50%)). Caso não seja definida, a cor da borda herdará o valor da propriedade color do texto. Essa propriedade oferece flexibilidade na personalização visual das bordas.

Arredondando os Cantos com a Propriedade Border Radius

A propriedade border-radius é usada para arredondar os cantos de elementos. O valor define o raio da curva aplicada em cada canto.

Propriedade Border Image

A propriedade border-image permite que você aplique uma imagem como borda de um elemento. Essa técnica é útil para criar designs personalizados e dinâmicos sem a necessidade de bordas tradicionais. A propriedade tem várias subpropriedades que controlam como a imagem é cortada, redimensionada, posicionada e repetida ao redor do elemento.

• border-image-source: Define a imagem que será usada como borda.

• A propriedade border-image-slice no CSS define como uma imagem é dividida para criar as bordas de um elemento. A imagem é cortada em nove partes: quatro bordas laterais, quatro cantos e o centro. A quantidade de imagem cortada de cada lado pode ser controlada usando valores numéricos.

  

  Valores da Propriedade `border-image-slice`

  • Um Valor: border-image-slice: 60; - Aplica o mesmo valor a todos os lados da imagem.

  • Dois Valores: border-image-slice: 60 30; - O primeiro valor é para o topo e a base, o segundo valor para as laterais direita e esquerda.

  • Três Valores: border-image-slice: 60 40 20; - O primeiro valor é para o topo, o segundo para as laterais, e o terceiro para a base.

  • Quatro Valores: border-image-slice: 60 45 30 15; - Cada valor corresponde a um lado específico da imagem.

  • fill: border-image-slice: fill; - Aplica a região central da imagem da borda no fundo.

• border-image-width: Define a largura da borda que será preenchida pela imagem.

• border-image-outset: Expande a borda além da área original do elemento.

• border-image-repeat: Define o comportamento da imagem da borda

  Valores da Propriedade `border-image-repeat`

  • repeat: A imagem da borda é repetida ao longo da borda, cortando a imagem se necessário.
    repeat
  • stretch: A imagem da borda é esticada para cobrir toda a área da borda, sem repetição.
    stretch
  • round: A imagem da borda é repetida e ajustada para caber exatamente ao longo da borda, redimensionando as repetições.
    round
  • space: A imagem da borda é repetida e espaços uniformes são inseridos entre as repetições, sem cortar a imagem.
    space

• border-image permite aplicar uma imagem às bordas de um elemento, oferecendo controle sobre como a imagem será cortada, repetida e ajustada ao redor do conteúdo. Ela combina várias propriedades individuais em uma única linha de código para facilitar a aplicação. Sua sintaxe completa é a seguinte:

  
      border-image: <source> <slice> / <width> / <outset> <repeat>
  
  

Fontes

Família de fontes

Na tipografia exitem os chamados tipos genéricos, tmabém conhecidos como grupos de fontes, que são:

• Serif

  As fontes serifadas são compostas por pequenos traços e prolongamentos que ficam no fim de cada letra, conhecidos como serifas.

  Exemplo: Times New Roman e Georgia

  

• Sans-Serif

  As fontes sem serifa,que são fontes que não possuem os traços e prolongamentos no fim das letras.

  Exemplo: Arial

  

• Display

  As fontes enfeitadas são consideradas tipografias comemorativas. Muitas vezes nem representam letras, mas sim símbolos. Esta é a famosa fonte para ver, utilizada em textos curtos, publicidade, casamentos (também é usado aqui, mas as melhores são handwriting) e artes diversas para chamar a atenção.

  

• Handwriting

  As fontes manuscritas se assemelham com a escrita à mão, conheciadas como cursivas. Normalmente utilizadas para passar a sensação de humanização.

  

• Monospace

  As fontes monoespaçadas são definidas por toda família de fontes que todos os caracteres ocupam a mesma largura.

  Exemplo: Monospace

  

Onde Encontrar Fontes Personalizadas?

Fontes personalizadas podem ser encontradas em vários sites como Google Fonts, Adobe Fonts e outros repositórios de fontes gratuitos ou pagos. Um exemplo é o Google Fonts:

Personalizando as Fontes do Nosso Site

Podemos aplicar fontes personalizadas usando serviços como o Google Fonts. Aqui está um exemplo de como aplicar a fonte Lobster ao nosso site:

 
    <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
    

Este texto usa a fonte Lobster.

Aplicando Fontes Personalizadas com @Font-Face

Com a regra @font-face, podemos carregar fontes diretamente do nosso servidor

O uso do local() antes da url da fonte é para que, caso a fonte já esteja instalada localmente, não precisa reinstalar

O uso do font-weight faz com que ao aplicar essa palavra reservada o estilo seja o que foi configurado.

        @font-face {
            font-family: 'MinhaFonte';
            src: local(), url('minhafonte.tff');
            font-weight: bold;
        }
    

Exemplo de texto com a fonte personalizada com o @font-face light.

Exemplo de texto com a fonte personalizada com o @font-face bold.

Aplicando Fontes Personalizadas com @import url()

Através da regra @import, também podemos incluir fontes. Quando for adicionar o @import ao arquivo css, ele deve ficar no topo do arquivo. Exemplo:

    @import url('https://fonts.googleapis.com/css2?family=Roboto:ital, wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

Este texto usa a fonte Roboto.

Alterando o Tamanho das Fontes com Font-Size

Podemos alterar o tamanho das fontes com a propriedade font-size. Exemplo:

Este texto tem tamanho de 24px.

Podemos também usar palavras chaves para definir os tamanho da fonte, nesca caso o tamanho da fonte será ajustado em relação ao padrão do navegador do usuário.

Este texto está com o tamanho de fonte "xx-small".

Este texto está com o tamanho de fonte "x-small".

Este texto está com o tamanho de fonte "small".

Este texto está com o tamanho de fonte "medium" (padrão).

Este texto está com o tamanho de fonte "large".

Este texto está com o tamanho de fonte "x-large".

Este texto está com o tamanho de fonte "xx-large".

Este texto está com o tamanho de fonte "smaller" (menor que o do elemento pai).

Este texto está com o tamanho de fonte "larger" (menor que o elemento pai).

Estilo de Fontes (Font-Style)

A propriedade font-style define se o texto será normal, itálico ou oblíquo. Exemplos:

Este texto usa o estilo de fonte "normal".

Este texto usa o estilo de fonte "italic".

Este texto usa o estilo de fonte "oblique".

Este texto usa o estilo "oblique", mas se não estiver disponível, será "normal".

Espessura das Fontes com Font-Weight

Com font-weight, podemos ajustar a espessura da fonte. Ela aceita valores de 100 a 900. Exemplos:

Este texto tem peso "normal" (400).

Este texto tem peso "bold" (700).

Este texto tem peso "bolder".

Este texto tem peso "lighter".

Este texto tem peso "100".

Este texto tem peso "200".

Este texto tem peso "300".

Este texto tem peso "400" (normal).

Este texto tem peso "500".

Este texto tem peso "600".

Este texto tem peso "700" (bold).

Este texto tem peso "800".

Este texto tem peso "900".

Variação das Fontes com Font-Variant

A propriedade font-variant permite exibir o texto em maiúsculas pequenas. Exemplo:

Este texto usa small-caps.

Propriedade Font-Stretch

A propriedade font-stretch ajusta a largura das letras. Só funciona se a fonte possuir essas configurações. Exemplo:

Este texto usa "ultra-condensed".

Este texto usa "extra-condensed".

Este texto usa "condensed".

Este texto usa "semi-condensed".

Este texto usa "normal" (padrão).

Este texto usa "semi-expanded".

Este texto usa "expanded".

Este texto usa "extra-expanded".

Este texto usa "ultra-expanded".

Customizando a Altura da Linha com Line-Height

A altura da linha pode ser ajustada com a propriedade line-height. Exemplo:

Este texto usa "normal" como valor de `line-height`. O espaçamento entre linhas é o padrão.

Este texto usa um `line-height` de 1, o que significa que não há espaço extra entre as linhas, apenas o necessário para o texto em si.

Este texto usa um `line-height` de 1.5, aumentando o espaço entre as linhas para facilitar a leitura.

Este texto usa um `line-height` de 2, o que significa que o espaço entre as linhas é duas vezes a altura da fonte.

Este texto usa um `line-height` de 150%, o que significa que o espaço entre as linhas é 150% da altura da fonte.

Propriedade Resumida Font

Podemos aplicar várias propriedades de fonte em uma única linha usando a propriedade resumida font. A ordem dos parâmetros deve ser:

1. font-style (opcional): Define o estilo da fonte. Ex: italic ou normal.
2. font-variant (opcional): Define a variante da fonte. Ex: normal ou small-caps.
3. font-weight (opcional): Define o peso (espessura) da fonte. Ex: bold ou valores numéricos como 700.
4. font-size (obrigatório): Define o tamanho da fonte. Ex: 16px, 1em.
5. line-height (opcional): Define a altura da linha, separada por uma barra /. Ex: 1.5 ou 150%.
6. font-family (obrigatório): Define a família de fontes, com uma lista de fontes alternativas. Ex: "Arial", sans-serif.

Este texto usa a propriedade resumida font.

Textos

Propriedade Text-Transform

A propriedade text-transform controla a capitalização do texto. Pode ser usada para transformar o texto em maiúsculas, minúsculas ou capitalizar cada palavra.

Exemplos:

Texto em maiúsculas: text-transform: uppercase;

Texto em minúsculas: text-transform: lowercase;

Texto capitalizado: text-transform: capitalize;

Propriedade Text-Align

A propriedade text-align define o alinhamento horizontal do texto dentro de um elemento. Pode ser usada para alinhar o texto à esquerda, direita, centro ou justificar.

Exemplos:

Texto alinhado à esquerda: text-align: left;

Texto centralizado: text-align: center;

Texto alinhado à direita: text-align: right;

Texto justificado: text-align: justify; Lorem ipsum dolor, sit amet consectetur adipisicing elit. Pariatur, quos delectus iusto accusantium aut ab culpa totam vitae illo impedit a maxime at consectetur eveniet ducimus molestiae non, omnis quod?

Propriedade Text-Decoration

A propriedade text-decoration controla a decoração do texto, como sublinhado, sobrelinhado ou riscado.

Exemplos:

Texto sublinhado: text-decoration: underline;

Texto riscado: text-decoration: line-through;

Texto com sobrelinha: text-decoration: overline;

O text-decoration é uma propriedade abreviada de:

• Propriedade Text-Decoration-Line

  A propriedade text-decoration-line define o tipo de linha que será aplicado ao texto. Os valores comuns são:

  • underline: sublinha o texto.
  • overline: adiciona uma linha acima do texto.
  • line-through: adiciona uma linha no meio do texto.
  • none: remove qualquer decoração.

  Exemplos:

  Texto sublinhado.

  Texto com linha acima.

  Texto com linha no meio.

• Propriedade Text-Decoration-Style

  A propriedade text-decoration-style define o estilo da linha de decoração do texto. Os valores possíveis são:

  • solid: linha sólida (padrão).
  • double: linha dupla.
  • dotted: linha pontilhada.
  • dashed: linha tracejada.
  • wavy: linha ondulada.

  Exemplos:

  Texto com linha sólida.

  Texto com linha dupla.

  Texto com linha pontilhada.

• Propriedade Text-Decoration-Color

  A propriedade text-decoration-color define a cor da linha de decoração. Ela aceita qualquer valor de cor válido, como nomes de cores, valores hexadecimais, RGB, etc.

  Exemplos:

  Texto com linha vermelha.

  Texto com linha azul.

  Texto com linha verde.

• Propriedade Text-Decoration-Thickness

  A propriedade text-decoration-thickness define a espessura da linha de decoração do texto. Pode ser especificada em valores como thin, medium, thick ou através de valores em pixels, porcentagem, etc.

  Exemplos:

  Texto com linha fina.

  Texto com linha média.

  Texto com linha grossa.

Propriedade Text-Indent

A propriedade text-indent define a indentação da primeira linha de um parágrafo. Pode ser usada para criar um recuo no início do texto.

Exemplo:

Parágrafo com recuo: text-indent: 30px;

Propriedades Letter-Spacing e Word-Spacing

A propriedade letter-spacing ajusta o espaçamento entre caracteres, enquanto word-spacing ajusta o espaçamento entre palavras.

Exemplos:

Espaçamento entre letras: letter-spacing: 2px;

Espaçamento entre palavras: word-spacing: 10px;

Propriedade White-Space

A propriedade white-space controla como os espaços em branco no texto são tratados. Pode ser usada para impedir a quebra de linha automática ou preservar os espaços em branco.

Exemplos:

white-space: normal;

white-space: nowrap;

white-space: pre;

white-space: line;

white-space: pre-line;

white-space: pre-wrap;

white-space: break-spaces;

Propriedade Word-Wrap

A propriedade word-wrap permite que as palavras sejam quebradas e continuadas na próxima linha quando necessário, para evitar estouro do conteúdo.

Exemplos:

word-wrap: break-word;

word-wrap: break-word;

Propriedade Word-Break

A propriedade word-break define como as quebras de linha ocorrem dentro das palavras, permitindo quebrar em qualquer ponto ou apenas em lugares apropriados.

Exemplos:

word-break: normal;

word-break: break-all;

word-break: keep-all;

Propriedade Writing-Mode

A propriedade writing-mode define a direção do texto, permitindo escrita horizontal, vertical e mista.

Exemplos:

Texto na orientação horizontal: writing-mode: horizontal-tb;

Texto na orientação vertical: writing-mode: vertical-rl;

Propriedade Text-Overflow

A propriedade text-overflow define como o texto que excede os limites de um elemento deve ser exibido, permitindo truncamento ou adição de reticências.

Exemplo:

Este texto será cortado no final sem indicar que houve corte.

Este texto será cortado no final e substituído por reticências...

Sombras

O uso de sombras é uma das características mais úteis do CSS, pois permite adicionais de estilização e visualizações ao seu conteúdo. A sombra pode ser aplicada aos elementos HTML usando as propriedades box-shadow, text-shadow, ou text-decoration-shadow.

Box Shadow

Os parâmetros utilizados são:

• Deslocamento Horizontal

  O primeiro valor define o deslocamento da sombra na direção horizontal. Valores positivos deslocam a sombra para a direita, enquanto valores negativos deslocam para a esquerda.

  Deslocamento Horizontal: 10px

• Deslocamento Vertical

  O segundo valor define o deslocamento da sombra na direção vertical. Valores positivos deslocam a sombra para baixo, enquanto valores negativos deslocam para cima.

  Deslocamento Vertical: 10px

• Desfoque

  O terceiro valor define o raio de desfoque da sombra. Um valor maior resulta em uma sombra mais difusa e suave. Um valor de 0px cria uma sombra com bordas nítidas.

  Desfoque: 15px

• Expansão

  O quarto valor opcional define a expansão da sombra. Valores positivos fazem a sombra se expandir além das bordas do elemento, enquanto valores negativos fazem a sombra encolher.

  Expansão: 10px

• Cor

  O último valor define a cor da sombra. Pode ser qualquer valor de cor válido em CSS, como nomes de cores, valores hexadecimais ou RGB.

  Cor: rgba(0, 0, 0, 0.5)

• Exemplo Completo

  Combinação dos parâmetros:

  Sombra Completa

• Exemplo: Sombra Inset

  O parãmetro inset adicionado à declaração do box-shadow cria uma sombra interna dentro do elemento, o que pode dar a impressão de eu efeito de afundamento ou recuo.

  Sombra inset

• Sombra com Filter Drop-Shadow

  A propriedade filter: drop-shadow faz com que o drop shadow seja aplicado ao próprio conteúdo do elemento e não apenas à sua caixa

  Sombra com filter: drop-shadow

Text Shadow

A propriedade text-shadow em CSS é usada para aplicar sombras ao texto. Ela aceita múltiplos valores, permitindo definir a posição, o desfoque e a cor da sombra.

• 1. Deslocamento Horizontal (offset-x)

  A sombra é deslocada horizontalmente, em relação ao texto.

  Sombra deslocada horizontalmente

• 2. Deslocamento Vertical (offset-y)

  A sombra é deslocada verticalmente, em relação ao texto.

  Sombra deslocada verticalmente

• 3. Raio de Desfoque (blur-radius)

  A sombra é suavizada pelo valor de desfoque.

  Sombra com desfoque

• 4. Cor (color)

  A cor da sombra pode ser definida com diferentes valores de cor.

  Sombra com cor personalizada

Outros

Aplicando Transparência aos Elementos

1. Aplicando Transparência com Opacity

A propriedade opacity define a opacidade de um elemento e afeta tanto o conteúdo quanto o fundo.

2. Aplicando Transparência com RGBA

O uso de rgba() permite aplicar transparência apenas à cor de fundo ou de borda, sem afetar o conteúdo do elemento.

1. Valor Default: Visible

O valor visible faz com que o conteúdo excedente seja exibido fora do contêiner. É o comportamento padrão.

2. Valor Hidden

O valor hidden oculta o conteúdo que ultrapassa o tamanho do contêiner.

3. Valor Scroll

O valor scroll exibe barras de rolagem, independentemente de o conteúdo exceder o contêiner ou não.

4. Valor Auto

O valor auto exibe barras de rolagem apenas quando o conteúdo excede o tamanho do contêiner.

Redefinindo as Propriedades Padrões dos Navegadores

Os navegadores aplicam estilos padrões aos elementos HTML, como margens, espaçamentos e formatação de texto. Esses estilos podem variar entre diferentes navegadores, afetando a consistência visual de uma página. Para evitar essas inconsistências, utilizamos um "CSS Reset", que redefine ou normaliza essas propriedades.

Existem várias formas de redefinir as propriedades padrões:

1. Reset Básico

O reset CSS básico remove as margens e espaçamentos padrões aplicados pelos navegadores. Isso garante que a estilização seja consistente entre navegadores diferentes.

2. Normalização com Normalize.css

O normalize.css é uma ferramenta para normalizar os estilos padrão dos navegadores, mantendo uma base mais previsível.