W3CSS Buttons

Now we have come to more practical stuff. We have covered panels, containers, padding, margins, displays etc till now. Now we are moving towards real building blocks of a website. We shall start our discussion with buttons. Buttons are one of the most integral features of website. Buttons are there for user to take a certain action on a website. W3CSS buttons are styled via myriad of classes. In this article and the upcoming one, we shall discuss buttons in details. Let’s start our discussion with simple buttons.

There are seven basic button classes: w3-btn class is used to create a basic button. The w3-btn-group class creates group of button. Similarly w3-btn-floating creates a floating circular button. W3-btn-block creates a full width button. Let’s see these classes in action.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

     <button class="w3-btn">Click me</button>
     <button class="w3-btn-floating">Click me</button>
     <button class="w3-btn-floating-large">Click me</button>
     <button class="w3-btn-bar">Click me</button>
     <button class="w3-btn-block">Click me</button>
     <button class="w3-btn-ripple">Click me</button>
        
        
</div>
    
    
</html>

Download the code Try the code

W3CSS Buttons Color

You can use w3-color classes along with button class to give different colors to the button. You can also add w3-hover-color class to a button to change its background color upon mouse hover. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

     <button class="w3-btn w3-red w3-hover-pale-red">Click me</button>
     <button class="w3-btn w3-yellow w3-hover-pale-yellow">Click me</button>
     <button class="w3-btn w3-green w3-hover-pale-green">Click me</button>
     <button class="w3-btn w3-purple w3-hover-yellow">Click me</button>
     <button class="w3-btn w3-pink w3-hover-red">Click me</button>

         
</div>
    
    
</html>

Download the code Try the code

In the above code we have five buttons with colors, red, yellow, green, purple and pink. We have also added hover colors to these buttons. If you open the above page in browser, you shall see five buttons of different colors. If you hover your mouse over these buttons, their background color shall change.

Button Shapes and Sizes

You can create round buttons by adding w3-round-size class to W3CSS button. Size can large, xlarge and xxlarge. Similarly, you can change size of a button via w3-tiny, w3-small, w3-medium, w3-large, w3-xlarge, w3-xxlarge, w3-xxlarge and w3-jumbo classes. Lets take a look at the following example to see buttons of different sizes and shapes.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

     <button class="w3-btn w3-red w3-round">Click me</button>
    <button class="w3-btn w3-red w3-round-xlarge">Click me</button>
    
    <button class="w3-btn w3-red w3-tiny">Click me</button>
    <button class="w3-btn w3-red w3-jumbo">Click me</button>
      
</div>
     
</html>

Download the code Try the code

W3CSS Display

Displaying an element at the right location is probably one of the most important tasks of front end development. Element positioning with via core CSS is very complex. However, W3CSS display classes make it very easy to display an element at the right position. There are thirteen W3CSS display classes that set the display position of an element. They are as follows:

  • w3-display-container: This is class that contains all the display elements.
  • w3-display-topleft: Display the element at top left location
  • w3-display-topright: Display the element at top right location
  • w3-dispaly-left: Display the element at the middle left location of an element.
  • w3-display-right: Display the element at the middle right location of an element
  • w3-display-bottomleft:Display the element at bottom left location.
  • w3-display-bottomright: Display the element at bottom right location.
  • w3-display-topmiddle: Displays the element at the top middle
  • w3-display-middle: Display the element at the middle horizontally and vertically.
  • w3-display-bottom: Display the element at bottom middle.
  • w3-left: Left float an element.
  • w3-right: Right float an element.
  • w3-show: Shows the element
  • w3-hide: Hides the element

Now let’s take a look at an example where we can see first ten of these classes in action.

W3CSS Display Example

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <div class="w3-display-container w3-yellow" style="height:400px;">
        <div class="w3-display-topleft w3-pink">Top Left.</div>
        <div class="w3-display-topmiddle w3-pink">Top Middle.</div>
        <div class="w3-display-topright w3-pink">Top Right.</div>
        
         <div class="w3-display-left w3-pink"> Left.</div>
        <div class="w3-display-middle w3-pink">Middle.</div>
        <div class="w3-display-right w3-pink">Right.</div>
        
         <div class="w3-display-bottomleft w3-pink ">Bottom Left.</div>
        <div class="w3-display-bottommiddle w3-pink ">Bottom Middle.</div>
        <div class="w3-display-bottomright w3-pink ">Bottom Right.</div>
        
        
    
    </div>
    
    
</html>

Download the code Try the code

In the above code, we created an outer div with class w3-display-container. We set the background color of this class to yellow and gave it a height of 400px. Next, inside this outer div, we created nine more divs. The location of first div was set to top right using w3-display-topright classes. Similarly, the remaining classes were positioned at all the corners and top middle, bottom middle, right middle, left middle and center middle of the outer div.

W3 Display Hover

If you add a class w3-display-hover to a div inside a div with class w3-display-containter, the internal div shall be visible only when the user hovers mouse over the parent div. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <div class="w3-display-container w3-yellow" style="height:400px;">
        <div class="w3-display-topleft w3-pink w3-display-hover">Top Left.</div>
        <div class="w3-display-topmiddle w3-pink w3-display-hover">Top Middle.</div>
        <div class="w3-display-topright w3-pink w3-display-hover">Top Right.</div>
        
         <div class="w3-display-left w3-pink w3-display-hover"> Left.</div>
        <div class="w3-display-middle w3-pink">Hover mouse here.</div>
        <div class="w3-display-right w3-pink w3-display-hover">Right.</div>
        
         <div class="w3-display-bottomleft w3-pink w3-display-hover">Bottom Left.</div>
        <div class="w3-display-bottommiddle w3-pink w3-display-hover">Bottom Middle.</div>
        <div class="w3-display-bottomright w3-pink w3-display-hover">Bottom Right.</div>
        
        
    
    </div>
    
    
</html>

Download the code Try the code

W3CSS Margins

In the previous article we studied what different types of padding classes are available in W3CSS. In this article we shall study W3CSS margins. There are a total of 8 classes in W3CSS that deal with margins. These are w3-margin which adds a 16px margin to all sides of an element. Similarly, w3-margin-top and w3-margin-bottom classes add a 16px margin at the top and bottom of an element. Likewise, w3-margin-right and w3-margin-left classes add a 16px margin to the right and left of an element. w3-margin-0 removes margins from all sides. Finally there is a w3-section class that adds a top and bottom margin of 16px to an element.

W3CSS Margins Example

Let’s take very simple example where we shall see w3-margin, w3-margin-top, w3-margin-bottom, w3-margin-right and w3-margin-left classes in action. Take a look at the following piece of code.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <div class="w3-panel w3-pink w3-margin">This is some random text</div>
    <div class="w3-panel w3-pink w3-margin-top">This is some random text</div>
    <div class="w3-panel w3-pink w3-margin-bottom">This is some random text</div>
    <div class="w3-panel w3-pink w3-margin-right">This is some random text</div>
    <div class="w3-panel w3-pink w3-margin-left">This is some random text</div>
    
</html>

Download the code Try the code

In the above example we have five divs and we have set different margins to each of the div. The first div has margin of 16px on all sides. The second div has a margin on top of 16px while the third div has a margin of 16px at the bottom. Similarly, 4h and 5th divs have margin on right and left respectively. To see if these margin classes actual work, open the above web page in the browser and you should see corresponding margin of 16px applied.

W3CSS Section

As said earlier, the w3-section class adds 16px both at the bottom and top of the element. Let’s see w3-section class in action.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <div class="w3-panel w3-pink w3-section">This is some random text</div>
    <div class="w3-panel w3-pink">This is some random text</div>

    
</html>

Download the code Try the code

Take a look at the above code, here we have a div with class w3-section. For the second div we did not specify any margin class. When you open the above page in browser, you shall see that the upper pink div has margin both at its top and bottom.

W3CSS Padding

Padding is the distance between the contents of the element and the border of the element. Unlike margins, it is the internal distance between element border and the content inside the element. Though, you can use raw CSS to specify precise padding measurements for any element, W3CSS padding classes come with some general padding size.

