Lovers of designs @lod-official-blog - Tumblr Blog

Novidades vindo por ai, muitas novidades <3

No dia 3 junho o helpdesigns faz um ano, são 365 de help, 365 ajudando vocês, e se dedicando para tornar o que o help e hoje, e no nosso aniversario quem vai ganhar o presente são vocês.

Lugar: 1 tumblr com mil seguidores, 1 pack, e 1 theme exclusivo da Juh (acumulou)

Lugar: 1 tumblr com 500 seguidores, 1 pack e 1 theme exclusivo da Isah (revolucionou)

Gostou e quer participar? É fácil, você precisa:

Você deve estar seguindo (helpdesigns),

Reblogar esse post para poder participar do sorteio. E quanto mais reblogar, mais chances tem de ganhar.

Não é permitido a criação de um tumblr ou um tumblr secundário, só para reblogar do sorteio e nem qualquer outro tipo de “trapaça”.

O vencedor será anunciado no (helpdesigns) no dia 03 de Junho as 22:00h.

O número do reblog será sorteado nesse site: www.random.org.

Espero que participem e boa sorte!!

Equipe Help Designs

Bom, esse tutorial é meio complicado, mas se você prestar muita atenção eu acho que vocês conseguiram, caso contrario eu não recomendo esse tutorial para quem esta iniciando no ramo de HTML/CSS.

Vamos ao tutorial?

-x-

Gente, antes de mais nada vocês tem que desenhar o theme no PS, AQUI e AQUI tem a vídeo aula que ensinei a desenhar um Theme no PS. Depois do theme desenhado e salvo em formato de PSD, abra ele novamente e salve ele agora em formato PNG para cortarmos ele.

Cortando o theme no PS: Como eu falei, depois que você salvar o theme em PNG, abra a foto dele que você salvou e corte ele em 3 partes: Header (começo), pagina (meio), footer (fim). Irei usar o psd DESSEtheme para ensinar vocês. Aqui esta o theme cortado da maneira que ensinei: Header, page, footer.

Agora é a parte de passar ele para o HTML.

1- Você precisa desse código abaixo no CSS:

Explicação

Agora é os códigos: Bom, você tem que ver a altura e a largura das imagens (Width e Height) eles são muito importante nesse código acima. O header vai definir o tamanho do seu Cabeçalho, você tem que colocar a largura e a altura da imagem que você cortou. O Pagina vai definir a largura da sua pagina, ou seja, onde o conteúdo irá ficar. O Footer vai definir a altura e a largura do fim da sua pagina. lembre-se que eles devem ter a mesma LARGURA. Para hospedar as imagens do seu theme vá NESSE site, depois se quiserem trocar é só alterar a url das imagens dos background:url e os valores de acordo com a largura que você fez e recortou o seu theme. As imagens é o que faram o seu theme.

Outra coisa que preciso alertar:

Vocês tem que ter cuidado, pois uma </div> fora do lugar pode vir a desconfigurar totalmente o seu theme, então TOMEM CUIDADO COM AS </DIV>, elas são malvadas.

-x-

Etapa 2

Agora vamos para parte do HTML, logo abaixo de <body> você vai colocar esse código:

Agora vai vir a parte de colocar o conteúdo do theme dentro dessa coisa que você acabou de fazer.

Bom, volte novamente ao CSS e cole esse código lá:

#sidebar { width: 230px; text-align: justify; padding: 5px; float: left; margin-top: 0px; margin-left: 10px; border-right:0px dotted #c4c4c4;} #conteudo { width: 540px; font-family: bold;text-align: justify; margin-left:5px; margin-right:26px; float: right; margin-top: 10px;z-index:500;}

O #sidebar vai definir a posição e a largura da sua sidebar. O #Conteudo vai definir a posição e a largura da sua caixa de postagem.

