A brief look at CSS3    techniques        by Aaron Rodgers       web designer @ vzaar.com
• Essential properties• Demo website• CSS3 within vzaar• Useful apps, tools & cheats• Examples and further reading
A brief look at CSS3 techniques - Essential properties   Border Radius       .block {       -moz-border-radius: 8px;      ...
A brief look at CSS3 techniques - Essential properties   Box Shadow       .block {       -moz-box-shadow: 0 0 5px #888;   ...
A brief look at CSS3 techniques - Essential properties  Text Shadow       h1 {       text-shadow: 2px 2px 5px #fff;       }
A brief look at CSS3 techniques - Essential properties       Multiple Backgrounds       body {       background: url(image...
A brief look at CSS3 techniques - Essential properties       Transition       .block {       background-color: rgba(255,25...
A brief look at CSS3 techniques - Essential properties       Transition using Transform properties       .block {       -m...
A brief look at CSS3 techniques - Essential properties       Columns       .footer p {       column-count: 3;       column...
A brief look at CSS3 techniques - Essential properties       @font-face (web fonts)       @font-face {       font:family: ...
A brief look at CSS3 techniques - Essential properties       rgba       .block {       background-color: rgba(255,200,150,...
CSS3 Example Site http://www.aaronjamesrodgers.com/applicake/ Includes all of the examples mentioned within this talk. Fee...
A brief look at CSS3 techniques - CSS3 within vzaar          http://vzaar.com/for/agencies          An example of transiti...
A brief look at CSS3 techniques - CSS3 within vzaar          http://vzaar.com/signup          Box shadow on input:focus fie...
A brief look at CSS3 techniques - CSS3 within vzaar          http://vzaar.com/is          An example of added styles on ho...
A brief look at CSS3 techniques - Useful apps, tools and cheats       • Typekit           Use the @font-face property with...
A brief look at CSS3 techniques - Examples and further reading       Silverback       Great use of multiple backgrounds. G...
</html>
Upcoming SlideShare
Loading in …5
×

A brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.com

3,378 views

Published on

Aaron Rodgers' - Web Designer at vzaar.com - presentation delivered at Applicake HQ on August 11th 2011.

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

No Downloads
Views
Total views
3,378
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
26
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • A brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.com

    1. A brief look at CSS3 techniques by Aaron Rodgers web designer @ vzaar.com
    2. • Essential properties• Demo website• CSS3 within vzaar• Useful apps, tools & cheats• Examples and further reading
    3. A brief look at CSS3 techniques - Essential properties Border Radius .block { -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }
    4. A brief look at CSS3 techniques - Essential properties Box Shadow .block { -moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px #888; box-shadow: 0 0 5px #888; }
    5. A brief look at CSS3 techniques - Essential properties Text Shadow h1 { text-shadow: 2px 2px 5px #fff; }
    6. A brief look at CSS3 techniques - Essential properties Multiple Backgrounds body { background: url(images/bg1.jpg) 0 0 no-repeat, url(images/bg2.jpg) 50% 50% repeat; } **Remember to compensate for older browsers. body { /*FALLBACK*/ background: url(images/bg.jpg) 0 0 no-repeat; /*NEWER BROWSERS*/ background: url(images/bg1.jpg) 0 0 no-repeat, url(images/bg2.jpg) 50% 50% repeat; }
    7. A brief look at CSS3 techniques - Essential properties Transition .block { background-color: rgba(255,255,255,0.6); transition: background-color 1s ease-in-out; } .block:hover { background-color: rgba(255,255,255,1); }
    8. A brief look at CSS3 techniques - Essential properties Transition using Transform properties .block { -moz-transform: rotate(7deg); -moz-transition-duration: 1s; } .block:hover { -moz-transform: rotate(354deg) scale(1.3); }
    9. A brief look at CSS3 techniques - Essential properties Columns .footer p { column-count: 3; column-width: 200px; column-gap: 30px; column-rule-style: solid; column-rule-width: 1px; column-rule-color: #dedede; }
    10. A brief look at CSS3 techniques - Essential properties @font-face (web fonts) @font-face { font:family: ‘Comic Sans’; src: url(fonts/comicsans.otf) format(‘otf’), url(fonts/comicsans.ttf) format(‘ttf’),; } h1 { font-family: ‘Comic Sans’; } Browser font file types Internet Explorer only supports EOT Mozilla browsers support OTF and TTF Safari and Opera support OTF, TTF and SVG Chrome supports TTF and SVG.
    11. A brief look at CSS3 techniques - Essential properties rgba .block { background-color: rgba(255,200,150,0.5); } **Remember to add fallback for older browsers body { /*FALLBACK*/ background-color: #ffc896; /*NEWER BROWSERS*/ background-color: rgba(255,200,150,0.5); }
    12. CSS3 Example Site http://www.aaronjamesrodgers.com/applicake/ Includes all of the examples mentioned within this talk. Feel free to download the html and css from here.
    13. A brief look at CSS3 techniques - CSS3 within vzaar http://vzaar.com/for/agencies An example of transitions using the transform property
    14. A brief look at CSS3 techniques - CSS3 within vzaar http://vzaar.com/signup Box shadow on input:focus field (try it, Sign Up for a 30 day trial) :P
    15. A brief look at CSS3 techniques - CSS3 within vzaar http://vzaar.com/is An example of added styles on hover only using the transition & transform properties
    16. A brief look at CSS3 techniques - Useful apps, tools and cheats • Typekit Use the @font-face property with hundreds of fonts. Paid subscription based on the number of websites you use. Just place some javascript within the <head> tag. http://typekit.com/ • Border Radius generator Not the hardest property to code, but this site gives you a live preview as well as providing the CSS with all browser prefixes. http://border-radius.com/ • Adobe Edge Available from the Adobe Labs, this is a flash like program which allows you to select elements from your page and apply css3 effects. Timeline based UI. Still quite buggy as it’s an early version. http://labs.adobe.com/technologies/edge/ http://www.youtube.com/watch?v=8FnNtX73v8k
    17. A brief look at CSS3 techniques - Examples and further reading Silverback Great use of multiple backgrounds. Gives a sense of depth to the site. Resize your browser window to experience it. http://silverbackapp.com/ For the Record Nice mix of HTML5 and CSS3 to showcase the guys record collection stats. http://www.fortherecord.simonfosterdesign.com/ A book apart A book by Dan Cederholm, founder of http://simplebits.com/. Easy to digest guide of the best practices in CSS3 in use today. http://www.abookapart.com/products/css3-for-web-designers
    18. </html>

    ×