Propriedade do INPUT para deixar transparente.

[Fernando Almeida]

Existe alguma propriedade do CSS para deixar um input com o bg transparente ?

[Alexandre Gaigalas]

Ham....

input {
    background: transparent;
}

--
Alexandre Gomes Gaigalas
alex...@gaigalas.net
http://Alexandre.Gaigalas.Net

[Fernando Almeida]

hum, beleza, funcionou!
eu coloquei
input {
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: none;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: none;
    border-top-color: #F7F7F7;
    border-right-color: #000033;
    border-bottom-color: #000033;
    border-left-color: #F7F7F7;
    background-color: transparent;
    background-image: url(/images/bgtranspfield.gif)
}

a imagem /images/bgtranspfield.gif é um pontilhado em gif, que dá uma semi-transparência... o efeito fica bom, mas, creio que com CSS também tem como usar os filtros de transparencia, alguem sabe aonde consigo uma documentação que fala sobre isso ?

2008/12/18 Alexandre Gaigalas <alex...@gaigalas.net>

[diego nunes]

2008/12/18 Fernando Almeida <nando...@gmail.com>:

> hum, beleza, funcionou!
> eu coloquei
> input {

> (...) mimimi (...)
> }

Eu creio que você tenha usado um software pra definir isso pra
você, então não vou falar tão mal, mas usar esse tanto de texto pra
tão pouco resultado é pouco razoável. Um código menor e equivalente
seria...

input {
border: 1px solid #003;
border-width: 0 0 1px 1px;
background: transparent url('/images/bgtranspfield.gif');
}

Sério: são equivalentes. Pra você ver o absurdo que o seu editor
fez: ele definiu as cores pra uma borda que tem "style none". Entende
o que é isso? Ele diz "a cor da borda é verde. mas não coloca borda
não, só tô falando pra ocupar mais sua orelha" -- e, nesse caso, a
orelha do ouvinte é a conexão do usuário.
Dê uma estudada sobre CSS e seus usuários vão agradecer.

--
diego nunes
dnunes.com

[Fernando Almeida]

eu usei o dreamweaver

mas, comentando o codigo, poderia tirar apenas umas 3 linhas, para o uso

input {
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: none;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: none;
    border-top-color: #F7F7F7;
    border-right-color: #000033;
    border-bottom-color: #000033;
    border-left-color: #F7F7F7;
    background-color: transparent;
    background-image: url(/images/bgtranspfield.gif)
}

as 4 primeiras linhas poderia substituir por uma:
border-width: 1px;
o resto eu uso..
border-top é diferente do border-rigth, tanto no tipo quanto na cor

2008/12/18 diego nunes <dnu...@gmail.com>

[diego nunes]

2008/12/18 Fernando Almeida <nando...@gmail.com>:

> input {
> border-top-width: 1px;
> border-right-width: 1px;

> (...)
> border-top-style: none;
> border-right-style: solid;
> (...)
> border-top-color: #F7F7F7;
> border-right-color: #000033;
> (...)
> }
> (...)

> border-top é diferente do border-rigth, tanto no tipo quanto na cor

O tipo é "none", cara! Não adianta aplicar cor se você tá dizendo
que não ter borda. Testa o seu CSS, o meu CSS e me diz se tem alguma
diferença prática (na renderização) entre eles.

--
diego nunes
dnunes.com

[Fernando Almeida]

eh que eu tenho uma outra entrada, input:focus, que eu mudo esta propriedade...

isso não funciona no IE6, mas, no opera,ff e safari funciona
no hover eu mudo de none para solid, dá um efeito legal

2008/12/18 diego nunes <dnu...@gmail.com>

[diego nunes]

2008/12/18 Fernando Almeida <nando...@gmail.com>:

> eh que eu tenho uma outra entrada, input:focus, que eu mudo esta
> propriedade...
>
> isso não funciona no IE6, mas, no opera,ff e safari funciona
> no hover eu mudo de none para solid, dá um efeito legal

Ainda assim:

input {
border: 1px solid red;
border-style: solid none none solid;
}
input:focus {
border-color: red black black red;
border-style: solid;
}

Tadã!

--
diego nunes
dnunes.com

[Fernando Almeida]

Ficou melhor :)

2008/12/18 diego nunes <dnu...@gmail.com>

[Adriano Fialho]

.suaClasse{
    background:url('caminho_da_sua_imagem');
    -moz-opacity:1; /* para todos os browsers, menos IE */
    _filter:alpha(opacity=100); /*  HACK para IE */
}

outra possibilidade é que a imagem de fundo seja um PNG.

.suaClasse{
     background:url(''caminho_da_imagem_png');

     /***** HACK para IE *****/
    _background:none;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='caminho_da_imagem_png', sizingMethod='none');

}

se você quiser q essas propriedades funcionem em todos os INPUTS, no lugar de .suaClasse, você coloca input, desta forma:

