#html e css

[todorokiscute]

Guys, DO NOT use display:none to hide things and show them after, with a script maybe. use visibily hidden instead!!

If you are making a pop up box, for example, and want it to fade in and out, you’ll see that only the fade in works with transition, and the fade out don’t.

Like I did in this demo, I combined visibility with opacity, as I’ve learned with this tutorial. So when you need to hide and show something and with a animation (fade in or transition), do not use display block!

.div{  visibility:hidden;  transition:visibility .3s, opacity .3s; opacity:0; } .div-after{  visibility:visible; opacity:1 }

[discedite-blog]

O QUE É HTML E CSS?

HTML:

O HTML desenvolve toda a estrutura do blog, e também todas as funções que o layout designa. Ele dá formas a todas as partes do layout, função aos scripts, e também ele que detecta o local onde ficará os posts e como eles devem ser exibidos no blog. Para desenvolver um tema para seu blog, é preciso ter muito estudo, mas para editar, basta ter um pouco de conhecimento.

CSS:

O CSS define como será o modelo. Ele determina o estilo que o modelo terá. Cores, fontes, tamanhos, bordas, e outros fatores que constituem o estilo do blog podem ser editadas pelo CSS. O CSS é muito mais simples que o HTML, por isso, é muito mais fácil editá-lo, por ele não ser formado por uma linguagem tão complicada. O CSS é tudo entre <style> e </style>.

[cajadesign]

3 dicas que te ajudarão a se tornar um Web Designer melhor

3 dicas que te ajudarão a se tornar um Web Designer melhor

Se você acha que atuar como Web designer é só mexer no Photoshop, criar umas imagens, elaborar uns banners e criar layouts, você está enganado. Web Designer é muito mais do que isso. Se você pretende trabalhar criando sites deve perceber que as interfaces web não são constantes como em um cartaz. O mesmo conteúdo apresentado em um celular deve ser apresentado em um computador (e por aí vai). E…

View On WordPress

[queen-designs]

Tutorial: Imagens esticadas no theme, como resolver

Eu acabei de fazer esse tutorial do guia do CS3 e quando fui olhar o post a imagem estava esticada (1ª imagem). Poxa, o tumblr mudou coisas muito simples, vou ter que dar uma boa analisada nisso depois, haha.

Porém, isso é bem fácil, resolvi isso em pouquissimos segundos. Abra seu html (customizar) e procure por < style > e cole: 

img{max-width: LARGURA DO SEUS POSTSpx; height:auto;}

Para achar a largura do post vai depender de cada código, você terá que localizar o local aonde se personaliza o post, a div dele. Caso você tenha feito com o tutorial que disponibilizei aqui no tumblr, sua div será 

.posts{ }

Em height você não precisa modificar nada, esse auto já definirá a altura da imagem como a original.

Espero que tenha sido útil. Dê like e reblog não reposte!

[queen-designs]

Imagem centralizada no Post Text [Exclusivo!]

Olá! Primeiramente, quero desejar a todos um feliz ano novo, um 2015 muito feliz <3

Bom, hoje eu venho com uma dica boa para quem alguma vez tentou postar em um Post Text uma imagem pequena e esta ficou no canto do post. Assim:

As vezes a única solução é não usar o post text (já que o post photo tem a opção de centralizar no código) ou até optar por um theme aonde a área das postagens seja pequena. Agora, para quem posta icons e avatares essa é uma dica valiosa.

Depois de carregar as imagens normalmente, cliquem em html e adicione antes de < p >:

<div align="center">

Depois, ao final adicione </ div> para fechar o código. (tome a imagem como exemplo.)

Na dash pode ser que ela não aparente ficar centralizada, mas não se preocupe, no theme estará:

É isso. Espero que seja útil. Por favor não reposte, pode reblogar a vontade.

[queen-designs]

Paginção numerada simples

Olá! Em breve eu quero trazer um tutorial de como transformar a base que fizemos em um theme feito com psd. Como é um tutorial extenso, irei organizá-lo e assim que der eu postarei. Hoje, eu trouxe um tutorial simples de uma paginação numerada. Eu acho elas mais bonitas e mais legal que uma de setinhas. 

