CSS - CSS3 Opacity Gradient

Saída

Etapa 3: estilo o contêiner div

Acesse o contêiner Div usando o nome da classe com o seletor de classe como “#conteúdo principal”:

#conteúdo principal
Background-Color: Lightgreen;
margem: 20px 80px;
borda: 3px azul pontilhado;

Em seguida, aplique as propriedades CSS listadas abaixo:

• ““cor de fundo”É utilizado para definir a cor na parte traseira do elemento.
• ““margem”Aloca espaço no lado externo do limite definido.
• ““fronteira”A propriedade é usada para determinar uma borda ao redor do elemento definido.

Etapa 4: parágrafo de estilo

Agora, estilize o parágrafo acessando -o com o nome da classe “.parágrafo 1”:

.parágrafo 1
cor azul;
estouro: oculto;
Posição: relativa;
Modo de mistura: luz dura;
tamanho da fonte: 30px;

Aqui:

• ““cor”Propriedade aloca uma cor para o texto dentro do parágrafo.
• ““transbordar”É utilizado para mostrar os resultados quando o conteúdo derrama da caixa de um elemento. Esta propriedade determina se deve pegar o texto ou adicionar barras de rolagem quando o conteúdo desse elemento é longo para definir em uma área específica.
• ““posição”Define a posição do elemento em um documento.
• ““Modo de mistura”A propriedade CSS é utilizada para definir o conteúdo de um elemento misturado com o conteúdo raiz e o fundo do elemento.
• ““tamanho da fonte”É usado para definir uma fonte específica para o texto no parágrafo.

Etapa 5: defina “gradiente linear” no parágrafo

Utilize o “.parágrafo 1"Para acessar a aula": depois ":

.parágrafo-1: depois
Posição: Absoluto;
Top: 0px;
Antecedentes: gradiente linear (transparente, cinza);
Esquerda: 0px;
contente: "";
largura: 100%;
Altura: 100%;
Ponteiro-eventos: nenhum;

De acordo com o snippet de código fornecido:

• ““posição”É definido como absoluto neste trecho.
• ““esquerda" e "principal”As propriedades são usadas para definir a posição do elemento nos lados esquerdo e superior.
• ““fundo"Propriedade definida como" gradiente linear "cria um fundo que consiste em uma transição contínua entre cores diferentes com uma linha reta.
• ““contente”A propriedade é utilizada para definir o conteúdo.
• ““largura”Aloca a largura do elemento.
• ““altura”A propriedade é utilizada para definir a altura do elemento definido.
• ““Evento de ponteiro”Especifica as condições sob as quais um certo elemento visual se tornou o alvo do evento

Saída

Pode -se notar que o gradiente de opacidade do CSS foi aplicado com sucesso.

Conclusão

Para definir o gradiente de opacidade, primeiro, adicione texto no parágrafo usando o “

" marcação. Em seguida, acesse o parágrafo e aplique o “fundoPropriedade CSS e defina o valor desta propriedade como “Gradiente linear”. Ele cria um fundo que consiste em uma transição progressiva entre duas ou mais cores ao longo de uma linha reta. Este artigo explicou o CSS Opacity Gradient.