Como colocar esse efeito nos fields?

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Como colocar esse efeito nos fields?

Mensagem por Legolass em 10/05/13, 03:26 pm

Qual é minha questão:
Como faço para colocar o efeito dos fields e do botão como mostra a imagem abaixo?



Eu também queria aplicar esse mesmo efeito do field para a caixa de postagem (tanto a normal, quanto a rápida), pois a minha está quadrada e sem efeito. E também esse estilo de botão para o "Enviar" e "Pré-visualizar".

Obrigado desde já!

Endereço do meu fórum:
http://www.fanfictionunited.com.br

Versão do fórum:
PHPBB2


Última edição por Cris Varella em 12/05/13, 11:55 pm, editado 1 vez(es)
avatar

Legolass
Usuário destaque

Masculino
Inscrito dia : 10/04/2013
Mensagens : 651
Pontos Ativos : 912

Ver perfil do usuário http://www.fanfictionunited.com.br

Resolvido Re: Como colocar esse efeito nos fields?

Mensagem por Convidado em 10/05/13, 03:44 pm

Saudações!

Poderia me informar o fórum em que viu?

Até. Piscada

Convidado
Convidado


Resolvido Re: Como colocar esse efeito nos fields?

Mensagem por Legolass em 10/05/13, 03:55 pm

Saudações!

Poderia me informar o fórum em que viu?

Até.

Hello PabloW! Como vai, amigo?

Aqui está: http://master-publicitario.forumeiros.com/login

Mas, lembrando, que eu também queria (se possível) esse efeito dos fields na caixa de resposta, e do botão também no "Enviar" e "Pré-visualizar".
avatar

Legolass
Usuário destaque

Masculino
Inscrito dia : 10/04/2013
Mensagens : 651
Pontos Ativos : 912

Ver perfil do usuário http://www.fanfictionunited.com.br

Resolvido Re: Como colocar esse efeito nos fields?

Mensagem por Convidado em 10/05/13, 04:05 pm

Saudações!

Acenda sua "Folha de estilo CSS":
Código:
#main-content a.cgu-buttons, button.button2, input.button1, input.button2 {
background: #F4F5F4 url(http://i66.servimg.com/u/f66/11/96/49/61/tabbg10.png);
border: 1px solid #DDD;
border-radius: ;
padding: 3px 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #F4F5F4;
}
.fontbutton {
  background: #F4F5F4 url(http://i66.servimg.com/u/f66/11/96/49/61/tabbg10.png);
border: 1px solid #DDD;
border-radius: 5px;
padding: auto;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #F4F5F4;
}
.inputbox:hover {
    border: 1px solid rgb(221, 221, 221) !important;
    color: #000 !important;
    border-radius: 5px !important;
}
input.inputbox {
    border: 1px solid rgb(221, 221, 221);
    color: #000 !important;
    border-radius: 5px !important;
  background: rgb(255,255,255);
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(241,241,241,1) 50%, rgba(225,225,225,1) 51%, rgba(246,246,246,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(241,241,241,1)), color-stop(51%,rgba(225,225,225,1)), color-stop(100%,rgba(246,246,246,1)));
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%);
background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%);
background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%);
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 );
}
input.tiny {
    width: 110px !important;
}
dd input, dd textarea {
background: rgb(255,255,255);
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(241,241,241,1) 50%, rgba(225,225,225,1) 51%, rgba(246,246,246,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(241,241,241,1)), color-stop(51%,rgba(225,225,225,1)), color-stop(100%,rgba(246,246,246,1)));
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%);
background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%);
background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%);
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 );
    border: 1px solid rgb(188, 188, 188) !important;
    color: #000 !important;
    padding: 2px !important;
    border-radius: 6px !important;
}
.inputbox:focus {
    background-color: #fff !important;
    border: 1px solid rgb(188, 188, 188) !important;
    color: #000 !important;
    padding: 2px !important;
    border-radius: 6px !important;
}
.inputbox {
    background-color: #fff !important;
    border: 1px solid rgb(188, 188, 188) !important;
    color: #000 !important;
    padding: 2px !important;
    border-radius: 6px !important;
}
e Validar.

Até. Piscada

Convidado
Convidado


Resolvido Re: Como colocar esse efeito nos fields?

Mensagem por Legolass em 10/05/13, 04:26 pm

Não funcionou. Veja:

avatar

Legolass
Usuário destaque

Masculino
Inscrito dia : 10/04/2013
Mensagens : 651
Pontos Ativos : 912

