• Like
Starting with CSS3
Upcoming SlideShare
Loading in...5
×

Starting with CSS3

  • 489 views
Uploaded on

Brief presentation about CSS3

Brief presentation about CSS3

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
489
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
2
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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