26/07/2017

Tutorial: 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.
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. 
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:
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
Salve e veja o resultado. Uma coisa legal é que esse estilo realmente pode ser aplicado em inumeros lugares, até mesmo em links. 

Nenhum comentário:

Postar um comentário

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram