RjCorrêa » CSS

CSS para decorar galeria de fotos

Ricardo José Corrêa — Wed, 04 Jun 2008 10:59:14 +0000

Outra que vem do WebDesignerWall, eles não param de surpreender.

Dessa vez são ótimos exemplos de decoração de galerias, em diversos formatos. Eu babei na maioria, e tudo com CSS, no mais puro webstands.

Você pode ler o artigo, ver a página de demonstração ou baixar o arquivo com tudo dentro.

JQuery para Designers

Ricardo José Corrêa — Wed, 04 Jun 2008 10:51:55 +0000

Essa vem lá do WebDesignerWall, aliás, tenho que tirar o chapéu para eles, site lindo e ótimo conteúdo.

São 10 exemplos práticos de JQuery destinados à designers, e como eles mesmo dizem, e novatos.

Para quem não sabe JQuery é uma biblioteca de JavaScript que tem o intuito de facilitar a vida do desenvolvedor, parafraseado o WebDesignerWall, é um “escrever menos, fazer mais”.

Você pode ler o artigo, ver a página de demonstração ou baixar o arquivo com tudo dentro.

O Webmonkey voltou

Ricardo José Corrêa — Tue, 20 May 2008 16:58:31 +0000

Depois de muito tempo fora do ar, o Webmonkey voltou.

Quem é macaco velho (ops) na web, conhece bem esse excelente site de recursos Javascript, CSS, HTML e APis que, apesar de ainda conter pouquíssimos códigos (afinal de contas, as coisas mudaram bastante desde que saiu do ar), vai certamente se tornar um grande sucesso – ainda mais se depender da boa reputação que ostenta entre os veteranos.

Além de tudo isso, o site está lindão.

Hack nunca mais: resete seu CSS com Trípoli

Ricardo José Corrêa — Fri, 02 May 2008 21:07:34 +0000

Logo depois que escrevi sobre “Condicional para estilo CSS com IF IE e em PHP”, o Thomas que trabalha comigo, com uma certa pitada de maldade e sarcasmo disse: “esse seu post não vale mais nada”, e me mostrou o Trípoli.

O que os caras fizeram? Igualaram todas as tags do HTML.

Assim, você parte de um documento igual para todos os navegadores. Afinal, a diferença de como cada navegador renderiza as tags que é o grande vilão do CSS.

Agora ficou fácil, não?

Eu ainda não fiz nenhum projeto com essa nova técnica, mas acho que vale a pena compartilhar isso com vocês.

Anote aí. Você vai precisar dos seguintes arquivos:

reset.css – um arquivo CSS que reseta todas as configurações do navegador;
generic.css – um CSS genérico que reconstrói e atualiza a renderização CSS ;
ie.css – arquivos testados em multi navegadores e regras especificas para o IE, quando preciso;
print – um arquivo CSS simples para print que faz o HTML ser lido quando impresso.

Aqui tem um exemplo para você abrir em diversos navegadores diferentes e ver como o arquivo é semelhante entre si.

No seu documento HTML, você põem assim:

@import url(css/reset.css);
@import "css/generic.css";
 
@import url(css/print.css) print;

Condicional para estilo CSS com IF IE e em PHP

Ricardo José Corrêa — Tue, 29 Apr 2008 21:30:26 +0000

Vou começar esse post dando dois bons motivos para você NÃO usar hack, e sim condicionais para especificar navegadores e, assim, poder ajustar pequenos erros do seu CSS em cada um dos browsers:

você não sabe se na próxima versão do navegador o hack continuará valendo;
o css vira uma bagunça infernal.

Quer mais motivos? Acho que não né…

Apresento estão, duas alternativas para evitar esses problemas: uma é o condicional IF IE, e outra em PHP. Ai já viu: é apelação, você vai poder especificar desde o sitema operacional até o navegador e versão.

Primeira opção: IF IE