Padding for different elements can be specified via two sets of classes in W3CSS. The first set is the number based padding where you use class w3-padding-x where x can be 2,4,8,12,16,24,32,48,64 and 128. The number corresponds to the number of pixels of padding added at the top and bottom. For instance if you use class w3-padding-28 for an element, it will add 28 pixel padding at the top and bottom of the element. Similarly, using w3-padding-0 removes padding from top and bottom of the element.

W3CSS Padding Example

Let’s take a look at a an example that demonstrates usage of number based padding classes.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <div class="w3-panel w3-blue w3-padding-4">
        
        <p>This is 4 pixels padding at top and bottom<p>
    </div>
    
       <div class="w3-panel w3-blue w3-padding-8">
        
        <p>This is 8 pixels padding at top and bottom<p>
    </div>
    
       <div class="w3-panel w3-blue w3-padding-12">
        
        <p>This is 12 pixels padding at top and bottom<p>
    </div>
    
       <div class="w3-panel w3-blue w3-padding-16">
        
        <p>This is 16 pixels padding at top and bottom<p>
    </div>
    
       <div class="w3-panel w3-blue w3-padding-24">
        
        <p>This is 24 pixels padding at top and bottom<p>
    </div>
    
      <div class="w3-panel w3-blue w3-padding-32">
        
        <p>This is 32 pixels padding at top and bottom<p>
    </div>
    
      <div class="w3-panel w3-blue w3-padding-48">
        
        <p>This is 48 pixels padding at top and bottom<p>
    </div>
    
      <div class="w3-panel w3-blue w3-padding-64">
        
        <p>This is 64 pixels padding at top and bottom<p>
    </div>
    
        <div class="w3-panel w3-blue w3-padding-128">
        
        <p>This is 128 pixels padding at top and bottom<p>
    </div>

</html>

Download the code Try the code

In the above code, we have 9 panels with blue background. The 9 numbered padding classes from w3-padding-4 to w3-padding-128 have been added to each individual panel. In the output, you can see the effect of each padding class.

Apart from number based padding, you can semantic classes for defining padding. They are w3-padding class which adds 8 px top and bottom padding and 16px left and right padding. Similarly, w3-padding-tiny adds 2px top and bottom and 4px left and right padding. Similarly, w3-padding-small adds 4px top and bottom and 8px left and right padding. w3-padding-medium is same as w3-padding. w3-padding-large adds 12px top and bottom, while 24px left and right padding. w3-padding-xlarge adds 16px top and bottom, while 32px left and right padding. Similarly, w3-padding-xxlarge adds 24px top and bottom, while 48px left and right padding. Finally, w3-padding-jumbo adds 32px top and bottom, while 64px left and right padding.

Take a look at a simple example to see semantic padding classes in action.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <div class="w3-panel w3-blue w3-padding-tiny">
        
        <p>This is a w3-padding-tiny padding<p>
    </div>
    
    
    <div class="w3-panel w3-blue w3-padding-small">
        
        <p>This is a w3-padding-small padding<p>
    </div>
    
    
    <div class="w3-panel w3-blue w3-padding-medium">
        
        <p>This is a w3-padding-medium padding<p>
    </div>
    
    
    <div class="w3-panel w3-blue w3-padding-large">
        
        <p>This is a w3-padding-large padding <p>
    </div>
    
    
    <div class="w3-panel w3-blue w3-padding-xlarge">
        
        <p>This is a w3-padding-xlarge padding<p>
    </div>
    
    
    <div class="w3-panel w3-blue w3-padding-xxlarge">
        
        <p>This is a w3-padding-xxlarge padding<p>
    </div>
    
    <div class="w3-panel w3-blue w3-padding-jumbo">
        
        <p>This is a w3-padding-jumbo padding<p>
    </div>
    
     

</html>

Download the code Try the code

W3CSS Round

Square elements look more robust but rounded elements look more elegant and add to the aesthetics of a website. We often need to create rounded borders around the panels or containers, we also need to create rounded images and divs in our websites. W3CSS Round classes help us achieve all these tasks and we shall look at them in detail in this article.

