Efeitos de Caixa com Texto

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

Resolvido Efeitos de Caixa com Texto

Mensagem por IsmaelS. em 27/11/12, 07:14 pm

Olá,

Queria saber o código para colocar como mostra a print:

http://i43.servimg.com/u/f43/16/43/60/45/caixa_10.jpg

Queria em cores de:

- Verde
- Vermelho


Fórum: www.master-publicitario.forumeiros.com (phpBB 3)

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Efeitos de Caixa com Texto

Mensagem por LucaaS Sizanoski em 27/11/12, 07:25 pm

Poderia Mandar O Forum Em Que Viu Isso ? Obg ,
avatar

LucaaS Sizanoski
Nível 9

Masculino
Inscrito dia : 27/11/2012
Mensagens : 183
Pontos Ativos : 238

Ver perfil do usuário

Resolvido Re: Efeitos de Caixa com Texto

Mensagem por IsmaelS. em 27/11/12, 07:30 pm


IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Efeitos de Caixa com Texto

Mensagem por Evidaaηc em 27/11/12, 08:26 pm

Olá, Isso e um Efeito que se Chama Alerta.

Adicione no CSS

Código:
    .alert{border:1px solid;margin:10px 0px;padding:15px 10px 15px 60px;color:#00529B;
    background-repeat:no-repeat;background-position:10px center;background-color:#BDE5F8;
    background-image:url('http://i42.servimg.com/u/f42/17/32/13/00/40px-i10.png')}
    .alert2{border:1px solid;margin:10px 0px;padding:15px 10px 15px 60px;color:#00529B;
    background-repeat:no-repeat;background-position:10px center;background-color:#ffcc00;
    background-image:url('http://i42.servimg.com/u/f42/17/32/13/00/40px-a10.png')}
    .alert3{border:1px solid;margin:10px 0px;padding:15px 10px 15px 60px;color:#00529B;
    background-repeat:no-repeat;background-position:10px center;background-color:#ff5c5c;
    background-image:url('http://i42.servimg.com/u/f42/17/32/13/00/120px-10.png')}

Adicione um Novo JS "Em Todas as Paginas"

Código:
    jQuery(document).ready(function() {
    jQuery('#text_editor_select_controls #other button:eq(0)').after('<br><button onclick="alert();return false" style="color:blue">Alert!</button>');
    jQuery('#text_editor_select_controls #other button:eq(1)').after('<br><button onclick="alert2();return false" style="color:orange">Alert!</button>');
    jQuery('#text_editor_select_controls #other button:eq(2)').after('<br><button onclick="alert3();return false" style="color:red">Alert!</button>');
    });
    function alert(){
    bbfontstyle('<div class="alert">','</div>');selectWysiwyg(this,'other');return false}
    function alert2(){
    bbfontstyle('<div class="alert2">','</div>');selectWysiwyg(this,'other');return false}
    function alert3(){
    bbfontstyle('<div class="alert3">','</div>');selectWysiwyg(this,'other');return false}


Resultado:




Resulta?:
avatar

Evidaaηc
Usuário destaque

Masculino
Inscrito dia : 06/07/2012
Mensagens : 706
Pontos Ativos : 966

Ver perfil do usuário http://world.forumbrasil.net/

Resolvido Re: Efeitos de Caixa com Texto

Mensagem por IsmaelS. em 27/11/12, 09:22 pm

Não ...

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Efeitos de Caixa com Texto

Mensagem por LucaaS Sizanoski em 27/11/12, 09:31 pm

Eu Andei Vendo Forum e não achei isso ,
avatar

LucaaS Sizanoski
Nível 9

Masculino
Inscrito dia : 27/11/2012
Mensagens : 183
Pontos Ativos : 238

Ver perfil do usuário

Resolvido Re: Efeitos de Caixa com Texto

Mensagem por LucaaS Sizanoski em 27/11/12, 09:39 pm

Tente Esse Codigo -

Css
Código:
/* ALERTAS */
.alert1 {
    background-color: #C6D8F0;
    background-image: url("http://i43.servimg.com/u/f43/16/93/80/74/inform10.png");
    background-position: 10px center;
    background-repeat: no-repeat;
    border: 1px solid #63A0EC;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 1px 0 #FFFFFF inset;
    color: #4381CC;
    margin: 10px 0;
    padding: 15px 10px 15px 60px;
}
.alert2 {
    background-color: #FAA73D;
    background-image: url("http://i43.servimg.com/u/f43/16/93/80/74/error11.png");
    background-position: 10px center;
    background-repeat: no-repeat;
    border: 1px solid #AA7221;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 1px 0 #FFFFFF inset;
    color: #925616;
    margin: 10px 0;
    padding: 15px 10px 15px 60px;
}
.alert3 {
    background-color: #CF4242;
    background-image: url("http://i43.servimg.com/u/f43/16/93/80/74/lock10.png");
    background-position: 10px center;
    background-repeat: no-repeat;
    border: 1px solid #AD3F30;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 1px 0 #FFFFFF inset;
    color: #FFCECE;
    margin: 10px 0;
    padding: 15px 10px 15px 60px;
    text-shadow: 1px 1px #D71212;
}
.alert4 {
    background-color: #5DE356;
    background-image: url("http://i43.servimg.com/u/f43/16/93/80/74/tick10.png");
    background-position: 10px center;
    background-repeat: no-repeat;
    border: 1px solid #1A9417;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 1px 0 #FFFFFF inset;
    color: #1A9417;
    margin: 10px 0;
    padding: 15px 10px 15px 60px;
}

Js
Código:
    jQuery(document).ready(function() {
    jQuery('#text_editor_select_controls #other button:eq(0)').after('<br><button onclick="alert();return false" style="color:blue">Alert!</button>');
    jQuery('#text_editor_select_controls #other button:eq(1)').after('<br><button onclick="alert2();return false" style="color:orange">Alert!</button>');
    jQuery('#text_editor_select_controls #other button:eq(2)').after('<br><button onclick="alert3();return false" style="color:red">Alert!</button>');
    });
    function alert(){
    bbfontstyle('<div class="alert">','</div>');selectWysiwyg(this,'other');return false}
    function alert2(){
    bbfontstyle('<div class="alert2">','</div>');selectWysiwyg(this,'other');return false}
    function alert3(){
    bbfontstyle('<div class="alert3">','</div>');selectWysiwyg(this,'other');return false}
'Todas As Paginas'
avatar

LucaaS Sizanoski
Nível 9

Masculino
Inscrito dia : 27/11/2012
Mensagens : 183
Pontos Ativos : 238

Ver perfil do usuário

Resolvido Re: Efeitos de Caixa com Texto

Mensagem por IsmaelS. em 28/11/12, 04:16 pm

Resolvido

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

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