Semantic-UI | Shape

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It has different elements that can be used to make websites look more amazing. One of the modules in Semantic UI is the shape module. A shape 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.

Syntax:

$('.shape').shape();
$('.up').click(function() {
   $('.shape').shape('flip up');
})
$('.right').click(function() {
   $('.shape').shape('flip right');
})

Example: The below example shows how jQuery can be used to ‘flip back’ or ‘flip left’ the cube and rotate it accordingly.

html

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
<head>
  <title>
    Semantic UI
  </title>
  
  <!-- Include the Semantic UI CSS -->
  <link href=
    rel="stylesheet" />
</head>
  
<body>
  <div style="margin-top: 100px" 
       class="ui container">
    <h2>Shape</h2>
  
    <!-- 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>
  
  <!-- Include jQuery -->
  </script>
  
  <!-- Include Semantic UI -->
  </script>
  <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>

chevron_right


Output:
 



Example: The below example shows a text shape which allows text to be shown on the sides of the shape.

html

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
<head>
  <title>
    Semantic UI
  </title>
  
  <!-- Include the Semantic UI CSS -->
        rel="stylesheet" />
</head>
<body>
  <div style="margin-top: 100px"
       class="ui container">
    <h2>Shape</h2>
  
    <!-- 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 geeksforgeeks
        </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>
  <!-- Include jQuery -->
  </script>
  
  <!-- Include Semantic UI -->
  </script>
  <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>

chevron_right


Output:
 




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.