There are seven classes that can be used to add rounded border around a container. They include w3-round, w3-round-medium, w3-round-small, w3-round-large, w3-round-xlarge, w3-round-xxlarge and w3-round-jumbo. Let’s look at them in action in our first example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <div class="w3-round w3-blue">
        
        <p>This has class w3-round<p>
    </div>
    
     <div class="w3-round-medium w3-blue">
        
        <p>This has class w3-round-medium<p>
    </div>
     <div class="w3-round-small w3-blue">
        
        <p>This has class w3-round-small<p>
    </div>
     <div class="w3-round-large w3-blue">
        
        <p>This has class w3-round-large<p>
    </div>
     <div class="w3-round-xlarge w3-blue">
        
        <p>This has class w3-round-xlarge<p>
    </div>
     <div class="w3-round-xxlarge w3-blue">
        
        <p>This has class w3-round-xxlarge<p>
    </div>
     <div class="w3-round-jumbo w3-blue">
        
        <p>This has class w3-round-jumbo<p>
    </div>
    

</html>

Download the code Try the code

In the above example, you can see all the seven border round classes in action. Apart from panels, you can also add round images. To do so, w3-circle class is used.

W3CSS Round Images

Take a look at the following example to see how we can round images via w3-circle class.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>


    
    <img class="w3-circle" src="http://images.freeimages.com/images/previews/de2/boats-on-the-lake-1380939.jpg" alt="Car" style="width:100%">

    <div class="w3-pink w3-circle w3-center">
    <p>This is text inside a circle div.</p>
        <p>This is text inside a circle div.</p>
        <p>This is text inside a circle div.</p>
        <p>This is text inside a circle div.</p>
        <p>This is text inside a circle div.</p>
        <p>This is text inside a circle div.</p>
        <p>This is text inside a circle div.</p>
        <p>This is text inside a circle div.</p>
    </div>

</body>

</html>

Download the code Try the code

The above code has one image and a circular div. Let’s first talk about the image. We have simply added w3-circle class to its image tag. Similarly, for the div we included 5 paragraphs inside it and add w3-circle class to it as well

Now if you open the above page in browser, you might see that the image is not perfectly circle. This is because its width and height is not same. What w3-circle does is, it sets border-radius property of the div and image to 100%. Therefore a perfect circle is formed only if the width and height of the image or div is equal, otherwise an elliptical shape is achieved as is the case with the image and div in the above code.

This article explained W3CSS Round classes, in the upcoming article, we shall start our discussion on padding and margins in W3CSS, keep visiting this site.

W3CSS Fonts

The last article dealt with text properties. In this article we shall explain W3CSS Fonts and different classes that are used to style font size and font styles. There are eight classes in total that can be used to style W3CSS fonts size. The are w3-tiny, w3-small, w3-medium, w3-large,w3-xlarge, w3-xxlarge, w3-xxxlarge, w3-jumbo. The default class is w3-medium. Take a look at the following example to see each of them in action.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <div class="w3-tiny">This is tiny text</div>
     <div class="w3-small">This is small text</div>
     <div class="w3-medium">This is medium text</div>
     <div class="w3-large">This is large text</div>
    <div class="w3-xlarge">This is xlarge text</div>
    <div class="w3-xxlarge">This is xxlarge text</div>
    <div class="w3-xxxlarge">This is xxxlarge text</div>
    <div class="w3-jumbo">This is jumbo text</div>
    
</html>

Download the code Try the code

If you open the above page in browser, you shall see all the eight font sizes available in the W3CSS font classes.

It is very important to note here that you can override the default sizes in three sections i.e. in the header section, in the external style sheet and referring it after the W3CSS styles sheet or you can directly edit styles in the W3CSS library file. For instance the default size for h1 in W3CSS framework is 36 pixels. You can modify it.

Adding External Fonts to your page

Apart from available fonts, you can also add fonts from external source such as google fonts to your webpage. Simply add link to the external stylesheet for the font that you want to add. Give that font some name in the header section and use it in your program. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Russo+One" rel="stylesheet">
    
<style>
    
    .w3-josefin{
        font-family: 'Josefin Sans', sans-serif;
    }
    
    .w3-rossoone {
        font-family: 'Russo One', sans-serif;
    }
</style>
    
</head>
    
<body>

    <div class="w3-josefin w3-xlarge">This is text with josefin font.</div>
    <div class="w3-rossoone">This is text with josefin font.</div>
 
</html>

Download the code Try the code

