W3CSS Tag Types

In the last article we studied how to create tags via w3-tag class. In this article we shall see some advanced usage of tags. We shall see different W3CSS tag types including rounded tags, tags as road signs, tilted tags and spinning tags. So let the fun begin.

Tags as Road Signs

You can make normal tags look like road signs. To do so, create a div and give it some background color and padding and round its borders. Inside the div create a tag and give it same background color as the outer div. Also give it a border. Inside the tag, write whatever you want. The output will be a road sign like tag. 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-tag w3-round w3-blue" style="padding:4px">
  <div class="w3-tag w3-round w3-blue w3-border w3-border-yellow">
    Michal Jackson Avenue
  </div>
</div>
 


</body>
    
</html>

Download the code Try the code

Rounded Tags

You can also create rounded tags. To do so, add w3-round-size class to the tag. Size can be small, large,xlarge xxlarge anything. Take a look at the following example to see rounded tags 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>
    
<span class="w3-tag w3-padding w3-round-large w3-orange w3-center">
WARNING<br>
KANGROO<br>
CROSSING
</span>
 


</body>
    
</html>

Download the code Try the code

Rotating Tags

One of the most awesome aspects of tags is that they can be rotated. Yes, you can create tilted tags. To so, add inline style property transform and set it to the degree of rotation you want. In the following example a tag is rotated -10 degree. 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>
    
<span class="w3-tag w3-xxlarge w3-padding w3-pink" style="transform:rotate(-10deg)">
Sale on Ladies Items!
</span>
 


</body>
    
</html>

Download the code Try the code

Spinning Tags

Apart from rotating a tag to certain degree you can also create tags that spin about its axis. Unlike rotating tags, you do not require any external style to spin a tag. Rather, you simple have to add w3-spin class to a tag and it will make tag rotate clockwise about its axis. Take a look at the following code sample:

<!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>
    
<span class="w3-tag w3-spin w3-xlarge w3-purple">
Fun Fair 2017
</span>
 


</body>
    
</html>

Download the code Try the code

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .