Background Images - Linear Gradients

pktcodes · pktcodes · commit 5f77ba03efba · 2022-11-05T17:17:02.000-05:00
diff --git a/index.html b/index.html
@@ -11,14 +11,21 @@
   </head>
 
   <body>
-    <div class="big-img">
+    <!-- <div class="big-img">
       <h1>I'm big image</h1>
     </div>
     <div class="small-img">
       <h1>I'm small image</h1>
     </div>
     <div class="folder-img">
       <h1>I'm folder image</h1>
-    </div>
+    </div> -->
+
+    <div class="one"></div>
+    <div class="two"></div>
+    <div class="three"></div>
+    <div class="four"></div>
+    <div class="five"></div>
+    <div class="six"></div>
   </body>
 </html>
diff --git a/styles.css b/styles.css
@@ -1,6 +1,42 @@
-/* background-attachment */
+/* Linear Gradients */
 
 * {
+  width: 150px;
+  height: 200px;
+  margin: 5px;
+}
+
+/* by default direction is to bottom */
+.one {
+  background: linear-gradient(red, blue);
+}
+
+/* changing direction by text and multiple various values */
+.two {
+  background: linear-gradient(to top, red, blue, green, yellow, #f15602);
+}
+
+/* changing direction by degrees, default is 180 */
+.three {
+  background: linear-gradient(315deg, red, blue);
+}
+
+/* applying direction with go to top of right side */
+.four {
+  background: linear-gradient(to top right, red, yellow);
+}
+
+/* control from where to start */
+.five {
+  background: linear-gradient(red 20%, blue 50%);
+}
+
+/* using fading with rgba */
+.six {
+  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 1));
+}
+
+/* * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
@@ -39,4 +75,4 @@ div {
   background-size: cover;
   background-position: center;
   background-attachment: fixed;
-}
+} */
