Сервис автоматической верстки наряду с CSS3 градиентами для всех браузеров теперь автоматически генерирует градиент в SVG формате и внедряет его в CSS с помощью Data URI в base64 кодировке.
Пример кода для линейного градиента:
|
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; |
Пример кода для радиального градиента:
|
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; |
Таким образом, обеспечивается совместимость CSS кода верстки для браузера IE9.
