Day 25: CSS Chapter 4: layout: linear gradind

.grid{

width: 500px;

height: 500px;

background-image: linear-grading(red, yellow);

}

.grid{

width: 500px;

height: 500px;

background-image: linear-grading(to right, red, yellow);

}

1. Linear gradient :

 The linear gradient is one of the most common and practical types of gradient (). You can choose to have the gradient's "axis" run from left to right, top to bottom, or at any angle.

  • Syntax

background-image : linear-gradient(direction of gradient or angle(in degrees), color-stop1, color-stop2,….)

  • Color stop meaning :

Color stops are places in a gradient that shows a certain color at the precise spot we choose. So they enable us to produce more detailed gradient effects.

  • Example

The following code will create a linear gradient transitioning from yellow to green color towards the bottom.

     

      • Code :

      • Output :

      • Example

      The following code will create a linear gradient having 3 color stops, transitioning from blue to purple to red in a diagonal direction.

      • Code : 

       

      • Output :


      Comments

      Post a Comment

      Popular posts from this blog

      Day 9: CSS - Font Formate

      Image
      p1{  font style: italic, } p2{ font-variant: small-caps; } p3{ font-weight: 400px: } p4{ font-size: 12pt } p5{ font-family:  } ----------------------------------------------------------------------------------------------------------------------- The CSS font-family Property : The font-family property in CSS is used to specify the typeface of a text.      If the font name has more than one word, such as "Times New Roman," quotation marks must be used.        Example: The following code applies a font family to a paragraph using class ids:I        Code :   Output :     The CSS font-size Property : The font-size attribute controls a font's size.      It has an impact on the text size of an element. Every element can use it, and its default value is medium. This attribute has values like xx-small, small, x-small, etc.      Font-size can also be specified in pixels (which sets the f...
      Read more

      else-if condition in if-else statements: Concatenation in JavaScript :

      Image
        else-if condition in if-else statements: While specifying conditions for if-else statements, there may arise a need to include more than just two scenarios. For example, suppose we have a variable ‘n’ and we have to check if it is positive or negative. JS code for this problem would look like this: Quite simple, right? However, suppose we twist this problem a bit. If we have to check if the value of ‘n’ is positive, negative, OR zero. Can we do it using only if-else?  No, right? Here comes the scenario where we have to check more than two conditions and give output for each. This is where else-if comes into the game.  Structure of if else-if else looks something like this: If (condition 1)  { statements } else if (condition 2) { statements } else  { statements }   Working for the above code is explained as follows: Condition 1 is checked first. If it is true, statements inside the first block are executed and the remaining conditions are not checked. If t...
      Read more

      Day 27: Css Variable

      Image
       :root {   --main-color: #3498db; } .element {   background-color: var(--main-color); } HTML Code: <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <link rel="stylesheet" href="styles.css">   <title>Sample Page</title> </head> <body>   <div class="element">     This is a sample element with the specified background color.   </div> </body> </html> CSS Code: :root {   --main-color: #3498db; } .element {   background-color: var(--main-color);   padding: 20px;   color: white; /* Text color to make it visible on the background */ }
      Read more