Jimmy Campos - @JimACampos
Agenda
Vendor Prefixes
First & Last Child
N-child
First Line & Letter
Border Radius
Box Shadow
Multiple Columns
Transition...
CSS Vendor Prefixes
Android: -webkit-
Chrome: -webkit-
Firefox: -moz-
Internet Explorer: -ms-
iOS: -webkit-
Opera: -o-
Saf...
Downloading
http://www.initializr.com/
First and Last child
#big_section p:first-child{
background-color: blue;
}
#big_section p:last-child{
background-color: ye...
N-child(2n)
#list li:nth-child(2n)
{
background:red;
}
First Line
#p_line:first-line
{
background-color:green;
}
First Letter
#p_line:first-letter
{
font-size:400%;
color:black;
font-weight: bolder;
}
Border radius
-webkit-border-radius: 10px 90px 90px 10px;
border-radius: 10px 90px 90px 10px;
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, ...
Multiple Columns
-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
column-co...
Transitions
transition: width 2s, height 2s, color 3s,
transform 2s, linear 2s;
-webkit-transition: width 2s, height 2s, c...
Transformations
transform:rotate(7deg);
transform: translate(70px);
Prefix Free
http://leaverou.github.io/prefixfree/
Google Fonts
http://www.google.com/fonts
More
Lynda: CSS3 First Look
Upcoming SlideShare
Loading in …5
×

Starting with CSS3

757 views
688 views

Published on

Brief presentation about CSS3

Published in: Technology, Art & Photos
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
757
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Starting with CSS3

  1. 1. Jimmy Campos - @JimACampos
  2. 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. 3. CSS Vendor Prefixes Android: -webkit- Chrome: -webkit- Firefox: -moz- Internet Explorer: -ms- iOS: -webkit- Opera: -o- Safari: -webkit-
  4. 4. Downloading http://www.initializr.com/
  5. 5. First and Last child #big_section p:first-child{ background-color: blue; } #big_section p:last-child{ background-color: yellow; }
  6. 6. N-child(2n) #list li:nth-child(2n) { background:red; }
  7. 7. First Line #p_line:first-line { background-color:green; }
  8. 8. First Letter #p_line:first-letter { font-size:400%; color:black; font-weight: bolder; }
  9. 9. Border radius -webkit-border-radius: 10px 90px 90px 10px; border-radius: 10px 90px 90px 10px;
  10. 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. 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. 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. 13. Transformations transform:rotate(7deg); transform: translate(70px);
  14. 14. Prefix Free http://leaverou.github.io/prefixfree/
  15. 15. Google Fonts http://www.google.com/fonts
  16. 16. More Lynda: CSS3 First Look

×