🥇 Destaques e sombras: a cor do transparente em CSS3

A dica profissional <a href=” http://coderwall.com/p/tpmsta?p=1&q=”> ** ‘CSS’s “transparentes” podem não ser transparentes, especialmente em bordas diagonais’ * </a> de Chris Morgan me lembra de quando me deparei com a cor do transparente no CSS.
Eu estava fazendo realces no plano de fundo de um elemento usando um gradiente radial como imagem de plano de fundo. Para fazer a cor original brilhar comecei com branco meio transparente (em rgba) e finalizei o gradiente com * transparente . Eu estava errado:

background-image: radial-gradient(50% 0,ellipse farthest-side, 
    rgba(255,255,255,.5), transparent 100%);

<div> Ei, onde está meu div </div> <div style = “clear: both”> </div>
A cor do transparente é preto.
Destaque de ‘branco’ –rgba (255,255,255, .5) – para ‘transparente’

A verdadeira cor do transparente é revelada aqui. É preto. O gradiente vai da opacidade de 0,5 a 0. Mas isso não é tudo. O gradiente também muda de cor de branco para preto, usando todos os tons de cinza intermediários.

Parece tão óbvio para mim agora, mas fiquei muito confuso na época. Por que meu código me deu esse resultado? Ao experimentar outras cores logo começou a fazer sentido. Tentei branco transparente.

background-image: radial-gradient(50% 0,ellipse farthest-side, 
    rgba(255,255,255,.5), rgba(255,255,255,0) 100%);

<div style = “background-color: # 0ee; background-image: -webkit-radial-gradient (50% 50%, elipse mais distante, rgba (255,255,255, .5), rgba (255,255,255,0) 100%) ; imagem de fundo: -moz-gradiente radial (50% 50%, elipse do lado mais distante, rgba (255,255,255, 0,5), rgba (255,255,255,0) 100%); imagem de fundo: gradiente radial (50% 50%, elipse mais distante, rgba (255,255,255, 0,5), rgba (255,255,255,0) 100%); altura: 200px; margem: 0 auto; largura: 200px; “> </div>
Destaque do branco ‘rgba (255,255,255, .5) ‘para branco transparente’ rgba (255,255,255,0) ‘

Parece bom à primeira vista, mas após uma inspeção mais próxima, esse método resulta em bordas feias, muito nítidas para um efeito de destaque, às vezes parecendo mais uma esfera do que um destaque. Esse efeito é mais fácil de reconhecer em um fundo mais escuro (ilustrado à direita).

A única maneira realmente segura de ir é seguir o mantra:

KEEP YOUR COLOR

” ao projetar sombras ou destaques usando gradientes css “, é o que uma vozinha dentro da minha cabeça sempre ecoa depois. O caso de uso é raro, mas pode economizar tempo para todos os desenvolvedores.

Mantenha sua cor iniciando um gradiente com branco para realces ou preto para sombras. Termine o gradiente com uma interrupção de cor transparente em rgba tendo a cor de fundo.

background-image: radial-gradient(50% 0,ellipse farthest-side, rgba(255,255,255,.5), 
    rgba(0,136,136,0) 100%);

<div style = “background-color: # 0ee; background-image: -webkit-radial-gradient (50% 50%, elipse mais distante, rgba (255,255,255, 0,5), rgba (0,238,238,0) 100%) ; imagem de fundo: -moz-gradiente radial (50% 50%, elipse do lado mais distante, rgba (255,255,255, 0,5), rgba (0,238,238,0) 100%); imagem de fundo: gradiente radial (50% 50%, elipse mais distante, rgba (255,255,255, .5), rgba (0,238,238,0) 100%); altura: 200px; margem: 0 auto; largura: 200px; “> </div>
Destaque do branco ‘rgba (255,255,255, .5) ‘para cor transparente’ rgba (0,136,136,0) ‘tendo a mesma cor de fundo

A diferença entre o branco ou o transparente colorido é pequena. Inspecione também o efeito em um fundo mais escuro (à direita). Saber quais resultados esperar é a grande vitória aqui. E ao criar destaques ou projetar sombras com um gradiente CSS, agora você sabe que, ao colorir sua cor transparente, estará sempre seguro.
Atualização: Devo notar aqui, que o branco transparente é mais utilizável para destacar fundos com texturas ou imagens.

Para não se surpreender com a cor transparente, lembre-se de uma coisa:

The color of transparent is black.

Related Posts