Com esse comentário, todos os Internet Explorer vão usar o CSS aqui informado.

 

Já se você esquecificar a versão, somente esta  vai usar o CSS informado.

 

Você pode ser mais especifico na versão.

 

Usando a opção "gte" ele verifica se a versão do navegador é igual ou superior  à especificada.

 

Usando a opção "gt" ele verifica se a versão do navegador é superior à especificada.

 

Já a opção 'lte', condiciona a versões igual ou inferiores.

 

E finalmente a opção "lt", é para versões inferiores a informada.

Ou seja:

gte – maior ou igual ao navegador setado;
gt – maior que o navegador setado;
lte – menor ou igual ao navegador setado;
lt – menor que o navegador setado.

Segunda opção: apelando com PHP:


//
// SourceForge: Breaking Down the Barriers to Open Source Development
// Copyright 1999-2000 (c) The SourceForge Crew
// http://sourceforge.net
//
// $Id: tim20000821.php3,v 1.2 2001/05/22 19:22:47 tim Exp $
 
unset ($BROWSER_AGENT);
unset ($BROWSER_VER);
unset ($BROWSER_PLATFORM);
 
function browser_get_agent () {
  global $BROWSER_AGENT;
  return $BROWSER_AGENT;
}
 
function browser_get_version() {
  global $BROWSER_VER;
  return $BROWSER_VER;
}
 
function browser_get_platform() {
  global $BROWSER_PLATFORM;
  return $BROWSER_PLATFORM;
}
 
function browser_is_mac() {
  if (browser_get_platform()=='Mac') {
    return true;
  } else {
    return false;
  }
}
 
function browser_is_windows() {
  if (browser_get_platform()=='Win') {
    return true;
  } else {
    return false;
  }
}
 
function browser_is_ie() {
  if (browser_get_agent()=='IE') {
    return true;
  } else {
    return false;
  }
}
 
function browser_is_netscape() {
  if (browser_get_agent()=='MOZILLA') {
    return true;
  } else {
    return false;
  }
}
 
 
/*
  Determine browser and version
*/
 
 
if (ereg( 'MSIE ([0-9].[0-9]{1,2})',$HTTP_USER_AGENT,$log_version)) {
  $BROWSER_VER=$log_version[1];
  $BROWSER_AGENT='IE';
} elseif (ereg( 'Opera ([0-9].[0-9]{1,2})',$HTTP_USER_AGENT,$log_version)) {
  $BROWSER_VER=$log_version[1];
  $BROWSER_AGENT='OPERA';
} elseif (ereg( 'Mozilla/([0-9].[0-9]{1,2})',$HTTP_USER_AGENT,$log_version)) {
  $BROWSER_VER=$log_version[1];
  $BROWSER_AGENT='MOZILLA';
} else {
  $BROWSER_VER=0;
  $BROWSER_AGENT='OTHER';
}
 
/*
  Determine platform
*/
 
if (strstr($HTTP_USER_AGENT,'Win')) {
  $BROWSER_PLATFORM='Win';
} else if (strstr($HTTP_USER_AGENT,'Mac')) {
  $BROWSER_PLATFORM='Mac';
} else if (strstr($HTTP_USER_AGENT,'Linux')) {
  $BROWSER_PLATFORM='Linux';
} else if (strstr($HTTP_USER_AGENT,'Unix')) {
  $BROWSER_PLATFORM='Unix';
} else {
  $BROWSER_PLATFORM='Other';
}
 
/*
//debug code
echo "\n\nAgent: $HTTP_USER_AGENT";
echo "\nIE: ".browser_is_ie();
echo "\nMac: ".browser_is_mac();
echo "\nWindows: ".browser_is_windows();
echo "\nPlatform: ".browser_get_platform();
echo "\nVersion: ".browser_get_version();
echo "\nAgent: ".browser_get_agent();
*/
 
?>

Se inveja matasse, eu morreria num instant.js

