A brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.com
•Download as KEY, PDF•
1 like•1,344 views
Aaron Rodgers' - Web Designer at vzaar.com - presentation delivered at Applicake HQ on August 11th 2011.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to A brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.com
Similar to A brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.com (20)
Recently uploaded
Recently uploaded (20)
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>
Editor's Notes
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n