Gradient
Enviado por Flavio Ribeiro, seg, 13/10/2008 - 17:15
Uma forma muito simples de fazer um gradient sem imagem é utilizar um filtro da microsoft.
<style type="text/css">
<!--
div.gradient1{ width:100px;height:100px; margin:2px;padding:5px; filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFffff', startColorstr='#000066', gradientType='0'); color:#CCCCCC;}
-->
</style>
<div class="gradient1">Esse é o resultado</div>
Claro que por se tratar de um filtro da microsoft, ele só funciona no IE. No Firefox, Safari entre outros o fundo ficaria transparente.
Para resolver isso temos duas opções, colocar o filtro entre Hacks separando o gradient somente para o IE e uma cor sólida para os demais ou utilizar uma imagem no backgound, dessa forma:
<style type="text/css">
<!--
div.gradient1{ width:100px;height:100px; margin:2px;padding:5px; height:100px; background: url('sua_figura_com_o_gradient.gif');} -->
</style>
Nesse caso a figura fica posicionada em Top, então cuidado com o tamanho, pois ela irá se repetir se o tamanho da tag for maior do que a figura.
Abraço,
Flavio
www.spyderit.com.br
<style type="text/css">
<!--
div.gradient1{ width:100px;height:100px; margin:2px;padding:5px; filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFffff', startColorstr='#000066', gradientType='0'); color:#CCCCCC;}
-->
</style>
<div class="gradient1">Esse é o resultado</div>
Esse é o resultado
Claro que por se tratar de um filtro da microsoft, ele só funciona no IE. No Firefox, Safari entre outros o fundo ficaria transparente.
Para resolver isso temos duas opções, colocar o filtro entre Hacks separando o gradient somente para o IE e uma cor sólida para os demais ou utilizar uma imagem no backgound, dessa forma:
<style type="text/css">
<!--
div.gradient1{ width:100px;height:100px; margin:2px;padding:5px; height:100px; background: url('sua_figura_com_o_gradient.gif');} -->
</style>
Nesse caso a figura fica posicionada em Top, então cuidado com o tamanho, pois ela irá se repetir se o tamanho da tag for maior do que a figura.
Abraço,
Flavio
www.spyderit.com.br
»
- Comentar
- 6574 leituras