Blog of Entrebits

Creating a text with gradient

Design Web
Deactivated homeDeactivated homeDeactivated homeDeactivated homeDeactivated home

Without a doubtthe use of gradients in design Webis going to be one of the tendencies of this year 2018 in which to design Web it talks about. Some ago years in our agency we created a Web whose heads of page had gradient, when teaching it to the final client thought that the monitor had a problem. The human eye was not trained for the gradients until it arrived Instagram and its controversial logo.

Some of the brands with greater presence in the networkalready have bet bythe gradients in their stores online. So it is time question that the gradients reach to one more of the more indispensable elements Web: the typography.

The constructors of pages not yet are preparations to create texts with gradient, so we are going to introduce this property through CSS3, we will see that it is a very basic code.

Sigiendo the logic of the gradient

The text as so still the use of gradients supports in CSSthroughthe property color, so we will have to give a return of nut traditional to the ways that we must in CSS to contribute color to the text.

We must think about a triple layer of elements:

a) The bottom of the block in which the text is had, normallydiv.
b) The bottom that conforms the own text, where we will create the gradient, nomalmente made up of one of the labelsp, blockquote, h1, h2,
c) The color of the text
Code of example with Mina de Google Fonts source:
<html> <head> <link href= " https://fonts.googleapis.com/css?family=Mina€? rel= " stylesheet€?/> <style>/* div principal*/body \ {margin: 0;} .presentacion \ {height: 400px; padding: 250px 0; background-color: #000; }/*Usando the gradient in CSS3 through webkit * .presentacion h2 \ {font-family: €˜Mine€™, sans-serif; font-size: 75px; color: #fff; background-image: linear-gradient (45deg, #365899 0%, #992a09 35%, #a76c51 85%, #a76c51 100%); - webkit-text-fill-color: transparent; - webkit-background-paper clip: text; color: #fff; margin-left: 40px; } </style> </head> <body> <div class= " presentation " > <h2 class= " title " >Bienvenidos to Funnytaf </h2> </div> </body>
Code of executed example:

Welcomes to Funnytaf

To use a text with gradient is without a doubt a design current trend Web that will make your more attractive webpage visually. If they are looking for a Web created with the last tendencies of design , it contacts with us.
Tags: ,

Entrebits gets hold of. Design Web and Digital Marketing





We helped You?

The answers to your questions are to only a click



Do You like to write?
hello@funnytaf.com

Inform to you