Colunas com alturas iguais em CSS

Postado por: Pedro Rogério em
  • 27 abr
  • 14

A algum tempo atrás recebi um e-mail de um leitor aqui do blog me perguntando se conhecia alguma solução para colunas com alturas iguais em CSS, acabei mandando pra ele uma solução em jQuery, mas depois lembrei que conhecia uma solução bem simples utilizando CSS puro, que encontrei aqui no CSSBlog.es. Você pode atingir esse mesmo efeito com a utilização de JavaScipt, mas não atingiria aqueles usuários que não navegam com o JavaScript habilitado por necessidade ou por opção. Recorrer a tabelas? Nem pensar.

Colunas com alturas iguais em CSS

Imagem retirada do site de Matthew James Taylor

A solução para conseguir colunas com alturas é que o conteúdo de pelo menos uma delas deve ser maior do que todas as outras, fazendo com que a coluna com menor conteúdo acompanhe as outras em paralelo.

Continuar lendo »

W3C Redesign

Postado por: Pedro Rogério em
  • 21 mar
  • 14

O W3C tem a missão de levar a World Wide Web para o seu pleno potencial através do desenvolvimento de protocolos e orientações que assegurem o crescimento a longo prazo da web, e hoje foi lançado uma versão beta do redesign do seu site.

Analisar o código HTML e o CSS é uma boa aula de boas práticas e semântica, e por falar em boas práticas, aproveitem para dar uma olhada no CSS, vejam que ele é todo inline as propriedades são declaradas em linha, muita gente fala que escrever CSS dessa forma é perda de tempo, mas eu particularmente só escrevo CSS dessa forma e aconselho vocês a segui-la também.

Abaixo você pode ver um vídeo com as partes chave do redesign do site do W3C:

Mais informações: W3C Q&A Weblog.

Participe do 2º Encontro de TI e 14º Encontro de Web Design

Postado por: Pedro Rogério em
  • 19 mar
  • 7

Desde 2001 atraindo designers, programadores, estudantes e profissionais ligados ao segmento de web de todo o Brasil, o Encontro de Web design, evento pioneiro na área de internet, realiza a sua 14ª em nove capitais brasileiras em 2009: Rio de Janeiro, São Paulo, Florianópolis, Curitiba, Porto Alegre, Brasília, Belo Horizonte, Salvador e Recife.

Com a ajuda de colaboradores e profissionais da área, foram escolhidos como temas principais Entretenimento e Redes Sociais. Para levar à você o melhor de cada assunto, as palestras serão realizadas por Julius Wiedman, editor da Tashen, e Gil Giardelli, da Permission.

Este ano a Arteccom traz mais uma novidade: o Encontro de Tecnologia da Informação, que está em sua 2ª edição, vai ser realizado paralelamente ao Encontro de Web design, nas mesmas datas e locais, mas em ambientes separados. Para saber mais sobre o ETI, acesse o site www.encontrodeti.com.br.

Continuar lendo »

Efeito :hover em blocos de texto com CSS

Postado por: Pedro Rogério em
  • 17 mar
  • 23
Efeito :hover em blocos de texto com CSS

As listas HTML são de fácil utilização devido a sua flexibilidade. São muito utilizadas para o desenvolvimento de menus, mas nesse tutorial, baseado no original do site Smiley Cat vamos aprender a desenvolver um bloco de texto com efeito :hover com a utilização de listas e CSS. O HTML é muito simples, e se resume no seguinte:

<div id="links">
    <ul>
      <li>
        <a href="#" title="Título do post">
                Título do post
                <em>Descrição do post.</em>
                <span>Data</span>
        </a>
   	  </li>
        <li>
            <a href="#" title="Título do post">
                Título do post
                <em>Descrição do post.</em>
                <span>Data</span>
            </a>
      	</li>
    </ul>
</div>

Continuar lendo »

:first-child bug no IE7

Postado por: Pedro Rogério em
  • 12 fev
  • 20

Após o lançamento do IE7, muita gente havia pensado que a vida no desenvolvimento web iria melhorar um pouco(isso mesmo, um pouco), mas não é isso o que aconteceu, pois a cada dia que passa fico conhecendo mais um bug novo no Internet Explorer. Já ouviram falar do bug de first-child no IE7? O curioso problema que ocorre é o seguinte. Observem a seguinte marcação HTML:

<ul>
    <!-- Esse comentario sera o 1º filho no IE7 -->
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

Como podem ver, nada estranho, de diferente um simples comentário HTML que será o 1º filho no IE7, isso mesmo, ele reconhece aquele comentário HTML como o primeiro filho do “ul”. Vejam nesse exemplo o bug. Uma possível solução é não utilizar comentários. Por favor alguém mande um e-mail para bill@microsoft.com pedindo a descontinuação desse browser.

Compactando o (X)HTML/CSS de suas páginas

Postado por: Anderson Custódio em
  • 4 fev
  • 11

Fiz um código super simples, para deixar qualquer (X)HTML ou CSS em uma única linha, sem tabs e sem comentários.

Sobre o CSS seria interessante você usar junto com esta dica do Bruno Alves.

Bom, primeiro lhe apresento a função que tira todos os Enters, tabs, comentários CSS e (X)HTML. Basta colocar no index.php de seu site.

function strip($buffer) {
  return trim(preg_replace('/\n|\r|\t|/', ' ', $buffer));
}

Agora em seguida é só usar o buffer do PHP com a função strip no callback.

Exemplo com o index do WordPress:

define('WP_USE_THEMES', true);

function strip($buffer) {
	return trim(preg_replace('/\n|\r|\t|/', ' ', $buffer));
}

ob_start('strip');
	require('./wp-blog-header.php');
ob_end_flush();

E pronto, todo (X)HTML que seu WordPress gerar vai ficar em uma única linha e sem comentários. Lembrando que você pode usar este código em qualquer sistema. É só usar o código corretamente no index.

PS: Sobre o vídeo tutorial “Como trabalhar com URLs Amigáveis” peço desculpas pela demora, nele vou ensinar técnicas avançadas para gerenciar URLs e como usar slugs.

Update: Como haviam dito o expressão para remover os comentários teriam que ser mais complexa, como na época conhecia só o básico não cheguei a entender os comentários. Para não ter problema está apenas a parte que deixa todo código em uma única linha. Desculpe, logo farei um post sobre expressões regulares e mostrarei como fazer essa expressão. Até lá :)

Páginas:«1234567...22»