Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
CSS& CSS3    Robyn Overstreet
More CSS Layout
CSS Layout• Positioning• Display• Floats
Inline vs. BlockBlock  Start and end with new lines. Can have awidth.         <p>, <table>, <div>, ...Inline   Does not fo...
Display propertySwitch elements between block andinline display or hide elementsPossible properties              Text•   b...
The Box ModelFour parts:  Content  Padding  Border  Margin              6
Box Model Measurements‫‏‬ In most browsers, a box with a 70px width take up         100px with margin and padding …       ...
Box Model Measurements‫‏‬In IE browsers, the padding is subtracted instead of      added, so the box will take up only 90p...
Window & Document
Relative PositionPositioned in relation to the other elementsaround it
Absolute PositionPositioned in relation to its parentwithout regard to the normal flow ofelements
Fixed PositionAbsolutely positioned, but relative tothe viewport, instead of its parentelement. The elements position issp...
Positioning Properties   Positioning properties specify the left, right,    top, and bottom positions of an absolutely   ...
Floating for LayoutFloating allows elements to align to the left or the right of the page.Inline elements will wrap around...
ClearThe clear property sets the sides of an element  where other elements are not allowed.Possible values:• left• right• ...
2-column Layout• Experiment with floating both divs  right, both divs left, or one left and  one right
3-column Layout
Lab: Layout• Sketch a design layout on paper• Build the wireframe in CSS and HTML• Try positioning a sidebar on the left o...
CSS 3
ModularCSS3 is a collection of modules• Allows updates on a module-by-  module basis (instead of waiting  for an update of...
New Features in CSS 3New SelectorsRounded Corners                          Text-Overflow                          Borde...
Browser Compatibility• Many of the CSS3 features only work on specific browsers.• Need to use browser-specific property na...
Browsercompatibility chartsReferences for finding browsersupport of CSS3 properties • CanIUse.com • FindMeByIP.com charts
Web Fonts
Web Fonts@font-face allows use of fonts from URLsThe Basics: Call a font from a URL and give it a name@font-face {  font-f...
Web FontsThe Thorough: Best bet for cross-browser support@font-face {  font-family: "Your typeface";  src: url("type/filen...
Font Services        !   Copyright. Fonts are copyrighted material.Downloadable Fonts• Font Squirrel fontsquirrel.com   Fr...
Lab: Fonts• Add fonts to your page using the Google  web fonts API• Check display across browsers
Text Features
Text Overflow A new option for content that overflows its containing box                   Two roads diverged in           ...
Multi-Column Layout                   Add -moz- and/                    or -webkit- to                     each of these  ...
Multi-Column Layout  column-count  column-gap  column-rule  column-break-after  column-break-before  column-span  column-f...
New Visual Effects    in CSS3
RGBAbackground: rgba(255,70,280,.6);                 red   green blue   alpha                                       60% op...
Rounded CornersW3C Official Spec:border-radius:55pt / 25pt;                          TextBrowser Implementation:          ...
Quick-fire LabRound the corners of a div
ShadowsApplies to text and boxes with text-shadow and box-shadow.box-shadow: 10px 10px 20px #000;-webkit-box-shadow: 10px ...
Quick-fire LabApply a shadow to a box or to text
Gradientsbackground: -webkit-gradient(linear,0 0, 0 100%,from(#333),to(#fff));     0, 0            type: linear or radial....
Quick-fire LabCreate a gradient background for adiv
Multiple BackgroundsAdd multiple background images by separating urls with a comma#box{  background: url(top.gif) top left...
Reflection -webkit-box-reflect: <direction> <offset> <mask-box-image> <direction> can be one of above, below, left or right...
Reflectionimg.deluxe_reflect{    -webkit-box-reflect:below 5px -webkit-gradient(linear, left     top, left bottom,from(tran...
Quick-fire LabTry multiple background imagesand/or reflection
Masksimg.photo {    -webkit-mask-box-image: url(mask.png);}            +                 =
Border Image#box{     border-width: 8px;     -webkit-border-image: url("border2.png") 8 round;}   <div id=”box”>          ...
GraphicTransformations
2D TransformationsThe transformation functions:scale, scaleX, scaleYtranslate, translateX, translateYskew, skewX, skewYrot...
Transformations: scale   -moz-transform:   scale(3);      1     = 100%   or   transform:   scale(1,4);    .2    = 20%-webk...
Transformations: skew                 transform: skew(0deg, 30deg);              skewX                               skewY...
Faking 3D: a 2D Cube.cube {      position: relative;      top: 200px;}.rightFace,.leftFace,.topFace{      position: absolu...
LabCreate a skewed box
Animation!
Transitions#box {    transition-property: width,height;    transition-duration: 2s;    height: 150px;    width: 150px;}#bo...
LabCreate a transition on hover.Use scale, skew, translate, or changewidth or height
Triggering Animation:hover as used in previous versions of CSS:target trigger animation with a anchor link, e.g. page.html...
Animation: keyframes             Illustration: Yurike Cynthia Go                Creative Commons License
Animation: keyframes@-webkit-keyframes moveitaround{ {  @-webkit-keyframes moveitaround  from { {     from     -webkit-tra...
Animation Examples
LabMake an object move across thescreen using keyframes
Upcoming SlideShare
Loading in …5
×

CSS and CSS3

3,123 views

Published on

Published in: Technology, Art & Photos
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ❤❤❤ http://bit.ly/2ZDZFYj ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating for everyone is here: ♥♥♥ http://bit.ly/2ZDZFYj ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Get paid to send out tweets - $25 per hour ★★★ https://tinyurl.com/rbrfd6j
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ➤➤ How Long Does She Want You to Last? Here's the link to the FREE report ♥♥♥ https://tinyurl.com/rockhardxxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

CSS and CSS3

  1. 1. CSS& CSS3 Robyn Overstreet
  2. 2. More CSS Layout
  3. 3. CSS Layout• Positioning• Display• Floats
  4. 4. Inline vs. BlockBlock Start and end with new lines. Can have awidth. <p>, <table>, <div>, ...Inline Does not force new lines. Cannot havewidth. <b>, <span>, <img>, ... 4
  5. 5. Display propertySwitch elements between block andinline display or hide elementsPossible properties Text• block• inline• none #search-results{ display:none; }
  6. 6. The Box ModelFour parts: Content Padding Border Margin 6
  7. 7. Box Model Measurements‫‏‬ In most browsers, a box with a 70px width take up 100px with margin and padding … 7
  8. 8. Box Model Measurements‫‏‬In IE browsers, the padding is subtracted instead of added, so the box will take up only 90px. 8
  9. 9. Window & Document
  10. 10. Relative PositionPositioned in relation to the other elementsaround it
  11. 11. Absolute PositionPositioned in relation to its parentwithout regard to the normal flow ofelements
  12. 12. Fixed PositionAbsolutely positioned, but relative tothe viewport, instead of its parentelement. The elements position isspecified with the "left", "top","right", and "bottom" properties
  13. 13. Positioning Properties Positioning properties specify the left, right, top, and bottom positions of an absolutely positioned element They set the shape of an element, place one element behind another, and indicate directions for fitting an elements content in a specified areaimg.logo { position: absolute; top: 0; left:0; width: 150px; height: 150px; 13}
  14. 14. Floating for LayoutFloating allows elements to align to the left or the right of the page.Inline elements will wrap around floated elements. Left Float
  15. 15. ClearThe clear property sets the sides of an element where other elements are not allowed.Possible values:• left• right• both• none 15
  16. 16. 2-column Layout• Experiment with floating both divs right, both divs left, or one left and one right
  17. 17. 3-column Layout
  18. 18. Lab: Layout• Sketch a design layout on paper• Build the wireframe in CSS and HTML• Try positioning a sidebar on the left or the right by just changing the CSS (not the HTML) • Extra: Position a logo over the columns using absolute positioning
  19. 19. CSS 3
  20. 20. ModularCSS3 is a collection of modules• Allows updates on a module-by- module basis (instead of waiting for an update of the full spec)• Browsers can add support for features one module at a time• Browsers are able to implement some modules and not others
  21. 21. New Features in CSS 3New SelectorsRounded Corners Text-Overflow Border Image Multi-Column Layout Color and Opacity: RGBA Web Fonts Gradients Transitions Box and Text Shadows Transformations Multiple Backgrounds Animation MasksReflection
  22. 22. Browser Compatibility• Many of the CSS3 features only work on specific browsers.• Need to use browser-specific property names in those cases.• Prefix with -webkit or -mozWebkit-specific propertieshttp://qooxdoo.org/documentation/general/webkit_css_stylesMozilla-specific propertieshttps://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions
  23. 23. Browsercompatibility chartsReferences for finding browsersupport of CSS3 properties • CanIUse.com • FindMeByIP.com charts
  24. 24. Web Fonts
  25. 25. Web Fonts@font-face allows use of fonts from URLsThe Basics: Call a font from a URL and give it a name@font-face { font-family: Gentium; src: url(http://site/fonts/Gentium.ttf);}p { font-family: Gentium, serif; }
  26. 26. Web FontsThe Thorough: Best bet for cross-browser support@font-face { font-family: "Your typeface"; src: url("type/filename.eot"); src: local("Your Typeface"), url("type/filename.woff") format("woff"), url("type/filename.otf") format("opentype"), url("type/filename.svg#filename") format("svg"); }• Start with the IE compatible font (.eot)‫‏‬• Check for a local version of the font (this also prevents IE from trying to load formats it cant understand)• Offer other formats
  27. 27. Font Services ! Copyright. Fonts are copyrighted material.Downloadable Fonts• Font Squirrel fontsquirrel.com Freeware fonts to download and host yourself, with helpers to write CSS codeFont HostingFonts delivered from server, with Javascript helpers• Google Font API code.google.com/webfonts Open-source font library with limited number of fonts• TypeKit typekit.com Subscription-based font service with a large library
  28. 28. Lab: Fonts• Add fonts to your page using the Google web fonts API• Check display across browsers
  29. 29. Text Features
  30. 30. Text Overflow A new option for content that overflows its containing box Two roads diverged in a yellow wood, and sorry I could not ...#poem_box{ text-overflow: ellipsis;}
  31. 31. Multi-Column Layout Add -moz- and/ or -webkit- to each of these column-count:2; column-width:250px; column-gap:20px; column-rule:1px dotted;
  32. 32. Multi-Column Layout column-count column-gap column-rule column-break-after column-break-before column-span column-fill These require -webkit- or -moz- prefixes
  33. 33. New Visual Effects in CSS3
  34. 34. RGBAbackground: rgba(255,70,280,.6); red green blue alpha 60% opacity
  35. 35. Rounded CornersW3C Official Spec:border-radius:55pt / 25pt; TextBrowser Implementation: New in FF 3.5 !-webkit-border-radius: 55pt 25pt; Previous versions did not support-moz-border-radius: 55pt / 25pt; elliptical borders
  36. 36. Quick-fire LabRound the corners of a div
  37. 37. ShadowsApplies to text and boxes with text-shadow and box-shadow.box-shadow: 10px 10px 20px #000;-webkit-box-shadow: 10px 10px 20px #000;<horizontal distance> <vertical distance> <blur> <color>
  38. 38. Quick-fire LabApply a shadow to a box or to text
  39. 39. Gradientsbackground: -webkit-gradient(linear,0 0, 0 100%,from(#333),to(#fff)); 0, 0 type: linear or radial. points: space separated from() and to(): value color stop (optional)‫‏‬ color-stop(80%, #e4c700)‫‏‬ 0, 100%
  40. 40. Quick-fire LabCreate a gradient background for adiv
  41. 41. Multiple BackgroundsAdd multiple background images by separating urls with a comma#box{ background: url(top.gif) top left no-repeat, url(bottom.gif) bottom left no-repeat, url(middle.gif) left repeat-y;}
  42. 42. Reflection -webkit-box-reflect: <direction> <offset> <mask-box-image> <direction> can be one of above, below, left or right. <offset> is a length or percentage that specifies the distance of the reflection from the edge of the original border box (using the direction specified). It can be omitted, in which case it defaults to 0. <mask-box-image> is a mask-box-image that can be used to overlay the reflection. If omitted, the reflection has no mask.img.simple_reflect{ -webkit-box-reflect:below 5px;}img.deluxe_reflect{ -webkit-box-reflect:below 5px -webkit-gradient(linear, left top, left bottom,from(transparent), color-stop(.7, transparent), to(rgba(255, 255, 255, 0.5)));}
  43. 43. Reflectionimg.deluxe_reflect{ -webkit-box-reflect:below 5px -webkit-gradient(linear, left top, left bottom,from(transparent), color-stop(.7, transparent), to(rgba(255, 255, 255, 0.5)));}
  44. 44. Quick-fire LabTry multiple background imagesand/or reflection
  45. 45. Masksimg.photo { -webkit-mask-box-image: url(mask.png);} + =
  46. 46. Border Image#box{ border-width: 8px; -webkit-border-image: url("border2.png") 8 round;} <div id=”box”> border2.png
  47. 47. GraphicTransformations
  48. 48. 2D TransformationsThe transformation functions:scale, scaleX, scaleYtranslate, translateX, translateYskew, skewX, skewYrotatematrix -webkit-transform: skew(0deg, 30deg); -webkit-transform: rotate(30deg);
  49. 49. Transformations: scale -moz-transform: scale(3); 1 = 100% or transform: scale(1,4); .2 = 20%-webkit-transform: scaleY(1.5); 1.5 = 150% transform: scaleX(.2); 3 = 300%
  50. 50. Transformations: skew transform: skew(0deg, 30deg); skewX skewY-webkit-transform: skew(-25deg); -moz-transform: skew(0deg,-25deg);
  51. 51. Faking 3D: a 2D Cube.cube { position: relative; top: 200px;}.rightFace,.leftFace,.topFace{ position: absolute; padding: 10px; width: 180px; height: 180px;}.leftFace { -webkit-transform: skew(0deg, 30deg);}.rightFace { -webkit-transform: skew(0deg, -30deg); left: 200px;}.topFace { -webkit-transform: rotate(60deg) skew(0deg, -30deg) scale(1,1.16); top: -158px; left: 100px;}
  52. 52. LabCreate a skewed box
  53. 53. Animation!
  54. 54. Transitions#box { transition-property: width,height; transition-duration: 2s; height: 150px; width: 150px;}#box:hover{ height: 500px; width: 500px;}
  55. 55. LabCreate a transition on hover.Use scale, skew, translate, or changewidth or height
  56. 56. Triggering Animation:hover as used in previous versions of CSS:target trigger animation with a anchor link, e.g. page.html#start<div id="b" class="brick">foo</div><div id="c" class="brick">foo</div><p><a href="#c">drop c</a></p>div.brick:target{ -webkit-transform: rotate(30deg);}onclick using javascript<div onclick="this.style.webkitTransform=rotate(360deg)">
  57. 57. Animation: keyframes Illustration: Yurike Cynthia Go Creative Commons License
  58. 58. Animation: keyframes@-webkit-keyframes moveitaround{ { @-webkit-keyframes moveitaround from { { from -webkit-transform: translate(50px,50px) rotate(30deg); -webkit-transform: translate(50px,50px) rotate(30deg); } } 50% { { 50% -webkit-transform: translate(100px,100px) rotate(140deg); -webkit-transform: translate(100px,100px) rotate(140deg); } } to { to -webkit-transform: translate(500px,200px) rotate(360deg) ; { -webkit-transform: translate(500px,200px) rotate(360deg) ; } } }}div.mydiv { -webkit-animation-name: moveitaround; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: 3;}
  59. 59. Animation Examples
  60. 60. LabMake an object move across thescreen using keyframes

×