إنضم لنا

Cara membuat Text gradient





5 effek text gradient
No.1

h1 {
  text-align: center;
  font-size: 72px;
  /* 
  * key code 
  */
  color: #e23b4a;
  background: -webkit-linear-gradient(330deg, #23966c 0%, #faaa54 25%, #e23b4a 50%, #db0768 75%, #360670 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* 
  * end key code 
  */
}
@media only screen and (max-width: 800px) {
  h1 { font-size: 48px; }
}
<h1>1.CENGGINI SARANG</h1>


No.2 (effek Animation)


@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');
h1 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size:42px;
  text-transform:uppercase;
  color: transparent;
    background: linear-gradient(to left, #1e5799, #2ce0bf, #76dd2c, #dba62b, #e02cbf, #1e5799);
  background-size: 1000px 100%;
  animation: bg 15s linear infinite;
  background-clip: text;
  -webkit-background-clip: text;
}

@keyframes bg {
<h1>2.cenggini sarang</h1>

No.3

.text-gradient {
    display: inline-block;
    background-image: linear-gradient(to right, #8941db 0%, #42ddd8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


body { margin: 2em;}
<h1 class="text-gradient">3.CENGGINI SARANG</h1>

No.4 (effeck Animation)

@import url('https://fonts.googleapis.com/css?family=Barrio');



.container {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  
}
.gradient-text {
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    color: #FF1361;
    background-color: #FF1361;
    background: -o-linear-gradient(left, #FFF800 10% , #FF1361, #44107A, #7794ff);
    background: -webkit-linear-gradient(left, #FFF800 10% , #FF1361, #44107A, #7794ff);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gradient-text.text1 {
  -webkit-animation: dancingColors 2s infinite forwards ease-in-out;
          animation: dancingColors 2s infinite forwards ease-in-out;
  margin-bottom: 5%;
}
.gradient-text.text2 {
  -webkit-animation: dancingColors 2s -0.5s infinite forwards ease-in-out;
          animation: dancingColors 2s -0.5s infinite forwards ease-in-out;
}

@media screen and (min-width:0\0) {
    /* IE9 and IE10 hack */
    .gradient-text {
        background: transparent;
    }
}

@-moz-document url-prefix() {
  /* Firefox hack */
.gradient-text {
    background-color: transparent;
    }
}

body {
  background: black;
  text-align: center;
}
.gradient-text.text1 {
  font-size: 40px;
  font-size: calc(20px + (40 - 20) * (100vw - 400px) / (1000 - 400));
  font-family: 'Barrio', cursive;
}
.gradient-text.text2 {
    font-size: 30px;
  font-size: calc(20px + (30 - 20) * (100vw - 400px) / (1000 - 400));
  font-family: 'Barrio', cursive;
}


@-webkit-keyframes dancingColors {
  50% {
   //  background: -webkit-linear-gradient(left, #FF1361, #44107A, #7794ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-position: -860px;
  }
}



@keyframes dancingColors {
  50% {
   //  background: -webkit-linear-gradient(left, #FF1361, #44107A, #7794ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-position: -860px;
  }
}
<div class="container">
<div class="gradient-text text1">I am a gradient text in modern browsers.</div>
<div class="gradient-text text2">I am a pink text in very old browsers.</div>
</div>

Terakhir

p
{
  margin:0px;
}

.text
{
  font-family:'Work Sans',sans-serif;
  font-size:200px;
  background-image:url('https://wallpaperbrowse.com/media/images/html-color-codes-color-tutorials-hero-00e10b1f.jpg');
  /*a linear gradient can also be used instead of image.*/
  background-size:cover;
  -webkit-text-fill-color:transparent;
  -webkit-background-clip: text;
}
.text1
{
   font-family:'Work Sans',sans-serif;
  font-size:80px;
  background-image:url('https://wallpaperbrowse.com/media/images/html-color-codes-color-tutorials-hero-00e10b1f.jpg');
   background-attachment: fixed;
  background-size:cover;
  -webkit-text-fill-color:transparent;
  -webkit-background-clip: text; 
}
@media only screen and (max-width:715px)
{
  .text
  {
    font-size:150px;
  }
  .text1
  {
    font-size:70px;
  }
}
@media only screen and (max-width:615px)
{
  .text
  {
    font-size:100px;
  }
  .text1
  {
    font-size:50px;
  }
}
@media only screen and (max-width:415px)
{
  .text
  {
    font-size:80px;
  }
  .text1
  {
    font-size:35px;
  }
}
@media only screen and (max-width:285px)
{
  .text
  {
    font-size:60px;
  }
  .text1
  {
    font-size:20px;
  }
}
<div class="mainflex">
  <p class="text">cs</p>
  <p class="text1">cenggini sarang</p>
</div>

Terima kasih sudah berkunjung


Penulis:

Seorang Penulis Asal Tegal jawa tengah 


PENTING !!!
Untuk pertanyaan di luar topik silahkan Gunakan Komentar Facebook atau Google+ sengaja Kami sediakan Untuk komentar random Dan untuk pertanyaan seputar article gunakan komentar disqus Terimakasih...

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments:

This site uses cookies from Google to deliver its services, to personalise ads and to analyse traffic. Information about your use of this site is shared with Google. By using this site, you agree to its use of cookies. Detail