CSS3Using advanced CSS to speed up development.
Browser Support     Most of todays techniquesare supported by modern browsers.
Shadow StackingUsing multiple shadows to achieve a layered effect.box-shadow:   #444 0 20px 20px -10px,   #888 0 1px 3px;
Shadow Stacking
Stacking shadows to createcorners with the pseudo elements       ‘:before’ and ‘:after’
text-shadow:    #FFF 1px 1px,                           Creating stripes    #555 2px 2px,    #555 3px 3px,    #FFF 4px 4px...
text-shadow:    #888 4px 4px 18px,                         Layered text    #BBB 1px 1px,    #BBB 2px 2px,                 ...
Backgrounds       Multiple Background Imagesbackground:  url(images/number1.png) no-repeat scroll top left,  url(images/nu...
Background Gradients    background: linear-gradient(#F6F6F6, #E3E3E3);Vendor Prefixes•   -webkit-               Can also u...
background: #88779F;background: -webkit-linear-gradient (#88779F, #685B79);background: -moz-linear-gradient (#88779F, #685...
Multiple Color Stopsbackground:   linear-gradient(      #F483ED,      #67D168 40%,      #EB7C7E 70%,      #91D3E1);backgro...
Other Uses for Gradients
Other Uses for Gradients Using pseudo elements, gradients and rgba colors
Transitions &Transformations
Transitions &Transformations
Transitions &Transformations
Transitions &     Transformations   Great for creating unique hover effects.             Easy to implement code:transition...
CSS3 Ribbons
Pseudo Elements:   Stacking Properties :before             position: :after              z-index:
CSS3Using advanced CSS to speed up development.
Upcoming SlideShare
Loading in …5
×

Advanced CSS Techniques

1,548 views
1,414 views

Published on

Justin Kopepasah's class on advanced CSS techniques for WordCamp Fayetteville.

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

No Downloads
Views
Total views
1,548
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • What is CSS3? \nAdvanced CSS techniques for web design. \n\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • What is CSS3? \nAdvanced CSS techniques for web design. \n\n\n
  • Advanced CSS Techniques

    1. 1. CSS3Using advanced CSS to speed up development.
    2. 2. Browser Support Most of todays techniquesare supported by modern browsers.
    3. 3. Shadow StackingUsing multiple shadows to achieve a layered effect.box-shadow: #444 0 20px 20px -10px, #888 0 1px 3px;
    4. 4. Shadow Stacking
    5. 5. Stacking shadows to createcorners with the pseudo elements ‘:before’ and ‘:after’
    6. 6. text-shadow: #FFF 1px 1px, Creating stripes #555 2px 2px, #555 3px 3px, #FFF 4px 4px, on text can be #888 5px 5px, #FFF 6px 6px, achieved with a #295097 7px 7px, #295097 8px 8px, #295097 9px 9px, few lines of #444 10px 10px 10px; code.
    7. 7. text-shadow: #888 4px 4px 18px, Layered text #BBB 1px 1px, #BBB 2px 2px, makes great #BBB 3px 3px, #BBB 4px 4px, headlines. #BBB 5px 5px, #BBB 6px 6px, #BBB 7px 7px, #BBB 8px 8px, #BBB 9px 9px, #000 9px 9px 10px;
    8. 8. Backgrounds Multiple Background Imagesbackground: url(images/number1.png) no-repeat scroll top left, url(images/number2.png) no-repeat scroll top right, url(images/number3.png) no-repeat scroll bottom left, url(images/number4.png) no-repeat scroll bottom right;
    9. 9. Background Gradients background: linear-gradient(#F6F6F6, #E3E3E3);Vendor Prefixes• -webkit- Can also use the• -moz- technique of multiple• -ms- gradients per background.• -o-
    10. 10. background: #88779F;background: -webkit-linear-gradient (#88779F, #685B79);background: -moz-linear-gradient (#88779F, #685B79);background: -ms-linear-gradient (#88779F, #685B79);background: -o-linear-gradient (#88779F, #685B79);background: linear-gradient(#88779F, #685B79); USING VENDOR PREFIXES
    11. 11. Multiple Color Stopsbackground: linear-gradient( #F483ED, #67D168 40%, #EB7C7E 70%, #91D3E1);background: linear-gradient( #353535, #242424 50%, #2A2A2A 50%, #1A1A1A);
    12. 12. Other Uses for Gradients
    13. 13. Other Uses for Gradients Using pseudo elements, gradients and rgba colors
    14. 14. Transitions &Transformations
    15. 15. Transitions &Transformations
    16. 16. Transitions &Transformations
    17. 17. Transitions & Transformations Great for creating unique hover effects. Easy to implement code:transition: property .2s ease/linear; Must use vendor prefixes here and can be used on any state.
    18. 18. CSS3 Ribbons
    19. 19. Pseudo Elements: Stacking Properties :before position: :after z-index:
    20. 20. CSS3Using advanced CSS to speed up development.

    ×