Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Pichok

Gradiente + Transparencia

Recommended Posts

Pichok, dá para adicionar facilmente transparência no gradient do CSS3, basta trabalhar com cores no formato rgba, ou seja, em vez de utilizar as cores em hexadecimal, como:

background: linear-gradient(#ecf0f1, #95a5a6);

Dá para trabalhar em rgba que adiciona o nível de transparência no último argumento, com valor de 0 - 1 (1 = visível; 0 = não visível). Ou seja, além dos 3 canais de cores do RGB (Red, Green e Blue) há um quarto canal: o Alpha

background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

--|--

 

Todavia, o resultado que você procura, semelhante ao Google Play tem alguns detalhes a mais. Uma maneira de pensar em colocar o background com transparência seria a seguinte:

<div class="box">
    <p>Lorem ipsum dolor sit amet</p>
</div>
body {
    background: #ce5043;
}
.box {
    width: 127px;
    height: 18px;
    font-size: 18px;
    line-height: 18px;
    overflow: hidden;
    white-space: nowrap;
    background: #fff;
}
.box p {
    padding: 0;
    margin: 0;
    background: linear-gradient(to right, rgba(255,0,0,0) 75%, rgba(255,0,0,1));
}

Veja a Demo aqui!

 

Porém como visto no exemplo o background, como próprio nome já diz faz referência ao fundo somente a cor do fundo (também não é possível aplicar esse mesmo efeito na propriedade color). Mas o próprio site do Google Play mostrou como fazer: Foi criado um spam que fica no fim do conteúdo com a classe paragraph-end, ele tem o tamanho da última palavra e irá ganhar a transparência. Veja o exemplo:

 

<div class="box">
    <p>Lorem ipsum dolor sit amet</p>
    <span class="paragraph-end"></span>
</div>

Adicionamos no final do texto um span com a class paragraph-end ele será o responsável por ficar em cima do resto da última palavra

body {
    background: #ce5043;
}
.box {
    width: 127px;
    height: 18px;
    font-size: 18px;
    line-height: 18px;
    overflow: hidden;
    white-space: nowrap;
    background: #fff;
    position: relative;
}
.box p {
    padding: 0;
    margin: 0;    
}

.paragraph-end {
    width: 20px;
    height: 18px;
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
}

Veja a Demo aqui!

 

Foi adiciona position relative na class box, para adotarmos ela como referência para o paragraph-end. Foi eliminado o background do p.

Por fim, foi estilizado o paragraph-end, na qual o seu tamanho se encaixa na última palavra do texto, vale ressaltar que foi utilizado o position absolute que deixa a class estática a 0px para cima e 0px para direita, isso em relação ao elemento pai, a classe box.

 

Vale lembrar que foi utilizada a propriedade white-space como nowrap o que faz o excesso de texto não ser quebrado para uma próxima linha. Também vale mencionar que este efeito não funciona em alguns browsers mais antigos e é necessário utilizar algumas propriedades exclusivas para cada browser:

 

background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */

 

Referências:

 

http://tableless.com.br/css3-breve-introducao-a-rgba/

https://play.google.com/store

http://www.w3schools.com/css/css3_gradients.asp

http://www.w3schools.com/cssref/pr_text_white-space.asp

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.