CREATE BEAUTIFUL GRADIENTS ( CSS Tutorial #14)

in blurtutorials •  4 years ago  (edited)

Gradients are one of the most interesting properties and i have been using them since the day i learned about them.

I am always ready to create my own gradients.
For those who do not know about gradients , they are beautiful designs for our webpage background.

So let us take the yesterday's example where i created a div and added a background image for the div.

Let us today create a gradient instead of a background with image.

Final Output :

Screenshot from 2020-11-05 21-40-42.png

Steps involved :

Step 1 : create a proper html structure in a file.

Step 2 : here is the code for the style tag.

Screenshot from 2020-11-05 21-46-58.png

Step 3 : run the file in a browser and see the output.

Screenshot from 2020-11-05 21-40-42.png

FULL CODE :

 <!DOCTYPLE HTML>
 <html>
<head>
<meta charset="utf-8">
    <title>DIV AND SPAN</title>
<style>

       .boxliliput{
       background:linear-gradient(#187 , #111);
       
       
        color: White; 
        font-weight:600;
        font-size: 32.22px;
        height: 50%;
        background-color: #232A34;
        width: 70%;
        padding: 25px 10px;
        border-width: 10px 7px;
           border-color: #96B8A8;
           border-style: ridge;
           border-radius: 20px;         
    } 
  
  
</style>
</head>
<body>
 
<div class="boxliliput">
<p> <b>DESCRITION :</b>    </p> 
    <p id="p2"> Hello , @sct.blurt</p>
    </div><br/>
   

</body>
</html>

We have created a page again for a description saying hello ,@sct.blurt.

linear-gradients takes atleast two parameters and they are colors or color codes.
you can directly use the name of colors as well , i have used color code in my case.

so try creating something from it and then share the output below for some vote from blurtutorials.
I will give vote upto 50% vote for the people creating a gradient and sharing below in comments.
offer ends after this post payout.

Thank You.

Link For Previous Tutorials

  1. Inline CSS
  2. Internal CSS and Its Implementation
  3. External CSS
  4. ID's And Classes In CSS
  5. DIVS AND SPAN with CSS
  6. PADDING PROPERTY IN CSS #1
  7. PADDING PROPERTY IN CSS #2
  8. BOX MODEL BORDER PROPERTY IN CSS
  9. BOX MODEL BORDER PROPERTY IN CSS #2
  10. CREATE A CIRCLE USING BOX MODEL BORDER PROPERTY IN CSS #3
  11. OUTLINE BORDERS IN CSS
  12. MARGIN PROPERTY IN CSS
  13. Background Property In CSS #1
blurtutorials css gradients tutorials
4 years ago by
99.00 BLURT
  • Past Payouts 99.00 BLURT
  • - Author 49.50 BP
  • - Curators 49.50 BP
8 votes $0.14
3
Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE BLURT!
Sort Order:  
  • Trending
    • [-]
      ·  4 years ago  ·  

    here is my gradient.

    IMG_20201112_010058.jpg

    46.04 BLURT
    • Past Payouts 46.04 BLURT
    • - Author 23.02 BP
    • - Curators 23.02 BP
    2 votes    $0.13
    [-]
      ·  4 years ago  ·  

    good , keep it up.

    0.00 BLURT
      $0.00
      [-]
        ·  4 years ago  ·  

      Congratulations! This post has been upvoted by the @blurtcurator communal account,
      You can request a vote every 12 hours from the #getupvote channel in the official Blurt Discord.Don't wait to join ,lots of good stuff happening there.

      0.00 BLURT
        $0.00