Ricardo José Corrêa — Fri, 22 Jun 2007 01:49:50 +0000

Alguns scripts são tão impressionantes que nos deixam morrendo de inveja de não ser o pai da criança.

Esse é o caso do microformato instant.js, script que dá um efeito de Polaroid nas fotos (com sombra, reflexo e tudo que se tem direito).

Para fazer uso deste achado, basta colocar a classe “instant” na foto e voilà:

Simples e devastador.

No link oficial você pode aprender a utilizar esse simples microformato. Mas aqui você recebe a receita de bandeja. Anote:

Instalação:

Faça o download do arquivo instant.js e inclua dentro do seu site.

Usando:

Coloque na imagem a ser usada a classe “instant”, de dimensões mínimas de 64×64

Classes:

O princípio: inicialize a classe “instant”.

A sombra: você pode variar a opacidade da sombra controlando a classe “ishadow” – mínimo=0, máximo=100 e padrão=33.

A borda: pode-se variar a cor da borda alterando a classe “icolor” – mínimo=000000, máximo=ffffff e padrão=f0f4ff.

A inclinação: para alterar a direção da inclinação basta escolher entre as seguintes opções, “itiltleft”, “itiltnone” ou “itiltright”.

Popup para abrir imagem? Lightbox.

Ricardo José Corrêa — Fri, 08 Jun 2007 18:53:41 +0000

Existe um microformato excelente para abrir imagens com um efeito tipo popup, mas todo em div, javascript, css e efeitos especiais.

Sabe o que isso quer dizer? Chega de anti-popup quebrando o seu barato.

Seu nome: Lightbox. Está na versão 2.0, não é obstrutivo e é lindo de se ver.

Ah, se quiser ver um modelo que uso aqui mesmo neste blog, clique aqui.

TAIFF lança novo lay-out em seu portal

Ricardo José Corrêa — Wed, 10 Jan 2007 11:05:16 +0000

Fato: trabalhar na DeBrito facilita as coisas.

Dentre alguns portais de grande sucesso que desenvolvemos, está o da TAIFF, uma forte empresa do setor da beleza, direcionada aos profissinais dos cabelos (mas quem tem mulher em casa também deve conhecer a marca).

No dia 09/01 lançamos um novo lay-out, agora utilizando a tecnologia Tableless e respeitando bem mais as regras da Webstands.

Isso, certamente, trará mais sucesso a esse grande portal.

Abrir sempre o link externo em nova janela e marcar a tag com CSS

Ricardo José Corrêa — Fri, 08 Dec 2006 13:58:59 +0000

O script visto neste artigo tem a função de que sempre que um link tiver a referência como “external” abra em nova janela, e os que tiverem o target=”_blank” sejam setados como rel=”external”, além de mudar/incluir o nome da class no link, para que assim todos tenham um marcardor () de link externo.
O legal é que não precisa fazer mais nada, o .js incluso na página se vira.

external.htm





Troca CSS e abre em nova janela, sempre




Link
externo com target blank

Link
externo com rel external

external.js

///////////////////////////////////////////////////////////////////////////
////////////////////////////////// RjCorrêa ///////////////////////////////
/////Abrir sempre o link externo em nova janela e marcar a tag com CSS/////
///////////////////////www.rjcorrea.com.br/////////////////////////////////
///////////////////////////////////////////////////////////////////////////
//////////////////////V. 2.0 /// Ajustada Por Fábio A. ////////////////////
///////////////////////////fabioarantes@gmail.com//////////////////////////
var Trocar = new Object();
Trocar.verify = function () {
var nav = navigator.appName;
if(nav != "Microsoft Internet Explorer"){
document.addEventListener("DOMContentLoaded", Trocar.trocar, false);
} else {
try {
// If IE is used, use the trick by Diego Perini
// http://javascript.nwbox.com/IEContentLoaded/
document.documentElement.doScroll("left");
} catch( error ) {
setTimeout( Trocar.trocar, 0 );
return;
}
}
}
Trocar.trocar = function () {
if (document.getElementsByTagName) {
links = document.getElementsByTagName('a');
for (k = 0; k < links.length; k++) {
if (links[k].getAttribute('href') &amp;&amp; links[k].getAttribute('target') == "_blank" || links[k].getAttribute('rel') == "external"){
links[k].className = "linkExterno";
links[k].target = '_blank';
links[k].rel = 'external';
}
}
}
}
 
