Dimensões no CSS Exacta, Máxima, Mínima

Este artigo foi publicado originalmente em 6 de Março, 2012. Texto actualizado com novas imagens.

Nota: As imagens utilizadas nos exemplos deste artigo foram retiradas do site Heromorph.

Se gostam de arte digital e BD, façam uma visita e se quiserem juntem-se à comunidade que não se vão arrepender. ;)

Ao pensar em algo para escrever um artigo, lembrei-me dum comentário que deixei num blogue e apercebi-me que algumas pessoas talvez desconheçam algumas das vantagens que se pode utilizar ao dar estilos no CSS a qualquer elemento que se tenha no blogue.

Não vou falar neste artigo de todas as regras que podemos colocar ao dar estilos no CSS (sombra, posição, fundo, rotação e muito mais...) porque isso dá matéria para muitos artigos. =D

Não, o assunto deste artigo é a largura e altura dos elementos num blogue que pode ser uma imagem ou qualquer outro elemento dentro de um artigo tipo citações (blockquote), ou qualquer elemento presente no blogue seja na parte principal ou na barra lateral, cabeçalho, etc...

Para explicar melhor, vou criar uma div, que vamos chamar exemplo1 e dar alguns estilos básicos:

um texto qualquer
/* A parte em CSS com os estilos */
.exemplo1 {
background: rgba(155, 255, 255,.5);
color:skyBlue;
border:4px double gold;
padding:10px 20px; 
margin: 10px auto;
width:400px; 
height: auto;
}
/* A parte HTML */
<div class="exemplo1">um texto qualquer</div>

Notem a parte do código nas linhas 8 e 9. Essa é a parte onde definimos a largura (width) e altura (height) de um elemento.

Para efeitos de demonstração, vamos imaginar que a div exemplo1 acima é o espaço dos artigos de um blogue.

Então como em qualquer artigo,além do texto podemos colocar algumas imagens:

um texto qualquer


mais texto...


Como podem ver, a imagem maior sai fora do espaço designado e se fosse no caso de ser o espaço do artigo, podia aparecer por cima ou escondida por baixo da barra lateral.

Para corrigir isso, muitos blogues têm no CSS mais uma regra:


/* A parte em CSS com os estilos */
.exemplo1 {
background: rgba(155, 255, 255,.5);
color:skyBlue;
border:4px double gold;
padding:10px 20px; 
margin: 10px auto;
width:400px; 
height: auto;
overflow:hidden;
}

E o resultado:

um texto qualquer



mais texto...



Mas aí a imagem maior aparece cortada. Claro que podemos editar a imagem maior e definir um tamanho que se adapte ao tamanho da div exemplo1... mas, e se não pudermos fazer isso?

Imaginemos que o elemento que sobressaia era algo a que não tínhamos acesso ao código e só podíamos definir pelo tipo, neste caso as imagens (img).

Sabendo o tipo de elemento, podemos dar estilo no CSS e adicionar uma regra para definir um tamanho que não seja superior ao do exemplo1.

Mas aí temos outro problema.

Existe outra imagem mais pequena e se definirmos uma largura especifica para as imagens no exemplo1, TODAS as imagens vão ser afectadas.

Como não desejamos isso, como resolver a situação?

Definindo a largura máxima (max-width) que um elemento deve ter. As outras regras que podemos usar são largura mínima (min-width), altura máxima (max-height) e altura mínima (min-height), conforme o caso.

O que resulta em:

um texto qualquer



mais texto...



/* A parte em CSS com os estilos */
.exemplo1 {
background: rgba(155, 255, 255,.5);
color:skyBlue;
border:4px double gold;
padding:10px 20px; 
margin: 10px auto;
width:400px; 
height: auto;
overflow:hidden;  
}
.exemplo1 img {
max-width:400px;
}

E então? Já conheciam estas maneiras de definir a largura ou altura de um elemento do blogue?

É de utilidade para vocês?

Eu aqui no blogue, utilizo todas as opções em vários elementos. Conseguem descobrir em quais? ;D

Até Breve. :-F

Este Artigo foi útil?
Então se quiser, pode pagar-me um café. ;)

Escolhe com Sabedoria:

Deixa o teu comentário no Formulário Incorporado (NOTA: As respostas directas aos comentários só são possíveis utilizando este Formulário.) , ou no Antigo Formulário em uma nova janela, ou então no Formulário em Pop Up .

LER AS REGRAS ANTES DE COMENTAR! MOSTRAR EMOTICONS
Ler Antes de Comentar ◊  As Regras dos Comentários:
  • O comentário precisa ter relação com o assunto!
  • O comentário que deixares é da tua inteira Responsabilidade!
  • Comentários anónimos São permitidos,MAS:

    • Por favor, evita comentar em MAIÚSCULAS .
    • Por favor, não faças Spam.
    • Por favor, não utilizes termos obscenos ou ofensivos.
    • Comentários considerados Spam ou ofensivos serão apagados.
◊  Para deixares a URL do teu blogue, comenta com OpenID, ou com a opção NOME/URL.
◊  Podes usar algumas tags HTML como:
  • @<strong>Nome</strong> para mencionar a quem se responde o comentário.
  • <em>Fulano disse:<i>Texto Citado</i></em> para colocar uma Citação.
  • Para inserir um link ou um vídeo do YouTube, basta só escrever o endereço URL como texto normal.
  • <i>Texto em Itálico</i>
  • <b>Texto em Negrito</b>
    • HTML EXTRA:
    • [im]URL DA IMAGEM[/im] para colocar uma imagem.
    • [ma]Texto rolando[/ma] para colocar texto rolando.
    • [si="2"]Texto com tamanho determinado[/si] Altera o numero para determinar o tamanho da letra.
    • [co="red"]Texto em cor[/co] Altera a cor do texto.
    • [ce]Texto centrado[/ce] centraliza o texto.
    • [ma+]Texto rolando para a direita[/ma+]
    • [box]"encaixotar" o texto[/box]
    • [mark]Texto Marcado[/mark]
    • [card="blue"]Texto com fundo[/card] Altera a cor de fundo do comentário.
    • [im#]URL DA IMAGEM[/im] para colocar uma imagem que ocupe TODA a largura.
    • [hi="yellow"]Texto Destacado[/hi]
  • ATENÇÃO: Comentários com imagens ou vídeos com conteúdo ofensivo ou inadequado serão REMOVIDOS, SEM EXCEPÇÃO!!!
FECHAR
NOTA: os códigos dos emoticons devem ser inseridos separados das restantes palavras ou pontuação. OCULTAR EMOTICONS

0 comentários :

Enviar um comentário