css 3

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.

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

Css filter

Recently I have been using the new CSS element called Filter alot, Its beautiful and easy to use, too bad not all browser are supporting it, infect what i know is for now is only -webkit- browser

Here are some properties that we could use:

  • blur
  • grayscale
  • drop-shadow
  • sepia
  • brightness
  • contrast
  • hue-rotate
  • invert
  • saturate
  • opacity

If you intend to try out now, just do -webkit-filter: blur(10px); // or other properties

By mixing with some of the properties you can get great effects like those Instagram right on your browser, only with CSS, thats really simple and awesome for me.

here is a link to the playground, check it out.

css filter playground