THE POWER OF CSS By / Aniket Pant @aniket_pant 

HELLO ^_^ 

FIRST THINGS FIRST 

USE A MODERN BROWSER A webkit browser like Chrome or something like Mozilla Firefox 

LET'S START WITH A DEMO Check the . JavaScript JavaScript HTML HTML CSS CSS Result CHANGE MY COLOUR! CHECK ME OUT! full screen result 

ANOTHER SHORT DEMO Check the . JavaScript JavaScript HTML HTML CSS CSS Result Link #1 Link #2 Link #3 full screen result 

< u l c l a s s = " a w e s o m e - l i s t " > < l i > < a h r e f = " # " > L i n k # 1 < / a > < / l i > < l i > < a h r e f = " # " > L i n k # 2 < / a > < / l i > < l i > < a h r e f = " # " > L i n k # 3 < / a > < / l i > < l i > < a h r e f = " # " > L i n k # 4 < / a > < / l i > < / u l > 

. a w e s o m e - l i s t { w i d t h : 2 0 0 p x ; m a r g i n : 0 a u t o ! i m p o r t a n t ; } . a w e s o m e - l i s t l i { w i d t h : 1 0 0 p x ; m a r g i n : 1 e m ; p a d d i n g : 0 . 2 5 e m ; t e x t - a l i g n : c e n t e r ; b a c k g r o u n d : r g b a ( 0 , 0 , 0 , 0 . 5 ) ; l i s t - s t y l e : n o n e ; t r a n s i t i o n : a l l 0 . 2 5 s l i n e a r ; } . a w e s o m e - l i s t l i : n t h - o f - t y p e ( 4 n + 1 ) : h o v e r { b a c k g r o u n d : r o y a l b l u e ; } . a w e s o m e - l i s t l i : n t h - o f - t y p e ( 4 n + 3 ) : h o v e r { b a c k g r o u n d : # 3 2 C D 3 2 ; } . a w e s o m e - l i s t l i : n t h - o f - t y p e ( 4 n + 2 ) : h o v e r { b a c k g r o u n d : o r a n g e r e d ; } . a w e s o m e - l i s t l i : n t h - o f - t y p e ( 4 n ) : h o v e r { b a c k g r o u n d : r g b a ( 3 6 0 , 2 , 4 0 , 1 ) ; } . a w e s o m e - l i s t l i : h o v e r { m a r g i n - l e f t : 5 0 p x ; c o l o r : # f f f ; t r a n s i t i o n : a l l 0 . 2 5 s l i n e a r ; } . a w e s o m e - l i s t l i a { d i s p l a y : b l o c k ; c o l o r : # f f f ; f o n t - s i z e : 1 . 5 e m ; t e x t - d e c o r a t i o n : n o n e ; } . a w e s o m e - l i s t l i a : h o v e r , . a w e s o m e - l i s t l i a : f o c u s { c o l o r : # f f f } 

ANOTHER COOL THING YOU CAN MAKE Check the . JavaScript JavaScript HTML HTML CSS CSS Result full screen result 

< d i v i d = " f i g u r e - s p a c e " > < d i v c l a s s = " f i g u r e f i g u r e - 1 " > < / d i v > < d i v c l a s s = " f i g u r e f i g u r e - 2 " > < / d i v > < / d i v > 

. f i g u r e - 2 { b o x - s h a d o w : 0 - 2 p x 5 p x 0 p x # 0 0 0 } . f i g u r e - 2 : h o v e r { - m o z - t r a n s f o r m : r o t a t e ( - 3 6 0 d e g ) ; - m s - t r a n s f o r m : r o t a t e ( - 3 6 0 d e g ) ; - o - t r a n s f o r m : r o t a t e ( - 3 6 0 d e g ) ; - w e b k i t - t r a n s f o r m : r o t a t e ( - 3 6 0 d e g ) ; b o x - s h a d o w : 0 - 2 p x 5 p x 0 p x # 0 0 0 ; t r a n s f o r m : r o t a t e ( - 3 6 0 d e g ) ; } . f i g u r e - 1 { b o x - s h a d o w : 0 2 p x 5 p x 0 p x # 0 0 0 } . f i g u r e - 1 : h o v e r { - m o z - t r a n s f o r m : r o t a t e ( 3 6 0 d e g ) ; - m s - t r a n s f o r m : r o t a t e ( 3 6 0 d e g ) ; - o - t r a n s f o r m : r o t a t e ( 3 6 0 d e g ) ; - w e b k i t - t r a n s f o r m : r o t a t e ( 3 6 0 d e g ) ; t r a n s f o r m : r o t a t e ( 3 6 0 d e g ) ; } . f i g u r e { f l o a t : l e f t ; h e i g h t : 2 0 0 p x ; w i d t h : 2 0 0 p x ; m a r g i n : 3 0 p x ; - m o z - b o r d e r - r a d i u s : 1 0 0 % ; - m o z - t r a n s i t i o n : a l l 0 . 2 5 s e a s e - i n - o u t ; - w e b k i t - b o r d e r - r a d i u s : 1 0 0 % ; - w e b k i t - t r a n s i t i o n : a l l 0 . 2 5 s e a s e - i n - o u t ; b a c k g r o u n d : # f 0 f 0 f 0 ; b o r d e r - r a d i u s : 1 0 0 % ; t r a n s i t i o n : a l l 0 . 2 5 s e a s e - i n - o u t ; } . f i g u r e : h o v e r { 

“ Make things, change them and play with them. ” 

QUESTIONS? 

THE END BY ANIKET PANT / @ANIKET_PANT