Skip to main content
adicionou 8 caracteres ao conteúdo
Fonte Link
Cmte Cardeal
  • 7mil
  • 5
  • 27
  • 54

Complementando a resposta do @RicardoPontual ...

Essa é uma forma de simplificar o uso de rgb ou rgba e deixar o código de uma maneira mais simples. Além do rgb, tem suporte para o hsl, color, e alguns que nunca nem usei.

Isso:

rgb(0, 128, 255)

rgba(0, 128, 255, 0.5)

hsl(198, 38% 50%)

hsla(198, 28%, 50%, 0.5)

Pode ser escrito como:

rgb(0 128 255)

rgb(0 128 255 / 50%)

hsl(198deg 28% 50%)

hsl(198deg 28% 50% / 50%)

lab(56.29% -10.93 16.58 / 50%)

lch(56.29% 19.86 236.62 / 50%)

color(sRGB 0 0.50 1 / 50%)

.hsl {
 background-color: hsl(298deg 28% 50% / 50%);
}
<div class="hsl">BG: usando hsl</div>

Em relação ao suporte e outros assuntos:

  • O suporte do navegador é muito bombom, menos para o IE 11.

  • Se precisar de suporte para o IE 11, você pode pré-processá-lo usando SASS ou PostCSS (ou não usá-lo).:

    • pré-processá-lo usando SASS ou PostCSS;

    • ou não usá-lo.

  • Prettier, para limpar e formatar seu código, poderia intervir e converter a sintaxe. No momento tem essa issue a respeito. Verifique se sua versão atualizada corrige este comportamento.

Complementando a resposta do @RicardoPontual ...

Essa é uma forma de simplificar o uso de rgb ou rgba e deixar o código de uma maneira mais simples. Além do rgb, tem suporte para o hsl, color, e alguns que nunca nem usei.

Isso:

rgb(0, 128, 255)

rgba(0, 128, 255, 0.5)

hsl(198, 38% 50%)

hsla(198, 28%, 50%, 0.5)

Pode ser escrito como:

rgb(0 128 255)

rgb(0 128 255 / 50%)

hsl(198deg 28% 50%)

hsl(198deg 28% 50% / 50%)

lab(56.29% -10.93 16.58 / 50%)

lch(56.29% 19.86 236.62 / 50%)

color(sRGB 0 0.50 1 / 50%)

.hsl {
 background-color: hsl(298deg 28% 50% / 50%);
}
<div class="hsl">BG: usando hsl</div>

Em relação ao suporte e outros assuntos:

  • O suporte do navegador é muito bom, menos para o IE 11.

  • Se precisar de suporte para o IE 11, você pode pré-processá-lo usando SASS ou PostCSS (ou não usá-lo).

  • Prettier, para limpar e formatar seu código, poderia intervir e converter a sintaxe. No momento tem essa issue a respeito. Verifique se sua versão atualizada corrige este comportamento.

Complementando a resposta do @RicardoPontual ...

Essa é uma forma de simplificar o uso de rgb ou rgba e deixar o código de uma maneira mais simples. Além do rgb, tem suporte para o hsl, color, e alguns que nunca nem usei.

Isso:

rgb(0, 128, 255)

rgba(0, 128, 255, 0.5)

hsl(198, 38% 50%)

hsla(198, 28%, 50%, 0.5)

Pode ser escrito como:

rgb(0 128 255)

rgb(0 128 255 / 50%)

hsl(198deg 28% 50%)

hsl(198deg 28% 50% / 50%)

lab(56.29% -10.93 16.58 / 50%)

lch(56.29% 19.86 236.62 / 50%)

color(sRGB 0 0.50 1 / 50%)

.hsl {
 background-color: hsl(298deg 28% 50% / 50%);
}
<div class="hsl">BG: usando hsl</div>

Em relação ao suporte e outros assuntos:

  • O suporte do navegador é bom, menos para o IE 11.

  • Se precisar de suporte para o IE 11, você pode:

    • pré-processá-lo usando SASS ou PostCSS;

    • ou não usá-lo.

  • Prettier, para limpar e formatar seu código, poderia intervir e converter a sintaxe. No momento tem essa issue a respeito. Verifique se sua versão atualizada corrige este comportamento.