Primeiro, cole acima de </style>:

.pager{ clear:both; text-align:center; margin-top:10px; margin-bottom:10px; font-size:12px; word-spacing:10px;

} .pager a{ color:#COR DA PAGINAÇÃO; background: #FUNDO; padding: 2px 4px; text-decoration: none; -moz-transition: all 2.0s ease-in-out!important; -o-transition: all 1.0s ease-in-out!important; transition: all 2.0s ease-in-out!important; -webkit-transition: all 1.0s ease-in-out!important; } .pager a:hover{ color:#COR DA PAGINAÇÃO AO PASSAR O MOUSE; background: #COR DO FUNDO AO PASSAR O MOUSE; padding: 2px 4px; text-decoration: none; } .pager span.pagina_atual { background: #FUNDO DA PÁGINA ATUAL; padding: 2px 4px; color: #COR DA PÁGINA ATUAL; text-decoration: none; }

Mude o que se pede. Procure por sua tag de paginação. Caso seja um theme feio com nossas aulas, procure por {block:NextPage}  e apague todo o código de {block:IndexPage}  a {/block:IndexPage}  colando no lugar:

{block:IndexPage} <div class="pager"> <a href="http://{name}.tumblr.com" title="Home">0</a> {block:Pagination}{block:PreviousPage} <a href="{PreviousPage}">«</a> {/block:PreviousPage} {/block:Pagination} {block:JumpPagination} {block:CurrentPage} <span class="pagina_atual"> {PageNumber}</span> {/block:CurrentPage} {block:JumpPage} <a class="jump_page" href="{URL}">{PageNumber}</a> {/block:JumpPage} {/block:JumpPagination} {block:Pagination} {block:NextPage} <a href="{NextPage}">»</a> {/block:NextPage} {/block:Pagination} </div> {/block:IndexPage}

Qualquer dúvida é só enviar uma ask. Se for útil dê like.

[queen-designs]

Imagem com tamanho original no theme

Olá!! Esse tutorial também saiu depois de tentar resolver o problema que falei no post anterior. Não importava quão grande era o tamanho da imagem, no theme ela sempre ficava com 500px. Depois de muito tentar e estudar, finalmente consegui o jeito para deixá-la com o tamanho original. Veja antes:

Depois:

Vá no seu html e procure por {block:Photo}; Substitua todo o trecho até {/block:Photo} por esse código.

Agora as imagens sempre ficarão na resolução original. Agora, para que ela não ultrapasse a área do post (caso ela seja bem maior que essa área) procure por </style> e antes cole:

img{

max-width:TAMANHO DA ÁREA DO POSTpx;

}

Salvar e pronto. Qualquer dúvida é só clicar em contato. Peço que não reposte porque eu sofri bastante para achar a solução. Peço também que se for útil dê like. Beijos.

[queen-designs]

Leia mais no photo post [post de imagens sem titulo]

Boa  noite!!! Eu estava editando uma nova postagem no meu tumblr e indicações, o AMA, e estava tendo problemas com os tamanhos das imagens. Não importava quão grande eu carregava a imagem, no theme ela sempre ficava com 500px de largura. Foi então que resolvi mudar o padrão das postagens para apenas a imagem ao invés do titulo e imagem. E então mais um problema apareceu, não é possivel ativar o leia mais em um post photo ou photoset o que me atrapalha, pois a resenha é grande e necessita de dividir a postagem. Eis que bolei um jeito de usar o leia mais nesse tipo de post.

Primeiro, adicione a imagem normalmente e escreva o desejado. Para dividir, clique em <html> ...

e ao abrir o html do post, escolha o local desejado para a divisão e cole esse código. Não pude colocá-lo aqui  pois ele reconheceu como o leia mais.

Agora é só voltar ao normal e note que há a linha familiar da divisão:

É só publicar o post e pronto. Se for útil dê like e não reblogue.