+

Shapes






Shapes looks very beautiful in grids. Shapes include basic shapes like squre & circle. PixelzUI provides eight classes.

Types

Following are the three types of shapes.

  1. Square
  2. Semi-rounded Square
  3. Circle

Classes

Following are the classes to use shapes in your scripts.

  1. .sqr
  2. .crl
  3. .shp-xsm
  4. .shp-sm
  5. .shp-md
  6. .shp-lg
  7. .shp-xlg
  8. .shp-srnd
.
=>Other classes are based on color class(es).

How to use

  1. Add some container or grid class.
  2. <div class="cntr">
     <div class="cl cl2">
  3. Add .shp-* as class attribute in <div>.
  4. <div class="shp-*"></div>
  5. Add .sqr as extra class for square shapes.
  6. <div class="shp-* sqr"></div>
  7. Add .shp-srnd as extra class for semi-rounded square shapes.
  8. <div class="shp-* sqr shp-srnd"></div>
  9. Add .crl class for circle shapes.
  10. <div class="shp-* crl"></div>
=>* means (xsm, sm, md ,lg & xlg).

Demo

Square Shapes

Square
Square
Square
Square
Square
Semi-rounded Square Shapes

Square
Square
Square
Square
Square
Circle Shapes

Circle
Circle
Circle
Circle
Circle

Editing

Edit Classes


Shape


 <div class="crl shp-xlg bg-bl t-wt br-bk">Shape</div>

Leave a Reply

Your email address will not be published. Required fields are marked.