removeu 4 caracteres do conteúdo
Fonte Link
Cmte Cardeal
  • 7mil
  • 5
  • 27
  • 54

Complementando a resposta do @RicardoPontual ...

Essa é uma forma de simplificar o uso de rgb ou rgba e deixar o código de uma maneira mais simples. Além do rgb, tem suporte para o hsl, color, e alguns que nunca nem usei.

Isso:

rgb(0, 128, 255)

rgba(0, 128, 255, 0.5)

hsl(198, 38% 50%)

hsla(198, 28%, 50%, 0.5)

Pode ser escrito como:

rgb(0 128 255)

rgb(0 128 255 / 50%)

hsl(198deg 28% 50%)

hsl(198deg 28% 50% / 50%)

lab(56.29% -10.93 16.58 / 50%)

lch(56.29% 19.86 236.62 / 50%)

color(sRGB 0 0.50 1 / 50%)

.hsl {
 background-color: hsl(298deg 28% 50% / 50%);
}
<div class="hsl">BG: usando hsl</div>

Em relação ao suporte e outros assuntos:

  • O suporte do navegador é muito bom, menos para o IE 11.

  • Se precisar de suporte para o IE 11, você pode pré-processá-lo usando SASS ou PostCSS (ou não usá-lo).

  • Prettier, para limpar e formatar seu código, poderia intervir e converter a sintaxe, mas no. No momento tem essa issue a respeito. Verifique se sua versão atualizada corrige este comportamento.

Complementando a resposta do @RicardoPontual ...

Essa é uma forma de simplificar o uso de rgb ou rgba e deixar o código de uma maneira mais simples. Além do rgb, tem suporte para o hsl, color, e alguns que nunca nem usei.

Isso:

rgb(0, 128, 255)

rgba(0, 128, 255, 0.5)

hsl(198, 38% 50%)

hsla(198, 28%, 50%, 0.5)

Pode ser escrito como:

rgb(0 128 255)

rgb(0 128 255 / 50%)

hsl(198deg 28% 50%)

hsl(198deg 28% 50% / 50%)

lab(56.29% -10.93 16.58 / 50%)

lch(56.29% 19.86 236.62 / 50%)

color(sRGB 0 0.50 1 / 50%)

.hsl {
 background-color: hsl(298deg 28% 50% / 50%);
}
<div class="hsl">BG: usando hsl</div>

Em relação ao suporte e outros assuntos:

  • O suporte do navegador é muito bom, menos para o IE 11.

  • Se precisar de suporte para o IE 11, você pode pré-processá-lo usando SASS ou PostCSS (ou não usá-lo).

  • Prettier, para limpar e formatar seu código, poderia intervir e converter a sintaxe, mas no momento tem essa issue a respeito. Verifique se sua versão atualizada corrige este comportamento.

Complementando a resposta do @RicardoPontual ...

Essa é uma forma de simplificar o uso de rgb ou rgba e deixar o código de uma maneira mais simples. Além do rgb, tem suporte para o hsl, color, e alguns que nunca nem usei.

Isso:

rgb(0, 128, 255)

rgba(0, 128, 255, 0.5)

hsl(198, 38% 50%)

hsla(198, 28%, 50%, 0.5)

Pode ser escrito como:

rgb(0 128 255)

rgb(0 128 255 / 50%)

hsl(198deg 28% 50%)

hsl(198deg 28% 50% / 50%)

lab(56.29% -10.93 16.58 / 50%)

lch(56.29% 19.86 236.62 / 50%)

color(sRGB 0 0.50 1 / 50%)

.hsl {
 background-color: hsl(298deg 28% 50% / 50%);
}
<div class="hsl">BG: usando hsl</div>

Em relação ao suporte e outros assuntos:

  • O suporte do navegador é muito bom, menos para o IE 11.

  • Se precisar de suporte para o IE 11, você pode pré-processá-lo usando SASS ou PostCSS (ou não usá-lo).

  • Prettier, para limpar e formatar seu código, poderia intervir e converter a sintaxe. No momento tem essa issue a respeito. Verifique se sua versão atualizada corrige este comportamento.

