Kioskea
Recherche
Faça uma pergunta »

CSS para apresentar as suas imagens

Fevereiro 2015

Para apresentar agradavelmente as suas imagens, você pode integrar alguns códigos adicionais no seu CSS e usá-los de maneira inteligente. Eles são flexíveis, dependendo da placa gráfica do seu site.

Uso


Ponha os códigos desejados em seu CSS e teste na sua página inscrevendo um código deste tipo:
<img class="foto" outros atributos...>
e assim você poderá, compreender melhor o funcionamento, testar e ... adotar!

Alguns exemplos a serem colocados no código CSS


.foto { 
  background-color:#fafbfc; 
  border:1px solid #b0b0b0; 
  margin:0 0 10px 10px; 
  padding:5px; 
}

.fotoadireita { 
  border: 5px solid #b0b0b0; 
  margin: 5px 6px 15px 6px; 
}

.fotoaesquerda { 
  border: 5px solid #b0b0b0; 
  float: left; 
  margin: 5px 15px 6px 15 px; 
}

Para enquadrar uma imagem à esquerda com o texto


div#photoflot p{ 
  margin:0; 
  padding:0; 
  text-align:justify; 
} 
div#photoflot img{ 
  float:left; 
  background-color:#fafbfc; 
  border:1px solid #b0b0b0; 
  margin:0 0 10px 10px; 
  padding:5px; 
} 
hr{ 
  clear:left; 
}

Colocar assim:
<div id="photoflot"><img atributos...> 
<p>Fusce sem turpis, mollis ut, commodo quis, aliquet eget, ipsum. Ut nonummy libero vitae neque. Quisque lacus. Nullam lobortis. Cras quam. Nulla vitae ante nec eros mollis luctus. Vivamus velit. Morbi interdum euismod sapien...</p> 
</div>

Para enquadrar uma imagem à direita com o texto


/* Enquadrar o texto em volta de uma imagem à direita */ 
.rightimg, .leftimg, .centreimg img { 
  border:1px solid #AAAAAA; 
  background-color:#E9E9E9; 
  padding:3px; 
  margin:6px; 
} 
.rightimg {float:right;} 
.leftimg {float:left;} 
div.centreimg { 
 text-align:center; 
}

Exemplo da localização do código na página:
<img class="rightimg" attributs...>Proin ac sapien et neque pellentesque mollis. Praesent ut magna sed tortor luctus pretium. Proin a est gravida dui pellentesque tincidunt. Nunc at ipsum. Suspendisse elit. Fusce sit amet lectus. Quisque et neque vitae odio sagittis tincidunt.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ac tellus. Nulla vel arcu. Proin ac sapien et neque pellentesque mollis...

Se você tentou ... nada mau heim ?

O melhor!


Coloque no seu arquivo CSS uma das apresentações que você gosta na tag "img" e, de uma só vez, TODAS as imagens do seu site (se as páginas estiverem ligadas ao seu arquivo CSS) serão vistas imediatamente, modificada e apresentadas como você escolheu ... e por que não variar, de vez em quando... Prático, não?




Tradução feita por Lucia Maurity y Nouira

Para uma leitura offline, é possível baixar gratuitamente este artigo no formato PDF:
Css-para-apresentar-as-suas-imagens.pdf

A ver igualmente

Na mesma categoria

CSS to enhance the presentation of your images
Por deri58 em 2 de outubro de 2012
Les CSS pour présenter vos images
Por bg62 em 26 de janeiro de 2008
Artigo original publicado por bg62. Tradução feita por pintuda.
Este documento, intitulado « CSS para apresentar as suas imagens »a partir de Kioskea (pt.kioskea.net) está disponibilizado sob a licença Creative Commons. Você pode copiar, modificar cópias desta página, nas condições estipuladas pela licença, como esta nota aparece claramente.