#tutomands

[cantinho-html]

Qual é a diferença entre action e psd? Como se faz cada um deles? Bjs

Bom, se você tem o PS já deve ter visto que tem como você fazer alguma edição e salvá-la como .psd e depois voltar a reeditá-la, certo? O PSD que muitos falam aqui no tumblr, seria isso. Porém, o psd vem com edições do estilo: Contraste, Níveis, Brilhos, Tons de cores, etc. E nisso, quando baixado, é só você ajustar sua foto numa camada antes do psd que todas as edições vão se juntar à sua foto. Ou seja, é uma pasta com vários tipos de edições.A action, é uma opção que há como você “gravar” as edições. E quando baixado, e usado numa foto, todas as edições “gravadas” irão se juntar a sua foto, e não há como editá-las, apenas como desfazer os últimos efeitos.

O psd e a action tem a mesma função e também há como usar as mesmas edições (apenas algumas que não). A diferença, é que a action, as edições já estão gravadas e não há como retirar apenas algumas edições. O psd é totalmente editável, podendo ocultar algumas camadas do psd e podendo colocar texturas também.

Vou dar uma resumida básica de como fazer.

ACTION

A action é feita através da aba Ação (inglês: Action)… “Como ativá-la?”, é só ir em Janela > Ação (inglês: Window > Action) e sua janelinha estará ativada. Ela deverá ficar na barra direita e para fazê-la, deverá clicar na pastinha que há na parte de baixo da aba das Actions…

E dar um nome à essa pasta. Aí é só clicar na opção do lado que há (e nomear também) e a action já começará a ser gravada.

Aí agora, a criatividade é sua. Vá fazendo qualquer tipo de edição na sua foto (contraste, brilho, tons de cores, curvas, etc) E quando terminar, clique no quadradinho.

Bem, é isso. Para usá-la em alguma foto, é só clicar naquele sinalzinho de “play”…

PSD

Agora, O PSD é de um jeito diferente para fazer. Você vai clicar na pastinha que há na aba Camadas (inglês: Layers) para acumular suas edições.

E do jeito que está, você vai clicar na bolinha preto e branco para abrir o lugarzinho das edições. 

Aí vai abrir uma mini janelinha com o nome das edições possíveis para um PSD. É só você escolher as edições e ir fazendo elas, que elas vão se acumulando na pastinha que você criou, facilzinho né? Quando terminar, você deve ir em Arquivo > Salvar como… (atalho: Ctrl+Shift+S) e irá salvar do jeitinho que está (fotos, camadas, tudo) e quando você quiser usá-la em alguma foto, é só você abrir o seu documento, com a foto que queira usar o efeito, e arrastar a pasta para o seu documento (acima de todas as camadas) e suas edições estarão na sua foto… Espero que tenha entendido. Beijos, mands >_<

[cantinho-html]

como coloco efeito na foto da side que quando passa o mouse ela gira??

Só colocar isso:

.imgch{-webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear;}.imgch:hover{-webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg);}

E onde quer que o efeito fique, coloque isso na imagem:

[cantinho-html]

Menu: Danceballs

Bem, achei esse menu bem fofo no bloggertrix, fiz algumas alterações e encurtei os códigos e estou aqui repassando à vocês :3

Live preview.

Para começar, copie o código abaixo e cole em seu css.