adicionou 277 caracteres ao conteúdo
Fonte Link
Cmte Cardeal
  • 7mil
  • 5
  • 27
  • 54

Complementando a resposta do @RicardoPontual ...

Essa é uma forma de simplificar o uso de rgb ou rgba e deixar o código de uma maneira mais simples. Além do rgb, tem suporte para o hsl, color, e alguns que nunca nem usei.

Isso:

rgb(0, 128, 255)

rgba(0, 128, 255, 0.5)

hsl(198, 38% 50%)

hsla(198, 28%, 50%, 0.5)

Pode ser escrito como:

rgb(0 128 255)

rgb(0 128 255 / 50%)

hsl(198deg 28% 50%)

hsl(198deg 28% 50% / 50%)

lab(56.29% -10.93 16.58 / 50%)

lch(56.29% 19.86 236.62 / 50%)

color(sRGB 0 0.50 1 / 50%)

.hsl {
 background-color: hsl(298deg 28% 50% / 50%);
}
<div class="hsl">BG: usando hsl</div>

Em relação ao suporte e outros assuntos:

  • O suporte do navegador é muito bom, menos para o IE 11.

  • Se precisar de suporte para o IE 11, você pode pré-processá-lo usando SASS ou PostCSS (ou não usá-lo).

  • Prettier, para limpar e formatar seu código, poderia intervir e converter a sintaxe, mas no momento tem essa issue a respeito. Verifique se sua versão atualizada corrige este comportamento.

Complementando a resposta do @RicardoPontual ...

Essa é uma forma de simplificar o uso de rgb ou rgba e deixar o código de uma maneira mais simples. Além do rgb, tem suporte para o hsl, color, e alguns que nunca nem usei.

Isso:

rgb(0, 128, 255)

rgba(0, 128, 255, 0.5)

hsl(198, 38% 50%)

hsla(198, 28%, 50%, 0.5)

Pode ser escrito como:

rgb(0 128 255)

rgb(0 128 255 / 50%)

hsl(198deg 28% 50%)

hsl(198deg 28% 50% / 50%)

lab(56.29% -10.93 16.58 / 50%)

lch(56.29% 19.86 236.62 / 50%)

color(sRGB 0 0.50 1 / 50%)

Em relação ao suporte e outros assuntos:

  • O suporte do navegador é muito bom, menos para o IE 11.

  • Se precisar de suporte para o IE 11, você pode pré-processá-lo usando SASS ou PostCSS (ou não usá-lo).

  • Prettier, para limpar e formatar seu código, poderia intervir e converter a sintaxe, mas no momento tem essa issue a respeito. Verifique se sua versão atualizada corrige este comportamento.

Complementando a resposta do @RicardoPontual ...

Essa é uma forma de simplificar o uso de rgb ou rgba e deixar o código de uma maneira mais simples. Além do rgb, tem suporte para o hsl, color, e alguns que nunca nem usei.

Isso:

rgb(0, 128, 255)

rgba(0, 128, 255, 0.5)

hsl(198, 38% 50%)

hsla(198, 28%, 50%, 0.5)

Pode ser escrito como:

rgb(0 128 255)

rgb(0 128 255 / 50%)

hsl(198deg 28% 50%)

hsl(198deg 28% 50% / 50%)

lab(56.29% -10.93 16.58 / 50%)

lch(56.29% 19.86 236.62 / 50%)

color(sRGB 0 0.50 1 / 50%)

.hsl {
 background-color: hsl(298deg 28% 50% / 50%);
}
<div class="hsl">BG: usando hsl</div>

Em relação ao suporte e outros assuntos:

  • O suporte do navegador é muito bom, menos para o IE 11.

  • Se precisar de suporte para o IE 11, você pode pré-processá-lo usando SASS ou PostCSS (ou não usá-lo).

  • Prettier, para limpar e formatar seu código, poderia intervir e converter a sintaxe, mas no momento tem essa issue a respeito. Verifique se sua versão atualizada corrige este comportamento.

Fonte Link
Cmte Cardeal
  • 7mil
  • 5
  • 27
  • 54
Carregando