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.

The Creative New World of CSS

760 views

Published on

A talk demonstrating some of the new things in CSS, from layout to variable fonts, blend modes and animations.

Published in: Technology
  • Be the first to comment

The Creative New World of CSS

  1. 1. The Creative New World of CSS @rachelandrew UX Immersion: Interactions
  2. 2. Box Alignment level 3 Lining things up with
  3. 3. This is the vertical- centering module.
  4. 4. .box { display: flex; align-items: center; justify-content: center; } <div class="box"> <img alt="balloon" src="square- balloon.jpg"> </div> Flexbox Centre the content of .box.
  5. 5. http://codepen.io/rachelandrew/pen/XKaZWm Flex container height
  6. 6. http://codepen.io/rachelandrew/pen/RavbmN Flex container height stretch flex-endflex-startcenter
  7. 7. .wrapper { display: flex; } .wrapper li { min-width: 1%; flex: 1 0 25%; } .wrapper li:nth-child(2) { align-self: center; } .wrapper li:nth-child(3) { align-self: flex-start; } .wrapper li:nth-child(4) { align-self: flex-end; } Flexbox Aligning items within the flex container
  8. 8. https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/
  9. 9. http://flexboxfroggy.com/
  10. 10. https://flexbox.webflow.com/
  11. 11. Box Alignment defines how these properties work in other layout methods.
  12. 12. This module contains the features of CSS relating to the alignment of boxes within their containers in the various CSS box layout models: block layout, table layout, flex layout, and grid layout. CSS BOX ALIGNMENT LEVEL 3 https://drafts.csswg.org/css-align/
  13. 13. CSS Grid Layout A proper layout system with
  14. 14. .wrapper { display: grid; grid-template-columns: repeat(4, 1fr); } .wrapper li { min-width: 1%; } .wrapper li:nth-child(2) { align-self: center; } .wrapper li:nth-child(3) { align-self: start; } .wrapper li:nth-child(4) { align-self: end; } CSS Grid Layout Aligning grid items with the Box Alignment properties.
  15. 15. http://codepen.io/rachelandrew/pen/jqdNoL Grid container height stretch endstartcenter
  16. 16. “Unlike Flexbox, however, which is single-axis–oriented, Grid Layout is optimized for 2-dimensional layouts: those in which alignment of content is desired in both dimensions.” CSS GRID LAYOUT https://drafts.csswg.org/css-grid/
  17. 17. .cards { display:grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px; } CSS Grid Layout Defining a 3 column grid
  18. 18. http://codepen.io/rachelandrew/pen/qqdGOa
  19. 19. .cards { display:flex; flex-wrap: wrap; } .card { flex: 1 1 250px; margin: 5px; } Flexbox Flexbox can wrap flex items onto multiple rows. A new row becomes a new flex container for the purposes of distributing space.
  20. 20. https://codepen.io/rachelandrew/pen/Gqvrwz
  21. 21. .cards { display:grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); grid-gap: 10px; } CSS Grid Layout Create as many columns as will fit into the container with a minimum width of 200px, and a maximum of 1fr.
  22. 22. https://codepen.io/rachelandrew/pen/Gqvrwz
  23. 23. minmax()
  24. 24. http://codepen.io/rachelandrew/pen/QKwvxJ
  25. 25. .home-hero { display: grid; grid-gap: 1px; grid-auto-rows: minmax(150px, auto); } minmax() Rows should be a minimum of 150px and a maximum of auto
  26. 26. CSS Grid auto-placement
  27. 27. <ul class="colors"> <li style="background- color:#FFFFFF;color:black" class="white">FFF FFF </li> <li style="background- color:#CCCCCC;color:black">CCC CCC </li> <li style="background- color:#999999;color:black" class="span3">999 999 </li> </ul> Grid auto-placement I have a list with all ye olde web safe colours in it.
  28. 28. .colors { display: grid; grid-template-columns: repeat(auto-fill,minmax(80px, 1fr)); grid-gap: 2px; grid-auto-rows: minmax(80px, auto); } Grid auto-placement I auto-fill columns and rows with minmax()
  29. 29. http://codepen.io/rachelandrew/pen/LRWPNp/
  30. 30. .white { grid-column: 1 / -1; grid-row: 3; } .black { grid-column: 1 / -1; grid-row: 6; } .span2 { grid-column-end: span 2; grid-row-end: span 2; } .span3 { grid-column-end: span 3; grid-row-end: span 3; } .tall4 { grid-row-end: span 4; } Grid auto-placement Adding classes to some elements, by setting the value of grid-column-end and grid-row-end to span.
  31. 31. .colors { display: grid; grid-template-columns: repeat(auto-fill,minmax(80px, 1fr)); grid-gap: 2px; grid-auto-rows: minmax(80px, auto); grid-auto-flow: dense; } Grid auto-placement grid-auto-flow with a value of dense
  32. 32. The source and display order disconnect.
  33. 33. https://caniuse.com/#feat=css-grid
  34. 34. http://cssgridgarden.com/
  35. 35. https://www.youtube.com/c/layoutland
  36. 36. https://gridbyexample.com/video/
  37. 37. display: contents Vanishing boxes with
  38. 38. The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced with its children and pseudo- elements in the document tree. DISPLAY: CONTENTS https://drafts.csswg.org/css-display/#box-generation
  39. 39. allow indirect children to become flex or grid items
  40. 40. <div class="wrapper"> <h1></h1> <p></p> <blockquote class="inset"></blockquote> <p></p> <ul class="images"> <li></li> <li></li> </ul> <p></p> </div> display: contents All elements are direct children of ‘wrapper’ except for the li elements.
  41. 41. .wrapper { max-width: 700px; margin: 40px auto; display: grid; grid-column-gap: 30px; grid-template-columns:1fr 1fr; } .wrapper h1, .wrapper p { grid-column: 1 / -1; } .inset { grid-column: 1 ; font: 1.4em/1.3 'Lora', serif; padding: 0; margin: 0; } .inset + p { grid-column: 2; } display: contents A two column grid. The h1, p and blockquote with a class of inset are all direct children.
  42. 42. http://codepen.io/rachelandrew/pen/gLborW
  43. 43. .images { display: contents; } display: contents The ul has a class of images. By applying display: contents the ul is removed and the li elements become direct children.
  44. 44. http://codepen.io/rachelandrew/pen/gLborW
  45. 45. https://caniuse.com/#feat=css-display-contents
  46. 46. CSS Shapes Getting curvy with
  47. 47. CSS Shapes describe geometric shapes for use in CSS. For Level 1, CSS Shapes can be applied to floats. A circle shape on a float will cause inline content to wrap around the circle shape instead of the float’s bounding box. CSS SHAPES https://drafts.csswg.org/css-shapes/
  48. 48. .balloon { float: left; width: 429px; } <div class="box"> <img class="balloon" src="round- balloon.png" alt="balloon"> <p>...</p> </div> CSS Shapes Shapes are applied to floats.
  49. 49. http://codepen.io/rachelandrew/pen/KrvyQq
  50. 50. .balloon { float: left; width: 429px; shape-outside: circle(50%); } <div class="box"> <img class="balloon" src="round- balloon.png" alt="balloon"> <p>...</p> </div> CSS Shapes A simple shape using the 
 shape-outside property
  51. 51. http://codepen.io/rachelandrew/pen/KrvyQq
  52. 52. .box::before { content: ""; display: block; float: left; width: 429px; height: 409px; shape-outside: circle(50%); } CSS Shapes Floating generated content to create a shape
  53. 53. http://codepen.io/rachelandrew/pen/mErqxy
  54. 54. .balloon { float: right; width: 640px; height: 427px; shape-outside: ellipse(33% 50% at 460px); -webkit-clip-path: ellipse(28% 50% at 460px); clip-path: ellipse(28% 50% at 460px); } CSS Shapes Using clip-path to cut away part of an image
  55. 55. http://codepen.io/rachelandrew/pen/vKJmXR
  56. 56. http://caniuse.com/#feat=css-shapes
  57. 57. https://bennettfeely.com/clippy/
  58. 58. Feature Queries Can I Use this with
  59. 59. The ‘@supports’ rule is a conditional group rule whose condition tests whether the user agent supports CSS property:value pairs. FEATURE QUERIES https://www.w3.org/TR/css3-conditional/#at-supports
  60. 60. http://caniuse.com/#feat=css-featurequeries
  61. 61. Anything new in CSS you can use feature queries to detect support.
  62. 62. @supports (display: grid) { .has-grid { /* CSS for grid browsers here */ } } Feature Queries Checking for support of Grid Layout
  63. 63. @supports ((display: grid) and (shape- outside: circle())) { .has-grid-shapes { /* CSS for these excellent browsers here */ } } Feature Queries Test for more than one thing
  64. 64. Using Feature Queries ▸ Write CSS for browsers without support ▸ Override those properties inside the feature queries ▸ See https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/
  65. 65. .balloon { border: 1px solid #999; padding: 2px; } @supports ((shape-outside: ellipse()) and ((clip-path: ellipse()) or (-webkit-clip- path:ellipse()))) { .balloon { border: none; padding: 0; float: right; width: 640px; min-width: 640px; height: 427px; shape-outside: ellipse(33% 50% at 460px); -webkit-clip-path: ellipse(28% 50% at 460px); clip-path: ellipse(28% 50% at 460px); } } Feature Queries Write CSS for browsers without support, override that and add new CSS inside the feature query.
  66. 66. http://codepen.io/rachelandrew/pen/vKJmXR
  67. 67. http://codepen.io/rachelandrew/pen/vKJmXR
  68. 68. Websites that enhance themselves as the platform improves.
  69. 69. Initial Letter Fancy introductions with
  70. 70. Large, decorative letters have been used to start new sections of text since before the invention of printing. In fact, their use predates lowercase letters entirely. This [initial-letter] property specifies styling for dropped, raised, and sunken initial letters. INITIAL LETTER https://drafts.csswg.org/css-inline/#initial-letter-styling
  71. 71. h1+p::first-letter { initial-letter: 4 3; } Initial Letter Make the initial letter four lines tall, one line above the content and 3 into the content.
  72. 72. http://codepen.io/rachelandrew/full/WobvQq/
  73. 73. http://codepen.io/rachelandrew/full/WobvQq/
  74. 74. Currently Safari 9+ only.
  75. 75. h1+p::first-letter { font-weight: bold; initial-letter: 7 ; background-color: rgb(114,110,151); padding: 2em .5em; margin: 0 5px 0 0; color: #fff; border-radius: 50% ; float: left; shape-outside: margin-box; } Initial Letter Adding additional styling to the initial letter.
  76. 76. http://codepen.io/rachelandrew/pen/LbEpPX
  77. 77. @supports (initial-letter: 3) or (- webkit-initial-letter: 3) { h1+p::first-letter { font-weight: bold; initial-letter: 7 ; background-color: rgb(114,110,151); padding: 2em .5em; margin: 0 5px 0 0; color: #fff; border-radius: 50% ; float: left; shape-outside: margin-box; } } Initial Letter Using feature queries to test for support before adding rules that style the first letter.
  78. 78. http://codepen.io/rachelandrew/pen/LbEpPX
  79. 79. Writing modes Upside down and back to front with
  80. 80. http://codepen.io/rachelandrew/pen/LbVQNW
  81. 81. .wrapper { display: grid; grid-template-columns: auto 1fr; grid-gap: 40px; } h1 { writing-mode: vertical-rl; transform: rotate(180deg); text-align: right; grid-column: 1; align-self: start; justify-self: start; } Writing Modes Using vertical-rl then flipping the text with a transform.
  82. 82. http://codepen.io/rachelandrew/pen/LbVQNW
  83. 83. http://caniuse.com/#feat=css-writing-mode
  84. 84. Custom properties Variables in CSS with
  85. 85. This module introduces a family of custom author-defined properties known collectively as custom properties, which allow an author to assign arbitrary values to a property with an author-chosen name, and the var() function, which allow an author to then use those values in other properties elsewhere in the document. CSS CUSTOM PROPERTIES (CSS VARIABLES) https://drafts.csswg.org/css-variables/
  86. 86. :root { --primary: blue; --secondary: orange; } h1 { color: var(--primary); } Custom Properties Define variables then use them in CSS
  87. 87. :root { --primary: blue; --secondary: orange; } @supports (--primary: blue) { h1 { color: var(--primary); } h2 { color: var(--secondary); } } Custom Properties Can be tested for using feature queries
  88. 88. http://codepen.io/rachelandrew/pen/mErpZA
  89. 89. http://caniuse.com/#feat=css-variables
  90. 90. calc() Adding things up with
  91. 91. Basic mathematics in CSS
  92. 92. <div class="wrapper"> <div class="box box1"> <p>…</p> <div>height is defined by the flex container.</div> </div> <div class="box box2"> <div>height is 140px</div> </div> <div class="box box3"> <div>height is 14em</div> </div> </div> calc() Three boxes, each with a div nested inside.
  93. 93. .box2 { height: 140px; } .box3 { height: 14em; transition: height 0.5s ease; } .box3:hover { height: 30em; } calc() Two of the outer boxes have a height, box1 is the height of the content inside. Box3 will grow on hover.
  94. 94. .box > div { color: #fff; border-radius: 5px; position: absolute; bottom: 20px; right: 20px; width: 30%; height: calc(50% - 20px); } calc() In the CSS for the inner box, we calculate the height as 50% - 20px.
  95. 95. http://codepen.io/rachelandrew/full/VmYYqM/
  96. 96. http://caniuse.com/#feat=calc
  97. 97. position: sticky Staying put with
  98. 98. A stickily positioned box is positioned similarly to a relatively positioned box, but the offset is computed with reference to the nearest ancestor with a scrolling box, or the viewport if no ancestor has a scrolling box. POSITION: STICKY https://drafts.csswg.org/css-position/#sticky-pos
  99. 99. <dl class="authors"> <dt>A</dt> <dd>John Allsopp</dd> <dd>Rachel Andrew</dd> <dt>B</dt> <dd>. . .</dd> </dl> position: sticky A dl with dt elements followed by multiple dd elements.
  100. 100. .authors dt { position: sticky; top: 0; } position: sticky Applying position: sticky to the dt
  101. 101. http://codepen.io/rachelandrew/pen/NbPamG
  102. 102. http://caniuse.com/#feat=css-sticky
  103. 103. Scroll snapping Snap to it with
  104. 104. https://drafts.csswg.org/css-scroll-snap-1/
  105. 105. http://caniuse.com/#feat=css-snappoints
  106. 106. .gallery { scroll-snap-type: x mandatory; } .group { scroll-snap-align: center none; } Scroll Snapping This currently works in Safari only.
  107. 107. http://codepen.io/rachelandrew/pen/NbPGYg
  108. 108. .gallery { scroll-snap-type: y mandatory; } .group { scroll-snap-align: none start; } Scroll Snapping On the y axis, again supported only by Safari.
  109. 109. http://codepen.io/rachelandrew/pen/xRbXqr
  110. 110. Blend Modes & Filters Beautiful images and text with
  111. 111. .image { background-color: green; background-image: url(my-image.jpg); background-blend-mode: multiply; } background-blend-mode normal, multiply, screen, overlay, darken, lighten, color-dodge, color- burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity.
  112. 112. https://codepen.io/rachelandrew/pen/eVRxVW
  113. 113. .image { background-image: url(image.jpg), url(circles-dark.png); background-blend-mode: multiply; } background-blend-mode Blend more than one image, images plus a color.
  114. 114. https://codepen.io/rachelandrew/pen/EQXMjp
  115. 115. h1 { background-color: rgb(0,0,0); color: #fff; mix-blend-mode: multiply; } mix-blend-mode Blends an object or text with the background.
  116. 116. https://codepen.io/rachelandrew/pen/MQEwEK
  117. 117. https://codepen.io/rachelandrew/pen/MQEwEK
  118. 118. .blur img { filter: blur(2px); } .brightness img { filter: brightness(0.3); } .contrast img { filter: contrast(250%); } filter Add filters to objects with a line of CSS.
  119. 119. https://codepen.io/rachelandrew/pen/JprGYg
  120. 120. https://caniuse.com/#feat=css-backgroundblendmode
  121. 121. https://caniuse.com/#feat=css-mixblendmode
  122. 122. https://caniuse.com/#feat=css-filters
  123. 123. https://ilyashubin.github.io/FilterBlend/
  124. 124. Animation Adding delight with
  125. 125. http://animista.net/
  126. 126. http://valhead.com/
  127. 127. CSS Transforms & Animations have excellent browser support.
  128. 128. The Web Animations API
  129. 129. https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API
  130. 130. http://rachelnabors.com/
  131. 131. Variable Fonts Many font styles one font file with
  132. 132. Variable fonts ▸ Part of the OpenType font file specification ▸ Available as .otf or .ttf files ▸ In CSS use the font-variation-settings property ▸ CSS Fonts Level 4 Spec adds additional values to existing font properties
  133. 133. https://caniuse.com/#feat=variable-fonts
  134. 134. https://www.axis-praxis.org
  135. 135. Getting our hands on all the new shiny
  136. 136. Let browser vendors know you want these features
  137. 137. https://developer.microsoft.com/en-us/microsoft-edge/platform/status/shapes/?q=shapes
  138. 138. Thank you https://rachelandrew.co.uk/speaking/event/uxi18

×