CSS 3 and Presentation

Parashuram N (axemclion)

http://nparashuram.com


Use arrow keys to navigate the slides
Q: Why did the hot girl at the bar ignore the HTML page?

A: Coz it didn't have <style> !!
Why so awesome ?
  • Rounded Corners
  • Web Fonts
  • Transitions and Transforms
  • Shadows
  • Media Queries
  • Selectors
  • Whats next ?

Rounded Corners
// The CSS3 property
border-radius: 10px 5em 10% 3;;

// Firefox
-moz-border-radius: 10px 5em 10% 3; ;

//Webkit
-webkit-border-radius: 10px 5em 10% 3; ;




@font-face 


                    @font-face { 
                    font-family: MyName;
                    src: url('
                    ');
                    }
                    

                    <span style ="font-family:MyName">
                    This is in a default font
                    </span>
Animations (Transitions) 
                        div{
                          background-color: #ABCDEF;
                          transition-property: background-color;
                          transition-duration: 3s;
                        }
						
                        div:hover{
                          background-color: blue;
                        }
                    
                        div{
                          transition-property: left;
                          transition-duration: 3s;
                        }
						
                        div:hover{
                          left: -3em;
                        }
Gradients
http://www.colorzilla.com/gradient-editor/
Transforms 
                        #transformDiv:hover {
                          transform: translate(80px, 80px) scale(0.5, 1.5) rotate(45deg);
                        }
Shadows 
                        div{
                          box-shadow:3px 3px 5px #000;
                          -moz-box-shadow:3px 3px 5px #000;
                          -webkit-box-shadow:3px 3px 5px #000;
                        }


div {
text-shadow: text-shadow:3px 3px 0px GRAY;
}


Media Queries 
                    @media all and (min-width: 480px) and (max-width: 800px) { 
                      #container {width: auto; max-width: 800px;} 
                      #main {width: 70%; float: left;}  
                      #sidebar {width: 29%; float: left; margin-bottom: 10px;} 
                      #pub {width: 29%; margin-left: 70%; float: none;} 
                    }
                    @media all and (max-width: 480px) {
                      #container, #main, #sidebar {width: 100%; font-size: 0.9em;} 
                      #pub {display: none;} 
                      #sidebar ul li {display: inline;}  
                      *{clear: both; border-left: 0 !important; border-right: 0 !important;} 
                    }
Courtsey: Shewtank
Selectors 
//Matches anchors elements which link to wikipedia		        
a[href="www.wikipedia.org"]{	
    text-decoration: underline;
}

//Matches all images whose ALT attribute start with 'The'
img[alt~="The"]{
	margin-right: 55px;
	margin-bottom: 15px;
}

//Matches all images whose ALT attribute have the word 'TV' in them
img[alt*="TV"]{
	margin-bottom: 15px;
}
}
//Matches the first list element
ul li:first-child{ //css2
	color: red;
	text-decoration: underline;
}

//Matches the last list element
ul li:last-child{ //css2
	color: blue;
}

//Matches every third list element
ul li:nth-child(3n){ //css3!
	color: green;
}
And More...
and the Presentation part...