Day 26: Radial Gradient

 .grid{

width: 500px;

height: 500px;

background-image: radial-gradient(red, yellow, green);

}

.grid{

width: 500px;

height: 500px;

background-image: radial-gradient(red 15%, yellow 25%, green 50%);

}

.grid{

width: 500px;

height: 500px;

background-image: radial-gradient(circle,  red, yellow, green);

}

1. Radial gradient :

  • The background image is set to a radial gradient using the radial-gradient() method. 
  • It results in a gentle transition between two or more colors coming from the same source. (Center)       
  • Its form could either be circular or elliptical.       
  • Syntax :     

background-image : radial-gradient(shape, size, position, starting color…..ending color)     

  • Values :     
  1. Shape : shape of the gradient, it can be circle or ellipse       
  2. Size : denotes the size of gradient, possible values are closest side, closest-corner, farthest-side, farthest-corner (default value)     
  3. Position : mentions gradients position     
  4. color-stops : defines the colors which will be rendered in radial gradient.

Values to try :

  1. Shapes : circle or ellipse(default shape)       
  2. Sizes : closest-corner, farthest-corner(default),closest-side,farthest-side         
  3. Starting and ending color : color stops of your choice can be defined, percentage can also be given ranging from 0 to 100% which defines the stop position for color provided.

Example :

The following code creates a radial gradient in the shape of an ellipse, transitioning from yellow, to blue to purple, originating from the center going towards the circumference.

 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