• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
A brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.com
 

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

on

  • 2,790 views

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

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

Statistics

Views

Total Views
2,790
Views on SlideShare
2,787
Embed Views
3

Actions

Likes
1
Downloads
18
Comments
0

1 Embed 3

http://twitter.com 3

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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 A brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.com Presentation Transcript

  • 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; -webkit-border-radius: 8px; border-radius: 8px; }
  • 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; }
  • 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(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; }
  • 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); }
  • 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); }
  • 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; }
  • 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.
  • 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); }
  • 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.
  • A brief look at CSS3 techniques - CSS3 within vzaar http://vzaar.com/for/agencies An example of transitions using the transform property
  • 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
  • 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
  • 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
  • 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
  • </html>