Based on a Dev Tips video I recently watched, “How To Make A Full Screen Video Background in HTML + CSS”, I managed to get the background video to work with an overlay of text, except the vertical and horizontal scroll bars were appearing in Firefox (version 43.0.4).
There are times when using z-index, it doesn’t always appear to work the way we’d like to.
So to define z-index, “it is the attribute that lets you adjust the order of the layering of objects when rendering content.” – Mozilla Developer Network.
According to Angelina Fabbro: CSS In Your Pocket – Mobile CSS Tips From The Trenches (video), we should “set z-index to the body element to properly stack elements”, for example:
How have you used z-index in your projects?
I really wanted to point out the reasons why web developers should start using Sass and I came across the Clean out your Sass junk drawer slides by Dale Sande. It shows just how much the thought process of well structured CSS has changed over the years. So if you still work with fellow front-end web developer/engineers who aren’t using any CSS Preprocessor, point them to these slides.
I stumbled upon a quick video on YouTube on how to use the CSS3 grayscale filter when hovering on an image.
The results can be seen below:
Click on the CSS tab in the Codepen example above to see how this filter effect can be implemented in your CSS.
“Method of applying filter effects (like blur, grayscale, brightness, contrast and hue) to elements, previously only possible by using SVG.” – Can I Use
“It’s worth noting that right now, CSS Filter Effects are an unoffical specification – however, the editors of the spec include representatives from Adobe, Apple and Opera, and we have already got implementations in Chrome, Safari and iOS 6.” – CSS3 Filters
What is Sass?
“Sass is a meta-language on top of CSS that’s used to describe the style of a document cleanly and structurally, with more power than flat CSS allows. Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable stylesheets.” – Sass