- Bunny Crazy: Texto em degradê

Ohayooo queridos bunnie's! Estou super animada pois antes mesmo do ano acabar consegui cumprir minhas metas de leitura. Devo dizer que dá uma prazer incrível ao acabar, mas durante o processo seguir algumas metas são bem chatas e até um pouco exaustivas, então não sei se irei aderir outra meta literária em 2018. Bom agora vamos falar do tutorial de hoje? Hoje vou mostrar como colocar texto gradiente no blog.

.::Exemplo::.

Hi! Aqui é Wendy, bem vindo ao meu blog.

1. O código em si do degrade é esse que se encontra mais abaixo. Normalmente utilizamos "color: #codigodacor'; para adicionarmos cor a uma fonte, porém nesse caso utilizamos o color junto com background, o mesmo possuindo cores variadas para o efeito impactante. É sempre bom ter consciência de qual cores quer usar no degrade para darem um efeito positivo aos olhos.

Códigos

color: #4f4f4f;
background: -webkit-linear-gradient( left, #248F8D, #8d3855, #5C4F79);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

2. Agora decida onde deseja aplicar o código, ele pode ser utilizado em inúmeros lugares se tiver conhecimento de HTML você já vai saber onde aplica-lo, agora se você é novato nessa área, farei uma explicação bem curta e pratica. No HTML existe Tag's que são os nomes dos menus, títulos de postagem, sidebar e etc... geralmente começam com ponto ou jogo da velha. Digamos que queira colocar no título dos gadgets, então você ira procurar por sua tag. Vareia muito, geralmente ele é .sidebar .widget h2, ou #sidebar .widget h2 também é possivel ser .sidebar h2, ao detectar o título da sidebar entre as chaves {} vai colocar o código acima. Veja o exemplo abaixo:

.sidebar h2 {

margin-bottom: 5px;

letter-spacing: 3px;

text-align: center;

text-transform: uppercase;

font-family: 'Calibri', sans-serif;

-webkit-transition-duration: .50s;

color: #4f4f4f;

background: -webkit-linear-gradient( left, #248F8D, #8d3855, #5C4F79);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

}

Vermelho é a tag, em verde é as chaves que começam e encerram o código, em azul são demais partes de personalização do título, como posição, tipo de fonte, espaço entre as letras etc... a parte em laranja é o código do degrade.

3. Você vai aplicar o código de degrade sempre em uma área que fique entre as chaves {}, independente de onde deseja aplicar. Aqui vai um código pronto para aplicar no título das postagens, basta copiar e colar no lugar do seu atual título.

Códigos

h3.post-title {
border-bottom:1px solid #ccc;
text-align:left;
padding-left:20px;
color: #4f4f4f;
letter-spacing:2px;
font-family: 'Lato', sans-serif;
font-size:20px;
text-transform:uppercase;
background: -webkit-linear-gradient( left, #248F8D, #8d3855, #5C4F79);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
h3.post-title a {
color: #4f4f4f;
letter-spacing:2px;
font-family: 'Lato', sans-serif;
font-size:20px;
text-transform:uppercase;
background: -webkit-linear-gradient( left, #248F8D, #8d3855, #5C4F79);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
h3.post-title a:hover {
background: -webkit-linear-gradient( left,#5C4F79, #8d3855,#248F8D);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

Se desejar utilizar a fonte que está no código vá em <head> e abaixo dele cole:

Códigos

Salve e veja o resultado. Uma coisa legal é que esse estilo realmente pode ser aplicado em inúmeros lugares, até mesmo em links.

26/07/2017

Texto em degradê

Nenhum comentário:

Postar um comentário

Postagens mais visitadas