Quick Tip: z-index

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:

body{
z-index: 0;
}

element{
z-index: 1
}

How have you used z-index in your projects?

CSS3 Grayscale Filter

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:

See the Pen hcBCJ by Adeline (@adelineyaw) on CodePen.

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

References:

Learning Sass

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

To install Sass, read the official Sass guide or if you’re trying to install Sass at your workplace and have issues due to your network firewall, read my previous blog post.

There are numerous ways to compile Sass. There’s the Command Line/Terminal or GUI’s such as Koala, Scout, Prepos and Codekit. Read the official Sass guide on the best way to compile your Sass to CSS.

Continue reading “Learning Sass”