Hiding Elements

Homework

1. Positioning
   • Read:: Absolute, Relative, Fixed Positioning: How Do They Differ? on CSS Tricks
   • Read: position on MDN
   • Read: Understanding CSS z-index on MDN
2. CSS Animation
   • Read: Using CSS transitions on MDN
   • Read: CSS Transition Examples on Free Code Camp
   • Reference: transition property
   • Optional: Using CSS animations
3. Optional: CSS Variables
   • Read: Using CSS custom properties (variables) on MDN
   • Read: CSS Variables: Why Should You Care? on Google Developer
   • Watch: Lea Verou on CSS Variable Secrets at SmashingConf Toronto 2018

---

Morning reflection

Housekeeping

• Open assets directory added to the Library.
• Browser test:
  • Command Line Cheatsheet
    • Do the Notice boxes display correctly?
• Poll: What image editor do you use?

---

Hiding Elements

Learning Objectives

1. Discuss the various methods for hiding an element.
   • Set element to display: none.
   • Set the element to visibility: hidden.
   • Overlap a larger element using z-index.
   • Move the element off the viewport with absolute positioning.
   • Overlap a larger element with Explicit Grid item placement.
2. Explore CSS positioning.
   • position: relative
   • position: absolute
   • top/bottom/left/right
   • z-index and stacking order
3. Explore CSS Transitions? Grid Overlap? Review?

Materials

• Tissue Contrast Illusion
  • Live Demo
• relative and absolute positioning.
  • Codepen: CSS Positioning
  • Gist: CSS Positioning v0.1
• transitions
  • Cubic Bezier Generator

Key Takeaways

• top/bottom/left/right and z-index only work on positioned elements.
• The direction of top/bottom/left/right reverses depending on relative vs absolute(?)
• On absolutely positioned elements, top/bottom/left/right are relative to:
  • body, OR;
  • the closest parent with position: relative.
• z-index defaults to 1 for positioned elements. So, 2 will send an element to the top of the stack.

---

Open lab-time

1. Try using the Checkbox hack to hide and display a mobile menu using one of the methods above.
   • Try one of the options listed in this Gist: Hiding an element

   Warning: The checkbox hack above only works when the menu is the next downstream sibling of the input element, in source order.

2. Try adding a transition in the above Gist.
   • For extra effect, try using the Cubic Bezier function as a timing function.
   • See: Designing Meaningful Animation by Val Head

Tony’s goals for Lab-Time

• Work on lesson plans and homework for W4W-F and W5M-T.

---

Dailies

• Submit today’s Codepen/repo/gist to the Dailies section (in Assessments) in Brightspace.