Titulus CSS3 library

  1. */"@charset UTF8/"*

  2. */CSS3 Document/*

  3. Keeping the rules

Look at the powa!

Each of these examples represents the classes in Titulus the library of the animations and effects with CSS3. You can't combine two classes of the same color, it wont work correctly.

Border Radius

radius-5

 
  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE

radius-t-l-5

 
  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE

radius-t-r-5

 
  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE

radius-b-l-5

 
  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE

radius-b-r-5

 
  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE

radius-10

 
  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE

radius-t-l-10

 
  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE

radius-t-r-10

 
  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE

radius-b-l-10

 
  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE

radius-b-r-10

 
  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE

radius-15

 
  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE

radius-t-l-15

 
  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE

radius-t-r-15

 
  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE

radius-b-l-15

 
  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE

radius-b-r-15

 
  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE

Box Shadow

bs-soft

 
  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE

bs-medium

 
  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE

bs-hard

 
  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE

bs-soft-inset

 
  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE

bs-medium-inset

 
  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE

bs-hard-inset

 
  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE

Text Shadow

ts-soft

lorem ipsum

  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE

ts-medium

lorem ipsum

  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE

ts-hard

lorem ipsum

  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE

Scale

scale-half

titulus - scale-half
  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE

scale-x2

titulus - scale-x2
  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE

scale-2x1y

titulus - scale-2x1y
  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE

scale-1x2y

titulus - scale-1x2y
  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE

Opacity

fade-out-hard

titulus - fade-out-hard
  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE

fade-out-medium

titulus - fade-out-medium
  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE

fade-out-soft

titulus - fade-out-soft (hover)
  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE

fade-in-hard

titulus - fade-in-hard (hover)
  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE

fade-in-soft

titulus - fade-in-hard (hover)
  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE

Rotation

rot-90

titulus - rot-90
  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE

rot-180

titulus - rot-180
  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE

rot-270

titulus - rot-270
  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE

Animations

rot-360-r-loop

titulus - rot-360-r-loop
  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE

rot-360-l-loop

titulus - rot-360-l-loop
  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE

rot-360-pingpong-loop

titulus - rot-360-pingpong-loop
  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE

rot-360-r (hover)

titulus - rot-360-r
  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE

rot-360-r-loop-hover

titulus - rot-360-r-loop-hover
  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE

rot-360-l-loop-hover

titulus - rot-360-l-loop-hover
  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE

pause-anim

titulus - pause-anim
  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE

levitate

titulus - levitate
  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE

Origin

origin-l-t

titulus - origin-l-t
  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE

origin-r-t

titulus - origin-r-t
  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE

origin-l-b

titulus - origin-l-b
  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE

origin-r-b

titulus - origin-r-b
  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE

Figures

circle

 
  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE