Leandro Vieira Pinho's Blog » css

Curso Interativo Adobe Dreamweaver CS3

Leandro Vieira Pinho — Wed, 26 Sep 2007 15:32:35 +0000

A TI Shop acabou de lançar meu novo curso, Adobe Dreamweaver CS3. O curso está divido três grandes capítulos e 40 tópicos, abordando cada uma das novas novas funcionalidades e recursos do Dreaweaver CS3.

Veja as principais diferenças na interface e funcionamento da nova versão do DW; aprenda a trabalhar com CSS e a sua grande integração com essa nova versão; e desenvolva novas interfaces mais ricas e dinâmicas utilizando o Spry Framework para AJAX.

Mais detalhes sobre o Curso Adobe Dreamweaver CS3, em CD-ROM.

Cantos arredondados facilmente com CSS

Leandro Vieira Pinho — Fri, 23 Feb 2007 20:22:13 +0000

Matthew Inman encontrou uma solução simples – finalmente – para realizar-se através das CSS cantos arredondados.

Leia How to Make Square Corners with CSS e descubra os simples passos.

Após leitura de um artigo como esse, me pergunto: como não pensei nisso antes?

“Novas” regras CSS para o Internet Explorer 7 – Child Selector

Leandro Vieira Pinho — Tue, 02 Jan 2007 02:29:16 +0000

Com o lançamento do Internet Explorer 7, temos a nova disposição “novas” regras CSS que utilizaremos sem a preocupação, se o IE irá interpretá-las ou não. Essas “novas” regras possibilitarão ao desenvolvedor/designer um controle maior sobre os elementos HTML.

Com esse feito – um controle maior sobre os elementos HTML – evitamos a classite (falarei sobre ela em um outro post), ou seja, o uso excessivo de classes desnecessárias; bem como os ids. Então, vamos conhecer as “novas” regras CSS para o Internet Explorer 7:

Child Selector

O que é um child Selector?

É um tipo de regra CSS destinado aos filhos de um determinado elemento. Isto é, a regra CSS será aplicada somente aos filhos de um elemento HTML e não em seu neto, por exemplo.

Um exemplo de child Selector

Para clarear melhor a explicação sobre o que é um child selector, imagine o seguinte cenário:


div filha 1 div neta 1
div filha 2

E esta regra CSS:

body div {
padding: 20px;
}

Ou seja, todas as tags div do documento terão um padding de 20px. Não importando se ela é filha, neta ou bisneta da tag body. Agora, se utilizarmos a seguinte regra CSS:

body>div{
padding: 20px;
}

Somente as tags div filhas que receberão tal regra.

Com esse recurso não há aquela necessidade de adicionar à determinada tag uma classe ou um id; e com isso atribuir a regra CSS à classe ou id determinado.

Os child selectors foi (e ainda é em alguns sites) muito utilizado como um hack para esconder regras CSS do IE. Mas, no Internet Explorer 7 isto não acontecerá mais, uma vez que ele finalmente interpretará os child selector.

Se houver necessidade de esconder uma determinada regra CSS do IE 7; podemos utilizar um comentário vazio após o sinal de maior que da seguinte maneira:

body>/***/body .alguma_classe {
...
}

A regra CSS acima será ignorada pelo Internet Explorer 7 e sinceramente não sei o motivo. Alguém sabe? Comente aí

Lançado o novo CSS Validator do W3C

Leandro Vieira Pinho — Wed, 20 Dec 2006 00:29:37 +0000

Após a leitura do post do Henrique pude conhecer o novo CSS Validator do W3C e os novos recursos que ele oferece. O W3C o lançou no mesmo momento em que celebra os 10 anos das CSS. Olha que frase linda “Cascading Style Sheets Have Changed the Face of the Web“.

Gostei muito da forma como o site do CSS Validator foi desenvolvida e principalmente a utilização de um simpático javascript não-obstrutivo. Entre no site com o javascript habilitado e desabilitado para observar que de uma forma ou de outra, você estará apto a utilizar todos os recursos oferecidos

Para mais informações sobre o CSS Validator do W3C consulte: About the CSS Validator. Foi disponibilizado também uma documentação sobre ele na página Documentation index for the CSS Validator.

