26/07/2017

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
<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 inúmeros lugares, até mesmo em links. 

Nenhum comentário:

Postar um comentário

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345