Service of automated PSD to HTML conversion used to convert Photoshop gradients into CSS3 code for all browsers. In addition to that we have added generation of linear and radial gradients in SVG format and embedding it into CSS code using a Data URI in base64 encoding.
Example of CSS code for linear gradient:
|
1 2 3 4 5 |
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9InJvdW5kZWRfcmVjdGFuZ2xlXzMiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4KPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjYWQwMDUxIiBzdG9wLW9wYWNpdHk9IjAuNTYiIC8+CjxzdG9wIG9mZnNldD0iOTkuNTElIiBzdG9wLWNvbG9yPSIjYzM2NTAwIiBzdG9wLW9wYWNpdHk9IjAuNTYiIC8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2MzNjUwMCIgc3RvcC1vcGFjaXR5PSIwLjU2IiAvPgo8L2xpbmVhckdyYWRpZW50Pgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI3JvdW5kZWRfcmVjdGFuZ2xlXzMpIiAvPjwvc3ZnPg==), #ff007d; background: -moz-linear-gradient(270deg, rgba(173,0,81,0.56) 0, rgba(195,101,0,0.56) 99.51%, rgba(195,101,0,0.56) 100%), #ff007d; background: -o-linear-gradient(270deg, rgba(173,0,81,0.56) 0, rgba(195,101,0,0.56) 99.51%, rgba(195,101,0,0.56) 100%), #ff007d; background: -webkit-linear-gradient(270deg, rgba(173,0,81,0.56) 0, rgba(195,101,0,0.56) 99.51%, rgba(195,101,0,0.56) 100%), #ff007d; background: linear-gradient(180deg, rgba(173,0,81,0.56) 0, rgba(195,101,0,0.56) 99.51%, rgba(195,101,0,0.56) 100%), #ff007d; |
Example of CSS code for radial gradient:
|
1 2 3 4 5 6 |
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAyMzIgMTM3IiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj4NCjxyYWRpYWxHcmFkaWVudCBpZD0icm91bmRlZF9yZWN0YW5nbGVfNiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGN4PSI1MCUiIGN5PSI1MCUiIHI9IjM0LjI1JSI+DQo8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIgLz4NCjxzdG9wIG9mZnNldD0iNTAuMzklIiBzdG9wLWNvbG9yPSIjMTFmZjMzIiBzdG9wLW9wYWNpdHk9IjAiIC8+DQo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC41IiAvPg0KPC9yYWRpYWxHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMjMyIiBoZWlnaHQ9IjEzNyIgZmlsbD0idXJsKCNyb3VuZGVkX3JlY3RhbmdsZV82KSIgLz48L3N2Zz4=), #ff008a; background: -moz-radial-gradient(center center, #ffffff 0, rgba(17,255,51,0.0) 50.39%, rgba(0,0,0,0.5) 100%), #ff008a; background: -o-radial-gradient(68.5px 68.5px at center center, #ffffff 0, rgba(17,255,51,0.0) 50.39%, rgba(0,0,0,0.5) 100%), #ff008a; background: -webkit-radial-gradient(68.5px 68.5px at center center, #ffffff 0, rgba(17,255,51,0.0) 50.39%, rgba(0,0,0,0.5) 100%), #ff008a; background: -ms-radial-gradient(68.5px 68.5px at center center, #ffffff 0, rgba(17,255,51,0.0) 50.39%, rgba(0,0,0,0.5) 100%), #ff008a; background: radial-gradient(68.5px 68.5px at center center, #ffffff 0, rgba(17,255,51,0.0) 50.39%, rgba(0,0,0,0.5) 100%), #ff008a; |
In this way out Photoshop to HTML software provides compatibility with the IE9 browser.