Pay very close attention to the above code. Take a look at the header section first. Here we have added to links to two external stylesheets for two different fonts. First is the josefin sans and the other is rosso one. Next, we created internal style in the header where we created two classes w3-josefin and w3-rossoone. The first class sets the font family to josefin sans font while the second class sets it it rosso one font. Inside the body we created two divs. First div has class w3-josefin and the second div has class w3-rossoone. If you open the page in browser you shall see that the text inside the first div is in josefin sans font while the text in the second div shall be in rosso one font.

W3CSS Text

In the previous article, we studied about Cards. In this article we shall focus on W3CSS text. W3CSS framework contains many classes that are used to style text and add text effects. These classes can align text, center text, add shadows to the text, and change its opacity. In this article, we shall discuss some of these classes.

W3CSS Text Alignment

There are three classes that are used to align text within a container element. The w3-left-align aligns the content to left, the w3-right-align aligns the content to right while w3-center centers the content. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <div class="w3-left-align">This is left aligned.</div>
    <div class="w3-center">This is centered.</div>
    <div class="w3-right-align">This is right aligned.</div>
    
  
    

</html>

Download the code Try the code

In the above code we have three divs. In the first div the content is aligned left. The second div aligns content in the center while the third div has content aligned to right.

Wide and Slim Text

A very interesting property of W3CSS is that you can wide and slim the text. Wide text has additional spaces between each character while slim text has compressed space between each character. The classes used for widening and slimming the text are w3-wide and w3-slim. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <div class="w3-wide">This is wide text.</div>
    <div class="w3-slim">This is slim text.</div>
   
    
  
    

</html>

Download the code Try the code

You can see in the above code that it has two divs. The first div has class w3-wide while the second div has a class w3-slim. If you open the above page in browser, you shall see wide text in the first line and slim text in the second line.

Shadow and Opacity

You can also add shadow to the text via w3-text-shadow class. Similarly, you can add opacity to the text via w3-opacity class. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <div class="w3-panel w3-blue w3-xxlarge">
        <h1 class="w3-text-shadow">Text Shadow</h1>
    </div>
    
     <div class="w3-panel w3-blue w3-xxlarge">
        <h1 class="w3-opacity">Text opacity</h1>
    </div>
    


</html>

Download the code Try the code

In the first panel we have added a shadow to the text while in the second panel we have added text with opacity.

W3CSS Card

When we talk about cards, the first thing that comes to our minds are greeting cards or business. W3CSS cards are used to create effects like these. W3CSS cards are basically containers with shadowed border. The class used to create these cards is the w3-card-x where x is the number of pixels of shadowed border. This can be 2,4,8,12, 16 and 24. Let’s create a very simple W3CSS card. Take a look at the following example.

W3CSS Card Example

It is very simple to create a card with W3CSS, simply use the class w3-card with any div.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <div class="w3-card">
        <h2>This is a card</h2>
        <p>It has white background!<p>
    </div>
    
      <div class="w3-card-8 w3-yellow">
        <h2>This is a card</h2>
        <p>It has pale yellow background!<p>
    </div>
    

</html>

Download the code Try the code

In the above example, we create two cards: One with the shadow and the other without shadow. The card without shadow is a simple div with class w3-card. By default the background for card is white and a black border appears around it. The second class has a shadow of 8 pixels and its background color is set to yellow.

W3CSS Card with Header and Footer

You can add containers within a card div to create multiple sections within a card. For instance, you can create header, content and footer section using container classes within a card. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <div class="w3-card-8">

<header class="w3-container w3-yellow">
  <h1>Knowledge Hills</h1>
</header>

<div class="w3-container">
  <p>Best website for learning new technologies...</p>
</div>

<footer class="w3-container w3-yellow">
  <h5>Copyright @ Knowledgehills.com</h5>
</footer>

</div>
    

</html>

Download the code Try the code

In the above example, we have a card with three sections. The header section is a container with h1 heading and background of yellow. The content has white background and contains a paragraph while footer has an h5 heading.

Hover Shadow Effect

You can also add shadow effect to any div when you move mouse over it by adding w3-hover-shadow class to the div. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <div class="w3-blue w3-hover-shadow w3-center">
        <h2>Move Mouse Over Me</h2>

    </div>
    
 
    

