Before the Compositing and Blending specification was introduced, CSS allowed one type of composite operations: simple alpha compositing. This is what the opacity property is for. By changing an element’s opacity, the browser makes it translucent so that the colors of its backdrop can show through. Today, two main properties exist that allow us to …
Tag Archives: css
CSS Puns
CSS object-fit
img { width: 150px; height: 100px; border: 1px solid #000; } .fill { object-fit: fill; } .contain { object-fit: contain; } .cover { object-fit: cover; } .none { object-fit: none; } .scale-down { object-fit: scale-down; } The object-fit CSS property specifies how the contents of a replaced element should be fitted to the box established …
Codrops CSS Reference
An extensive CSS reference with all the important properties and info to learn CSS from the basics Extensive reference sporting clear explanations, examples, live demos (using Codrops’ Playground), CSS compatibility tables (provided by Can I use…), etc.. The fact that Sara Soueidan wrote a lot of these articles gives away that they’re very – very! …
CodyHouse
CSS Grid Layout 2014 Recap
Two posts on CSS Grid Layout: one covering the changes in the spec during 2014, and another one talking about the implementation details in Blink and Webkit. CSS Grid Layout 2014 Recap: Implementation Status → CSS Grid Layout 2014 Recap: Specification Evolution → Related: CSS3 Grid Layout Module, an Introduction → Automatic Placement when using …
3D First Person Shooter … with CSS
With CSS transforms we can’t define arbitrary shapes using a set of points, we’re stuck with HTML elements which are always rectangular and have two dimensional properties such as top, left, width and height to determine their position and size. In many ways this makes dealing with 3D easier, as there’s no complex math to …
(ab)using CSS3’s :nth-child() selector to invent new ones
When combining :nth-child() with some other pseudo selectors, one can actually create new types of selectors. “:nth-of-m-child” selector /** * This selector will select the third element in a row, * if it is also the third to last element … thus selecting * the 3rd child in a row of 5 elements */ span:nth-child(3):nth-last-child(3) …
Continue reading “(ab)using CSS3’s :nth-child() selector to invent new ones”
Flexbox adventures
Up until reading Flexbox Adventures I hadn’t really given much thought to how flexbox grow exactly works. If you do want to know: Available space = (Container size – Flex-basis siblings total). Flex Item size = Basis + ((Available space / Total Grow nums) * Individual grow num). A recommended read. Flexbox adventures → When …