o efeito de cantos arredondados, insira a propriedade stroke-linejoin="round" em cada path do desenho. Crie grupos para que a animação funcione corretamente. Insira o desenho como um logo ou no banner da página index.htm.
Uma tag para criar o efeito de que o texto está seguindo uma curva pode ser feita da seguinte forma: crie uma curva com arcos com id chamada de curva, e faça a ligação usando a tag textpath, com referência à #curva. Uma animação pode ser feita alterando a propriedade startOffset.
<path id="curva" fill="none" stroke="blue" d="M30,30 a30,30 0 0,1 30,0 a30,30 0 0,0 30,0 a30,30 0 0,1 30,0 a30,30 0 0,0 30,0"/>
<text>
<textpath xlink:href="#curva">Texto em curva!
<animate attributeName="startOffset" from="-100" to="0" dur="5s" begin="0s" fill="freeze" /> </textpath>
</text>
Seguem abaixo alguns desenhos que podem ser usados como ideias para criação de banners ou logos para nossas páginas. Os efeitos de animações que usamos podem ser usados para criar estes desenhos.
x y 10 15 M(55,60) M(35,60) 10 15 5 2 5 20 2 M(15,60) 15 15 23 4 R10 R10
<path name="banco" d="M35,60 l-15,-20 h5 h-7 h7" stroke="blue" fill="none" stroke- linejoin="round" stroke-width="2"/>
Universidade Federal do Paraná – Departamento de Expressão Gráfica – Prof. Paulo Henrique Siqueira http://www.shutterstock.com/
Mais referências sobre desenhos em SVG podem ser encontradas nos seguintes sites:
http://miscelaneadoconhecimento.com/svg/apostilasvg.html https://css-tricks.com/guide-svg-animations-smil/
Atividade 7: Entregar os arquivos do site estruturado com os desenhos de banner, logos e objetos com animações em SVG.
Vamos criar uma galeria de imagens utilizando apenas o que aprendemos com HTML e CSS. Galerias de imagens com mais efeitos podem ser desenvolvidas junto com funções da linguagem JavaScript. Nossa próxima atividade começará de uma página estruturada, com espaço para inserir banner, barra de compartilhar, conteúdo e rodapé.
Primeiro vamos estruturar o arquivo HTML com as tags de imagem e hiperlink. Vamos usar dois novos atributos: id (servirá como ligação entre a foto ampliada e a foto em miniatura) e title (servirá como legenda da imagem, tanto na miniatura, quando na imagem ampliada). Podemos criar duas classes: mini (para criar as miniaturas das imagens) e maior (para criar as imagens ampliadas, que serão escondidas usando CSS). O id da imagem ampliada (img1) servirá como referência do hiperlink href="#img1" da imagem em miniatura. A referência do hiperlink da imagem ampliada será href="#_", que servirá para clicar na imagem ou fora dela para voltar ao mesmo ponto onde a imagem está na página.
<div class="galeria">
<!-- miniatura da foto -->
<a href="#img1" class="mini" title="Meu projeto 1"> <img src="imagens/projeto1_mini.jpg">
</a>
<!-- foto ampliada, escondida pelo CSS -->
<a href="#_" class="maior" id="img1" title="Meu projeto 1"> <img src="imagens/projeto1.jpg">
</a> ... </div>
Para deixar uma imagem ou div na frente de outros elementos, basta usar valores positivos para a propriedade z-index. No caso da nossa galeria de imagens, a classe maior deverá ficar escondida com o atributo display:none, porém, vamos usar z-index:999 para que a imagem fique na frente de todos os elementos da página quando for ampliada.
10. GALERIAS DE IMAGENS
Ligação entre a imagem ampliada e a imagem em
Universidade Federal do Paraná – Departamento de Expressão Gráfica – Prof. Paulo Henrique Siqueira
Para centralizar a imagem ampliada vamos usar o position:fixed (que usa como referência a tela do dispositivo do visitante) com top e left com 50%. Assim, o canto superior da imagem fica centralizado na tela. Para centralizar a imagem como um todo usaremos translate de -50%. Para deixar o fundo escuro, usamos o background com opacidade igual a 0.7. Vamos usar a propriedade transition para criar efeitos de animação.
A classe galeria deve ter o display como flexbox para que as imagens em miniatura sejam ajustáveis para qualquer tamanho de tela. Vamos colocar uma margem interna também, para que as imagens não fiquem junto com as margens do site.
.galeria {display:flex; flex-wrap:wrap; padding:10px;}
/* Fotos ampliadas da galeria: devem ficar escondidas (display:none) */
.maior {display:none; position:fixed; z-index:999; width:100%; height:100%; text-align:center;
color:white; text-decoration:none; top:50%; left:50%; transform:translate(-50%,-50%); opacity:1;
background:rgba(0,0,0,0.7);}
.maior img {max-width:100%; max-height:100%; min-width:100%; margin-top:5%; border-radius:10px; margin-
bottom:-5px;}
Assim que o visitante clicar na foto em miniatura da classe mini, o alvo (target) do link será a imagem da classe maior, que pode ser configurada com animação (como fizemos na atividade 6). A configuração do target da galeria é a seguinte:
.maior:target {outline:none; display:block; opacity:1;}
.maior:target img {animation:Escala 1.2s ease-in-out; text-align:center;} @keyframes Escala { 0% {transform:scale(0.6); opacity:0;} 90% {transform:scale(1.05); opacity:0.9;} 95% {transform:scale(0.95); opacity:0.95;} 97% {transform:scale(1.025); opacity:0.97;} 100% {transform:scale(1); opacity:1;} }
Agora vamos configurar as miniaturas das imagens. Como todas as imagens têm tag de hiperlink, podemos nos referir às tags com o nome a.mini. Para deixar um efeito de que as imagens estão sobrepostas, podemos criar margens laterais negativas e criar margens internas com padding:7px. Vamos usar o alinhamento centralizado para colocar o título (title) de cada foto como legenda (como fazíamos com figcaption nas primeiras aulas).
a.mini {background:#fff; margin:20px -30px; padding:7px; text-align:center; text-decoration:none; margin-
left:0; background:linear-gradient(-45deg, #87CEFA,white); border-radius:10px;}
Vamos configurar um mesmo tamanho para todas as imagens em miniatura, com z-index:1 e efeito de transição para fazermos animação com hover.
.mini img {width:150px; height:100px; margin:10px 10px -5px 10px; transition:0.4s all ease-in-out; z-index:1;}
.mini img:hover {transform:scale(1.1);}
O recurso de pseudo-classe que usaremos para inserir os títulos é chamado de before/after, que pode ser usado para inserir elementos antes ou depois de algum elemento da página. Este elemento pode ser texto ou imagem. Este recurso é muito utilizado para inserir automaticamente imagens antes de cada item de menus.
Nos exemplos a seguir, antes de cada título h1 da página uma imagem é inserida, e antes de cada parágrafo um hífen é inserido.
h1:before {content:url(imagens/smiley.gif);} p:before {content:"- ";}
Em nossa galeria, vamos usar a pseudo-classe after para inserir os títulos de cada imagem ampliada e em miniatura. Como cada imagem tem seu título, vamos usar a função attr() para buscar o título de cada imagem.
Universidade Federal do Paraná – Departamento de Expressão Gráfica – Prof. Paulo Henrique Siqueira a.maior:after {content:attr(title); display:block;}
Para criar um efeito para que as miniaturas das imagens fiquem com aspecto “desarrumado”, como fotos sobrepostas, podemos usar a pseudo-classe nth-child (a mesma que usamos para formatar linhas pares e ímpares das tabelas da Atividade 5).
Como as miniaturas estão inseridas sempre antes das imagens ampliadas, elas ocupam sempre posições ímpares dentro da classe imagens. Logo, o nosso foco é criar o nth-child com números ímpares. Por exemplo, se você quiser apenas alternar 2 efeitos, basta usar números 2n+1; para 3 efeitos, usamos 3n+1. O exemplo que vamos usar tem 5 efeitos diferentes.
n=0 n=1 n=2 n=3 n=5 estilo 5n+1 1 6 11 16 21 azul, 0o 5n+2 2 7 12 17 22 vermelho, 5o 5n+3 3 8 13 18 23 preto, 5o 5n+4 4 9 14 19 24 verde, -10o 5n+5 5 10 15 20 25 … amarelo, -5o Logo, o estilo ficará assim:
a.mini:nth-child(5n+1){color:blue; transform:rotate(0deg);} a.mini:nth-child(5n+3){color:black; transform:rotate(5deg);} a.mini:nth-child(5n+5){color:yellow; transform:rotate(-5deg);} a.mini:nth-child(5n+2){color:red; transform:rotate(5deg);} a.mini:nth-child(5n+4){color:green; transform:rotate(-10deg);}
Para criar os itens de compartilhar, podemos inserir imagens dentro do banner do site com link nas tags de SVG, indicando as coordenadas x e y, além das medidas de altura e largura de cada imagem.
<a href="http://www.facebook.com/pages/UFPR">
<image xlink:href="imagens/facebook.png" x="700" y="150" height="70px" width="70px"/> </a>
<a href="http://www.twitter.com/ufpr">
<image xlink:href="imagens/twitter.png" x="800" y="150" height="70px" width="70px"/> </a>
<a href="https://www.instagram.com/ufpr_oficial/">
<image xlink:href="imagens/instagram.png" x="900" y="150" height="70px" width="70px"/> </a>
<a href="whatsapp://send?text=Meu portfolio - http://www.degraf.ufpr.br/docentes/paulo/webdesign/"> <image xlink:href="imagens/whatsapp.png" x="1000" y="150" height="70px" width="70px"/>
</a>
<a href="mailto:seuemail@provedor.com.br">
<image xlink:href="imagens/email.png" x="1100" y="150" height="70px" width="70px"/> </a>
1
1
33
55
77
99
1111
1
Universidade Federal do Paraná – Departamento de Expressão Gráfica – Prof. Paulo Henrique Siqueira
Atividade 8: Entregar os arquivos do site estruturado de um portfólio com galeria de imagens, menu, desenhos de banner e logos com animações em SVG.