Além do mais, você poderá baixá-lo enviar seu feedback e visualizá-lo nas nove línguas disponíveis até o momento em que escrevo este post.

Entrevista com a maior referência sobre as CSS no Brasil

Leandro Vieira Pinho — Mon, 27 Nov 2006 00:27:45 +0000

Se você não sabe quem é a maior referência sobre as CSS no Brasil, conheça-a.

Acabei de ler uma entrevista do iEvolution Fóruns com Maujor – referência sobre as CSS no Brasil. Nessa entrevista, Maujor fala sobre os padrões da web, a nova “guerra entre os browsers” – Firefox e Internet Explorer – qual o melhor caminho para iniciar nesse mundo dos padrões e muito mais. Recomendo a leitura.

Interessante também foi saber a origem de seu pseudônimo: Maujor. Algo que sempre tive a curiosidade.

Leia entrevista com Mauricio Maujor

Overlay para o body com JavaScript

Leandro Vieira Pinho — Sat, 25 Nov 2006 11:29:55 +0000

Veremos como é simples criar um overlay para o body com JavaScript, se você não sabe do que se trata, posso lhe explicar. Sabe aquele feito utilizado pelo Lightbox JS em que o body é revestido por completo, deixando-o translúcido? Então, veremos como produzir este efeito.

Bom, inicialmente, precisaremos da seguinte função:

function getPageSize(){
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
var windowWidth, windowHeight;
if (self.innerHeight) {	// all except Explorer
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
// for small pages with total height less then height of the viewport
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}

Para quem não a conheça, vou explicá-la. Esta função criada pelo Peter-Paul Koch retorna um array com quatro significantes informações na seguinte ordem: largura da página, altura da página, largura do viewport e altura do viewport.

Bom, com essas informações conseguiremos perfeitamente nosso objetivo - overlay para o body - e iremos fazê-lo com esta simples função:

function bodyOverlay() {
	var objBody = document.getElementsByTagName('body').item(0);
	var sizesPage = getPageSize();
	var bodyOverlay = document.createElement("div");
	bodyOverlay.setAttribute('id','bodyOverlay');
	bodyOverlay.style.height = arrayPageSize[1] + 'px'; // fundo com o tamanho total da página.
	if (!document.getElementById('bodyOverlay')) {
		objBody.insertBefore(bodyOverlay, objBody.firstChild);
	}
}

Ou seja, "pegamos" a tag body, criamos uma tag div definindo dois atributos para ela - id="bodyOverlay" e style="height:tamanho-total-da-pagina" - e finalmente inserimos a tag div no body. Resultando no seguinte código:

Para remover o overlay criado, você pode utilizar a seguinte função:

function removerOverlay() {
	var bodyOverlay = document.getElementById('bodyOverlay');
	if (bodyOverlay) {
		bodyOverlay.parentNode.removeChild(bodyOverlay);
	}
}

E para finalizar utilizamos estas declarações CSS:

#bodyOverlay {
	background-color: #000;
	opacity: 0.8;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	filter:alpha(opacity=80); /* colando em um arquivo separado para o IE. */
}

Façam os testes, e retorne com um feedback. Se tiver alguma dúvida não hesite em perguntar.

[UPDATE] Veja um exemplo deste efeito [/UPDATE]

Camada de conteúdo – a(o) mãe(pai) de todas as outras

Leandro Vieira Pinho — Fri, 24 Nov 2006 00:25:14 +0000

Esta é a primeira e mais importante das camadas, a camada de conteúdo – ou estrutura / marcação como outros a chamam – é onde o conteúdo fica armazenado juntamente com as tags HTML que irão definir o que cada parte do conteúdo significa, dando a ele um valor semântico.

Essa camada ainda é a responsável em intercalar as outras duas – de apresentação e comportamentos – ou seja, ela faz uma ligação até essas duas camadas para que elas possam estar intercaladas entre si.

Para exemplificar visualmente, teríamos o seguinte:

Ou seja, a camada de conteúdo – HTML – fazendo uma ligação a camada de apresentação – CSS – e a camada de comportamento – JavaScript.

A forma como esta ligação é feita é super simples e acredito que você já conhece. Mas, mesmo assim, vejamos como isto acontece:

...