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á :)

24 ways: Versão 2008

Postado por: Pedro Rogério em
  • 2 dez
  • 1
24 ways

Está no ar a versão 2008 do site 24 ways, e já temos 2 dicas. Para quem não sabe o que significa o site 24 ways, ele é um site desenvolvido pelos maiores profissionais do desenvolvimento web mundial, composto de 24 dicas para impressionar seus amigos.

O site já existe desde 2005, e os tutoriais se iniciam a partir do dia 1 de dezembro de e vão até o dia 24. Só uma dica, essa versão não está funcionando corretamente no Firefox 2, Opera, não testei no Firefox 3 , mas no Google Chrome, Safari e Firefox 3 (obrigado Eduardo Sarsur por me avisar via Twitter) funciona legal. Pode ser que eles irão corrigir isso.

Versões anteriores

Recarregar somente o CSS da página com JavaScript

Postado por: Pedro Rogério em
  • 1 dez
  • 9

Aqueles que são desenvolvedores sabem o quanto é martirizante ter que efetuar alguma alteração no arquivo CSS, mandar pro ar, dar um F5 ou CTRL + F5 para limpar o cache do navegador, esperar o browser baixar todo o site novamente para poder ver uma simples alteração efetuada no css funcionando. Agora imagine passar por isso com vários browsers abertos ao mesmo tempo? Você acaba perdendo um tempo precioso do seu dia com isso.

Mas como pra quase tudo na vida tem salvação, descobri recentemente uma forma de dar um reload no CSS da página sem ter que carregá-la totalmente, e ela se chama ReCSS. Basta adicionar esse JavaScript aos seus favoritos e executá-lo na página em que deseja:


javascript:void(function(){var i,a,s;a=document.getElementsByTagName('link');for(i=0;i<a.length;i++){s=a[i];if(s.rel.toLowerCase().indexOf('stylesheet')>=0&&s.href) {var h=s.href.replace(/(&|%5C?)forceReload=\d+/,'');s.href=h+(h.indexOf('?')>=0?'&':'?')+'forceReload='+(new Date().valueOf())}}})();

Inspired CSS – Aprenda CSS com Andy Clarke

Postado por: Pedro Rogério em
  • 18 nov
  • 1

Andy Clarke, um dos gurus mundiais do CSS está lançando, juntamente com seu famoso livro Transcending CSS um DVD com 2 horas e meia de treinamento em CSS que se chama CSS Artistry: A Web Design Master Class. Podem ter certeza que em se tratando de Andy Clarke o conteúdo é de ótima qualidade. O conteúdo do DVD é focado em:

  • Transcending CSS
  • Semântica
  • Microformats
  • Seletores avançados de CSS
  • Técnicas de layout com CSS
  • Tipografia
  • CSS3

CSS Artistry: A Web Design Master Class

Vídeo (Objeto multimídia)

Abaixo uma prévia do que é encontrado no DVD:

Vídeo (Objeto multimídia)

Via Aprendiendo Web

Páginas:«1234567...25»