.button a{ font:15px Calibri, Arial, sans-serif; text-shadow:1px 1px 0 rgba(255,255,255,0.4); text-decoration:none !important; white-space:nowrap; display:inline-block; vertical-align:baseline; position:relative; text-transform:uppercase; cursor:pointer; padding:10px 20px; background-repeat:no-repeat; background-position:bottom left; background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'); background-position:bottom left, top right, 0 0, 0 0; background-clip:border-box; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; -moz-box-shadow:0 0 1px #fff inset; -webkit-box-shadow:0 0 1px #fff inset; box-shadow:0 0 1px #fff inset; -webkit-transition:background-position 1s; -moz-transition:background-position 1s; transition:background-position 1s; } .button a:hover{background-position:top left;background-position:top left, bottom right, 0 0, 0 0;} .button a:active{bottom:-1px;} .button.small a{ font-size:10px;} .gray.button a{ color:#525252 !important; border:1px solid #a5a5a5 !important; background-color: #a9adb1; background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c); background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c)); } .gray.button a:hover{ background-color:#b6bbc0; background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9); background-image:url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9)); }

Bem, façam suas modificações como quiserem... e depois colem o código abaixo onde querem que o menu apareça.

<div class="button small gray"> <a href="#">Link</a> <a href="#">Link</a> </div>

Então é isso, espero que tenham gostado... Beijos, mands.

[cantinho-html]

Efeito: Hideshow *exclusivo*

Bem, eu me baseei em um efeito que achei no dynamicdrive e dei umas grandes modificadas. Esse é um efeito que serve tanto para moderadores, quanto parceiros, e claro, para outras coisas que vocês inventarem, haha. Até que ficou bonitinho vai x3

Live preview.

Bem, para começar, copie todo o código abaixo e cole em seu css.

a.modch{position:relative; display: block;overflow:hidden;cursor: pointer;width: 100px;height: 100px; margin:5px; float:left; border:1px solid #000} a.modch img{position:absolute;left:0;top:0;width: 100%;height: 100%;-moz-transition: all 0.5s ease;-webkit-transition: all 0.5s ease;-o-transition: all 0.5s ease;-ms-transition: all 0.5s ease;transition: all 0.5s ease;z-index: 2;clip: rect(0,100px,100px,0);} a.modch:hover img:nth-of-type(1){clip: rect(0,0,100px,0);opacity: 0;} .n{background:#f1cf7d; width:100px; height:100px; color:#555; text-align:center; padding:0 5px 0 5px;  display: table-cell; vertical-align: middle;  box-shadow:rgba(237, 166, 30, 1) 0px 0px 20px inset; font-family:tahoma; font-size:8px; text-transform: uppercase;} n{position:relative; font-size:15px; color:#111 }

- não se esqueça de alterar o tamanho da imagem e as cores, facilitei algumas alterações deixando em negrito, ok? ah, o valor da height e width do a.modch devem ser os mesmos valores do .n -

Continuando... faça suas modificações do jeito que quiser, e modifique as cores também, depois cole o código abaixo onde quer que o efeito apareça em seu html.

<a href="link" class="modch"><img src="imagem">     <div class="n"><n>Fulano 1</n><br>69 anos, EUA</div> </a> <a href="link" class="modch"><img src="imagem">     <div class="n"><n>Fulano 2</n><br>69 anos, EUA</div> </a>

Então é isso. Espero que tenham gostado do efeito... se gostarem ou usarem, dê like e se puder, creditem. Beijos, mands.

[cantinho-html]

Menu Scale Shake (exclusivo)

Bem... me pediram esse menu a um tempo já, e como trocamos de theme, vou ensinar. O menu é bem simples, mas eu gostei até u.u rs. então vamos lá!

Live preview.

Bom, para começar, há uma fonte personalizada no menu, e isso vai de sua preferência, se quiser a mesma fonte, cole o código abaixo antes de </head>:

<link href='http://fonts.googleapis.com/css?family=Sintony' rel='stylesheet' type='text/css'>

Até então beleza, agora cole o código abaixo antes de </head>, que é onde há o efeito que ele meio que "balança" e pá. 

<link rel="stylesheet" type="text/css" href="http://static.tumblr.com/n66cz1n/77Fmjs0fe/keyframech.css"/>

Caso queira mudar o efeito, pegue a url ali (que está em negrito), abra numa nova página, copie o código e cole num bloco de notas, aí é só modificar e salvar no formato .css e substituir u.u Enfim... continuando... agora a parte do css do menu, cole antes de </style>:

.mennuch{-webkit-transition: all 0.3s linear;-moz-transition: all 0.3s linear;transition: all 0.3s linear; border-radius:1px; padding:1px 4px 1px 4px; border-bottom: 0px solid #1d1d1d; padding-bottom:5px; font-family:'Sintony'; text-transform:uppercase; text-align:center; font-size:20px; float:left; color:#111; margin:5px;} .mennuch:hover{-webkit-animation: mod .5s alternate linear; -moz-animation: mod .5s alternate linear; -o-animation: mod .5s alternate linear; border-bottom: 1px solid #00ccff; color:#a1a1a1}

Até então beleza? então beleza... faça suas modificações aí e pá, depois cole o código abaixo onde quer que o menu apareça (entre <body> e </body>):

<a href="#"><div class="mennu">Link</div></a> <a href="#"><div class="mennu">Link</div></a> <a href="#"><div class="mennu">Link</div></a> <a href="#"><div class="mennu">Link</div></a> <a href="#"><div class="mennu">Link</div></a>

Enfim, é isso. Se gostarem ou utilizarem o menu, dê like por favor... isso me deixa tão feliz <3 *-* Beijos, mands.

[cantinho-html]

Como faz pra deixar o fundo do meu theme "transparente"? o bg mesmo

Bem, nisso você teria que colocar a cor do bg em rbga… no caso, onde tem algo parecido com isso:

background: #121212;

você terá que converter aquela cor em rgba… “e como faz isso?” simples. Vem nesse site aqui: clica. e irá ter algo assim lá:

É só digitar no lugar de FFFFFF o número hexadecimal da cor… e clica em Convert to RGB. Irá aparecer a cor nos quadrinhos do RGB ali. É só você copiar as cores que aparecer e colocar isso no css:

background: rgba(cor1,cor2,cor3,0.7);

Mas por que rgba?

O “a” represeta o alfa, ou seja, a opacidade… no caso, no exemplo que passei há um “0.7” no final, certo? Nesse número você coloca a opacidade do background… Poderá ficar assim:

background:rgba(255,255,255,0.5);

Viu? Esse exemplo, estão todos em 255 que representa a cor branca. É bem fácil né?Lembrando que também há como “converter” hexadecimal em rgb pelo photoshop… E também tem esse site aqui: clica. Nele haverá algo parecido com isso:

Eu prefiro o outro site, mas esse é mais fácil… você pode colocar a cor onde está o # ali na direita e clica nas setinhas «—-» e automaticamente ele converterá e já irá te dar o código abaixo :)Então é isso, beijo.

[cantinho-html]

Efeitos Partner Animated

Live Preview.

Bem, tá bem simples, mas eu achei fofinho :3

EFEITO 1:

Copie o código abaixo e cole antes de </head>:

<link rel="stylesheet" type="text/css" href="http://static.tumblr.com/n66cz1n/2R4mhrpst/efeitoch1.css">

Agora, copie o código abaixo e cole antes de </style>:

/* EFEITO POR MANDS, CANTINHO HTML */ .ch1{margin:3px; -webkit-transition: all 0.4s linear;-moz-transition: all 0.4s linear;transition: all 0.4s linear; opacity:0.4} .ch1:hover{opacity:1;-webkit-animation: efeitoch1 .5s alternate linear; -moz-animation: efeitoch1 .5s alternate linear; -o-animation: efeitoch1 .5s alternate linear}

E onde quer que o efeito apareça:

<img src="link da imagem" class="ch1">

EFEITO 2:

Copie o código abaixo e cole antes de </head>:

<link rel="stylesheet" type="text/css" href="http://static.tumblr.com/n66cz1n/XaImhrpvi/efeitoch2.css">

Agora, copie o código abaixo e cole antes de </style>:

/* EFEITO POR MANDS, CANTINHO HTML */ .ch2{margin:3px; -webkit-transition: all 0.4s linear;-moz-transition: all 0.4s linear;transition: all 0.4s linear; opacity:0.4} .ch2:hover{opacity:1;-webkit-animation: efeitoch2 .5s alternate linear; -moz-animation: efeitoch2 .5s alternate linear; -o-animation: efeitoch2 .5s alternate linear}

E onde quer que o efeito apareça:

<img src="link da imagem" class="ch2">

EFEITO 3:

Copie o código abaixo e cole antes de </head>:

<link rel="stylesheet" type="text/css" href="http://static.tumblr.com/n66cz1n/Bbmmhrpx8/efeitoch3.css">

Agora, copie o código abaixo e cole antes de </style>:

/* EFEITO POR MANDS, CANTINHO HTML */ .ch3{margin:3px; -webkit-transition: all 0.4s linear;-moz-transition: all 0.4s linear;transition: all 0.4s linear; opacity:0.4} .ch3:hover{opacity:1;-webkit-animation: efeitoch3 .5s alternate linear; -moz-animation: efeitoch3 .5s alternate linear; -o-animation: efeitoch3 .5s alternate linear}

E onde quer que o efeito apareça:

<img src="link da imagem" class="ch3">

EFEITO 4:

Copie o código abaixo e cole antes de </head>:

<link rel="stylesheet" type="text/css" href="http://static.tumblr.com/n66cz1n/3hLmhrpz3/efeitoch4.css">

Agora, copie o código abaixo e cole antes de </style>:

/* EFEITO POR MANDS, CANTINHO HTML */ .ch4{margin:3px; -webkit-transition: all 0.4s linear;-moz-transition: all 0.4s linear;transition: all 0.4s linear; opacity:0.4} .ch4:hover{opacity:1;-webkit-animation: efeitoch4 .5s alternate linear; -moz-animation: efeitoch4 .5s alternate linear; -o-animation: efeitoch4 .5s alternate linear}

E onde quer que o efeito apareça:

<img src="link da imagem" class="ch4">

...

Enfim, é isso... bem simples, não? rs. Se gostar dê like, se usar credite :)

Beijos, mands.

[cantinho-html]

Me ensina á colocar caixa de parceiros no tumblr ?

Acho que deve estar falando tipo o que eu ensinei aqui. Enfim, eu fiz um aqui e saiu isso. É isso mesmo? Se for, copie o código abaixo e cole antes de :

#caixinha2{width:330px; position:fixed; bottom:200px; left:-260px; -webkit-transition:.5s; -o-transition:.5s; -moz-transition:.5s; }#caixinha2:hover{left:0px}.imgch{width:50px; float:left; margin:1px;}#titulo {-webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg); -o-transform:rotate(-90deg); font-size:20px; font-family:georgia; text-transform:uppercase; float:right; margin-top:-87px}

E copie o código abaixo, cole antes de

:

Parceiros

Bom, é só isso… Aí é só editar conforme queira.