CSS Plugins

Lightweight, simple, smart and well structured modular system built upon 16 scalable grids system that generates smooth and itch-free responsive layouts. It contains over 2000 inline plugin classes that can be used to create a fully responsive website with ease.

start coding

Introduction

Effect plugin is completely designed using only CSS3 to create a dynamic web contents garnished with sleek behavioral effects such as transition and animation as well as text related effects.

Text Effects

Effects such as emboss, 3d, inset, retro, neon, blurr, fire, and glow may be applied to texts thus changing the visual presentation from default state.

text-shadow-3d text-shadow-basic text-shadow-emboss text-shadow-emboss2 text-shadow-fire

text-shadow-inset text-shadow-neon text-shadow-retro text-shadow-glow

3d text Effects

3d text

  
             <header class="text-shadow-3d"> 
                 <h1> 3d text </h1>
             </header>
            

text shadow basic

text shadow

  
             <header class="text-shadow-basic"> 
                 <h1> text shadow </h1>
             </header>
            

text shadow emboss

text emboss

  
             <header class="text-shadow-emboss"> 
                 <h1> text shadow emboss </h1>
             </header>
            

text shadow emboss style 2

text shadow fire

  
             <header class="text-shadow-emboss2"> 
                 <h1> text shadow emboss 2 </h1>
             </header>
            

text shadow fire

text shadow fire

  
             <header class="text-shadow-fire"> 
                 <h1> text shadow fire  </h1>
             </header>
           
            

text shadow neon

text shadow neon

  
             <header class="text-shadow-neon"> 
                 <h1> text shadow neon  </h1>
             </header>
          
            

text shadow neon

text shadow retro

  
             <header class="text-shadow-retro"> 
                 <h1> text shadow retro  </h1>
             </header>
          
            

text shadow inset

text shadow inset

  
             <header class="text-shadow-inset"> 
                 <h1> text shadow inset  </h1>
             </header>
          
            

text shadow glow

text glow

  
             <header class="text-shadow-glow"> 
                 <h1> glowing text </h1>
             </header>
            

Animation

Basic Animation Class

.animation-bottom .animation-bounce .animation-bounceoOut .animation-easeOut .animation-fadeIn .animation-hinge .animation-input

.animation-rotate .animation-shake .animation-swing .animation-tada .animation-top .animation-wobble .animation-left .animation-right

Pseudo Class Animation Class

.animation-bottomHover .animation-bounceHover .animation-bounceoOutHover .animation-easeOutHover .animation-fadeInHover

.animation-rotateHover .animation-shakeHover.animation-swingHover .animation-tadaHover .animation-topHover .animation-wobbleHover .animation-leftHover.animation-rightHover .animation-hingeHover .animation-inputHover

Code Samples

This code snippet sample will animate object or element on load

  
            <div class="animation-rotate">
            </div>
            

This code snippet sample will animate object when mouse over an element.

  
            <div class="animation-rotateHover">
            </div>
            

CSS Animation effects

Bottom Animate
Bounce Animate
Bounce Out Animate
FadeIn Animate
Hinge Animate
Left Animate
Right Animate
Rotate Animate
Shake Animate
Tada Animate
Top Animate
Wobble Animate

Box shadow

User can add blurring effect by assigning different shadow characters such as floated, elevated and many more effect depending on the extension of the shadow, opacity and spread within the containing edges. This effect can be applied to so many plugin such as container, buttons, card, image, table and accordion to further bring it alive.

Box shadow - bulge

  
            <div class="box-shadow-bulge">
            </div>
            

Box shadow - card

  
            <div class="box-shadow-card">
            </div>
            

Box shadow - dark

  
            <div class="box-shadow-dark">
            </div>
            

Box shadow - darker

  
            <div class="box-shadow-darker">
            </div>
            

Box shadow - floated

  
            <div class="box-shadow-floated">
            </div>
            

Box shadow - inset

  
            <div class="box-shadow-inset">
            </div>
            

Box shadow - light

  
            <div class="box-shadow-light">
            </div>
            

Box shadow - paper

  
            <div class="box-shadow-paper">
            </div>
            

Box shadow - spread

  
            <div class="box-shadow-spread">
            </div>
            

Box shadow - sticky

  
            <div class="box-shadow-sticky">
            </div>
            

Box shadow - trace

  
            <div class="box-shadow-trace">
            </div>
            

Browser Supports

Code Editor - Customizes CSS plugin with ease

G16framework code it yourself is a handy tool for any code enthusiast who love to establish and extend the style rules already applied to the plugin.

Important: To override a new defined style rule on the existing target plugin, you must implement / inject a keyword (!important) immediately after a new value is being set.

Newly design will be released soon!.

The view only show very small proportion of the original size, copy the code and view in a larger screen.