input{
     background:url(''caminho_da_imagem_png');

     /***** HACK para IE *****/
    _background:none;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='caminho_da_imagem_png', sizingMethod='none');

}


PS: na verdade o background com valor "transparent" é a mesma coisa que "none" que significa sem background.


Adriano Fialho.

2008/12/18 Fernando Almeida <nando...@gmail.com>

[Fernando Almeida]

Duvidas, o IE6 não aceita transparência em PNG ... descartado :D

vou fazer uns testes! mas, tá ficando interessante, depois mando um screenshot :D

Valew a todos!

[Fernando Almeida]

Sempre testo meus scripts no IE6, FF3, Opera 9,  safari 3 e agora no Chrome beta (que tem o mesmo comportamento do safari)

2008/12/19 Fernando Almeida <nando...@gmail.com>

[Fernando Almeida]

Ok, coloquei as opções
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity:0.5;

mas, acontece que o texto também fica com o filtro.
no firefox até mudo isso, pq no input:focus eu retiro os filtros, mas, no IE não funciona...

quem ajuda ?

2008/12/19 Fernando Almeida <nando...@gmail.com>

[Adriano Fialho]

O IE 6 aceita PNG sim. Basta utilizar o filtro que falei.

input{
     background:url(''caminho_da_

imagem_png');

     /***** HACK para IE 6 *****/

    _background:none;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='caminho_da_imagem_png', sizingMethod='none');

}

Utilizo em alguns projetos:
http://www.umaideiasolucoes.com.br
PNG: ( http://www.umaideiasolucoes.com.br/site/central/imgs/bgSite.png )

http://www.institutodeterapiacorporal.com.br
PNG: ( http://www.institutodeterapiacorporal.com.br/site/central/imgs/bgCadastreSe.png )

Em ambos os casos utilizo background com PNG e transparência

Pode abrir em qualquer navegador que a imagem .PNG se comportará da mesma maneira em todos os browsers.

Espero que ajude.

2008/12/19 Fernando Almeida <nando...@gmail.com>

[Tanure]

eu fiz um que usa png na semana passada

adaptei ele e funciona bem em todos, inclusive ie¨com transpárencia

da uma olhada lá, que vc vai entender...

é bem facil adaptar

http://www.dialhost.com.br/natal/2008

Luiz Tanure

[Perroud]

Mais fácil usar o hack do Dean Edwards :P
Em tempo: este hack tem uma série de limitações.

2008/12/19 Adriano Fialho <adar...@gmail.com>:

> O IE 6 aceita PNG sim. Basta utilizar o filtro que falei.
>
> input{
> background:url(''caminho_da_
>>
>> imagem_png');
>>
>> /***** HACK para IE 6 *****/
>> _background:none;
>>
>> _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='caminho_da_imagem_png',
>> sizingMethod='none');
>>
>> }

--
Perroud

[Adriano Fialho]

Senão estou enganado, o hack de Dean Edwards é exatamente a mesma coisa escrita de outra maneira. Na verdade ele transforma a expressão:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='caminho_da_imagem_png', sizingMethod='none')

dinamicamente, através de um script. Para isso, é criado um arquivo de comportamento .htc (behavior) para que seja reparado o erro de leitura do PNG no IE 6.

Assim como ele, tem outros scripts disponíveis na internet que podem ajudar bastante, como por exemplo:

http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

de Erik Arvidsson.

Na maioria dos casos que utilizam scripts, é necessário fazer adaptações.

Eu não sou muito favorável à utilização de hacks de qualquer natureza, defendo arduamente os padrões web, mas existem casos em que a sua utilização se faz necessária.

Eu não conheço nenhuma outra maneira de utilizar PNG transparente, que funcione corretamente em todos os navegadores, sem a utilização de hacks ou scripts, que na verdade mascaram o hack.

2008/12/19 Perroud <per...@gmail.com>

[Fernando Almeida]

na verdade, acho que somente o IE6 não suporta transparencia em PNG

2008/12/19 Adriano Fialho <adar...@gmail.com>

[Perroud]

O hack IE7 é bem mais maduro hoje em dia na sua versão 2.0 beta. Nada
do que era na versão alpha.

2008/12/19 Adriano Fialho <adar...@gmail.com>:

> Senão estou enganado, o hack de Dean Edwards é exatamente a mesma coisa
> escrita de outra maneira. Na verdade ele transforma a expressão:
>
> filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='caminho_da_imagem_png',
> sizingMethod='none')
>
> dinamicamente, através de um script. Para isso, é criado um arquivo de
> comportamento .htc (behavior) para que seja reparado o erro de leitura do
> PNG no IE 6.

Este PNG Behavior é quem usa HTC até hoje.

> Assim como ele, tem outros scripts disponíveis na internet que podem ajudar
> bastante, como por exemplo:
>
> http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html
>
> de Erik Arvidsson.

--
Perroud