26 ноября 2010, 22:14

css3: linear gradient эссенция

.cool_gradient {
    background: #ebf1f6; /* old browsers */

background: -moz-linear-gradient(top, #ebf1f6 0%, #abd3ee 50%, #89c3eb 51%, #d5ebfb 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebf1f6), color-stop(50%,#abd3ee), color-stop(51%,#89c3eb), color-stop(100%,#d5ebfb)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#d5ebfb', GradientType=0 ); /* ie */ }
JavaScript: is and setAttr functions       Ctrl      

2 комментария РСС

GreLI
Для полного комплекта (старые версии Сафари, Опера и IE9) можно ещё добавить background:url(data:image/svg+xml;base64,PHN2Zy…), где PHN2Zy… это base64-закодированный SVG-файл:
<svg xmlns=«http://www.w3.org/2000/svg»>
<defs>
<linearGradient id=«grad» x1=«0» y1=«0» x2=«0» y2=«100%»>
<stop offset=«0» stop-color=«#ebf1f6»/>
<stop offset=«50» stop-color=«#abd3ee»/>
<stop offset=«51%» stop-color=«#89c3eb»/>
<stop offset=«100%» stop-color=«#d5ebfb»/>
</linearGradient>
</defs>
<rect x=«0» y=«0» width=«100%» height=«100%» style=«fill:url(#grad)»/>
</svg>
Vitaliy Bogdanets
ИЕ9 понимает же старые фильтры
GreLI
Понимать, понимает, но фильтры — отдельно зло (нет сглаживания, не работает с закруглёнными уголками, просто тормоза).

Ваш комментарий

адрес не будет опубликован

ХТМЛ не работает


Ctrl + Enter