#manututorials

[lugardohtml]

PS :: Color Range

O Color Range é uma ferramente pouco conhecida que permite o isolamento de cor, com ela você pode transformar cores em outras sem afetar o restante da foto. Ela é fantástica e a achei por acaso, espero que o tutorial seja útil.

Unfe3ling Tutorials & Desenvolvimentos. Se for útil dê like e credite, jamais copie.

•• Foto Original usada no exemplo - Abra a imagem que queres modificar alguma cor;

•• Print 1 - Vá em Select >> Color Range.

•• Print 2 - Após abrir a janelinha do Color Range você vai selecionar a opção Sampled Colors e logo em seguida Localized Color Clusters. Feito isso deixe o Fuzziness em 110. Agora clique no primeiro conta gotas.

•• Print 3 - Com o conta gotas selecionado você vai clicar na cor que você vai querer selecionar (lembrando: não feche a janela do Color Range). Após isso, você irá selecionar o segundo conta gotas (o que tem o símbolo de adição) e irá clicar nas partes que você quer selecionar mais ainda não estão brancas no exemplo da janelinha. Caso você tenha selecionado uma parte que não queria é só selecionar o terceiro conta gotas (com o símbolo de subtração) e clicar na parte que você tinha selecionado. Quando selecionar todas as partes desejadas clique me ok.

Toda vez que você clicar em uma cor, todas as outras partes da imagem que tenham essa cor também será selecionada.

As partes brancas que ficam na prévia da janela (do Color Range) são as partes que serão selecionada.

 Pronto, seleção realizada. Agora você poderá usar dos recursos da aba Images e personalizar as partes selecionada. Caso queira mudar as cores, você poderá ir em Image >> Adjustments >> Color Selective (ou em Hue/Saturation) e deixar como quiser. Você pode também deixar a seleção preto e branca, com mais brilho, em destaque e etc. 

•• Print 4 - Quando finalizar clique na ferramenta da corda vá na foto e com o botão direito clique em Deselect. 

Veja um dos meus resultados aqui.

[lugardohtml]

Estilos :: Ask #005

Ask: Block que consiste em perguntas que os followers podem mandar, para de uma forma, interagir com o proprietário do tumblr.

© Unfe3ling Tutorials - Códigos e Desenvolvimento. Se lhe for útil dê like, se usar credite.

1- Cole o css abaixo, antes de </style>:

