Archive for the ‘CSS’ Tag

Quick Tip: z-index

Monday, December 21st, 2015

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?

Posted in CSS | Tagged , , | Leave a comment

Start using Sass

Monday, September 22nd, 2014

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.

//speakerdeck.com/assets/embed.js

Posted in CSS, Sass | Tagged , , , | Leave a comment

CSS3 Grayscale Filter

Tuesday, August 5th, 2014

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 via this Codepen CSS3 Grayscale Filter

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:

Posted in CSS | Tagged , , , , , | Leave a comment

Learning Sass

Friday, June 27th, 2014

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.

Read the rest of this entry »

Posted in CSS, Sass | Tagged , , , , | Leave a comment