Ir para conteúdo / Skip to content

CRASH IE COM CSS

Postado em: 19 de outubro de 2006 por Pedro Rogério

Para você ter sérios problemas com o IE não precisa de JavaScript, ou qualquer outra coisa, basta somente 23 linhas de puro XHTML e CSS que você verá que o IE é verdadeiramente um browser ultrapassado:


<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
<html>
  <head>
   <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8″/>
   <title>index</title>
   <style type=“text/css”>
     body { width:755px; }
			ul#nav { position:absolute; }
			ul#nav li { display:inline; }
			ul#nav li a { float:left;display:block;margin:0 1px 0 0;width:150px; }
			ul#nav li a:hover { background:#ddd; }
   </style>
  </head>
 <body>
  <ul id=“nav”>
	<li><a href=“#”>Option</a></li>
	<li><a href=“#”>Option</a></li>
	<li><a href=“#”>Option</a></li>
	<li><a href=“#”>Option</a></li>
	<li><a href=“#”>Option</a></li>
  </ul>
 </body>
</html>

Veja um exemplo em funcionamento nessa página. Ou você também pode ver esse vídeo.

TRUQUE CSS DESCONHECIDO #2

Postado em: 18 de outubro de 2006 por Pedro Rogério

Não sei se muita gente sabe disso, mas as cores das bordas em css podem ser declaradas da seguinte forma:


border-color: #003366 #3399ff #000099 #3355ff;

Aliás, nem eu sabia, graças ao Daniel Guimarães acabei descobrindo isso. Vivendo e aprendendo.

FLICKR E WEBIMAGER

Postado em: 17 de outubro de 2006 por Pedro Rogério

Flickr e Webimager

Flickr e Webimager é um programa onde você pode capturar imagens diretamente do seu desktop e enviá-las para a sua conta do Flickr.

GUIA CSS - 11ª PARTE: LINKS E PSEUDO CLASSES

Postado em: 17 de outubro de 2006 por Pedro Rogério

Abaixo você pode ver as várias maneiras de se usar CSS para estilizar os links da sua página:

  • a:link {color: #009900;}
  • a:visited {color: #999999;}
  • a:hover {color: #333333;}
  • a:focus {color: #333333;}
  • a:active {color: #009900;}

Agora vamos ver o que cada uma delas significa:

a:link {color: #009900;}

Usado para estilizar os links da página quando não está ocorrendo nenhum evento.

a:visited {color: #999999;}

Usado para estilizar os links da página quando o mesmo já foi visitado.

a:hover {color: #333333;}

Usado para estilizar os links da página quando o usuário coloca o mouse sobre o link.

a:focus {color: #333333;}

Praticamente a mesma função que a:active, mas com uma diferença, está é para usuários que não estão usando o mouse e estão navegando através do teclado, ele tem a função de alterar a cor do link quando o usuário está “tabulando”(usando a tecla tab), para alternar entre os links da página.

a:active {color: #009900;}

Usado para estilizar os links da página enquanto o mesmo é pressionado.

Pseudo classes

Você pode estilizar os links em diferentes partes da sua página utilizando as pseudo classes, por exemplo, você pode ter diferentes cores para um menu e outras cores para os links do conteúdo do seu site:

  • #content a:link {color: #009900;}
  • #content a:visited {color: #999999;}
  • #content a:hover {color: #333333;}
  • #content a:focus {color: #333333;}
  • #content a:active {color: #009900;}

Com isso, todos os links contidos dentro do ID content terão as condições citadas acima, mas vamos dizer que você tem um menu que quer deixar com as cores dos links diferentes do conteúdo:

  • #menu a:link {color: #009900;}
  • #menu a:visited {color: #999999;}
  • #menu a:hover {color: #333333;}
  • #menu a:focus {color: #333333;}
  • #menu a:active {color: #009900;}

Com isso, todos os links contidos dentro do ID menu terão as condições citadas acima. Você também poderia utilizar classes ao invés de ID’s.

  • a.menu:link {color: #009900;}
  • a.menu:visited {color: #999999;}
  • a.menu:hover {color: #333333;}
  • a.menu:focus {color: #333333;}
  • a.menu:active {color: #009900;}

Neste caso, nosso HTML ficaria da seguinte forma:


<a class="menu" href="" title="" rel="">Link aqui</a>

Também pode ser declarado dessa forma:

  • .menu a:link {color: #009900;}
  • .menu a:visited {color: #999999;}
  • .menu a:hover {color: #333333;}
  • .menu a:focus {color: #333333;}
  • .menu a:active {color: #009900;}

Nosso HTML ficaria assim:


<div class="menu">
<a href="" title="" rel="">Link aqui</a>
</div>

Tradução do artigo original de: CSS Basics.

Crie suas animações on-line com Gickr

Postado em: 16 de outubro de 2006 por Pedro Rogério

Gickr

Gickr é uma aplicação on-line, que você pode enviar as sua imagens para o servidor, ou indicar algumas imagens do Flickr e suas tags, que ele nos gera um gif animado com o tamanho e velocidades indicados.

Uma vez criada a animação, você pode ver um preview da mesma, e pode até mesmo pegar o código HTML gerado para usar em qualquer lugar.

MOZILLA FIREFOX CHEAT SHEETS

Postado em: 14 de outubro de 2006 por Pedro Rogério

Mozilla Firefox Cheat Sheets

Uma ótima referência sobre os comandos do Firefox.

Download

PDF

ADD-ONS PARA IE7

Postado em: 13 de outubro de 2006 por Pedro Rogério

A microsoft lançou um portal onde você pode fazer o download de plug-ins para o IE7. Dividido em categorias, você pode baixar add-ons sobre segurança, entretenimento, feeds, alguns são gratuitos e outros pagos. Para aqueles que querem desenvolver seu próprio add-on, existe uma página onde você pode disponibilizá-lo.

JAVASCRIPT CHEAT SHEETS

Postado em: 11 de outubro de 2006 por Pedro Rogério

JavaScript Cheat Sheet

Uma ótima referência listando todos os métodos e funções do JavaScript.

Download

Google Cheat Sheets

Postado em: 11 de outubro de 2006 por Pedro Rogério
Google Cheat Sheets

Se você acha que sabe tudo sobre o Google, é melhor dar uma olhada nisso aqui então.

GERADOR DE TEMAS PARA WORDPRESS ON-LINE

Postado em: 10 de outubro de 2006 por Pedro Rogério

Themepress

ThemesPress é um serviço que permite gerar templates para o Wordpress on-line, ou seja, convertendo qualquer desenho baseado em XHTML e CSS em um blog. Mas como tudo não é um mar de rosas, o serviço é pago e custa 10 dólares, os requerimentos são os seguintes:

  • Enviar para o servidor as imagens que irá usar
  • Copiar os códigos XHTML e CSS do seu desenho no Themepress
  • Substituir algumas partes do código com suas classes
  • Estabelecer as condições de apresentação e preferências através de um menu simples
  • Pré-vizualizar o tema e aqui é a hora dos últimos ajustes
  • Estando tudo ok é só baixar o tema
Página 45 de 60« Primeira Página...«42434445464748»...Última Página »