Fiz um pequeno guia sobre CSS com o pouco que sei, pretendo ir adicionando conteúdo, mas para já contém umas noções sobre CSS, como fazer thumbnails e um layout.

Pode ser que seja útil a algúem:

http://oespantalho.planetaclix.pt/css.html

Se quiserem fazer algum comentário ou crítica.. eu agradeço :)

Cumps

Está muito bem fundamentado. Vou seguir atentamente a evolução do guia. Parabéns.

LOL @ "Olá meninas jeitosas que estão a visitar este site!" acreditas mesmo? :-D

btw, quando li "thumbnails" pensei que finalmente ia encontrar o que tentei fazer há algum tempo, mas infelizmente não...
O que em tempos quis fazer foi usar uma imagem (sem reduzir tamanhos) e com essa imagem fazer um género de uma mask e só mostrar um quadrado com 20px*20px, com esse "quadrado" alinhado ao centro da imagem.
É possível?

Como assim Oldman? Por exemplo, só mostrar uma área da imagem (tipo 50x50 de uma imagem de 800x600) , sem fazer resize?

Acho que existe isso no CSS também.. penso que se chama crop ou algo do género.. mas acho que se pode fazer.

E eu gosto de mandar uma piada de vez em quando :D

Cumps e obrigado aos dois pelo feedback.

ta 5*.. básico mas fácil de perceber mesmo para noobs como eu na materia :p

só penso que tem lá uma pequena falha.. falas demasiado do Opera no local de download do Firefox.. :lol:

de resto o que precisa de estar direito está 5*

ta 5*.. básico mas fácil de perceber mesmo para noobs como eu na materia :p

só penso que tem lá uma pequena falha.. falas demasiado do Opera no local de download do Firefox.. :lol:

de resto o que precisa de estar direito está 5*

Isso do opera é porque eu ainda me sinto mal em ter abandonado o Opera :(

Tks pelo feedback :)

Como assim Oldman? Por exemplo, só mostrar uma área da imagem (tipo 50x50 de uma imagem de 800x600) , sem fazer resize?

Acho que existe isso no CSS também.. penso que se chama crop ou algo do género.. mas acho que se pode fazer.

E eu gosto de mandar uma piada de vez em quando :D

Cumps e obrigado aos dois pelo feedback.
Sim, e' isso, pode ser feito da forma que eu fiz na altura que e' inserir a imagem numa div com o tamanho da thumbnail e usar o overflow para esconder o que "sobrar", mas isso nao alinhava a imagem ao centro.
Acho que cheguei a tentar com o crop mas não consegui.

Sim, e' isso, pode ser feito da forma que eu fiz na altura que e' inserir a imagem numa div com o tamanho da thumbnail e usar o overflow para esconder o que "sobrar", mas isso nao alinhava a imagem ao centro.
Acho que cheguei a tentar com o crop mas não consegui.

Já tentaste o hotspot?

Desconheço

Humm.... acho que devias dar outro exemplo de ID.... quando crias um ID com um parâmetro que é uma cor, e dás o nome de #pink, as pessoas podem achar que podem usar aquilo em todo o lado onde quiserem ter um texto da cor pink.... no entando as IDs são só para serem usadas uma vez na página inteira não é verdade ? Este exemplo seria mais adequado para uma class....

Penso eu de que.............

Humm.... acho que devias dar outro exemplo de ID.... quando crias um ID com um parâmetro que é uma cor, e dás o nome de #pink, as pessoas podem achar que podem usar aquilo em todo o lado onde quiserem ter um texto da cor pink.... no entando as IDs são só para serem usadas uma vez na página inteira não é verdade ? Este exemplo seria mais adequado para uma class....

Penso eu de que.............

Mas eu referi isso lá.. leste a secção inteira sequer?

Está lá bem descrito que é suposto utilizarmos os ID's uma vez por página, aquilo é apenas um exemplo.

Oh que bom :) Desculpa eu não li tudo...
Mas então..... não devias usar uma CLASS para o menu como dizes em Definir um layout porque o menu só vai ser usado uma vez na página.... estou correcto ?

Oh que bom :) Desculpa eu não li tudo...
Mas então..... não devias usar uma CLASS para o menu como dizes em Definir um layout porque o menu só vai ser usado uma vez na página.... estou correcto ?

Queres dizer que devia usar uma ID?

Yep, provavelmente devia.. já que só aparecem só uma vez por página.. mas como usar ID's ou classes não vai afectar em nada o funcionamento da página eu usei classes.. estou mais habituado a fazer sempre classes.. acho que é uma questão de organização para cada pessoa..

Mas sim estás correcto.

EDIT: Eu há pouco fui um pouco bruto e não queria ser.. fizeste uma crítica correcta com todo o direito.. eu é que estou um pouco cansado e estava stressado por outros motivos.. por isso peço desculpa e obrigado por visitares a página :)

Cumps

Heehehehe deixa lá pah eu entendo tás desculpado...
E sim é mesmo uma questão de orgânização.... mas é bom salientar que não se pode fazer o contrário porque aí já dá erro na validação.... (eu cometi esse erro há muito tempo com 13 anos e era um nabo a CSS lol...)

btw, quando li "thumbnails" pensei que finalmente ia encontrar o que tentei fazer há algum tempo, mas infelizmente não...
O que em tempos quis fazer foi usar uma imagem (sem reduzir tamanhos) e com essa imagem fazer um género de uma mask e só mostrar um quadrado com 20px*20px, com esse "quadrado" alinhado ao centro da imagem.
É possível?

É possível cortar a imagem. Existe a propriedade clip que penso que faz aquilo que pretendes. Mas eu ainda não percebi exactamente como funcionam as coordenadas, por isso não te sei explicar como aplicar ao certo, mas deixo-te um link de referência: http://www.w3schools.com/css/pr_pos_clip.asp
Como a propriedade implica um posicionamento absoluto, terás de centrar um elemento que envolva a imagem (o parágrafo, por exemplo) para que a imagem apareça no meio.

Boas

Adicionei mais duas secções ao meu guia de CSS.. também fiz uma pequena actualização ao meu site para quem estiver interessado :)

Talvez de seguida faça um pequeno guia de HTML/XHTML.. acho que por agora o guia de CSS está bom.

http://oespantalho.planetaclix.pt/css.html

Cumps

Tenho de te dar os meus parabéns sobre o tutorial de CSS. Está bastante simples e dá para perceber bem.

Vou seguir algumas coisas que estão no teu guia para criar um outro site.

É possível cortar a imagem. Existe a propriedade clip que penso que faz aquilo que pretendes. Mas eu ainda não percebi exactamente como funcionam as coordenadas, por isso não te sei explicar como aplicar ao certo, mas deixo-te um link de referência: http://www.w3schools.com/css/pr_pos_clip.asp
Como a propriedade implica um posicionamento absoluto, terás de centrar um elemento que envolva a imagem (o parágrafo, por exemplo) para que a imagem apareça no meio.

Usando o Clip é fácil.

http://www.maujor.com/blog/mat-img/clip-foto-coordenadas.jpg

<div style="width:350px;height:240px;position:relative;">

<img src="foto.jpg" alt="Foto para clip" width="350" height="240" »
style="position:absolute;clip: rect(90px, 280px, 160px, 80px); " />

</div>

Podes ver, bem explicado, em http://www.maujor.com/blog/2006/06/26/a-propriedade-css-clip

E parabens pelo "Guia" Scarecrow 5*s