[Resolvido] Defeitos especiais em CSS
Olá. Não se trata de efeitos complexos, mas mesmo assim criaram a seguinte situação com os botões e um fieldset:
Eu desenvolvi assim:
/applications/core/interface/imageproxy/imageproxy.php?img=http://img232.imageshack.us/img232/643/cssfxsafari.jpg&key=0dfa970f554772b49d1ba6a837b56aec9cdbc0e859a49f2ed00edeaf10d3d7a0" alt="cssfxsafari.jpg" />
No Firefox, as curvas não ficam tão bonitas, mas vai:
/applications/core/interface/imageproxy/imageproxy.php?img=http://img138.imageshack.us/img138/8082/cssfxfirefox.jpg&key=afec159caf9b3bbed3555bcb9cab461db9e839221d291cfa8ffc9d72b6a49d71" alt="cssfxfirefox.jpg" />
No IE9 a coisa complicou porque novamente o degradê estourou os limites da curva do botão criando o defeito especial. E cadê a curva do fieldset?
/applications/core/interface/imageproxy/imageproxy.php?img=http://img525.imageshack.us/img525/5020/cssfxie9.jpg&key=c88e9e8ac2330ae6946ac47b1c7ff1afb1eb27c2f9ccd0d9e6b5eb11ff45829b" alt="cssfxie9.jpg" />
Segue o CSS:
fieldset.bordaDiv {
border-color:#FFF;
border-width:3px;
border-radius:20px;-moz-border-radius:8px; /FireFox 3/
}
input.btn {
display:inline-block;
background-color:#666;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#333333'); / for IE /
background: -webkit-gradient(linear, left top, left bottom, from(#999), to(#333)); / for webkit browsers /
background: -moz-linear-gradient(top, #999, #333); / for firefox 3.6+ /
font-family:Tahoma, Geneva, sans-serif;
font-size:11px;
font-style:italic;
text-decoration:none;
color:#FFF;
padding:2px 6px 2px 6px;
margin:6px;
vertical-align:middle;
border:#DDD 1px solid;
border-radius:8px;
-moz-border-radius:8px; /FireFox 3/
}
input.btn:hover {
color:#DDD;
}
input.btn:active {
background-color:#000;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#999999'); / for IE /
background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#999)); / for webkit browsers /
background: -moz-linear-gradient(top, #333, #999); / for firefox 3.6+ /
color:#666;
}Discussão (4)
Carregando comentários...