Linear gradients

In this example below you will see how to do a Linear gradients with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by elsylwio, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright elsylwio ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Linear gradients</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="gradient">
  
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/elsylwio/linear-gradients-uxkEJ */
/*Linear gradient czyli gradient liniowy

deklaracja:
linear-gradient [położenie - w stopniach lub podając dokładne położenie] [kolor startowy] [color stops] [stop position] [kolor końcowy] 

Używając stopni do określania położenia należy pamiętać że:
0deg jest równoznaczne z top.Gradient od lewej do prawej.
90deg jest równoznaczne z right.Gradient od dołu do góry
180deg jest równoznaczne z bottom.Gradient od prawej do lewej
270deg jest równoznaczne z left.Gradient od góry do dołu
360deg jest równoznaczne z powrotem do top

*/

/*Zapis linear-gradient(Purple, DeepPink) jest równoznaczny z zapisem linear-gradient(Purple 0%, DeepPink 100%).*/

.gradient {
  height: 200px;
  background-image:
    linear-gradient(
      Purple, DeepPink  
    );
}


.gradient {
  height: 200px;
  background-image:
    linear-gradient(
      to right,
      Purple, DeepPink
    );
}

/*.gradient {
  height: 200px;
  background-image:
    linear-gradient(
      to top right,
      LightSkyBlue, MidnightBlue
    );
}*/


/*.gradient {
  height: 200px;
  background-image:
    linear-gradient(
      45deg,
      LightSkyBlue, MidnightBlue
    );
}*/

/*możemy użyć dowolną ilość kolorów przy tworzeniu gradientów*/

/*.gradient {
  height: 200px;
  background-image:
    linear-gradient(
      to right,
      LightSkyBlue, MidnightBlue, DeepPink,  
      LightPink
    );
}*/

/*.gradient {
  height: 200px;
  background-image:
    linear-gradient(
      to right,
      Green 33%, 
      Yellow 33%,
      Pink 50%
    );
}
*/

Comments