you can use css for that
play

You can use CSS for that! Co-founder Perch CMS / CSS WG Invited - PowerPoint PPT Presentation

@rachelandrew | GOTO Berlin You can use CSS for that! Co-founder Perch CMS / CSS WG Invited Expert / Google Developer Expert / Author / Speaker / Web Developer. @rachelandrew https://rachelandrew.co.uk Lining things up with Box


  1. Initial Letter Make the initial letter four lines tall, h1+p::first-letter { one line above the content and 3 into initial-letter: 4 3; } the content.

  2. http://codepen.io/rachelandrew/full/WobvQq/

  3. http://codepen.io/rachelandrew/full/WobvQq/

  4. Currently Safari 9+ only.

  5. Initial Letter h1+p::first-letter { font-weight: bold; initial-letter: 7 ; background-color: rgb(114,110,151); padding: 2em .5em; Adding additional styling to the margin: 0 5px 0 0; initial letter. color: #fff; border-radius: 50% ; float: left; shape-outside: margin-box; }

  6. http://codepen.io/rachelandrew/pen/LbEpPX

  7. Initial Letter @supports (initial-letter: 3) or (- webkit-initial-letter: 3) { h1+p::first-letter { font-weight: bold; initial-letter: 7 ; Using feature queries to test for background-color: rgb(114,110,151); padding: 2em .5em; support before adding rules that margin: 0 5px 0 0; style the fi rst letter. color: #fff; border-radius: 50% ; float: left; shape-outside: margin-box; } }

  8. http://codepen.io/rachelandrew/pen/LbEpPX

  9. Upside down and back to front with Writing modes

  10. http://codepen.io/rachelandrew/pen/LbVQNW

  11. Writing Modes .wrapper { display: grid; grid-template-columns: auto 1fr; grid-gap: 40px; } Using vertical-rl then fl ipping the text h1 { writing-mode: vertical-rl; with a transform. transform: rotate(180deg); text-align: right; grid-column: 1; align-self: start; justify-self: start; }

  12. http://codepen.io/rachelandrew/pen/LbVQNW

  13. http://caniuse.com/#feat=css-writing-mode

  14. Variables in CSS with Custom properties

  15. CSS CUSTOM PROPERTIES (CSS VARIABLES) This module introduces a family of custom author-de fi ned 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. https://drafts.csswg.org/css-variables/

  16. Custom Properties :root { --primary: blue; --secondary: orange; De fi ne variables then use them in } CSS h1 { color: var(--primary); }

  17. Custom Properties :root { --primary: blue; --secondary: orange; } @supports (--primary: blue) { Can be tested for using feature h1 { color: var(--primary); queries } h2 { color: var(--secondary); } }

  18. http://codepen.io/rachelandrew/pen/mErpZA

  19. http://caniuse.com/#feat=css-variables

  20. Adding things up with calc()

  21. Basic mathematics in CSS

  22. calc() <div class="wrapper"> <div class="box box1"> <p>…</p> <div>height is defined by the flex container.</div> </div> Three boxes, each with a div nested <div class="box box2"> inside. <div>height is 140px</div> </div> <div class="box box3"> <div>height is 14em</div> </div> </div>

  23. calc() .box2 { height: 140px; Two of the outer boxes have a height, } box1 is the height of the content .box3 { inside. height: 14em; transition: height 0.5s ease; } Box3 will grow on hover. .box3:hover { height: 30em; }

  24. calc() .box > div { color: #fff; border-radius: 5px; position: absolute; In the CSS for the inner box, we bottom: 20px; calculate the height as 50% - 20px. right: 20px; width: 30%; height: calc(50% - 20px); }

  25. http://codepen.io/rachelandrew/full/VmYYqM/

  26. http://caniuse.com/#feat=calc

  27. Staying put with position: sticky

  28. POSITION: STICKY A stickily positioned box is positioned similarly to a relatively positioned box, but the o ff set is computed with reference to the nearest ancestor with a scrolling box, or the viewport if no ancestor has a scrolling box. https://drafts.csswg.org/css-position/#sticky-pos

  29. position: sticky <dl class="authors"> <dt>A</dt> <dd>John Allsopp</dd> A dl with dt elements followed by <dd>Rachel Andrew</dd> multiple dd elements. <dt>B</dt> <dd>. . .</dd> </dl>

  30. position: sticky .authors dt { position: sticky; Applying position: sticky to the dt top: 0; }

  31. http://codepen.io/rachelandrew/pen/NbPamG

  32. http://caniuse.com/#feat=css-sticky

  33. Snap to it with Scroll snapping

  34. https://drafts.csswg.org/css-scroll-snap-1/

  35. http://caniuse.com/#feat=css-snappoints

Recommend


More recommend