Archive for the 'CSS' Tag

Crie menus CSS de forma rápida e com ótimo design

Posted 30 Junho 2008
Filed under: Aprender, CSS, Internet, XHTML | Tags: , , , ,
* Comments(0)

O IzzyMenu.com, é uma ferramenta 100% free, que permite criar menus com CSS/DHTML de forma rápida e com ótimo visual. Uma mão na roda pra quem é preguiçoso ou quem está aprendendo e buscando inspiração. Você pode escolher entre vários estilos e depois deixa-los de acordo com o seu gosto. Depois de pronto, é só baixar e usar o código.

Pra quem gostou do meu Menu com listas e CSS, vale a pena conferir.

Vídeo Podcast - O início dos Padrões Web no Brasil

Posted 2 Abril 2008
Filed under: Aprender, CSS, XHTML | Tags: , , ,
* Comments(1)

Ótimo Podcast sobre o surgimento dos padrões web no Brasil.
Quem fala é o Diego Eis da Visie, sobre como tomou conhecimentos dos padrões web, e sobre o nascimento do www.tableless.com.br. O Diego é como um pai dos padrões web pra mim, juntamente com o Maurício Samy Silva, aprendi tudo que sei graças a esse caras.

E ai, onde foi que você aprendeu sobre padrões web? Comenta ai.

Margin e Padding cuidado para não confundir

Posted 19 Dezembro 2007
Filed under: Aprender, CSS, XHTML | Tags: , ,
* Comments(1)

Estou de volta depois de uma sumida do blog, e já contando os dias para entrar de férias para postar mais artigos legais.

Dessa vez eu trago uma dica para quem esta aprendendo CSS.

Quando eu estava dando os primeiros passos no mundo dos padrões web, tinham duas propriedades que me tiravam a paciência, Margin e Padding. Apesar de terem algumas diferenças, essas propriedades são fáceis de serem confundidas.

O margin é usado para separar um elemento, uma div por exemplo, dos outros elementos que estão por perto. Para entender melhor vamos pegar o exemplo de uma div com 200 pixel de largura. Se eu colocasse um margin de 50 pixel de cada lado dessa div ela ia acabar ocupando 200 + 50 + 50 = 300 pixel. Perceba que a largura da div é somada com o margin em cada lado. É como se fossem os 200 pixel da div, mais um espaço de 50 pixel em cada lado. O margin fica do lado “de fora” da div.

Margin

Agora pense nessa div com 200 pixel de largura e eu coloco 50 pixel de padding em cada lado, a div ia continuar com os mesmos 200 + 50 + 50 = 300 pixel. Porém, se eu colocasse um texto dentro dessa div, ele ia ficar com 50 pixel de distância da borda da div. É como se o margin de 50 pixel em cada lado estivesse “enchendo” a nossa div.

padding

Resumindo, o margin é um espaçamento por fora do seu elemento, enquanto o padding é um enchimento.

É muito fácil confundir essas duas propriedades. Na maioria das vezes em padding resolve, mas é sempre bom ficar de olho, principalmente no Internet Explorer.

Isso é tudo mas se você tem mais alguma dica comente aqui.

Menu horizontal com listas e CSS

Posted 15 Outubro 2007
Filed under: Aprender, CSS, XHTML | Tags: , , ,
* Comments(4)

Uma das coisa que sempre me tirava do sério, eram as listas, principalmente se fosse para fazer menus horizontais. Bom, sempre que você tem um menu de navegação, ou uma barra de navegação, querendo ou não (como diz Diego Eis), você vai ter que coloca-los em uma lista de links.

A minha dúvida era para fazer com que uma lista, onde os itens normalmente estão um embaixo do outro, ficar na horizontal, mas sem retirar as tags <li>, o que prejudicaria a semântica do código.
Então vamos la! Primeiro vamos criar uma página com uma lista de links:


<html>
<head>
<title>Menu horizontal com listas</title>
</head>
<body>
<div id="menuhorizontal">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Sobre</a></li>
        <li><a href="#">Notícias</a></li>
        <li><a href="#">Contato</a></li>
    </ul>
</div>
</body>
</html>

Agora vamos ao CSS. As propriedades que serão usadas são Display e Padding. O display:inline; servirá para fazer com que os itens da lista, que normalmente são elementos em “bloco”, se comportem como elementos “inline”, e o padding:10px; servirá para separar os elementos uns dos outros.

Veja como fica:


<style type="text/css">
#menuhorizontal li{
display:inline;
padding:10px;
border:#000 1px dotted;
}
</style>

Prontinho, agora é só ir adicionando mais estilos e deixar o menu do jeito que você quiser.

Lembrando que o CSS vai dentro das tags <head>.
Pra todos um abraço e até a próxima!

Troca de imagem com CSS + Javascript

Posted 8 Outubro 2007
Filed under: Aprender, CSS, JavaScript, XHTML | Tags: , , ,
* Comments(6)

Andando pela net, esbarrei numa dúvida de uma usuária do orkut. Eu nunca tinha feito nada com Javascript e só conhecia de nome, mas resolvi tentar.

A intenção era fazer uma rotação com duas imagens, com um tempo determinado, e sem usar flash.
Depois de muito sofrimento e de testes frustrados, a coisa saiu.

Esse é o código:
<html>
<head>
<style type=”text/css”>
#foto1{
background:#f00 url(”foto1.jpg”);
width:100px;
height:100px;
}
#foto2{
background:#00f url(”foto2.jpg”);
width:100px;
height:100px;
}
</style>
</head>
<body>
<div id=”foto1″>
bom dia
</div>
<script>
img = document.getElementById(”foto1″)
function trocar()
{
if (img == foto1)
{
document.getElementById(”foto1″).id = “foto2″;
}
if (img == foto2)
{
window.setTimeout(function(){document.getElementById(”foto2″).id = “foto1″;},10000)
}
}
window.setInterval(”trocar()”,20000)
</script>
</body>
</html>

Na verdade foi minha primeira brincadeira com Javascript (depois do “Ola mundo”, mas isso não conta : P).

Depois eu comento com mais calma, abraços.