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

2,731 views

Published on

Published in: Technology, Art & Photos
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,731
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
101
Comments
0
Likes
3
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
  • Tip: Start basic.\nLayout and Design Inspiration: \nhttp://www.smashingmagazine.com/2010/08/19/100-free-high-quality-wordpress-themes-for-2010/\nhttp://www.smashingmagazine.com/2010/11/11/designing-memorable-websites-showcase-of-creative-designs/\nhttp://designm.ag/inspiration/non-profit-websites/\nhttp://designm.ag/inspiration/30-beautifully-simple-websites/\nSee the CSS cheat sheet\n\nHTML example:\n &lt;html&gt;&lt;head&gt;&lt;title&gt;The Site&lt;/title&gt;\n &lt;link href=&quot;layout1.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;\n &lt;/head&gt;\n &lt;body&gt;\n &lt;div id=&quot;header&quot;&gt;&lt;h1&gt;The Site.&lt;/h1&gt;&lt;/div&gt;\n &lt;div id=&quot;navigation&gt;\n &lt;ul&gt;\n &lt;li&gt;Home&lt;/li&gt;\n &lt;li&gt;Services&lt;/li&gt;\n &lt;li&gt;Blog&lt;/li&gt;\n &lt;li&gt;About&lt;/li&gt;\n &lt;/ul&gt;\n &lt;/div&gt;\n &lt;div id=&quot;sidebar&quot;&gt;\n &lt;h3&gt;Sites I like&lt;/h3&gt;\n &lt;ul&gt;\n &lt;li&gt;alistapart.com&lt;/li&gt;\n &lt;li&gt;lifehacker.com&lt;/li&gt;\n &lt;/ul&gt;\n &lt;/div&gt; \n &lt;div id=&quot;main-content&quot;&gt;\n &lt;h2&gt;Welcome to my site&lt;/h2&gt;\n &lt;p&gt;But, soft! What light through yonder window breaks?\n It is the east, and Juliet is the sun!\n Arise fair sun and kill the envious moon,\n Who is already sick and pale with grief\n That thou her maid are more fair than she. &lt;/p&gt;\n \n &lt;/div&gt;\n&lt;/body&gt;\n
  • \n
  • \n
  • \n
  • \n
  • http://caniuse.com/#cats=CSS\nhttp://www.findmebyip.com/litmus\n
  • \n
  • \n
  • \n
  • http://code.google.com/webfonts\nhttp://typekit.com/\n
  • http://code.google.com/apis/webfonts/docs/getting_started.html#Quick_Start\nhttps://browserlab.adobe.com\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • http://www.lrbabe.com/sdoms/borderImage/\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • keyframes example : anim.html\nother links: walk cycle, photo viewer\n
  • \n
  • 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

    ×