CSS3: THE NEXTGENERATION OF STYLEHow to use CSS3
CSS3: THE NEXTGENERATION OF STYLECSS1 was first introduced in 2001; it allowed us tocustom style pages with relative ease...
CSS3: THE SOLUTION CSS3, like HTML5, has been designed in a modularfashion; this segmentation allows development of thesp...
CSS3: WHEN TO USE IT?As it hasn’t been fully developed yet, thereare still major missing features, such as afully-develop...
CSS3 COMMANDS: TEXTSHADOWWe can add simple text shadows using CSS3.This can add visual impact to text, but don’t gooverbo...
CSS3 COMMANDS: BOXSHADOWWe can create the same shadow effect on DIVsusing the Box Model. It uses the same syntax asbefore...
CSS3 COMMANDS: OPACITYRather than relying on transparent PNGs foreffects, we can apply transparency using theopacity comm...
CSS3 COMMANDS: RGBANot only does CSS3 improve our colourproperties; it actually introduces a whole newcolour system!Gone...
CSS3: VENDOR SPECIFICPREFIXES As with CSS2, there areslight variationsbetween browserinterpretations of eachcommand. Ever...
CSS3: VENDOR SPECIFICPREFIXESFor example, if we want to target theborders of an APDiv to make it rounded, wecould use the...
CSS3 COMMANDS:TRANSITIONSWe can also implement transitions with CSS3; itis broken down into three parts:transition-proper...
CSS3 COMMANDS:TRANSITIONSThere are a number of timing functions,including ease, ease-in, ease-out, ease-in-out,linear and...
CSS3 COMMANDS:TRANSITIONSListings for transitions can become quitecumbersome; thankfully, there’s a highly efficientshort...
CSS3 COMMANDS: SCALEWe can also make items shrink and grow usingthe transform command to scale our CSSelements. This can ...
CSS3 COMMANDS:ROTATIONWe can also rotate when we scale. We can useboth positive and negative values from 0 to 360.-vendor...
CSS3 COMMANDS: SKEWWe can also skew in exactly the same mannerusing the relevant CSS command.-vendor-transform: scale(siz...
CSS3 COMMANDS:TRANSFORM & TRANSITIONOnce again, we can combine our effects in oneline of CSS by using the –vendor-transfo...
Upcoming SlideShare
Loading in …5
×

CSS3: The Next Generation Of Style

295 views

Published on

CSS3: The Next Generation Of Style

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

CSS3: The Next Generation Of Style

  1. 1. CSS3: THE NEXTGENERATION OF STYLEHow to use CSS3
  2. 2. CSS3: THE NEXTGENERATION OF STYLECSS1 was first introduced in 2001; it allowed us tocustom style pages with relative ease. However,support was patchy, and each manufacturer hadtheir own system.CSS2 began to simplify and consolidate systems.By the end of the noughties, a series ofworkarounds and bug fixes had been released tosatisfy any difficulties.However, because of this, development on CSSstagnated; JavaScript frameworks (like jQuery,Spry, script.aculo.us, etc) began to highlight howoutdated the CSS2 specification had grown.
  3. 3. CSS3: THE SOLUTION CSS3, like HTML5, has been designed in a modularfashion; this segmentation allows development of thespecification to evolve more organically. As such, the final CSS3 spec isn’t due to becompleted until sometime next decade!“Rather than attempting to shove dozens of updatesinto a single monolithic specification, it will be mucheasier and more efficient to be able to updateindividual pieces of the specification. Modules willenable CSS to be updated in a more timely andprecise fashion, thus allowing for a more flexible andtimely evolution of the specification as a whole...”~W3C (2012)
  4. 4. CSS3: WHEN TO USE IT?As it hasn’t been fully developed yet, thereare still major missing features, such as afully-developed ‘layout’ system to replace theBox Model.Therefore CSS3 should, at this point, bereserved for non-critical functionality. Forexample, as a ‘visual reward’ or to improveinteraction.Consider it the ‘icing on the cake’ of yourwebsite to give it extra punch and life.
  5. 5. CSS3 COMMANDS: TEXTSHADOWWe can add simple text shadows using CSS3.This can add visual impact to text, but don’t gooverboard!text-shadow: h-shadow v-shadow blur colour;
  6. 6. CSS3 COMMANDS: BOXSHADOWWe can create the same shadow effect on DIVsusing the Box Model. It uses the same syntax asbeforebox-shadow: h-shadow v-shadow blur colour;
  7. 7. CSS3 COMMANDS: OPACITYRather than relying on transparent PNGs foreffects, we can apply transparency using theopacity command.opacity: value(0-1);
  8. 8. CSS3 COMMANDS: RGBANot only does CSS3 improve our colourproperties; it actually introduces a whole newcolour system!Gone are the HEX values of before (#000000),now we use RGBA.Values for each colour can range between 0 and255; transparency is a value between 0 and 1color: rgba(red, green, blue, transparency);
  9. 9. CSS3: VENDOR SPECIFICPREFIXES As with CSS2, there areslight variationsbetween browserinterpretations of eachcommand. Everybrowser developer hastheir own way of doingthings... However, learning fromthe mistakes of the past,developers have comeup with a pragmaticsolution. Each ‘vendor’ has itsown specific targetingcode, valid only for that
  10. 10. CSS3: VENDOR SPECIFICPREFIXESFor example, if we want to target theborders of an APDiv to make it rounded, wecould use the following command:border-radius: 10px;Alternatively, we can target different sizes indifferent browsers. For example:-webkit-border-radius: 12px;-moz-border-radius: 9px;
  11. 11. CSS3 COMMANDS:TRANSITIONSWe can also implement transitions with CSS3; itis broken down into three parts:transition-property: type;transition-duration: seconds;transition-timing-function: speed;
  12. 12. CSS3 COMMANDS:TRANSITIONSThere are a number of timing functions,including ease, ease-in, ease-out, ease-in-out,linear and cubic-bezier.We can also add in a delay to the transition too,using the following command:transition-delay: speed;
  13. 13. CSS3 COMMANDS:TRANSITIONSListings for transitions can become quitecumbersome; thankfully, there’s a highly efficientshorthand that works to compress all fourtransition options into one line of code:-vendor-transition: property duration timing delay;
  14. 14. CSS3 COMMANDS: SCALEWe can also make items shrink and grow usingthe transform command to scale our CSSelements. This can also include images!-vendor-transform: scale(size);
  15. 15. CSS3 COMMANDS:ROTATIONWe can also rotate when we scale. We can useboth positive and negative values from 0 to 360.-vendor-transform: scale(size) rotate(degrees);
  16. 16. CSS3 COMMANDS: SKEWWe can also skew in exactly the same mannerusing the relevant CSS command.-vendor-transform: scale(size) skew(degrees); http://www.paulrhayes.com/experiments/cube/multiCubes.html
  17. 17. CSS3 COMMANDS:TRANSFORM & TRANSITIONOnce again, we can combine our effects in oneline of CSS by using the –vendor-transformcommand inside the –vendor-transitioncommand:

×