Brief presentation about CSS3

1. Jimmy Campos - @JimACampos

2. Agenda
Vendor Prefixes
First & Last Child
N-child
First Line & Letter
Border Radius
Box Shadow
Multiple Columns
Transitions
Transformations
Prefix free
Google Fonts

3. CSS Vendor Prefixes
Android: -webkit-
Chrome: -webkit-
Firefox: -moz-
Internet Explorer: -ms-
iOS: -webkit-
Opera: -o-
Safari: -webkit-

4. Downloading
http://www.initializr.com/

5. First and Last child
#big_section p:first-child{
background-color: blue;
}
#big_section p:last-child{
background-color: yellow;
}

6. N-child(2n)
#list li:nth-child(2n)
{
background:red;
}

7. First Line
#p_line:first-line
{
background-color:green;
}

8. First Letter
#p_line:first-letter
{
font-size:400%;
color:black;
font-weight: bolder;
}

9. Border radius
-webkit-border-radius: 10px 90px 90px 10px;
border-radius: 10px 90px 90px 10px;

10. Box shadow
-webkit-box-shadow: 50px 20px 30px 0px rgba
(30, 90, 10, 0.1);
box-shadow: 50px 20px 30px 0px rgba(30, 90,
10, 0.1);

11. Multiple Columns
-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
column-count: 3;
column-gap: 20px;

12. Transitions
transition: width 2s, height 2s, color 3s,
transform 2s, linear 2s;
-webkit-transition: width 2s, height 2s, color 3s,
-webkit-transform 2s, linear 2s;

13. Transformations
transform:rotate(7deg);
transform: translate(70px);

14. Prefix Free
http://leaverou.github.io/prefixfree/

15. Google Fonts
http://www.google.com/fonts

16. More
Lynda: CSS3 First Look