CSS Modular

Trabalhar com o desenvolvimento de CSS para sites grandes, exige paciência, experiência e um pouco de cuidado, pois se o desenvolvedor não prestar atenção no que ele está fazendo, ele e quem mais estiver envolvido no projeto vai ficar totalmente perdido em um milhão de propridades CSS. Trabalhar com CSS exige organização, e em grandes projetos isso é item obrigatótio, não que em projetos pequenos isso também não seja, mas tornando seu CSS Modular, você irá trabalhar de uma forma transparente e livre de problemas.

Os sites basicamente são desenvolvidos em pequenos blocos de código, tornar o CSS modular seria desenvolver um CSS para cada seção desse bloco, para que em alterações ou atualizações futuras não hajam problemas. Mas não basta fazer isso sem planejamento, pois senão você acabaria criando arquivos CSS desnecessários simplesmente para formatar uma ou duas propriedades do código. Coisas desse tipo exigem treino e muito estudo, a partir do momento que você começa a desenvolver CSS dessa forma, ele se torna reutilizável, e aprender a utilizar herança no CSS é uma coisa que todo desenvolvedor deveria aprender.

Se ficou interessado sobre escrever código reutilizável, dê uma olhada no Slide abaixo:

| View | Upload your own

Abaixo um Slide sobre a utilização de CSS Modular:

| View | Upload your own

Quotes com CSS

Nesse tutorial você irá aprender a mostrar quotes, ou seja, aquelas aspas em blocos de citação utilizando a tag blockquote e um simples truque de css. Vamos ao nosso HTML:

	<blockquote>Lorem Ipsum is simply dummy text of the printing...</blockquote>

Agora vamos dar algum estilo a esse blockquote:

blockquote {
  font: 1.2em/1.6em Georgia, "Times New Roman", Times, serif;
  width: 400px;
  background: url(close-quote.gif) no-repeat right bottom;
  padding-left: 18px;
  text-indent: -18px;
}

No CSS definimos para que a nossa imagem close-quote.gif, independente do conteúdo, fique sempre alinhada a direita e abaixo no bloquote. Padding-left:18px e Text-indent:-18px foram utilizados para deixar espaço para que as imagens de quote apareçam e o texto não interfira. Agora para que possamos colocar a imagem de abertura do quote, vamos utilizar o pseudo-elemento :first-letter, onde iremos aplicar estilos a primeira letra de nosso texto:

blockquote:first-letter {
  background: url(open-quote.gif) no-repeat left top;
  padding-left: 18px;
  font: italic 1.4em Georgia, "Times New Roman", Times, serif;
}

Vejam agora o nosso exemplo em funcionamento.

Galeria de fotos em JavaScript

Desenvolver uma simples galeria de fotos para a web a algum tempo atrás requeria ter conhecimentos em Flash, desenvolver galerias com slideshow então. Mas as épocas mudaram e surgiram os Frameworks JavaScript, e com eles o desenvolvimento para a web ficou menos árduo, desenvolver hoje em dia simples galerias de fotos em JavaScript é muito simples.

Através do site Pixelco.us fiquei conhecendo 2 formas de desenvolver Galerias de fotos em JavaScript com Slideshow, um utiliza jQuery e o outro utiliza Mootools.

CrossSlide

Plugin desenvolvido em jQuery que nos permite criar elegantes apresentações. Suas principais características são:

• Permite vários tipos de transições e animações.
• É simples de configurar.
• Por meio de parâmetros você pode alterar várias configurações.

Site: CrossSlide.

Slideshow 2!

Utiliza Mootools para fazer apresentações animadas com legendas. Características:

• Redimensionamento dinâmico das imagens.
• Criação automática das miniaturas.
• Animação de títulos e legendas.
• Controle pelo teclado.
• Utiliza código não obstrutivo.

Site: Slideshow 2!

Veja também:

• Galeria de fotos com FrogJS.
• Galeria de fotos com Script.aculo.us.
• FS Galeria de Imagens.

CSS: font-family

No site Font Tester você pode encontrar uma interessante lista com famílias de fontes “web safe”, ou seja, as fontes utilizadas em projetos web que são mais comuns entre os sistemas operacionais Windows, MAC e Linux:

font-family: Arial, Helvetica, sans-serif;
font-family: 'Arial Black', Gadget, sans-serif;
font-family: 'Bookman Old Style', serif;
font-family: 'Comic Sans MS', cursive;
font-family: Courier, monospace;
font-family: 'Courier New', Courier, monospace;
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: Impact, Charcoal, sans-serif;
font-family: 'Lucida Console', Monaco, monospace;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-family: 'MS Sans Serif', Geneva, sans-serif;
font-family: 'MS Serif', 'New York', sans-serif;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
font-family: Symbol, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: 'Times New Roman', Times, serif;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Webdings, sans-serif;
font-family: Wingdings, 'Zapf Dingbats', sans-serif;

Veja abaixo um preview de como essas famílias de fontes seriam renderizadas pelo browser:

Utilize declarações em letras minúsculas no CSS

Codificar CSS não é uma tarefa tão fácil assim como parece, mesmo os mais experientes passam por problemas, e algumas vezes, por falta de mera atenção. Utilizar declarações com letras maiúsculas em CSS é uma delas, não, não é errado você fazer isso, mas vou explicar o por que de sempre utilizar declarações em letras minúsculas.

Se lembram de quando utilizavamos o nosso querido HTML 4? Alí não importava se você codificava o código em maiúsculas ou em minúsculas, mas no XHTML, todas as declarações devem ser escritas em minúsculas, isso é regra. Aqueles que migraram do HTML para o XHTML por favor, não esqueçam isso.

Utilizar também declarações em letras minúsculas, é necessário, pois muitas vezes, não é somente você quem vai mexer no código de um site, e com isso também pode acontecer de seu companheiro de equipe, que está iniciando no mundo do Desenvolvimento Web ficar meio perdido por causa disso. Para aqueles que não sabem, CSS é case-sensitive, portanto, isso: Foo é diferente disso: foo.

Portanto, pense 2 vezes antes de ficar utilizando declarações com letras maiúsculas.