Boris's public fiddles
-
Expanding search bar
Change the width of the input on focus and use transition for a smooth animation.
-
Two column layout
Use relative positioning and z-index to let the album cover overlap the text column slightly.
-
Sticky note
Use relative positioning and a negative margin to place the sticky note over other content.
-
Slow hover effect
Use the transition keyword to slowly apply hover effects.
-
Margin overlaps
The margin with the highest value is honored.
-
Horizontal and vertical centering
Use flexbox on the body so you don't need a wrapper element.