Guia de CSS

S

Scarecrow

Power Member
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
 
Última edição:
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*
 
Romani48 disse:
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*
Clicar para expandir...

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

Tks pelo feedback :)
 
Scarecrow disse:
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.
Clicar para expandir...
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.
 
OldMan disse:
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.
Clicar para expandir...

Já tentaste o hotspot?
 
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.............
 
joaopj disse:
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.............
Clicar para expandir...

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 ?
 
Última edição:
joaopj disse:
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 ?
Clicar para expandir...

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
 
Última edição:
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...)
 
OldMan disse:
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?
Clicar para expandir...

É 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.
 
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.
 
majo-san disse:
É 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.
Clicar para expandir...

Usando o Clip é fácil.

clip-foto-coordenadas.jpg


Código: 
<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
 
Inicie sessão ou registe-se para poder participar.
Back
Topo