Gradiente + Transparencia

[Pichok 1]

Boa noite pessoal, eu queria saber como fazer um gradiente com transparencia, para ser usado como no print que tirei da google play..

 

PRINT

[Nícolas Luís Huber 14]

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