WEB SOLUTION BANGLADESH LIMITED

WEB SOLUTION BANGLADESH LIMITED

WEB SOLUTION BANGLADESH LIMITED

WEB SOLUTION BANGLADESH LIMITED

WEB SOLUTION BANGLADESH LIMITED

Monday, November 28, 2016

Learn web-design with CSS-3: Learn CSS3 in 4:00 hours

By 7 comments

Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language.CSS3 is a latest standard of css earlier versions(CSS2).The main difference between css2 and css3 is follows. Media Queries. Namespaces. Selectors Level 3.

  1. Media Queries
  2. Namespaces
  3. Selectors Level 3
  4. Color

CSS3 is collaboration of CSS2 specifications and new specifications, we can called this collaboration is module.Some of the modules are shown below
  1. Selectors
  2. Box Model
  3. Backgrounds
  4. Image Values and Replaced Content
  5. Text Effects
  6. 2D Transformations
  7. 3D Transformations
  8. Animations
  9. Multiple Column Layout
  10. User Interface
CSS3 Rounded corners are used to add special colored corner to body or text by using the border-radius property.A simple syntax of rounded corners is as follows −
#rcorners7 {
   border-radius: 60px/15px;
   background: #FF0000;
   padding: 20px; 
   width: 200px;
   height: 150px; 
}
The following table shows the possible values for Rounded corners as follows −
ValuesDescription
border-radiusUse this element for setting four boarder radius property
border-top-left-radiusUse this element for setting the boarder of top left corner
border-top-right-radiusUse this element for setting the boarder of top right corner
border-bottom-right-radiusUse this element for setting the boarder of bottom right corner
border-bottom-left-radiusUse this element for setting the boarder of bottom left corner

Example

This property can have three values. The following example uses both the values −
<html>
   <head>
   
      <style>
         #rcorners1 {
            border-radius: 25px;
            background: #8AC007;
            padding: 20px;
            width: 200px;
            height: 150px;
         }
         #rcorners2 {
            border-radius: 25px;
            border: 2px solid #8AC007;
            padding: 20px; 
            width: 200px;
            height: 150px;
         }
         #rcorners3 {
            border-radius: 25px;
            background: url(paper.gif);
            background-position: left top;
            background-repeat: repeat;
            padding: 20px; 
            width: 200px;
            height: 150px;
         }
      </style>
      
   </head>
   <body>
      <p id="rcorners1">Rounded corners!</p>
      <p id="rcorners2">Rounded corners!</p>
      <p id="rcorners3">Rounded corners!</p>
   </body>
</html>








Read More