CSS Style Concepts ✍️

-

 CSS-border-radius:

The CSS border property is used to give elements rounded or elliptical corners.
border-radius is a shorthand for four individual properties like;
  • border-top-left-radius,

  • border-top-right-radius,

  • border-bottom-right-radius,

  • border-bottom-left-radius
It accepts values in <length> (e.g. px, em, rem) or in a percentage.

Note: Negative values are not allow.

Let us understand border-radius with example:

<html>
 <head>
  <style type="text/css">
       .shape
         {
            background-color: cyan;
             height:100px;
             width: 100px;
             border-radius: 50px 30px 50px 30px;
         }
         .shape
         {
             background-color: yellowgreen;
             height:100px;
             width:100px;
             border-radius: 50%;
         }
         .shape
         {
             background-color: deeppink;
             height:100px;
             width:100px;
             border-radius: 50px/100px;
         }
    .shape
         {
             background-color:red;
             height:100px;
             width:100px;
             border-radius: 10px 20px;
         }
</style>
 <title></title>
</head>
<body>
    <div class="shape"></div>
    <br><br>
    <div class="shape"></div>
    <br><br>
    <div class="shape"> </div>
   <br><br>
      <div class="shape"></div>
 </body>
</html>

Output is:


You can also use border-radius with box-shadow like;
 
<html>
 <head>
  <style type="text/css">
     .shape
       {
    background-color: cyan;
      height:100px;       
      width: 100px;
    border-radius: 50px 30px 50px 30px;
    box-shadow: 4px 4px 4px teal;
       }
     .shape 
    {
      background-color:palegreen;
     height:100px;
      width:100px;
     border-radius: 50%;
    box-shadow:-5px 4px
      4px green
     }
     .shape
     {
      background-color:orange;
      height:100px;
      width:100px;
     border-radius: 50px/100px;
      box-shadow:4px 
        3px 4px red, -5px 4px 4px red
      }
    . shape 
         {
      background-color:lightblue;
       height:100px;
       width:100px;
     border-radius: 50% 30%;
       box-shadow: 4px 4px 5px darkblue
         }
</style>
 <title></title>
</head>
<body>
    <div class="shape"></div>
    <br><br>
    <div class="shape"></div>
    <br><br>
    <div class="shape"> </div>
   <br><br>
      <div class="shape"></div>
 </body>
</html>
 
Output is :


CSS Multiple Columns property:

The multiple columns in css apply the column-count, column-width to container element.
This flows the content into a newspaper style layout.

For example:-

<html>
  <head>
<style type="text/css">
      body
      {
        border:4px ridge darkcyan;
      }
      .king
      {
        column-count:3;
        color:deeppink;
        text-align:justify;
       column-rule:ridge 5px darkcyan;
      }
    </style>
<title></title>
    </head>
<body>
  <div class="king">
<p>
Video provides a powerful way to help you prove your point. When you click Online Video, you can paste in the embed code for the video you want to add. You can also type a keyword to search online for the video that best fits your document.
</p>
    </div>
  </body>
</html>

Output is:

Note:-

  • Column-count: Specifies the number of columns the content should be divided.

  • Column-width: Specifies the width for each column.

  • Column-gap: Define space between columns.

  • Column-rule: A shorthand property to set width, style, and color of the vertical line.

# CSS Gradients:

CSS defines two type of Gradients:

  • Linear Gradients (goes down/up/left/right/diagonally).

  • Radial Gradients (defined by their center)

For example:-

<html>
  <head>
   <style type="text/css">
     .shape 
     {
       height:100px;
       width:100px;
       background:linear-gradient(to top,orange,blue);
     }
     .king
     {
       height:100px;
       width:100px;
       background:linear-gradient(to bottom,orange,blue);
     }
     .little
     {
       height:100px;
       width:100px;
       background:linear-gradient(to right,orange,blue);
     }
     .tim
     {
       height:100px;
       width:100px;
       background:linear-gradient(to left,orange,blue);
     }
     </style>
    <title></title>
  </head>
  <body>
    <div class="shape"></div>
    <br><br>
    <div class="king"></div><br><br>
  <div class="little"></div>
    <br><br>
    <div class="tim"></div>
  </body>
