~NatyBelleville

NatyBelleville
Mal feito, feito.
Nome: Nataly
Status: Usuário Veterano
Sexo: Indisponivel
Localização: Indisponivel
Aniversário: 13 de Janeiro
Idade: 66
Cadastro:

(Códigos Style 4) Mais códigos pra imagens, pode ser?


Postado

(Códigos Style 4) Mais códigos pra imagens, pode ser?

Esse jornal é inteiramente dedicado a ~WhiteJM <3 Ela pediu e aqui está!

•COMO FAÇO EFEITO PRETO E BRANCO NAS IMAGENS?•

Depende de como você quer; no hover ou deixando em preto e branco no começo e no hover voltar a ser colorido?

Então vamos primeiro com o preto e branco no começo e no hover voltar a ser colorido:
Citação:
####################################################################### */
/* Estilo das imagens do menu direito, tal como os avatares */

.boxMenuDireito img{
.boxConteudo img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
-moz-transition:All 0.9s;
-o-transition:All 0.9s linear;
transition: all 0.9s linear;
}

.boxConteudo img:hover {
-webkit-filter: grayscale(00%); /* Chrome, Safari, Opera */
filter: grayscale(00%);
-moz-transition:All 0.9s;
-o-transition:All 0.9s linear;
transition: all 0.9s linear;
}

}

As parte em negrito é o código.

Agora preto e branco no hover é só inverter as posições:
Citação:
.boxMenuDireito img{
.boxConteudo img {
-webkit-filter: grayscale(00%); /* Chrome, Safari, Opera */
filter: grayscale(00%);
-moz-transition:All 0.9s;
-o-transition:All 0.9s linear;
transition: all 0.9s linear;
}

.boxConteudo img:hover {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
-moz-transition:All 0.9s;
-o-transition:All 0.9s linear;
transition: all 0.9s linear;
}
}


•COMO EU FAÇO O EFEITO 'GIRO' NAS IMAGENS?•

Segue aí o código...
Citação:
.boxMenuDireito img {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: transform 1s;
-moz-transition: transform 1s;
-o-transition: transform 1s;
transition: transform 1s;

}

.boxMenuDireito img:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: transform 1s;
-moz-transition: transform 1s;
-o-transition: transform 1s;
transition: transform 1s;

}

Partes em negrito é o código.

•COMO EU DEIXO A BORDA DAS IMAGENS REDONDAS?•


Isso é simples:
Citação:
.boxMenuDireito img {
border-radius: 80px;
-webkit-border-radius: 80px;
-moz-border-radius: 80px;

}


•COMO COLOCAR BORDAS NAS IMAGENS?•

Esse não muda o código das bordas comuns do Style, você só coloca no lugar certo:
Citação:
.boxMenuDireito img {
border: 3px solid #COR;
box-shadow:#COR DA SOMBRA 0px 0px 3px;

border-radius: 0px 0px 0px 0px!important;
-moz-border-radius: 0px 0px 0px 0px!important;
}

Esse vem com um extra de sombra nas imagens :3

•COMO DIMINUIR O TAMANHO DAS IMAGENS?•

Eis aqui:
Citação:
.boxMenuDireito img {
width: 50px !important;
height: 50px !important;
}


•EXTRA!!! MUDAR BARRA DE ROLAGEM DO STYLE!•

Logo abaixo do body{ Você cola o seguinte:
Citação:
/***************************************************** rolagem **/
body::-webkit-scrollbar { width: 6px; height: 6px/}
body::-webkit-scrollbar-button:start:decrement,
body::-webkit-scrollbar-button:end:increment { display: block;}
body::-webkit-scrollbar-button:vertical:start:increment,
body::-webkit-scrollbar-button:vertical:end:decrement { display: none;}

/***************************************************** rolagem penultima **/
body::-webkit-scrollbar-button:vertical:increment { background-color: #ccc; }

/* Place The scroll up button at the up */
body::-webkit-scrollbar-button:vertical:decrement { background-color: #ccc;}

/***************************************************** fundo rolagem penultima **/
body::-webkit-scrollbar-track:vertical {background-color: #d3d3d3;}

/***************************************************** fundo rolagem acima parada **/
body::-webkit-scrollbar-track-piece {background-color: #fff;}
body::-webkit-scrollbar-track-piece:vertical:start {border: px solid #fff;}

/***************************************************** fundo rolagem parada **/
body::-webkit-scrollbar-thumb:vertical { height: 30px;background-color: #BB7577}
body::-webkit-scrollbar{ height: auto; width: 5px; background-color: #fff; }
1
/***************************************************** fundo rolagem ultima **/
body::-webkit-scrollbar-corner:vertical { background-color: #623c48;}

.boxMenuDireito ::-webkit-scrollbar{background:#fff;width:4px;height:5px;}
.boxMenuDireito ::-webkit-scrollbar-thumb{background-color:#BB7577;}
.boxMenuDireito ::-webkit-scrollbar-button,.boxMenuDireito ::-webkit-scrollbar-corner{background-color:#BB7577;}

Obrigada por acompanhar e espero que tenha gostado!!


Gostou da Jornal? Compartilhe!

Gostou? Deixe seu Comentário!

Muitos usuários deixam de postar por falta de comentários, estimule o trabalho deles, deixando um comentário.

Para comentar e incentivar o autor, Cadastre-se ou Acesse sua Conta.


Carregando...