/*** CSS estilo de Ask by: Unfe3ling***/ .pergunta {background:#FF818C; color: #fff; font-size: 9px; font-family: 'arial'; padding: 2px; text-align: center; text-transform: uppercase; width: 200px; margin-left: 270px;-webkit-border-bottom-right-radius: 15px; -webkit-border-bottom-left-radius: 15px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 15px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; } .photo {border: 3px solid #FF818C; margin-left: -10px;  -webkit-border-top-right-radius: 30px; -webkit-border-bottom-right-radius: 30px; -moz-border-radius-topright: 30px; -moz-border-radius-bottomright: 30px; border-top-right-radius: 30px; border-bottom-right-radius: 30px;} .perguntas {background: #EDDEC1; padding: 5px; margin-right: -11px; margin-left: 50px; -webkit-border-top-left-radius: 30px; -webkit-border-bottom-left-radius: 30px; -moz-border-radius-topleft: 30px; -moz-border-radius-bottomleft: 30px; border-top-left-radius: 30px; border-bottom-left-radius: 30px; } .perguntacor a {color: #fff;} .perguntacor g {color: #fff;}

Entenda:

.pergunta = configurações do lugar onde fica quem mandou a ask;

.photo = configurações da foto de quem mandou a ask;

.perguntas = configurações do espaço onde fica a pergunta mandada;

.perguntacor a e perguntacor g = cor do link de quem mandou a ask e dos anônimos.

Para que a foto e a caixa da pergunta fiquem grudadinhas na caixa de posts, que fica mais bonitinho, basta mudar o margin-left do .photo e mudar o margin-right do .perguntas para valores maiores negativos. Exemplo: -15px; -30px; e assim até ficar como desejares. 

2- Cole o block abaixo no lugar do seu block atual de ask e se preciso adicione sua div da caixa dos posts para que as asks não fiquem sem caixas ao serem postadas.

<!---Block de ask by unfe3ling---> {block:Answer} <img src="{AskerPortraitURL-48}" align="left" class="photo"><div class="perguntas"><center> {Question} </center></div> <div class="pergunta"><div class="perguntacor">Question by: <g>{Asker}</g></div> </div> <center>{Answer}</center> </div>{/block:Answer}

[lugardohtml]

Efeitos :: TwoFace

© Unfe3ling Tutorials - Códigos e Desenvolvimento. Se lhe for útil dê like, se usar credite.

CSS:

Cole o código abaixo antes de </style>:

figure {position: relative; width: 150px; height: 70px;  overflow: hidden; margin-left: 0px; margin-top: 0px; border: 3px #FF818C solid;} figure img { width: 150px; height: 70px; } figure img:hover{ width: 150px; height: 70px; } figure figcaption { text-align:center; width: 175px; color: #fff; font-family: arial; padding: 7px; margin-left: -20px; position: absolute; -webkit-transition: .9s all linear; -moz-transition: .9s all linear; -ms-transition: .9s all linear; -o-transition: .9s all linear; transition: .9s all linear; pointer-events: none;} figure:hover figcaption, figure:focus figcaption { margin-top: -79px; }

Entenda:

.figure: determina as configurações da caixa onde estará a imagem;

width: largura da caixa;

height: altura da caixa;

margin-left e margin-top: posiciona a caixa;

border: mude #c1bed1 para a cor que desejar a borda.

figure img: altura e largura da imagem que fica na caixa.

figure img:hover: altura e largura da imagem no hover (mantenha do tamanho que você usar no figure img)

figure figcaption: configurações da imagem no hover.

figure:hover figcaption: até onde a imagem sobre, quanto maior o valor mais em cima ela irá parar. Bote um valor que dê o tamanho da primeira imagem.

HTML:

Cole o código abaixo onde deseja o efeito:

<figure id="hong-kong"> <a href="link"> <img src="LINK DA PRIMEIRA IMAGEM AQUI"> </a> <figcaption><img src="LINK DA IMAGEM DO HOVER AQUI" ></figcaption> </figure>

Onde está 'link' bote a url para onde a imagem será redirecionada ao clicarem. 

[lugardohtml]

Efeitos :: UpBack Description

© Unfe3ling Tutorials - Códigos e Desenvolvimento. Se lhe for útil dê like, se usar credite.

CSS:

Cole o código abaixo antes de </style>:

figure {position: relative; width: 250px; height: 300px;  overflow: hidden; margin-left: 0px; margin-top: 0px; border: 3px #C1BED1 solid;} figure img { width: 250px; height: 300px; } figure img:hover{ width: 250px; height: 300px; } figure figcaption { text-align:center; width: 100%; color: #fff; font-family: arial; padding: 7px; margin-left: 0; position: absolute; -webkit-transition: .7s all linear; -moz-transition: .7s all linear; -ms-transition: .7s all linear; -o-transition: .7s all linear; transition: .7s all linear; pointer-events: none;} figure:hover figcaption, figure:focus figcaption { margin-top: -230px; } 

Entenda:

.figure: determina as configurações da caixa onde estará a imagem;

width: largura da caixa;

height: altura da caixa;

margin-left e margin-top: posiciona a caixa;

border: mude #c1bed1 para a cor que desejar a borda.

figure img: altura e largura da imagem que fica na caixa.

figure img:hover: altura e largura da imagem no hover (mantenha do tamanho que você usar no figure img)

figure figcaption: configurações do texto mude o #fff  para a cor que deseja que o texto seja;

figure:hover figcaption: a altura do texto, mude quanto maior o valor mais em cima ele irá parar.

HTML:

Cole o código abaixo onde deseja o efeito:

<figure id="hong-kong"> <img src="https://64.media.tumblr.com/0dbe764cd2a3e9151869b76651388c92/tumblr_mlj0vlTBSY1rg49sro1_500.jpg" width="250px" height="300px"> <figcaption>SUA DESCRIÇÃO AQUI</figcaption> </figure></div>

[lugardohtml]

Estilos :: Status #002

Outro estilo de status, nesse é só uma caixa para todos os status. Observe.

© Unfe3ling Tutorials - Códigos e Desenvolvimento. Se lhe for útil dê like, se usar credite.

CSS:

Cole o código abaixo antes de </style>:

/*** CSS estilo de status by: unfe3ling***/ .status {background: #F0ECDB; Font-size: 12px; color: #C1BED1; font-family: 'Comic Sans'; text-shadow:1px 1px 1px #fff ;  padding: 2px; margin-top: 2px; padding-bottom:3px; padding-top:3px; height: 52px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px;} .statusby {background:#C1BED1; color: #fff; font-size: 9px; font-family: 'arial'; padding: 2px; text-align: center; text-transform: uppercase;  text-shadow:1px 1px 0px #7E799F ; margin-bottom: -2px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px;} .statuscor a {color: #fff;}

HTML:

Cole o código abaixo, onde deseja o status:

<div class="statusby"><div class="statuscor">Our Status</a></div></div> <div class="status"><center> <marquee width=300 height=50 direction=up scrollamount=1> <b>Rihana Status=</b>  And I hate that I love you so... And I hate how much I love you boy I can't stand how much I need you.<br><br> <b>Demi Lovato Status=</b> Meu clipe tá mais falado que tomate. Ahhhhh chupa recaucadas ;*<br><br> <b>Katy Perry status=</b> #Partiu #pintar #o #cabelo #de #verde #amazônia e assistir lagoa azul na sesão da tarde </marquee></center></div>

Dependendo do lugar onde você botar o status você precisará regular a largura e a altura, ambas que estão negritadas acima.

Onde está: scrollamount=1 o 1 é o tempo que as frases rolarão, se quiser mais rápido basta aumentar.

[lugardohtml]

Estilos :: Status #001

Como está na moda botar status no theme, eu elaborei um estilo de status para quem quer fazer isso mas não sabe como fazer. Bem, não o use como base, já vou avisando e se usar credite.

••Visualize aqui o estilo.

© Unfe3ling Tutorials - Códigos e Desenvolvimento. Se lhe for útil dê like, se usar credite.

CSS:

Cole o código abaixo antes de </style>:

/*** CSS estilo de status by: unfe3ling***/ .status {background: #F0ECDB; Font-size: 12px; color: #C5D4A9; font-family: 'Comic Sans'; text-shadow:1px 1px 1px #fff ;  padding: 2px; margin-top: 2px; padding-bottom:3px; padding-top:3px; height: 52px; -webkit-border-top-right-radius: 5px;  -moz-border-radius-topright: 5px; border-top-right-radius: 5px;} .statusby {background:#C5D4A9; color: #fff; font-size: 9px; font-family: 'arial'; padding: 2px; text-align: center; text-transform: uppercase;  text-shadow:1px 1px 0px #9EB870 ; margin-bottom: 5px;} .photo {border: 3px solid #C5D4A9; -webkit-border-radius: 5px; -moz-border-radius: 5px;border-radius: 5px; } .statuscor a {color: #fff;}

HTML:

Cole o código abaixo onde desejar o status e quantas vezes quiser:

<img src="https://64.media.tumblr.com/ffb3f20d58d5761e1bf00d89fbc30f56/tumblr_inline_ml6f9zbQuX1qz4rgp.png" width="60px" height="60px" align="left" class="photo"><div class="status"><center> " And I hate that I love you so... And I hate how much I love you boy I can't stand how much I need you ."</center></div> <div class="statusby"><div class="statuscor">Status by: <a href="TUMBLR DA PESSOA">Rihana</a></div></div>

[lugardohtml]

Estilos :: Ask #004

Ask: Block que consiste em perguntas que os follower podem mandar, para de uma forma, interagir com o proprietário do tumblr.

© Unfe3ling Tutorials - Códigos e Desenvolvimento. Se lhe for útil dê like, se usar credite.

1- Cole o css abaixo, antes de </style>:

.pergunta {background:#9AD4C6; color: #fff; font-size: 9px; font-family: 'arial'; padding: 2px; font-family: 'Comic Sans'; text-align: right; text-transform: uppercase; text-shadow:1px 1px 1px #69C0AB ; } .perguntas {Font-size: 12px; color: #9AD4C6; font-family: 'Comic Sans';background: #ececec; ; text-shadow:1px 1px 1px #fff ; padding: 7px; margin-top: 2px; padding-bottom:3px; padding-top:3px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px;} .photo {border: 2px solid #9AD4C6; margin-right: 5px; margin-top: -7px;} .perguntacor a {color: #fff;} .perguntacor g {color: #fff;}

Entenda:

.pergunta = códigos de personalização da faixa onde fica o tumblr de quem mandou a ask;

.perguntas = códigos de personalização da caixa onde fica a pergunta;

.photo = códigos de personalização do avatar de quem mandou a ask.

2- Cole o block abaixo no lugar do seu block atual de ask e substitua SUA DIV DOS POSTS, pela div da sua caixa de posts, se não as asks ficarão sem caixa.

<!---Block de ask by adolescentedramatica---> {block:Answer}<div class="SUA DIV DOS POSTS"> <div class="perguntas"><center> {Question} </center></div> <div class="pergunta"><div class="perguntacor"><font color="#D2ECE6"><big>♥</big></font> Asked by <g>{Asker}</g> em: {DayOfMonth}/{MonthNumberWithZero}/{Year} <img src="{AskerPortraitURL-24}" align="right" class="photo"></div> </div> <center>{Answer}</center> </div>{/block:Answer}

Agora procure por: #D2ECE6 e troque pela cor que deseja o coraçãozinho.

[lugardohtml]

Estilos :: Ask #003

Ask: Block que consiste em perguntas que os follower podem mandar, para de uma forma, interagir com o proprietário do tumblr.

© Unfe3ling Tutorials - Códigos e Desenvolvimento. Se lhe for útil dê like, se usar credite.

1- Cole o css abaixo, antes de </style>:

/*** CSS estilo de Ask by: Adolescentedramatica***/ .pergunta {background:#A7A5B3; color: #fff; font-size: 9px; font-family: 'arial'; padding: 2px; font-family: 'Comic Sans'; text-align: center; text-transform: uppercase; text-shadow:1px 1px 1px #817D91 ; margin-left: 60px; margin-right: 20px; -webkit-border-bottom-right-radius: 15px; -webkit-border-bottom-left-radius: 15px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 15px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px;} .perguntas {Font-size: 12px; color: #A7A5B3; font-family: 'Comic Sans';background: #ececec; ; text-shadow:1px 1px 1px #fff ; padding: 7px; margin-top: 2px; padding-bottom:3px; padding-top:3px; margin-left: 25px; -webkit-border-radius: 25px; -webkit-border-top-left-radius: 0; -moz-border-radius: 25px; -moz-border-radius-topleft: 0; border-radius: 25px; border-top-left-radius: 0;} .photo {border: 3px solid #A7A5B3; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; opacity: 0.8; } .photo:hover {border: 3px dashed #A7A5B3; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; opacity: 1.0; } .perguntacor a {color: #fff;} .perguntacor g {color: #fff;}

Entenda:

.pergunta = códigos de personalização da faixa onde fica o tumblr de quem mandou a ask;

.perguntas = códigos de personalização da caixa onde fica a pergunta;

.photo = códigos de personalização do avatar de quem mandou a ask.

2- Cole o block abaixo no lugar do seu block atual de ask e substitua SUA DIV DOS POSTS, pela div da sua caixa de posts, se não as asks ficarão sem caixa.

<!---Block de ask by adolescentedramatica---> {block:Answer}<div class="SUA DIV DOS POSTS"> <img src="{AskerPortraitURL-64}" align="left" class="photo"><div class="perguntas"><center> {Question} </center></div> <div class="pergunta"><div class="perguntacor">Asked by <g>{Asker}</g> em: {DayOfMonth}/{MonthNumberWithZero}/{Year}</div> </div> <center>{Answer}</center> </div>{/block:Answer}