CSS

Center and crop images with a single line of CSS 

This technique works great for cropping awkwardly-sized avatar pictures down to squares or circles. Take this wide photo of a bear below for example. Once object-fit: cover is applied to the image and a width and height are set, the photo crops and centers itself. object-fit: cover crops the exact same way background-size: cover does, but is used for styling imgs, videos and other media tags rather than background images. https://medium.com/@chrisnager/center-and-crop-images-with-a-single-line-of-css-ad140d5b4a87

CSS GAP property

Using the gap property with Grid CSS https://stackoverflow.com/questions/68007483/css-flexbox-gap-gap-value-affecting-width-calculation

CSS Stop text wrapping around image

http://jsfiddle.net/vandigroup/upKGe/132/ http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/ https://css-tricks.com/examples/OverflowExample/ For use in WP Show Posts

Full-Width Containers in Limited Width Parents

The idea here is:1. push the container to the exact middle of the browser window with left: 50%2. pull it back to the left edge with negative -50vw marginhttps://css-tricks.com/full-width-containers-limited-width-parents/

Angled divs with SCSS

I recently worked on a project where the design called for a slanted or angled div. This was achievable using some CSS selector magic. The following scss snippet easily creates angled divs for you.