</html>

Output is:-

#CSS Repeating linear Gradients:

<html>
  <head>
   <style type="text/css">
     body{
       margin:100px;
     }
     .shape
     {
       height:200px;
       width:200px;
       background:repeating-linear-gradient(red, red 10px, blue, blue 20px);
     }
     </style>
    <title></title>
  </head>
  <body>
    <div class="shape"></div>
  </body>
</html>

Output is:



# CSS Radial Gradients:

<html>
  <head>
    <style type="text/css">
   body
      {
        margin:100px;
      }
      .shape 
     {
       background:radial-gradient(blue, deeppink );
       border-radius:50%;
       height: 150px;
       width:150px;
     }
      .king
     {
       background:radial-gradient(cyan, deeppink );
       height: 150px;
       width:150px;
     }
    </style>
      <title></title>
  </head>
  <body>
    <div class="shape"></div>
    <br><br>
    <div class="king"></div>
  </body>
</html>

Output is:


# CSS Repeating-Radial-Gradients :

<html>
  <head>
   <style type="text/css">
     .shape 
     {
       background:repeating-radial-gradient(yellow, yellow 10px, blue, blue 20% );
       width: 250px;
       height: 250px;
     }
     </style>
    <title></title>
  </head>
  <body>
    <div class="shape"></div>
  </body>
</html>

Output is :











Comments

Post a Comment

Popular posts from this blog

WEBSITE DEVELOPMENT USING HTML AND CSS

-
What is website ? A website is a collection of publicly accessible, interlinked web pages that share a single domain name . Websites, can be created and maintained by an individual, group, business or organisation to serve a variety of purpose. Websites come ina nearly endless variety, including educational sites , news sites , forums , social media sites , e-commerce sites , and so on.  The page within a website are usually a mix of text and other media. That said, there are no rules dictating the form of  a website. Examples of website are: Bing.com    wikipedia.org ,    google.com , amazon.com   etc. Languages used for website development ; The most common programming languages used to develop website are : HTML (Hyper Text Markup Language) JavaScript   CSS (Cascading Style Sheets) PHP: Hypertext Preprocessor Note:- Some of these can be used as an extension of the existing languages but some can be used entirely separate from the other language...
Read more

Introduction to CSS ✍️

-
Image
  Basics About CSS ✍️ Cascading style sheets (CSS) describe how documents are presented on screens, in print, or perhaps how they are pronounced. Cascading style sheets (CSS) provide easy and effective alternatives to specify various attributes for the HTML tags . Using CSS, you can specify s number of style properties for a given HTML element . Each property has a name and a value, separated by a colon (:).  Each property declaration is separated by a semi-colon (;). Advantages of CSS : CSS saves time - You can write CSS once and then reuse same sheet in multiple HTML pages. You can define a style for each HTML element and apply it to as many web pages as you want. Superior styles to HTML - CSS has a much wider array of attributes than HTML so you can give far better look to your HTML page in comparison of HTML attributes. SEO Benefits - Faster loading times and mobile-friendliness, both facilitated by CSS, are important factors for search engine rankings , which can hel...
Read more

Advanced properties of CSS

-
Image
  In this article you will see how you can display your content better on your website with the help of using Css's properties like, text-shadow and box-shadow. #Whenever you want to apply Text-Shadow on your website in html with using CSS values .  Firstly ,  you should know that t ext -shadow accept four values like ; text-shadow:h-shadow v-shadow blur- radius  color ; h-shadow :- It is  horizontal offset of the shadows , in this positive values move the shadow to the right and the negative values move the shadow to the left. v-shadow :- It is vertical offset of the shadows , in this positive values move the shadow down and the nagative values move the shadow up. blur-radius :- The blur radius works optionally in the text-shadow . A large value makes the shadow more dispersed. Color :- This provides colour to the text-shadow. Example :- Here is how you would use the CSS text -shadow property in a HTML file to add a simple shadow to an <h1> element :...
Read more