Trocar.verify();

FixWidth

Ricardo José Corrêa — Wed, 06 Dec 2006 16:40:46 +0000

O script FixWidth tem a função de não deixar que uma DIV que envolva DIVs internas perca sua formatação de colunas se as mesmas DIVs internas estourarem seu tamanho.

O Exemplo a segui é um Tableless de 3 colunas.

fixwidth.js

/*///////////////////////////////////////////////////////////////////////
////////////////////////////////FIXWHITH/////////////////////////////////
/////////////////////////////////////////////////////////////////////////
Apresentação:
Esse Javascript corrige o tamanho de uma DIV, caso as DIVs internas a ela
aumentem de tamanho na horizontal. Isso permite que o design das páginas
em Tableless seja menos afetado. Autores:
Ricardo José Corrêa e Thomás Camargo
www.rjcorrea.com.br
/////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////
*////////////////////////////////////////////////////////////////////////
 
function fixwith(seAumentar,seAumentarTamanho,quemAumenta){
	/*Recebe o tamnho atual da DIV interna*/
	seAumentarTamanhoAtual = document.getElementById(seAumentar).clientWidth;
 
	/*Verifica se o tamanho atual da DIV interna passou do tamanho original informado*/
	if (seAumentarTamanhoAtual > seAumentarTamanho){
 
	/*Recebe o tamanho atual da DIV a ser aumentada*/
		quemAumentaTamanhoAtual = document.getElementById(quemAumenta).clientWidth;
 
	/*Aqui é calculada a diferença de quanto a DIV a ser aumentada estourou,
	comparando com seu tamanho atual*/
	quemAumentaQuanto = seAumentarTamanhoAtual-seAumentarTamanho;
 
	/*Assim, somamos a diferença acima com o tamanho atual da DIV que irá aumentar.*/
	/*Pegando sempre o tamanho atual da DIV que irá aumentar, podemos
	verificar, mais de uma vez, o tamanho de diversas DIVs internas que
	possam ter estourado e aumentar sempre com o tamanho atualizado*/
	quemAumentaQuanto = quemAumentaQuanto+quemAumentaTamanhoAtual;
 
	/*Finalmente, o valor calculado de quanto irá aumentar é repassado
	para a DIV que será aumentada*/
	document.getElementById(quemAumenta).style.width = quemAumentaQuanto;
	}
}

style.css

body {
margin:0;
padding:0;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
background-color: #FFB539;
}
 
H1{
font-size: 12px;
}
 
#tudo{
width:770px;
margin: 0 auto;
}
 
#menuDir, #conteudo, #menuEsq {
display: table;
vertical-align: top;
float: left;
margin: 0px;
text-align: left;
}
 
#menuEsq{
width:186px;
background-color:#FFE28B;
margin-right: 8px;
}
 
#conteudo{
width:437px;
background-color: #FFFFFF;
margin-right: 8px;
}
 
#menuDir{
width:131px;
background-color:#0968CA;
}
 
#rodape{
width:770px;
clear: both;
float: left;
color: #FFFFFF;
background-color: #000000;
}

texto.htm




DeBE Tableless







  
    Conteudo menu esquerdo
    

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua. 
  
    Conteudo do site
    

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
    nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
    eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
    sunt in culpa qui officia deserunt mollit anim id est laborum. 
  
    Conteudo menu direito
    

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua. 
   Aqui vem o rodape.