CSS for Absolute Beginners

Criar um CSS hoje Bulletproof (A prova de balas) não é tarefa fácil, existe muito treino e porfundo conhecimento sobre Browsers, principalmente o Internet Explorer e seus milhões de bugs. Portanto, para aqueles que estão iniciando hoje em CSS, eu aconselho a estudar, se dedicar e muito pois a jornada não é fácil, no começo pode ser meio desanimador, mas com o tempo você adquire conhecimento e tudo fica mais fácil. Por isso estou deixando abaixo alguns slides com conceitos básicos de CSS que encontrei no site The Frog Blog. A todos, bons estudos:

| View | Upload your own

Opacity em CSS

Se algum dia você precisar aplicar transparência a objetos em sua página html, você fará o uso da propriedade opacity, e você vai ficar triste em saber que nem todos os browsers suportam essa propriedade. Mas como no desenvolvimento web, sempre acabamos dando um jeitinho, sempre encontramos algumas soluções, que estão todas listadas abaixo:

Opacity - Firefox e Opera

Se deja aplicar 70% de opacidade a um elemento, deve-se utilizar o seguinte código:

opacity: .7;

Opacity - Internet Explorer

filter:alpha(opacity=70);

Opacity - Versões antigas do Firefox

-moz-opacity:0.7;

Opacity - Safari e Google Chrome

-khtml-opacity: 0.7;

No exemplo vocês podem ver que foi aplicado 50% de trasnparência a uma div com um background preto.

Aprenda CSS através de Imagens

No site Webdesign und Webentwicklung im Webstandard-Blog você pode aprender de uma maneira um tanto quanto diferente algumas propriedades CSS através de imagens do nosso cotidiano. Querem ver um exemplo:

Z-index

Visibility:hidden

Veja mais.

Mensagens de alerta com CSS

Mostrar aos usuários mensagens personalizadas em seu site com CSS é uma tarefa muito simples, isso também pode ser um grande diferencial. Vamos a um simples exemplo para que vocês entendam o propósito do post, imagine uma área de um site com um formulário de comentários, é bem interessante você mostrar alí uma mensagem de uma cor diferenciada do restante dizendo que aquela matéria ainda não possui comentários, ela irá chamar a atenção para o restante do site e quem sabe você não consegue aí alguns.

Uma outra forma também é de que sites que costumam após algum tempo bloquear o formulário de comentários, é mostrar uma mensagem ao usuário que não são permitidos comentários, é interessante também utilizar um cor diferenciada do restante do site para que isso fique bem claro. Aqueles que fazem o uso do Wordpress estão bem familiarizados com mensagens desse tipo que aparecem em amarelo no topo do Admininstrativo quando uma acão é bem sucedida. Você quer aprender a criar mensagens desse tipo, então se atentem ao seguinte código:

CSS

.yellow {background-color:#ffffef; border:1px solid #ffdb4f; color:#ff730b; margin:15px 0; padding:10px}

Agora basta aplicar essa classe criada a qualquer elemento HTML que você deseja que exiba a sua mensagem de alerta. No exemplo, vamos utilizar a tag “p”:

HTML

<p class="yellow">Eu sou uma mensagem de alerta</p>

Vejam no exemplo como funcionariam nossas mensagens, como podem ver, você também pode utilizar imagens, basta ter criatividade.

Referência CSS

Hoje em dia para se aprender CSS não é necessário muito esforço e sim bastante força de vontade, pois na Internet existem muitas referências sobre o assunto, você pode até instalar um plugin para o Firefox e ter uma referência HTML/XHTML, CSS e JavaScript sem precisar efetuar consultas no Google ou em qualquer outro site. Mas como referências nunca são demais, vou deixar aqui mais um site com uma boa referência de CSS, esta listada de forma alfabética.

Brian Wilson criou uma listagem com todas as propriedades CSS, lista de browser suportados, aplicação das propriedades para consulta rápida, lembro que esse site é bem antigo mas ainda serve como referência para aqueles que querem aprender CSS.