Jon Rumsey
An online markdown blog and knowledge repository.
Project maintained by nojronatron
Hosted on GitHub Pages — Theme by mattgraham
PPH Brian - CSS Talk
Speaker
Brian Nation
Former Code Fellows Principle Instructor.
AWS Training Delivery Manager.
Overlay elements on top of an image - a common product marketing design pattern.
Absolute and Relative positioning are used to make elements overlap and position so that "they work".
Fixed pixels: Avoid using Auto unless the parent element has been sized to allow for Auto Height/Width.
SCSS => A version of SASS (Syntactically Awesome Style Sheets).
Align block-level elements inside of a Section element.
- Adding Position: Relative allows positioning an element with Position: Absolute with top/left/bottom/right properly.
- Bottom: 0 => Moves to bottom of parent element.
- Padding: Helps separate element borders from elements.
- Opacity: Use this to overlay without obscuring the element behind on the Z-axis.
Paragraph elements can be set with Position: Absolute to an exact location.
Remember responsive design:
- Use transition with a reasonable timeframe to give hover, click, and other events life.
&:hover: This can be used within the css definition to enable a set of onHover css properties.
Brian recommends using vanilla CSS before using Bootstrap.
Keep working with CSS, just do anything:
- Boxes within boxes within boxes etc.
- Boxes as other shapes are still boxes, so get used to how they work.
- There are always borders on a box. Remember to calculate those in.
Tools:
codepen
csstricks
Jon Todos
- [ ] Investigate this: Brian mentioned something about border-box, maybe as a way to help fix alignment issues?
- Remember: You are getting paid to learn, try things out, and to say "I can do that".
Back to PH Index
Back to Root README