1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

Guia de CSS

Discussão em 'Web Development' iniciada por Scarecrow, 29 de Julho de 2007. (Respostas: 17; Visualizações: 1211)

  1. Scarecrow

    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: 29 de Julho de 2007
  2. Biofobico

    Biofobico Power Member

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

    OldMan Power Member

    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?
     
  4. Scarecrow

    Scarecrow Power Member

    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.
     
  5. Romani48

    Romani48 Power Member

    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*
     
  6. Scarecrow

    Scarecrow Power Member

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

    Tks pelo feedback :)
     
  7. OldMan

    OldMan Power Member

    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.
     
  8. Biofobico

    Biofobico Power Member

    Já tentaste o hotspot?
     
  9. OldMan

    OldMan Power Member

    Desconheço
     
  10. joaopj

    joaopj Power Member

    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.............
     
  11. Scarecrow

    Scarecrow Power Member

    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.
     
  12. joaopj

    joaopj Power Member

    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: 30 de Julho de 2007
  13. Scarecrow

    Scarecrow Power Member

    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: 30 de Julho de 2007
  14. joaopj

    joaopj Power Member

    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...)
     
  15. majo-san

    majo-san Power Member

    É 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.
     
  16. Scarecrow

    Scarecrow Power Member

    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
     
  17. loster

    loster I'm cool cuz I Fold

    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.
     
  18. artideias

    artideias Power Member

    Usando o Clip é fácil.

    [​IMG]

    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
     

Partilhar esta Página