remove trail for css transition

While working on some css transition recently faced a small problem, the item that was animated create a trail (some white lines or cut images) where animated, that created a very experience for users, there isn’t real fix yet, however the temporary solution is to use hardware accelerated css property to improve the graphic rendering

Add this property to where you transition the css, hope this help you.

-webkit-transform: translate3d(0,0,0);

Using sourcemap for front-end development

most of the time when you are using compressor like SASS or Less, and you might find that is difficult to debug the css / javascript code, especially when you compressed the code into Compressed Version, Internet always have solution for this kind of problem, SourceMap which already supported by major browsers, Chrome and Firefox. here is a good source to read more about – <a hrefs=”https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit”>sourcemap</a>

to simplify, SourceMap allow us to live edit or debug compiled and compressed files like sass, coffeescript from the main source file. 

This is how you do on chrome, 

Open up your Developer Tools and click on settings, make sure that the option: Enable css “Enable CSS source maps” and “Auto-reload generated CSS” are both ticked.

Now you need to map your css to sass or scss file, 
Open the Source tab from developer toolbar and right click the css you want to map to the scss

Compass for sass

In my previous article I talked about how to make use of SASS for your front-end development, today I want to talk abit about Compass, http://compass-style.org/

Compass is an addon to SASS which allows developers easily write CSS3 codes in sass, which means you @include once of compass mixin, compass will compile all css3 prefix for you.

Here is an example:

 .my-div { @include border-radius(4px, 4px); } 

and what happends if you compile with compass it will automatic provide with the prefix as below.

  .my-div {   -webkit-border-radius: 4px 4px;   -moz-border-radius: 4px / 4px;   border-radius: 4px / 4px; } 

it might not be ovious if you are writing a few line of codes only, but for those web applicaitions of content heavy websites, this is great way to build rapid css without worries.
Continue reading “Compass for sass”

Practice SASS now!

I have been using SASS (http://sass-lang.com/) since last week and found love with it.
so what is SASS exactly that people are talking about on the web, basically it allows you to write your css in variables, functions, nesting for better visual and save your time on complex css, then it compile the file into standard CSS.
As what their website said:

Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

inorder to install this little brilliant tool open your terminal and key in

gem install sass

for those with permission error with gem/ruby might want to use

sudo gem install sass

There are a few key functions that i really like it alot which I will demonstrate here.
Continue reading “Practice SASS now!”

Print Css background in Chrome and Safari

One of the problem that i have with css is that it does not allow me to print background color or background image, luckily Chrome and safari have a solution for that.
Insert the code below to your css.

-webkit-print-color-adjust:exact;