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
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.
Faq com CSS
Digo com convicção que as CSS(Folhas de estilo em cascata) foram a melhor invenção do homem(após a invenção do Pão fatiado). Com CSS você tem total controle sob a formatação do layout, e para muitos que não sabem, é possível até gerar conteúdo através de CSS, utilizando a propriedade content, juntamente com os pseudo-elementos :after e :before. Nesse tutorial, vamos fazer o uso da propriedade :before juntamente com a propriedade content para desenvolver um Faq com CSS.
HTML
Observem a seguinte marcação HTML:
<dl>
<dt>What is Lorem Ipsum?</dt>
<dd>Lorem Ipsum is simply dummy text of the printing and ...</dd>
</dl>
Faremos o uso aqui de Lista de definição, onde a tag dl é o elemento container, a tag dt será usada para a pergunta e a tag dd será utilizada para a resposta. Agora observem o CSS.
CSS
dl {
border-left:1px solid #999;
margin:0 auto 20px;
padding-left:10px;
width:500px;
}
dt, dd {font-size:1.2em; margin:0 0 10px}
dt:before {
background-color:#f7f7ef;
content:"Pergunta";
}
dd:before {
background-color:#dbd4b7;
content:"Resposta";
}
dt:before, dd:before {
display:block;
font-size:1.2em;
font-style:italic;
margin:0 0 10px;
padding:5px 10px;
width:150px;
}
Como podem ver, os textos Pergunta e Resposta são gerados através do CSS com a utilização da propriedade content, em conjunto com o pseudo elemento :before, que fará com que esse texto venha antes das minhas perguntas e respostas. A partir daí eu posso aplicar estilos a eles da forma que quiser, e como podem ver no tutorial, aplicai largura, cor, tipo de fonte, cor de background. Infelizmente os pseudo elementos :after e :before e a propriedade content não funcionam no Internet Explorer, mas com a utilização de JavaScript, você pode conseguir com que essas propriedades funcionem facilmente.
Nesse exemplo eu utilizei uma biblioteca JavaScript desenvolvida por Dean Edwards, que faz com que várias propriedades do CSS que não funcionam no IE passem a funcionar, prometo fazer um post sobre isso.