</html>

Download the code Try the code

If you open the above div in browser, you should see a blue div. When you hover your mouse over that div, you shall see a shadow appear below the div.

W3CSS Closing and Opening Panels

In the last article we started our discussion regarding W3CSS panels. We saw how to create simple panels and how to create notes and quotes effect via panels. In this article we shall study W3CSS closing and opening panels. But before that we shall see how to create rounded panels. So, let’s get our hands dirty!

W3CSS Rounded Panels

Creating rounded panel is extremely simple. You just have to add the class w3-round-size, where you have to replace size with the roundness size you want. For instance if you want large rounded border you can use w3-round-xxlarge as in the following example. Take a look at it.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <div class="w3-panel w3-purple w3-round-xxlarge">
        <h2>This is a rounded panel</h2>
        <p>It has purple background!<p>
    </div>
    

</html>

Download the code Try the code

If you open the above page in browser, you should see a purple panel with rounded corners.

W3CSS closing and Opening Panels

The following example is probably the trickiest example of the article. Here we have a button whose onclick event opens a div with id “paneldiv”. This button basically opens a panel. Similarly, if you look at the panel div, here first element is the span tag with class “w3-closebtn”, the onclick event of this span tag sets the display property of the parent div i.e panel div to none, which hides the panel. By default the panel div’s display property is set to none. Take a look at the following code.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
    <button class="w3-btn w3-green" onclick="document.getElementById('paneldiv').style.display='block'">Show Blue Panel</button>

    <div id="paneldiv" class="w3-panel w3-blue" style="display:none">
        <span class="w3-closebtn" onclick="this.parentElement.style.display='none'">X</span>
        <h2>This is a panel</h2>
        <p>It has blue background!<p>
    </div>
    

</html>

Download the code Try the code

Now if you open the above page in browser, you should see a green button which reads “Show Blue Panel”. If you click the button the blue panel appears. Notice that blue panel has a cross button at top right corner, clicking the cross closes the panel. You can again, open the panel clicking the green button and so on.

Panels are extremely useful for a variety of purposes. In the next article, we shall see W3CSS cards.

W3CSS Panels

W3CSS panels are a type of container, however panels add top and bottom margin of 16 pixels in addition to left and right padding of 16 pixels. Panels are most commonly used for displaying notes, quotes, alerts, cards etc. You can also create closeable and show-able panels. In this article we shall see all of these different types of panels.

A simple W3CSS Panel

You can create a simple W3CSS panel via only two classes: A w3-panel and w3-color class. The later defines the background color of the panel. Take a look at the following code snippet.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <div class="w3-panel w3-blue">
        <h2>This is a panel</h2>
        <p>It has blue background!<p>
    </div>
    


</html>

Download the code Try the code

In the above code we have a simple panel with a heading and paragraph. The background color of the panel is blue. If you open the panel in the browser, you shall see a top margin of 16 pixels. This is where a panel differes from simple container.

Using Panel for Creating Notes

W3CSS panels can also be used for creating notes. Simply add some pale background color to the panel and add a leftbar margin of your desired color. The resulting panel looks like a note. Take a look at the following piece of code.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <div class="w3-panel w3-pale-yellow w3-leftbar w3-border-red">
        <h2>This is a panel</h2>
        <p>It has blue background!<p>
    </div>
    

</html>

Download the code Try the code

In the above code we use the w3-pale-yellow class to set the background of the panel to pale yellow. Next we add w3-leftbar class and then w3-border-red class to add a left border to the panel. This creates a notes effect using panel.

Using Panel for Creating Quotes

Like notes, the W3CSS panel can also be used to create quotes type affect. In the following example quotes effec has been created using panels. Take a look at it.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <div class="w3-panel w3-pale-green w3-leftbar w3-xxlarge w3-sans-serif">
        
        <p><i>"Allwork and no play, makes jack a dull boy"</i><p>
    </div>
    

</html>

Download the code Try the code

In addition to adding pale class and left bar, we have added w3-xxlarge and w3-sans-serif classes to create a quotes effect. Inside the panel div, we have italicized the text to create real quote effect. We shall see remaining uses of panel class in the next article.

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .