[TUTORIAL] Opacidade nas opções do post

1 [TUTORIAL] Opacidade nas opções do post Ter Mar 26, 2013 5:43 pm

T-Lord
Admin

Premios ( 4 )

Posts : 611
Pontos : 1597
Reputação : 5
Data de inscrição : 17/03/2013

Opacidade nas opções do post

Neste tutorial, ficarão dispostos códigos CSS que concedem opacidade nos botões da postagem, tais como editar, citar e afins.

--> Tutoriais, dicas e astúcias <--
Opacidade nas opções do post

1º - Os códigos:

PHPBB3

Código:: .postbody:hover .profile-icons { -moz-transition: all .2s linear; -o-transition: all .2s linear; -webkit-transition: all .2s linear; opacity: .5; } .postbody .profile-icons:hover { -moz-transition: all .2s linear; -o-transition: all .2s linear; -webkit-transition: all .2s linear; opacity: 1!important; } .postbody .profile-icons { -moz-transition: all .2s linear; -o-transition: all .2s linear; -webkit-transition: all .2s linear; opacity: 0; }

[TUTORIAL] Opacidade nas opções do post Php21110

PHPBB2

Código:: .post:hover .post-options { -moz-transition: all .2s linear; -o-transition: all .2s linear; -webkit-transition: all .2s linear; opacity: .5; } .post .post-options:hover { -moz-transition: all .2s linear; -o-transition: all .2s linear; -webkit-transition: all .2s linear; opacity: 1!important; } .post .post-options { -moz-transition: all .2s linear; -o-transition: all .2s linear; -webkit-transition: all .2s linear; opacity: 0; }

[TUTORIAL] Opacidade nas opções do post Pun1210

PUNBB

Código:: .post:hover .post-options { -moz-transition: all .2s linear; -o-transition: all .2s linear; -webkit-transition: all .2s linear; opacity: .5; } .post .post-options:hover { -moz-transition: all .2s linear; -o-transition: all .2s linear; -webkit-transition: all .2s linear; opacity: 1!important; } .post .post-options { -moz-transition: all .2s linear; -o-transition: all .2s linear; -webkit-transition: all .2s linear; opacity: 0; }

[TUTORIAL] Opacidade nas opções do post Inv1010

INVISION

Código:: .post:hover .posting-icons { -moz-transition: all .2s linear; -o-transition: all .2s linear; -webkit-transition: all .2s linear; opacity: .5; } .post .posting-icons:hover { -moz-transition: all .2s linear; -o-transition: all .2s linear; -webkit-transition: all .2s linear; opacity: 1!important; } .post .posting-icons { -moz-transition: all .2s linear; -o-transition: all .2s linear; -webkit-transition: all .2s linear; opacity: 0; }

2º - Aplicando o código CSS:
Agora deverá seguir um esquema de onde o código deverá ser adicionado:
Painel de Controle -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS

(carregue na imagem para aumentar)
[TUTORIAL] Opacidade nas opções do post 1114

Resultados
Antes e depois da adição do código
Sem o mouse (normal):	Em modo hover:

1 [TUTORIAL] Opacidade nas opções do post Ter Mar 26, 2013 5:43 pm