The Power of CSS - BarCamp Goa 2011

Slides from my talk at BarCamp Goa 2011.

Note: All slides redone from deck.js to reveal.js

Transcript

1. THE POWER OF CSS By / Aniket Pant @aniket_pant
2. HELLO ^_^
3. FIRST THINGS FIRST
4. USE A MODERN BROWSER A webkit browser like Chrome or something like Mozilla Firefox
5. LET'S START WITH A DEMO Check the . JavaScript JavaScript HTML HTML CSS CSS Result CHANGE MY COLOUR! CHECK ME OUT! full screen result
6. ANOTHER SHORT DEMO Check the . JavaScript JavaScript HTML HTML CSS CSS Result Link #1 Link #2 Link #3 full screen result
7. < 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 >
8. . 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 }
9. ANOTHER COOL THING YOU CAN MAKE Check the . JavaScript JavaScript HTML HTML CSS CSS Result full screen result
10. < 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 >
11. . 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 {
12. “ Make things, change them and play with them. ”
13. QUESTIONS?
14. THE END BY ANIKET PANT / @ANIKET_PANT