Horje
Semantic-UI Shape Types

Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks.

Semantic UI Shape offers us three different types of shapes which are shape, cube, and text. 

Semantic UI Shape Types:

  • Shape: It is used so the shape can be a three-dimensional object including any flat content as aside.
  • Cube: It is used so the cube shape is formatted so that each side is the face of a cube.
  • Text: It is used so the text shape is formatted to allow for sides of text to be displayed.

Syntax:

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

The below examples illustrate the Semantic UI Shape Types.

Example 1: The following example demonstrates the people shape class.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Semantic-UI Shape Types</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" />
</head>
<body>
    <center>
        <h2 class="ui header green">Geeksforgeeks</h2>
        <strong>Semantic-UI Shape Types    </strong>
        <br>
        <div class="ui people shape">
          <div class="sides">
            <div class="active side">
              <div class="ui card">
                <div class="image">
                  <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220311131509/people-200x200.png">
                </div>
                <div class="content">
                  <div class="header">John Dey</div>
                  <div class="meta">
                    <a>Founder of Geeksforgeeks</a>
                  </div>
                  <div class="description">
                    Sandeep Jain. Founder at GeeksforGeeks.
                    DSA Self Paced CourseIndian Institute
                    of Technology, Roorkee.
                  </div>
                </div>
                <div class="extra content">
                  <span class="right floated">
                    Created 2009
                  </span>
                  <span>
                    <i class="user icon"></i>
                    100M+
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
    </center>
</body>
</html>

Output:

Semantic-UI Shape Types

Semantic-UI Shape Types

Example 2: In this example, we will use a cube shape that looks like a dice.

HTML

<html>
<head>
    <title>
        Semantic UI Shape Types
    </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 style="margin-top: 100px"
         class="ui container">
        <h1 class="ui header green">Geeksforgeeks</h1>
        <strong>Semantic UI Shape Types</strong>
     
        <!-- Define the shape -->
        <div class="ui cube shape">
     
        <!-- Define the contents of the sides -->
        <div class="sides">
            <div class="side">
            <div class="content">
                <div class="center">
                This is side 1
                </div>
            </div>
            </div>
            <div class="side">
            <div class="content">
                <div class="center">
                This is side 2
                </div>
            </div>
            </div>
            <div class="side active">
            <div class="content">
                <div class="center">
                This is side 3
                </div>
            </div>
            </div>
            <div class="side">
            <div class="content">
                <div class="center">
                This is side 4
                </div>
            </div>
            </div>
            <div class="side">
            <div class="content">
                <div class="center">
                This is side 5
                </div>
            </div>
            </div>
            <div class="side">
            <div class="content">
                <div class="center">
                This is side 6
                </div>
            </div>
            </div>
        </div>
        </div>
        <br>
        <br>
     
        <!-- Define buttons for flipping the shape -->
        <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 Types

Semantic-UI Shape Types

Example 3: In this example, we will use text shape, so that we can lift the text as it is placed on dice.

HTML

<!DOCTYPE html>
<html>
<head>
     
    <!-- 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 style="margin-top:100px"
        class="ui container">
        <h1 class="ui header green">Geeksforgeeks</h1>
        <strong> Semantic UI Shape Types </strong>
        <br>
        <!-- Define the shape -->
        <div class="ui text shape">
     
        <!-- Define the contents of the sides -->
        <div class="sides">
            <div class="active ui header side">
            Welcome to horje
            </div>
            <div class="ui header side">
            A computer science portal.
            </div>
            <div class="ui header side">
            You can information about
            anything related to computers.
            </div>
            <div class="ui header side">
            You can even contribute
            to help others and earn money.
            </div>
        </div>
        </div>
        <br>
        <br>
     
        <!-- Define buttons for
        flipping the shape -->
        <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 Types

Semantic-UI Shape Types

Reference: https://semantic-ui.com/modules/shape.html


 


Reffered: https://www.geeksforgeeks.org

CSS

Related
Bulma Elements Complete Reference Bulma Elements Complete Reference
Foundation CSS Base Typography Dividers Foundation CSS Base Typography Dividers
Bulma Columns Complete Reference Bulma Columns Complete Reference
Foundation CSS Typography Helpers Foundation CSS Typography Helpers
Semantic-UI Dropdown Content Semantic-UI Dropdown Content

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 10



 

Horje