Lula e Rafael em entrevista aos alunos de Educomunicação
4 de maio de 2016
Alguns truques de CSS – 1
1) Imagem redonda
Na primeira imagem não foi aplicado nenhum estilo, mas na segunda inseriu-se um estilo para que a borda ficasse redonda em 50%. O estilo CSS é conforme se segue:
.redondo {
border-radius: 50%;
}
O nome do estilo (no caso uma “class”) é indiferente, o importante, porém, é que ele seja repetido, para ser marcado, dentro da imagem, que passa a ter o seguinte código:
<img class="redondo" src="http://143.107.95.102/prof/richardromancini/suportesmidiaticos/public_html/wordpress/wp-content/uploads/2016/05/evento_suportes_foto.jpg" alt="evento_suportes_foto" width="669" height="438" />
Uma explicação mais detalhada pode ser vista aqui.
2) Imagem com cantos arredondados
A primeira imagem tem cantos arrendados com a mesma codificação do exemplo anterior, em 50%. Já na segunda, o valor é de apenas 5%. É possível definir que todas as imagens de uma página tenham um mesmo padrão de arredondamento, aplicando um estilo à imagem: veja aqui como fazer.
3) Moldura e sombra em imagens
Na imagem da esquerda (acima) foi aplicado um estilo para a feitura de moldura e sombra (código abaixo). Na da direita, apenas a segunda parte do código foi usada para a sombra.
.moldura_sombra {
padding: 6px; /* define a espessura da moldura */
border: 4px solid #ffffff; /* define a espessura da borda e cor */
border-radius: 5%; /* define o raio da borda */
/* coloca a sombra */
box-shadow: 3px 6px 8px 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 3px 6px 8px 1px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 3px 6px 8px 1px rgba(0, 0, 0, 0.3);
}
A cor e outros parâmetros da sombra e da moldura poderiam ser diferentes. Ver explicação em mais detalhes, aqui.
4) Legenda e crédito em imagem
Lula Ramires e Rafael Ferreira Silva sendo entrevistados pelos alunos de Educomunicação
Por códigos CSS também é possível colocar legenda em imagens, com diversas possibilidades de formatação. Acima está um caso de texto interno à imagem sobre um fundo translúcido. O código utilizado foi o mesmo desta página, porém, sendo feitas adaptações nas definições de estilo para adequação à foto usada. Abaixo, o que se mostra é uma adaptação maior ainda do código anterior, pois optou-se por colocar a legenda abaixo da imagem.
Lula Ramires e Rafael Ferreira Silva sendo entrevistados pelos alunos de Educomunicação
Foto: Ricardo Alexino Ferreira
A imagem acima também exemplifica a ideia de colocar um crédito na foto. Nesse caso, foi utilizado um estilo como o abaixo:
.credits {
position:relative;
top: -25px;
left: -270px;
color:black;
text-align: right;
font-size: 12px;
}
Os valores de top e left dependem de cada projeto. Ver mais informações aqui.
5) Legenda dinâmica em imagem
O CSS também permite a feitura de legendas (e outros tipos de texto) com comportamento dinâmico, ou seja, a partir da ação do usuário. Então, no exemplo acima, a legenda aparece quando o mouse é colocado sobre a imagem. A codificação é um pouco trabalhosa, mas depende sobretudo de atenção e compreensão dos parâmetros do estilo. Vários exemplos de legendas dinâmicas, como a mostrada acima, são dados aqui.
Be the first to comment.