cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen

Background tricks with SVG, Box shadows and CSS Gradients

We can use box-shadow and border-image inside background-image, we can use there outline, and even transform. We can rotate CSS Gradients and even rotate a bunch of gradients at once!

Better view in Chrome/Opera, transforms inside backgrounds don't work for CSS gradients in Firefox. And I didn't test demos in IE.

A common principle:

  1. Take svg
  2. Add inline styles
  3. Encode SVG (http://yoksel.github.io/url-encoder/)
  4. Use code as background-image
  5. Enjoy!

    Look into a code for more details.

Аrticle in Russian: http://css.yoksel.ru/inline-styles-in-background/