Semantic-UI Shape Text Type

Last Updated : 11 Mar, 2022

Semantic UI is an open-source framework that offers us special classes to create stunning and responsive user interfaces. It makes use of jQuery and CSS to create pleasant user interfaces that are very much like bootstrap. It has many classes which are used for styling different elements in the HTML web page structure.

A semantic UI shape module is a three-dimensional object displayed in a two-dimensional plane. It can include content on all of its sides.

Note: This module makes use of 3D transformations which are currently supported only in modern browsers.

Semantic-UI Shape Text Type is used to display the text that is formatted for sides of text that is to be displayed.

Semantic-UI Shape Text Type Used Class:

text: This class is used to add text on side of the shape.

Syntax:

div class="ui text shape">
      <div class="sides">
          ...
      </div>
      ...
</div>

Example 1: In this example, we will describe the uses of Semantic-UI Shape Text Type.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Semantic-UI Shape Text Type 
    </title> 
  
    <!-- Include the Semantic UI CSS -->
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
          rel="stylesheet" /> 
  
    <!-- Include jQuery -->
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"> 
    </script> 
  
    <!-- Include Semantic UI -->
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</head> 
  
<body> 
    <div class="ui container center aligned"> 
        <h1 style="color: green;"> 
            GeeksforGeeks 
        </h1> 
          
        <h2>Semantic-UI Shape Text Type</h2> 
  
        <div class="ui text shape"> 
            <div class="sides"> 
                <div class="active ui header side"> 
                    Welcome to GeeksforGeeks 
                </div> 
                <div class="ui header side"> 
                    A computer science portal 
                </div> 
                <div class="ui header side"> 
                    Web Technology 
                </div> 
                <div class="ui header side"> 
                    Java Programming 
                </div> 
            </div> 
        </div> 
        <br><br> 
  
        <button class="ui button up"> 
            Flip-Up 
        </button> 
  
        <button class="ui button right"> 
            Flip-Right 
        </button> 
    </div> 
  
    <script> 
  
        // Initialize the shape 
        $('.shape').shape(); 
        $('.up').click(function () { 
  
            // Make the shape flip up 
            $('.shape').shape('flip up'); 
        }) 
        $('.right').click(function () { 
  
            // Make the shape flip to the right 
            $('.shape').shape('flip right'); 
        }) 
    </script> 
</body> 
  
</html>

Output:

Semantic-UI Shape Text Type

Example 2: In this example, we will describe the uses of Semantic-UI Shape Text Type.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Semantic-UI Shape Text Type 
    </title> 
  
    <!-- Include the Semantic UI CSS -->
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
          rel="stylesheet" /> 
  
    <!-- Include jQuery -->
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"> 
    </script> 
  
    <!-- Include Semantic UI -->
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</head> 
  
<body> 
    <div class="ui container center aligned"> 
        <h1 style="color: green;"> 
            GeeksforGeeks 
        </h1> 
          
        <h2>Semantic-UI Shape Text Type</h2> 
  
        <div class="ui text shape"> 
            <div class="sides"> 
                <div class="active ui header side"> 
                    Welcome to GeeksforGeeks 
                </div> 
                <div class="ui header side"> 
                    A computer science portal 
                </div> 
                <div class="ui header side"> 
                    Web Technology 
                </div> 
                <div class="ui header side"> 
                    Java Programming 
                </div> 
            </div> 
        </div> 
        <br><br> 
  
        <button class="ui button down"> 
            Flip-Down 
        </button> 
  
        <button class="ui button left"> 
            Flip-Left 
        </button> 
    </div> 
  
    <script> 
  
        // Initialize the shape 
        $('.shape').shape(); 
        $('.down').click(function () { 
  
            // Make the shape flip up 
            $('.shape').shape('flip down'); 
        }) 
        $('.left').click(function () { 
  
            // Make the shape flip to the right 
            $('.shape').shape('flip left'); 
        }) 
    </script> 
</body> 
  
</html>