Ver perfil do usuário http://www.fanfictionunited.com.br

Resolvido Re: Como colocar esse efeito nos fields?

Mensagem por Legolass em 11/05/13, 10:53 am

UP
avatar

Legolass
Usuário destaque

Masculino
Inscrito dia : 10/04/2013
Mensagens : 651
Pontos Ativos : 912

Ver perfil do usuário http://www.fanfictionunited.com.br

Resolvido Re: Como colocar esse efeito nos fields?

Mensagem por Sennior em 11/05/13, 01:32 pm

Saudações!

Onde o senhor quer colocar este efeito? Bem estive em teu fórum e o mesmo já está com a função.

Até mais.
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16302
Pontos Ativos : 20791

Ver perfil do usuário http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Como colocar esse efeito nos fields?

Mensagem por Legolass em 11/05/13, 02:06 pm

Veja como está para mim:



Todo quadrado, entende?

Eu queria aquele efeito como está naquele site que citei.
avatar

Legolass
Usuário destaque

Masculino
Inscrito dia : 10/04/2013
Mensagens : 651
Pontos Ativos : 912

Ver perfil do usuário http://www.fanfictionunited.com.br

Resolvido Re: Como colocar esse efeito nos fields?

Mensagem por Sennior em 11/05/13, 02:18 pm

Saudação!

Me mande o fórum em que está tudo quadrado o sistema de login.

Até mais.
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16302
Pontos Ativos : 20791

Ver perfil do usuário http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Como colocar esse efeito nos fields?

Mensagem por Legolass em 11/05/13, 02:45 pm

Saudação!

Me mande o fórum em que está tudo quadrado o sistema de login.

Até mais.

http://www.fanfictionunited.com.br/login

E agora reparei que nessa página de login, o estilo de borda arredondada e sombreada também não foram aplicados. Veja:

avatar

Legolass
Usuário destaque

Masculino
Inscrito dia : 10/04/2013
Mensagens : 651
Pontos Ativos : 912

Ver perfil do usuário http://www.fanfictionunited.com.br

Resolvido Re: Como colocar esse efeito nos fields?

Mensagem por BrunoH. em 11/05/13, 08:17 pm

Olá!
Aceda a Folha de Estilo CSS:
Painel de Controle Seta Visualização Seta Imagens e Cores Seta Cores Seta Folha de estilo CSS
Código:
Código:
select, textarea, input[type="text"], input[type="password"] {
background-color: white;
border-color: #BBB #CCC #DDD;
border-radius: 5px 5px 5px 5px;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1) inset;
}
button.button2:hover, input.button2:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="file"]:hover, button:hover {
border: 1px solid #bbb;
background: #d9d9d9;
-webkit-box-shadow: inset 0 0 1px 1px #eaeaea;
-moz-box-shadow: inset 0 0 1px 1px #eaeaea;
box-shadow: inset 0 0 1px 1px #eaeaea;
color: #222;
cursor: pointer;
}
e Valide!

Até mais.
avatar

BrunoH.
Principal contribuidor
Principal contribuidor

Inscrito dia : 15/06/2012
Mensagens : 7675
Pontos Ativos : 10382

Ver perfil do usuário http://premiumdesign3d.blogspot.com.br/ https://www.facebook.com/brunohenrique.com.br

Resolvido Re: Como colocar esse efeito nos fields?

Mensagem por Legolass em 11/05/13, 09:04 pm

Senhor BrunoH., o efeito se aplicou perfeitamente nos fields (login, senha, e busca), mas no campo do editor de texto somente arredondou a borda. E os botões não aplicaram efeito.

Veja:

avatar

Legolass
Usuário destaque

Masculino
Inscrito dia : 10/04/2013
Mensagens : 651
Pontos Ativos : 912

Ver perfil do usuário http://www.fanfictionunited.com.br

Resolvido Re: Como colocar esse efeito nos fields?

Mensagem por BrunoH. em 11/05/13, 09:07 pm

Olá,
Substitua o código por este:
Código:
select, textarea, input[type="text"], input[type="password"],input {
background-color: white;
border-color: #BBB #CCC #DDD;
border-radius: 5px 5px 5px 5px;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1) inset;
}
button.button2:hover, input.button2:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="file"]:hover, button:hover {
border: 1px solid #bbb;
background: #d9d9d9;
-webkit-box-shadow: inset 0 0 1px 1px #eaeaea;
-moz-box-shadow: inset 0 0 1px 1px #eaeaea;
box-shadow: inset 0 0 1px 1px #eaeaea;
color: #222;
cursor: pointer;
}

Até mais.
avatar

BrunoH.
Principal contribuidor
Principal contribuidor

Inscrito dia : 15/06/2012
Mensagens : 7675
Pontos Ativos : 10382

Ver perfil do usuário http://premiumdesign3d.blogspot.com.br/ https://www.facebook.com/brunohenrique.com.br

Resolvido Re: Como colocar esse efeito nos fields?

Mensagem por Legolass em 11/05/13, 09:14 pm

Olá, desculpe se estou sendo chato. Os fields e botões ficaram corretos, falta somente o mesmo efeito dos fields no campo do editor de texto que apenas arredondou a borda. Esse efeito dos fields podem ser aplicados na caixa de resposta?
avatar

Legolass
Usuário destaque

Masculino
Inscrito dia : 10/04/2013
Mensagens : 651
Pontos Ativos : 912

Ver perfil do usuário http://www.fanfictionunited.com.br

Resolvido Re: Como colocar esse efeito nos fields?

Mensagem por BrunoH. em 11/05/13, 09:16 pm

Olá,
Desculpe, fiz uma modificação errado. Enfim, substitua o código por este:
Código:
select, textarea, input[type="text"], input[type="password"], #text_editor_textarea{
background-color: white;
border-color: #BBB #CCC #DDD;
border-radius: 5px 5px 5px 5px;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1) inset;
}
button.button2:hover, input.button2:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="file"]:hover, button:hover {
border: 1px solid #bbb;
background: #d9d9d9;
-webkit-box-shadow: inset 0 0 1px 1px #eaeaea;
-moz-box-shadow: inset 0 0 1px 1px #eaeaea;
box-shadow: inset 0 0 1px 1px #eaeaea;
color: #222;
cursor: pointer;
}

Até mais.
avatar

BrunoH.
Principal contribuidor
Principal contribuidor

Inscrito dia : 15/06/2012
Mensagens : 7675
Pontos Ativos : 10382

Ver perfil do usuário http://premiumdesign3d.blogspot.com.br/ https://www.facebook.com/brunohenrique.com.br

Resolvido Re: Como colocar esse efeito nos fields?

Mensagem por Legolass em 11/05/13, 09:20 pm

Agora o efeito se aplicou nos fields e na caixa de resposta também, porém o botão tornou a ficar quadrado hahaha. Meu forum tá amaldiçoado
avatar

Legolass
Usuário destaque

Masculino
Inscrito dia : 10/04/2013
Mensagens : 651
Pontos Ativos : 912

Ver perfil do usuário http://www.fanfictionunited.com.br

Resolvido Re: Como colocar esse efeito nos fields?

Mensagem por BrunoH. em 11/05/13, 09:22 pm

Olá,
Substitua o código por este:
Código:
select, textarea, input[type="text"], input[type="password"], #text_editor_textarea{
background-color: white;
border-color: #BBB #CCC #DDD;
border-radius: 5px 5px 5px 5px;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1) inset;
}
button.button2:hover, input.button2:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="file"]:hover, button:hover, input.mainoption, input.mainoption:hover {
border: 1px solid #bbb;
background: #d9d9d9;
-webkit-box-shadow: inset 0 0 1px 1px #eaeaea;
-moz-box-shadow: inset 0 0 1px 1px #eaeaea;
box-shadow: inset 0 0 1px 1px #eaeaea;
color: #222;
cursor: pointer;
}
Louco

Até mais.
avatar

BrunoH.
Principal contribuidor
Principal contribuidor

Inscrito dia : 15/06/2012
Mensagens : 7675
Pontos Ativos : 10382

Ver perfil do usuário http://premiumdesign3d.blogspot.com.br/ https://www.facebook.com/brunohenrique.com.br

Resolvido Re: Como colocar esse efeito nos fields?

Mensagem por Legolass em 11/05/13, 09:30 pm

Olá, obrigado pela paciência, mas não teve efeito nos botões.

EDIT: Tem como deixar os botões nesse mesmo estilo do FdF? Do mesmo tamanho, desenho e hover?
avatar

Legolass
Usuário destaque

Masculino
Inscrito dia : 10/04/2013
Mensagens : 651
Pontos Ativos : 912

Ver perfil do usuário http://www.fanfictionunited.com.br

Resolvido Re: Como colocar esse efeito nos fields?

Mensagem por BrunoH. em 12/05/13, 09:46 am

Olá,
Não precisa substituir nada desta vez, simplesmente adicione:
Código:
#main-content a.cgu-buttons, button.button2, input.button1, input.button2 {
background-image: url(http://ajuda.forumeiros.com/174-ltr.css);
border: 1px solid rgb(221, 221, 221);
border-image: initial;
border-radius: 2px;
color: rgb(102, 102, 102);
display: inline;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 17px;
margin: 0px;
padding: 3px 7px;
text-align: center;
text-decoration: none;
}
a.button1:hover, a.button2:hover, button.button2:hover, input.button1:hover, input.button2:hover {
background-color: rgb(153, 153, 153);
background-image: url(http://ajuda.forumeiros.com/174-ltr.css);
border: 1px solid rgb(153, 153, 153);
border-image: initial;
border-radius: 2px;
color: rgb(255, 255, 255);
display: inline;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 17px;
margin: 0px;
padding: 3px 7px;
}

Até mais.
avatar

BrunoH.
Principal contribuidor
Principal contribuidor

Inscrito dia : 15/06/2012
Mensagens : 7675
Pontos Ativos : 10382

Ver perfil do usuário http://premiumdesign3d.blogspot.com.br/ https://www.facebook.com/brunohenrique.com.br

Resolvido Re: Como colocar esse efeito nos fields?

Mensagem por Legolass em 12/05/13, 09:55 am

Sem efeito Triste

Será que tem algo de errado com meu css? http://www.fanfictionunited.com.br/71-ltr.css
avatar

Legolass
Usuário destaque

Masculino
Inscrito dia : 10/04/2013
Mensagens : 651
Pontos Ativos : 912

Ver perfil do usuário http://www.fanfictionunited.com.br

Resolvido Re: Como colocar esse efeito nos fields?

Mensagem por Legolass em 12/05/13, 11:22 am

Bruno, o efeito se aplicou nos botões, menos no "Enviar" e no "Pré-visualizar".

Veja a imagem abaixo. Outra coisa, após adicionar esse code, o efeito de borda arredondada e sombreada no forumline nao tem mais efeito no forum.

avatar

Legolass
Usuário destaque

Masculino
Inscrito dia : 10/04/2013
Mensagens : 651
Pontos Ativos : 912

Ver perfil do usuário http://www.fanfictionunited.com.br

Resolvido Re: Como colocar esse efeito nos fields?

Mensagem por Legolass em 12/05/13, 11:51 pm

Senhor BrunoH, eu consegui resolver. Estava faltando introduzir liteoption e mainoption. Ou seja, o code certo é este:

Código:
select, textarea, input[type="text"], input[type="password"], #text_editor_textarea{
background-color: white;
border-color: #BBB #CCC #DDD;
border-radius: 5px 5px 5px 5px;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1) inset;
}
button.button2:hover, input.button2:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="file"]:hover, button:hover, input.mainoption, input.mainoption:hover, input.liteoption, input.liteoption:hover {
border: 1px solid #bbb;
background: #d9d9d9;
-webkit-box-shadow: inset 0 0 1px 1px #eaeaea;
-moz-box-shadow: inset 0 0 1px 1px #eaeaea;
box-shadow: inset 0 0 1px 1px #eaeaea;
color: #222;
cursor: pointer;
}
#main-content a.cgu-buttons, button.button2, input.button1, input.button2, input.liteoption, input.mainoption {
background-image: url(http://ajuda.forumeiros.com/174-ltr.css);
border: 1px solid rgb(221, 221, 221);
border-image: initial;
border-radius: 2px;
color: rgb(102, 102, 102);
display: inline;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 17px;
margin: 0px;
padding: 3px 7px;
text-align: center;
text-decoration: none;
}
a.button1:hover, a.button2:hover, button.button2:hover, input.button1:hover, input.button2:hover {
background-color: rgb(153, 153, 153);
background-image: url(http://ajuda.forumeiros.com/174-ltr.css);
border: 1px solid rgb(153, 153, 153);
border-image: initial;
border-radius: 2px;
color: rgb(255, 255, 255);
display: inline;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 17px;
margin: 0px;
padding: 3px 7px;
}

Muito obrigado mesmo pela paciência. O senhor é demais! Pode fechar Piscada
avatar

Legolass
Usuário destaque

Masculino
Inscrito dia : 10/04/2013
Mensagens : 651
Pontos Ativos : 912

Ver perfil do usuário http://www.fanfictionunited.com.br

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum