Home Me envie um e-mail! Feed
Blog do yogodoshi

Arquivo do mês: Setembro, 2008

Abreviando o CSS, deixe o seu código menor e mais eficiente

Por que abreviar o código? Para ficar menor (em tamanho) e de fácil leitura. Irei colocar os códigos que são passíveis de abreviação da maneira enorme e depois o código abreviado.

Quatro valores diferentes para margin ou padding:

#div {
margin-top: 0;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 15px;
(auto, 0, px, pt, em ou % )
}

#div {
margin:0 5px 10px 15px;
(top right bottom left)
}

Três valores diferentes para margin ou padding:

#div {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 0;
margin-left: 20px;
}

#div {
margin:10px 20px 0;
(top right/left bottom)
}

Dois valores diferentes para margin ou padding:

#div {
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}

#div {
margin:0 auto;
(top/bottom left/right)
}

Propriedades de borda:

#div {
border-width: 5px;
(thin, thick, medium or set value) (default = medium)
border-style: dotted;
(solid, dashed, dotted, double, etc) (default = none)
border-color: blue;
(named, hex, rgb or 0-255) (default = valor dos elementos/ elemento parentes)
}

#div {
border:5px dotted blue;
}

Agora só mechendo na largura da borda, da mesma forma que margin e padding:

#div {
border-top-width: 3px;
border-right-width: 2px;
border-bottom-width: 3px;
border-left-width: 2px;
}

#div {
border-width:3px 2px;
}

Background:

#div {
background-color: #CCCCCC;
(named, hex, rgb or 0-255) (default = transparent)
background-image: url(images/bg.gif);
(url or none) (default = none)
background-repeat: no-repeat;
(repeat, repeat-x, repeat-y ou no-repeat) (default = repeat)
background-attachment: scroll;
(fixed ou scroll) (default = scroll)
background-position: top left;
(top, right, left, bottom ou center) (default = 0% 0%)
}

#div {
background:#CCC url(images/bg.gif) no-repeat 0 0;
}

Font:

#div {
font-family: Verdana, Arial, Helvetica;
(Verdana, Arial, “Times New Roman”, etc) (default = varia de acordo com navegador)
font-size: 12px;
(xx-small, medium, x-large, etc) (default = medium)
font-weight: bold;
(normal, bold, bolder, lighter, 100-900 ou inherit) (default = normal)
font-style: italic;
(normal, italic ou oblique) (default = normal)
font-variant: normal;
(normal ou small-caps) (default = normal)
line-height: 1.5;
(normal, px, pt, em, num ou %) (default = normal)
}

#div {
font:italic bold 12px/1.5 Verdana, Arial, Helvetica;
}

List:

#div {
list-style-image: url(images/bullet.gif);
(url ou none) (default = none)
list-style-position: inside;
(inside ou outside) (default = outside)
list-style-type: square;
(circle, disc, square, etc) (default = disc)
}

#div {
list-style:square inside url(images/bullet.gif);
}

Cores:

Black: #000000 para #000
Blue: #0000ff
para #00f
Dark Grey: #666666
para #666
Light Grey: #cccccc
para #ccc
Orange: #ff6600
para #f60
White: #ffffff
para #fff

Os códigos foram tirados deste post do blog Leigeber.

Update:
Foi mal galera, o código tava cheio de <em> e </em>, erro meu. =/


jTip - Faça complexas tooltips com ajuda do jQuery

jTip é mais um plugin super útil feito em javascript através do jQuery; ele permite que você crie tooltips customizadas e complexas de uma maneira muito simples.

jTip screenshot

Ao adicionar a classe “jTip” em um link, você irá criar uma tooltip com o conteúdo do arquivo que você está linkando no href, via HttpXMLRequest.

Você também pode definir a largura da tooltip através de atributos na url, a altura varia de acordo com a quantidade de conteúdo. Ainda existe a possibilidade de deixar clicável a tooltip de maneira que o texto funcione como um link normal além de mostrar o conteúdo da tooltip no mouseover.

Sem mais delongas, sugiro ver as demonstrações e, caso goste, dê uma olhada no post de lançamento do autor do plugin.


Oosah - 1 Terabyte pra você hospedar músicas, fotos e vídeos

Oosah logo

Oosah é um HD externo online e gigantesco, eles disponibilizam 1 terabyte (1,024 gigabytes) pra você hospedar músicas, fotos e vídeos.

O Oosah também possui uma integração com o Flickr, Picasa, Facebook e YouTube. Depois que você colocar os dados dessas contas no Oosah, você poderá levar medias de um site para outro apenas arrastando e soltando.

Existem apenas algumas limitações nessa ferramenta, como: 200 MB por vídeo e 9 MB por arquivo de áudio; além de não permitir documentos de texto ou executáveis.


Feed my inbox - Receba atualizacao via e-mail dos seus sites favoritos

Feed my inbox logo

O Feed my inbox é super simples, basta você entrar no site, digitar a URL do site que você gostaria de receber as atualizações via e-mail e pronto.

É muito útil para quem ainda não está muito familiarizado com feeds, indique para seus amigos, e para os sites que não deixam essa opção de assinar o RSS muito aparente; também não é todo site que tem a opção de receber o feed via e-mail (com o feedburner).

Números aleatórios

Gerador de números aleatórios

Função para números aleatórios

Hauheuaheuh eu achei essas tirinhas muito boas! Vocês gostaram também ou sou eu que me divirto facilmente? To realmente pensando em criar uma função dessa na próxima vez que precisar de um número aleatório. xD

« Postagens anteriores · Próximas postagens »
Fechar
Envie por e-mail