Se você colocar as larguras muito grandes as páginas iram descentralizar e o conteúdo do seu theme irá ficar lá embaixo do theme, então tome cuidado. O que comanda o código é os float e os margin-left e right então tomem cuidado com eles também.

Agora, no HTML o código irá ficar assim:

<div id="pagina"> <div id="header"></div> <div id="sidebar"> CONTEÚDO DA SUA SIDEBAR AQUI </div> <div id="conteudo"> CONTEÚDO DOS POST AQUI </div> <div id="footer"></div> </div>

Pronto, agora é só vocês irem colocando os conteúdos onde se pede cuidadosamente, principalmente na área dos post pq como eu disse, uma única </div> fora do lugar pode desconfigurar o theme. TOMEM CUIDADO. Não recomendo esse tutorial pra quem esta começando agora :/

Resumindo: O código do CSS irá ficar assim:

#pagina {background-image: url('http://static.tumblr.com/eun3dfg/o3ymk466s/page.png');width: 830px; margin-left: auto;margin-right: auto;} #header {background: url('http://static.tumblr.com/eun3dfg/ZPwmk466i/header.png') no-repeat top center; width: 830px;height: 552px; margin-top: -10px;z-index:1000; margin-left:0px; margin-right:0px;} #footer {background:url('http://static.tumblr.com/eun3dfg/cjLmk4679/footer.png') no-repeat; width: 830px; height: 66px; clear: both; padding-bottom: 0px; z-index:500;margin-left:0px; margin-right:0px;background-repeat: no-repeat;} #sidebar { width: 230px; text-align: justify; padding: 5px; float: left; margin-top: 0px; margin-left: 10px; color: #5C4666; border-right:1px dotted #c4c4c4;} #conteudo { width: 540px; font-family: bold;text-align: justify; margin-left:5px; margin-right:26px; float: right; margin-top: 10px;z-index:500;}

Altere somente o Width e o Height das imagens de acordo com o que você desenhar e cortar.

e o HTML que fica depois de <body> ficará assim:

<div id="pagina"> <div id="header"></div> <div id="sidebar"> CONTEÚDO DA SUA SIDEBAR AQUI </div> <div id="conteudo"> CONTEÚDO DOS POST AQUI </div> <div id="footer"></div> </div>

E no código do HTML é só você ter cuidado com as </div> principalmente nas horas das tags do post.

Pronto. Se caso não conseguirem ver alguns códigos pela dash entre na página do Lovers.

Se for útil de like (♥) e credite.

#tutoriais #uteis #lod #themepsd #themespsd #jessierobsten #tutos #tuto

up-design

Colocando foto ao lado da sidebar/about/etc..

lod-official-blog

Cole esse código onde quer que a foto apareça

Você pode trocar as coisas que estão em negrito.

por Jess.

#tutoriais #uteis #lod #tutos #tuto #jessierobsten #imagens

up-design

Opacidade nas imagens

lod-official-blog

Coloque esse código no seu CSS:

.opacidade {opacity: 0.9; -webkit-transition: opacity 0.7s linear; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; transition: all 0.5s ease-out;} .opacidade:hover {opacity: 0.6; -webkit-transition: opacity 0.7s linear; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }

Agora, coloque esse código, na sua div das fotos:

Se ajudou, credite.

Não reblog.

#tutoriais #tutos #tuto #jessierobsten #opacidade #imagens #lod #uteis

up-design

Como eu coloco um banner, em cima de tudo? da side, e dos posts?

Cole ESSE código no seu CSS

Depois abaixo de

você coloca isso:

Mude a parte “NUMERO” do CSS, qualquer se não funcionar substitua as aspas ;)

Jess.

#tutoriais #tutos #tuto #jessierobsten #lod #uteis #Banners

up-design

Ensina a fazer aquele efeito zoom?

Vamos lá:

Exemplo: AQUI

1- Cole esse código no seu CSS:

.border1 {background:#fff; padding:1px; border:5px solid #d5c9e8;border-radius:0px; filter: alpha(opacity=55); opacity: 0.55; -moz-opacity:0.15; -webkit-transition-duration: .99s; -moz-transition-duration: .99s;margin-right:5px; ;}.border1:hover {filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; -webkit-transition-duration: .99s; -moz-transition-duration: .99s; -webkit-transform: rotate(0deg) scale(1.133) skew(1deg) translate(0px);}

Agora na class da foto que vocês quer o efeito você vai colocar “class=”border1” vai ficar tipo:

LINK DA IMAGEM" width="60" align="left" class="border1">

O que da esse efeito a foto é o código

-webkit-transform: rotate(0deg) scale(1.133) skew(1deg) translate(0px);

Espero ter ajudado :}

Se for ultimo credite /Jéssica

#tutoriais #uteis #lod #jessierobsten #tutos #tuto #Efeitos

up-design

Efeito Invert

lod-official-blog

Visualizar: AQUI

1- Cole esse código no CSS:

.border1 {background:#fff; padding:1px; border:5px solid #eee; margin:1px; -webkit-transition-duration: .99s; -moz-transition-duration: .99s;} .border1:hover {filter: invert(100%); -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%);; border:5px solid #fff;}

2- Cole esse código onde quer que apareça:

Não esqueça de substituir as aspas.

Tutorial por Jéssica. Código de embaçamento retirado do inserthtml.

#tutoriais #tutos #efeitos #tuto #jessierobsten #lod #uteis

up-design

Efeito Blur

lod-official-blog

Pra quem não sabe, esse efeito é aquele que deixa a foto embaçadinha.

Visualizar: AQUI

1- Cole esse código no CSS:

.border1 {background:#fff; padding:1px; border:5px solid #d5c9e8; margin:1px; -webkit-transition-duration: .99s; -moz-transition-duration: .99s;} .border1:hover {filter: blur(2px); -webkit-filter: blur(2px); -moz-filter: blur(2px); -o-filter: blur(2px); -ms-filter: blur(2px); border:5px solid #d5c9e8;}

2- Agora basta colocar esse código onde você quer que a fotinha apareça:

Substitua as aspas.

Tutorial por Jéssica. Código de embaçamento retirado do Inserth.

#tutoriais #tutos #tuto #jessierobsten #lod #efeitos

up-design

Efeito Grayscale

lod-official-blog

Este efeito é aquele que quando a gente passa o mouse na foto colorida ela fica preta e branca. - Visualizar: AQUI

1- Cole esse código no CSS:

.border1 {background:#fff; padding:1px; border:5px solid #df8db9; margin:1px; -webkit-transition-duration: .99s; -moz-transition-duration: .99s;} .border1:hover {filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%); -ms-filter: grayscale(100%); border:5px solid #df8db9;}

2- Agora onde quer que apareça a foto:

Não esqueça de substituir as apas.

Tutorial por Jéssica. Código de embaçamento retirado do inserthtml.

#tutoriais #efeitos #tutos #tuto #lod #uteis #jessierobsten

up-design

Oi de novo,como coloco um header no tumblr?

Pra mim é a mesma coisa de como colocar um banner rsrsrs mais ok vamos la:

1- Cole esse código no CSS:

#header {background: url('LINK DA IMAGEM AQUI') no-repeat top center;width: númeropx;height: númeropx;margin-top: númeropx;margin-left: númeropx;}

2- Agora cole esse código depois de

Substitua as aspas para funcionar.

——-x———-

O width é a largura do header

o height é a altura

o margin-top é a distancia que você deixar ele do topo

o margin-left é para você ir jogando para direita ou para a esquerda.

/Jéss

#tutoriais #headers #tutos #tuto #jessierobsten #lod #uteis

up-design

Efeito Sepia

lod-official-blog

Este efeito fica bom em fotos preta e branca só que pode ser usado em fotos coloridas também :}

Visualizar: (x)

1- Cole esse código no seu CSS:

.border1 {background:#fff; padding:1px; border:5px solid #777; margin:1px; -webkit-transition-duration: .99s; -moz-transition-duration: .99s;} .border1:hover {filter: sepia(100%); -webkit-filter: sepia(100%); -moz-filter: sepia(100%); -o-filter: sepia(100%); -ms-filter: sepia(100%) border:5px solid #df8db9;}

2- Agora onde quer que apareça a foto:

Não esqueça de substituir as aspas.

Tutorial por Jéssica. Código de embaçamento retirado do inserthtml.

#tutoriais #tutos #tuto #jessierobsten #lod #efeitos #uteis

lovers-of-designs-deactivated20

lod-official-blog

O efeito Lava Up é um efeito que criei onde eu faço as imagens subirem, no meu exemplo elas sobem mas tem como ela ir para o lado, ir pra cima, pra baixo e etc.. Com o tempo eu vou fazendo outros jeitos e postando aqui pra vocês. Bora ao tutorial?

Preview: (x)

1- Cole isso no CSS:

.position {margin-top:29px; margin-left:80px;} .borderlovers {display: inline-block; width:160px; height:160px;overflow: hidden;border:5px solid #fff;} .borderlovers img{padding-top:0px;-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s;} .borderlovers:hover img{margin-top:-160px;}

Explicação: Estão vendo o .position? Ele ira posicionar seu efeito, ele que comanda se o efeito vai mais pra cima ou mais para o lado.

2- O .borderlovers é onde define a cor da caixinha e os tamanho dos icons, meus icons são de 160x160 então elas já estão no tamanho certo, se a sua for menor ou maior vc tem que mudar ali.

3- O borderlovers img e o borderlovers:hover img são o que vai fazer o efeito subir. NO .borderlovers:hover img vocÊs estão vendo o tamanho do meu icon? Então, você terá que colocar o mesmo tamanho dele ali, assim a imagem irá subir, por isso é importante o tamanho da imagem.

4- Pra você ter esse efeito você precisa de uma imagem com 2 icons, uma irá ficar embaixo do outro, repare no meu exemplo: AQUI, viram? São dois icons grudadinhos, é só abrir um documento com a largura de um icon e a altura de 2 icons :}

2- Agora vamos ao HTML. Cole esse código abaixo de <body> ou da pagina que centraliza o seu theme:

Explicação 2: Troque as URL das imagens se desejarem, e também onde esta “LINK” você coloca a URL do site que deseja como link.

Pronto *-*

Se usar de like (♥) e credite.

#Tutoriais #tutos #tuto #jessierobsten #uteis #efeitos

PREVIEW: •••

Oi amores. Esse é um efeito de entrada praticamente, ele não tem hover então é simples mas muito lindo para colocar nos themes. Vou ensinar como colocar ele agora.

1- Cole esse código ↓ depois de <head>

2- Agora cole esse código no css:

ul[data-liffect="bounceInRight"] lod { opacity: 0; position: relative; -webkit-animation: bounceInRight 1800ms ease both; -webkit-animation-play-state: paused; -moz-animation: bounceInRight 1800ms ease both; -moz-animation-play-state: paused; -o-animation: bounceInRight 1800ms ease both; -o-animation-play-state: paused; animation: bounceInRight 1800ms ease both; animation-play-state: paused; } ul[data-liffect="bounceInRight"].play lod { -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); } 60% { -webkit-transform: translateX(-300px); } 80% { -webkit-transform: translateX(10px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes bounceInRight { 0% { opacity: 0; -moz-transform: translateX(2000px); } 60% { -moz-transform: translateX(-30px); } 80% { -moz-transform: translateX(10px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-moz-keyframes bounceInRight { 0% { opacity: 0; -o-transform: translateX(2000px); } 60% { -o-transform: translateX(-30px); } 80% { -o-transform: translateX(10px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes bounceInRight { 0% { opacity: 0; transform: translateX(2000px); } 60% { transform: translateX(-30px); } 80% { transform: translateX(10px); } 100% { opacity: 1; transform: translateX(0); } }

3- Agora vamos a parte em que colocaremos a foto no theme. Cole o código abaixo onde você deseja que as imagens apareçam.

OBS: Agora você edita as URLs das imagens no código acima e coloca o a URL da pessoa na onde pede LINK ;]

Prontinho. Espero que usem e gostem. Por favor, se for útil dê like (♥) e não repasse.

#tutoriais #uteis #lod #tutos #tuto #jessierobsten #efeitos

up-design

Sim Anjo, segui o tutorial todinho, fiz e coloquei tudo como disseram, mas o marcador ainda fica nulo. :/

Uai amr que estranho, vou passar outro código pra você então ta? Só que não me lembro de onde tirei esse código se alguém saber de onde é me fale que credito :}

Esse código é para ver quem esta Online:

Online

Esse é pra ver o total de visita do seu tumblr:

1 visits

Onde estiver escrito “SEUTUMBLR” você toca ok? :}

#tutoriais #uteis #contadores de visitas #contador #Jessierobsten #tutos #tuto #lod

lovers-of-designs-deactivated20

lod-official-blog

Tutorial: Banner Hover.

Preview: (x)

Cole esse código no seu CSS:

.banner {position:fixed; margin-left:20px; margin-top:0px; background: url("http://media.tumblr.com/tumblr_mddwvvjstR1rwneo8.png"); width: 510px; height: 128px; -webkit-transition: all 1s ease;-moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;} .banner:hover {background: url("http://media.tumblr.com/tumblr_mddww1woU51rwneo8.png"); width: 510px; height: 128px;}

Mude onde esta em negrito. CUIDADO! Onde esta “.banner” é o banner que ira ficar normal, o “.banner:hover” é onde ficara o outro banner que é quando a pessoa passa o mouse e muda. O “Width:” é a largura do seu banner e o “height:” é a altura, mude de acordo com a sua imagem. Mude também: o “margin-top:” que é a distancia do topo do seu banner, “margin-left:” que é a distancia da esquerda do seu banner e o “position” que pode ser absolute ou fixed.

- Agora cole esse código abaixo de <body>:

Pronto, teste e veja se deu certo.

Se for útil dê like (♥) e não reblog!

Jéssyca

#tutoriais #tutos #lod #jessierobsten #tuto #banners

up-design

Efeito zoom e legendas deslizantes

lod-official-blog

Bom, primeiro eu já vou avisando que esse efeito é meio complicado pq qualquer coisinha que você mudar nele, ele começa a dar erro, então tome cuidado quando for trocar o tamanho e a largura das imagens. Outra coisa que devo lembrar também é que eu nunca consegui deixar uma imagem ao lado da outra somente uma embaixo da outra, sou lerda então se vocês quiserem tentar deixar uma do lado da outra fiquem a vontade, para deixar uma do lado da outra eu uso um código meu separado.

Visualizar (x)

1- Cole esse código depois de <head>:

AQUI.

2- Agora cole esse no CSS:

AQUI.

Tome bastante cuidado na parte das alturas e das larguras, se quiser mudar a cor das bordinhas procure por “border:2px solid #f9bc81;” e troque a cor. Recomendo que só mude isso.

3- Cole esse onde você quer que apareça.

AQUI.

Nesse código troque o “LINK AQUI”, “LINK DA IMAGEM” e o “Nome Nome” que é a parte verdinha que irá subir quando passar o mouse.

Se for útil der like e creditem, não rebloguem e nem repassem. /Por Jess

#tutoriais #efeitos #tutos #tuto #jessierobsten #lod

Trending Blogs

Recently Viewed Blogs

Lovers of designs