Este documento apresenta novos recursos gráficos do CSS3 como cores, bordas arredondadas, sombras, gradientes e imagens de plano de fundo. Inclui exemplos de como aplicar essas propriedades CSS3 para dar estilo e personalidade às páginas da web. Também discute ações práticas de implementar esses efeitos em uma aplicação de lista de tarefas.
1. O que são gráficos
2. Gráficos são recursos visuais que podemos utilizar para apresentar grandes quantidades de dados de uma forma mais organizada e amigável
3. O uso de gráficos pode facilitar a apresentação dos dados, mas é necessário saber qual gráfico é a melhor escolha para demonstrar determinado valor
4. Tipos de gráficos e quando utilizá-los
5. Gráfico de Colunas: utilizado para ilustrar comparação entre itens
6. Gráfico de Linhas: exibir dados contínuos ao longo do tempo
7. Gráfico de Pizza: mostra o quanto cada valor representa sobre um número total
8. Gráfico de Área: apresenta a magnitude da mudança dos números em um intervalo de tempo
9. Gráfico Radar/Aranha: usado geralmente para demonstrar comparação, exibe os dados a partir do centro e apresenta de forma visual os valores de acordo com os eixos em que eles estão mais ou menos expressivos.
10. Gráfico de Rosca: mostra o quanto cada valor representa sobre o número total.
11. Gráfico de Barras: aplicado para ilustrar comparações entre itens individuais. Utilizado especialmente quando os números apresentados foram muito longos
12. Gráfico de Dispersão: exibe um mesmo gráfico duas variáveis, correlacionando os dados.
13. Gráfico de Bolhas: utilizado quando o objetivo é enfatizar de forma visual os valores apresentados.
14. Dica: em geral, os gráficos mais utilizados são os de barra, pizza, colunas e linhas
15. Dica: deixe o gráfico mais “atraente” para quem irá visualizá-lo, removendo as linhas de trás e destacando cada valor com uma cor diferente
16. Dica: sempre que possível, evite usar gráficos em 3D
17. Dica: a prioridade deve ser o rápido entendimento da informação. Por isso, se tiver que optar entre um gráfico bonito ou funcional, vá pela segunda opção.
18. Dica: menos é mais. Sempre
19. Referências
20. Contatos
Html aula 12 - CSS, Espaçamento de linhas, Bordas, Padding, Margem, Plano de ...Erick L. F.
Curso sobre HTML - Aula 12, nessa aula nós vamos nos aprofundar ainda mais nas CSS dentro da sua página html, para personalizar ainda mais seu site na web (website), primeiro nós vemos como colocar espaçamento entre linhas com o CSS, depois nós vemos como personalizar ainda mais as suas bordas colocando cores, espessura, estilo, depois nós vemos como colocar espaçamento em todos os lados da sua tag, aprendemos como colocar margem para distanciar um parágrafo do outro, como definir uma imagem de fundo para uma tag, e aprendemos as diferenças entre o identificador ID do identificador Class dentro do seu html.
Html aula 11 - CSS, Fonte, tamanho da fonte, Negrito, Itálico, Obliquo, CorErick L. F.
Curso sobre HTML - Aula 11, Nessa aula nós vamos nos aprofundar no CSS, especificamente na parte de Fonte, vamos aprender as 5 famílias de fontes, como colocar essas fontes na sua página html, qual é o melhor tipo de fonte para sua página, como colocar negrito, alterar o estilo da sua página com Itálico e Oblíquo no CSS, colocar cor no seu texto, aprenderemos como usar outros padrões de cores como o RGB e o Hexadecimal para deixar sua página da web ainda melhor e ser o melhor Webdesign possível.
No dia 27 de março de 2013, das 10h15 às 11h30, eu apresentei a palestra "Suporte a padrões Web no Internet Explorer 10 e outros browsers, em múltiplas plataformas e em múltiplos dispositivos" no evento MVP Virtual Conference 2013.
Na palestra, eu mostrei o suporte a alguns dos principais recursos de HTML5, CSS3 e JavaScript nas versões mais recentes dos principais browsers (Internet Explorer, Chrome, Firefox, Safari e Opera), em múltiplas plataformas (Windows 8, Mac OS X Mountain Lion, Ubuntu Linux) e em múltiplos dispositivos (desktops, notebooks, ultrabooks, netbooks, smartphones e tablets).
Slides Lição 10, CPAD, Desenvolvendo uma Consciência de Santidade, 2Tr24.pptxLuizHenriquedeAlmeid6
Slideshare Lição 10, CPAD, Desenvolvendo uma Consciência de Santidade, 2Tr24, Pr Henrique, EBD NA TV, Lições Bíblicas, 2º Trimestre de 2024, adultos, Tema, A CARREIRA QUE NOS ESTÁ PROPOSTA, O CAMINHO DA SALVAÇÃO, SANTIDADE E PERSEVERANÇA PARA CHEGAR AO CÉU, Coment Osiel Gomes, estudantes, professores, Ervália, MG, Imperatriz, MA, Cajamar, SP, estudos bíblicos, gospel, DEUS, ESPÍRITO SANTO, JESUS CRISTO, Com. Extra Pr. Luiz Henrique, de Almeida Silva, tel-What, 99-99152-0454, Canal YouTube, Henriquelhas, @PrHenrique, https://ebdnatv.blogspot.com/
Atividade - Letra da música "Tem Que Sorrir" - Jorge e MateusMary Alvarenga
A música 'Tem Que Sorrir', da dupla sertaneja Jorge & Mateus, é um apelo à reflexão sobre a simplicidade e a importância dos sentimentos positivos na vida. A letra transmite uma mensagem de superação, esperança e otimismo. Ela destaca a importância de enfrentar as adversidades da vida com um sorriso no rosto, mesmo quando a jornada é difícil.
Slides Lição 10, Central Gospel, A Batalha Do Armagedom, 1Tr24.pptxLuizHenriquedeAlmeid6
Slideshare Lição 10, Central Gospel, A Batalha Do Armagedom, 1Tr24, Pr Henrique, EBD NA TV, Revista ano 11, nº 1, Revista Estudo Bíblico Jovens E Adultos, Central Gospel, 2º Trimestre de 2024, Professor, Tema, Os Grandes Temas Do Fim, Comentarista, Pr. Joá Caitano, estudantes, professores, Ervália, MG, Imperatriz, MA, Cajamar, SP, estudos bíblicos, gospel, DEUS, ESPÍRITO SANTO, JESUS CRISTO, Com. Extra Pr. Luiz Henrique, 99-99152-0454, Canal YouTube, Henriquelhas, @PrHenrique
Slides Lição 9, Central Gospel, As Bodas Do Cordeiro, 1Tr24.pptxLuizHenriquedeAlmeid6
Slideshare Lição 9, Central Gospel, As Bodas Do Cordeiro, 1Tr24, Pr Henrique, EBD NA TV, Revista ano 11, nº 1, Revista Estudo Bíblico Jovens E Adultos, Central Gospel, 2º Trimestre de 2024, Professor, Tema, Os Grandes Temas Do Fim, Comentarista, Pr. Joá Caitano, estudantes, professores, Ervália, MG, Imperatriz, MA, Cajamar, SP, estudos bíblicos, gospel, DEUS, ESPÍRITO SANTO, JESUS CRISTO, Com. Extra Pr. Luiz Henrique, 99-99152-0454, Canal YouTube, Henriquelhas, @PrHenrique
Slides Lição 9, Central Gospel, As Bodas Do Cordeiro, 1Tr24.pptx
Aula de Desenvolvimento de Sistemas Web - CSS3
1. UNIVERSIDADE ESTADUAL DO SUDOESTE DA BAHIA
CURSO DE CIÊNCIA DA COMPUTAÇÃO
DESENVOLVIMENTO DE SISTEMAS WEB – 2015.2
Fábio M. Pereira
(fabio.mpereira@uesb.edu.br)
2. “Em questões de estilo, nade com a correnteza; em
questões de princípios, se mantenha firme como uma
rocha”
Thomas Jefferson
3. Roteiro
• Introdução
• Cores, Bordas e Sombras
• Ação – CSS3 na Prática
• Pano de Fundo
• Ação – Adicionando Gradientes e Imagens de Botões
• Transições e Transformações
• Ação – Efeitos
• Estilos Dinâmicos
• Ação – Adicionando Um Seletor de Tema
• Ocupando a Janela
• Ação – Expandindo a Aplicação
4.
5. Introdução
• CSS3 não faz parte da especificação HTML5, mas é uma
parte integral do desenvolvimento de aplicações HTML5
• CSS3 está sendo desenvolvido em conjunto com HTML5 e
fornece muitos novos estilos que fazem com que as
páginas Web funcionem e pareçam muito melhor que
antes
• Coisas que estavam apenas disponíveis no Photoshop,
como gradientes e sombras, agora são facilmente
adicionadas via estilo
• O uso dessas novas características gráficas tornarão
nossas aplicações modernas e com personalidade
6.
7. Cores em CSS3
• Antes de iniciarmos com os novos efeitos, vamos discutir
cores
• CSS3 tem novas maneiras de definir cores e permite que
possamos atribuir transparência e definir cores no
formato HSL
– HSL (Hue, Saturation, Luminance, ou em português TSL –
Tonalidade, Saturação, Luminância)
– É claro que os padrões antigos de valores hexadecimais, nomes
de cores CSS e especificador rgb() continuam válidos
• Um novo especificador rgba() foi adicionado
permitindo que o alfa, ou quantidade de opacidade, seja
atribuído juntamente com a cor
8. Cores em CSS3
• Assim como em rgb(), os três primeiros parâmetros
especificam as quantidades de vermelho, verde e azul, e são
valores variando entre 0 e 255
• Um quarto parâmetro, o alfa, é um valor de ponto flutuante
entre 0 e 1, onde 0 é completamente transparente e 1
completamente opaco
• A instrução a seguir define uma cor de fundo vermelha com
50 por cento de transparência:
background-color: rgba(255, 0, 0, 0.5);
• Embora a maioria dos navegadores darem suporte a rgba(),
é uma boa ideia especificar uma alternativa para aqueles que
não dão suporte, definindo uma cor no formato rgb() antes:
background-color: rgb(255, 0, 0);
background-color: rgba(255, 0, 0, 0.5);
9. Cores em CSS3
• Um exemplo de sobreposição de três elementos com
uma transparência de 0.5 e cores vermelho, verde e azul
– Note que podemos desenhar elementos circulares!
10. O Modelo HSL
• O modelo HSL (Hue, Saturation, Luminance, ou em
português TSL – Tonalidade, Saturação, Luminância), que
se baseia nos trabalhos do pintor Albert H. Munsell (que
criou o Atlas de Munsell), é um modelo de representação
dito “natural”, ou seja, próximo da percepção fisiológica
da cor pelo olho humano
• Com efeito, o modelo RGB, apesar de adaptado para a
representação informática da cor ou a afixação nos
periféricos de saída, não permite selecionar facilmente
uma cor
12. O Modelo HSL
• O modelo HSL consiste em decompor a cor de acordo com critérios
fisiológicos :
– a tonalidade (em inglês Hue), correspondendo à percepção da cor (camiseta
roxa ou laranja)
– a saturação, descrevendo a pureza da cor, ou seja o seu carácter vivo ou
desbotado (camiseta nova ou debotada)
– a luminância, indicando a quantidade de luz da cor, ou seja o seu aspecto
claro ou sombrio (camiseta ao sol ou à sombra)
• Uma representação gráfica do modelo HSL, no qual a tonalidade é
representada por um círculo cromático e a luminância e a
saturação por dois eixos :
13. O Modelo HSL
• Em CSS3, a cor é especificada usando hsl(h, s, l):
– A tonalidade (h) é um valor entre 0 e 360 que mapeia o grau no
círculo de cores (0 é vermelho, 120 é verde, 240 é azul e 360
retorna ao vermelho)
– Saturação (s) é um percentual de cor, onde 0% é
completamente cinzento e 100% a cor completa
– Luminância (l) é um percentual, onde 0% é preto, 50% a cor
completa e 100% é branco
• Podemos especificar uma cor com ou sem o valor alfa, do
mesmo modo que rgb():
hsl(240, 100%, 50%);
hsla(240, 100%, 50%, 0.5);
16. Bordas Arredondadas
• Anteriormente, se quiséssemos bordas arredondadas,
existiam apenas poucas soluções não ótimas disponíveis:
– Poderíamos carregar quatro imagens, uma para cada canto, e
colocar algum código extra para alinhá-las (e tentar fazer
funcionar em todos os navegadores)
– Ou implementar algum tipo de hack usando múltiplas tags div
para “desenhar” um canto arredondado
– ..., no final nenhuma delas era uma solução ideal
• Mas por que tanto trabalho para fazer cantos
arredondados?
– Porque as pessoas são atraídos por eles e fazem o design
parecer mais natural
17. Bordas Arredondadas
• Bordas arredondadas são ridicularmente fáceis em CSS3,
usando a nova propriedade border-radius
• Se quisermos que todas os cantos possuam o mesmo raio
de borda, apenas dê um valor a ele:
border-radius: 0.5em;
• Se quisermos atribuir um raio diferente para cada borda,
também podemos fazê-lo, atribuindo valores a partir do
canto superior esquerdo e seguindo o sentido horário:
– superior-esquerdo, superior-direito, inferior-direito, inferior-
esquerdo
border-radius: 1px 4px 8px 12px;
18. Bordas Arredondadas
• Podemos atribui de um a quatro valores:
– Se dois valores são atribuídos, o primeiro é aplicado aos cantos
superior-esquerdo e inferior-direito, e o segundo aos cantos
superior-direito e inferior-esquerdo (cantos opostos)
– Se três valores são atribuídos, o segundo valor é aplicado aos
cantos superior-direito e inferior-esquerdo, o primeiro ao
superior-esquerdo e o terceiro ao canto inferior-direito
• Podemos também atribuir o valor do raio de cada canto
separadamente:
border-top-left-radius: 1px;
border-top-right-radius: 4px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 12px;
20. Sombras
• Adicionar sombra a elementos e texto é uma tarefa
simples em CSS3
• Utilize sombras para fazer com que elementos se
destaquem para dar uma aparência mais natural a sua
Interface
• Existem muitas opções para adicionar sombras, como seu
tamanho, posição e cor
• Sombras nem sempre estão atrás de elementos e de
texto, eles também podem ser uma moldura, destaque e
adicionar efeitos a eles
21. Sombras de Caixa
• Podemos adicionar sombras a elementos usando a nova
propriedade CSS3 box-shadow
box-shadow: h-offset v-offset blur-radius
spread-radius color;
• Parâmetros:
– h-offset: deslocamento horizontal da sombra, valores negativos
colocam a sombra à esquerda do elemento
– v-offset: deslocamento vertical da sombra, valores negativos
colocam a sombra acima do elemento
– blur-radius: quantidade de névoa/embaçamento da sombra –
quanto maior o número, mais embaçado (opcional)
– spread-radius: o tamanho da sombra, se zero, o mesmo tamanho
de blur (opcional)
– color: a cor da sombra (opcional)
– inset: adicione inserção para mudar a sombra de fora para dentro
(opcional)
23. Sombras de Texto
• CSS3 dá suporte a sombras de textos usando a
propriedade text-shadow
• Funciona de maneira praticamente idêntica a box-
shadow e usa quase todos os mesmos parâmetros:
text-shadow: h-offset v-offset blur-radius color;
• Assim como em box-shadow, podemos produzir alguns
efeitos interessantes:
24.
25. Ação – CSS3 Na Prática
• Iremos colocar efeitos na borda e sombras em nossa
aplicação de lista de tarefas
• Primeiro iremos centralizar a lista de tarefas na página,
então colocaremos uma borda em torno de cada tarefa
com cantos arredondados e uma sombra
26. <div id=“main”>
• Iremos mudar o estilo do elemento <div id=“main”>,
que contém o campo de texto para entrada do nome da
tarefa e a lista de tarefas
– Vamos dar a esta seção um tamanho mínimo de 9em e um
máximo de 25em – isto permitirá um layout reativo
– Iremos também atribuir 1em às nossas margens superior e
inferior, e deixar as margens esquerda e direita em auto para
centralizá-las na página
27. new-task-name
• Também vamos mudar o campo de entrada de texto do
nome da tarefa para que ocupe o tamanho de toda a
seção principal, atribuindo a propriedade width 98%:
28. task-list .task
• Iremos dar uma cor de fundo, cantos arredondados e
uma sombra aos item da lista de tarefas
– A sombra será preta com alguma transparência, de forma a
aparecer a cor de fundo
– Também iremos atribuir à propriedade position o valor
relative, assim poderemos colocar os botões de tarefa dentro
dele
29. task-list .task .tools
• Vamos adicionar uma borda em torno dos botões para
agrupá-los, e movê-los para o lado superior-direito do
elemento task, usando posicionamento absoluto
– Utilizando posicionamento absoluto, o elemento é posicionado
em relação ao elemento pai mais próximo, neste caso o
elemento task
30. Executando...
• Execute a aplicação e depois tente redimensionar a janela
do navegador para ver o que acontece
31.
32. Pano de Fundo
• Existem vários novos estilos para atribuir o estilo do pano de
fundo de elementos
– Podemos desenhar gradientes facilmente, sem usar imagens
– Podemos mudar o tamanho e origem das imagens de fundo
– Ou até mesmo usar múltiplas imagens como pano de fundo
• Gradientes desenham um pano de fundo para um elemento
que varia de uma cor para uma ou mais outras cores
– Eles dão maior profundidade à página e uma aparência mais natural
• Podemos especificar dois tipos de gradientes em CSS3:
– Linear: variam de uma cor para outra de uma maneira direta
– Radial: se espalham a partir de um ponto central de uma maneira
circular
33. Gradientes Lineares
• Gradientes lineares são definidos através do
especificador linear-gradient na propriedade
background
• Na forma mais simples, podemos especificar uma cor de
início e de fim, utilizando-se qualquer dos especificadores
de cor, que será desenhado um gradiente de cima para
baixo do elemento
• O exemplo a seguir varia de vermelho para azul:
background: linear-gradient(#FF0000, #0000FF);
• Embora praticamente todos os navegadores darem
suporte a gradientes, ainda precisamos usar prefixos
específicos para cada navegador para que eles funcionem
– Isto significa especificar pelo menos quatro vezes para alcançar
a maioria dos navegadores
34. Gradientes Lineares
• Se lembre de sempre especificar a versão não-proprietária
por último, assim ela irá sobrepor a versão específica do
navegador, quando disponível:
background: -webkit-linear-gradient(#FF0000, #0000FF);
background: -moz-linear-gradient(#FF0000, #0000FF);
background: -ms-linear-gradient(#FF0000, #0000FF);
background: linear-gradient(#FF0000, #0000FF);
• Se quisermos que o início do gradiente seja diferente do topo,
devemos especificar um primeiro parâmetro que pode ser
tanto o nome do lado de início quanto o grau de rotação
– Os lados são: top, bottom, left e right
– O grau pode variar de -360deg a 360deg ou em radianos de
-6.28rad a 6.28rad, 0 é o mesmo que left (esquerda)
– Um valor positivo indica sentido anti-horário
35. Gradientes Lineares
• Um gradiente da esquerda para a direita:
background: linear-gradient(left, #FF0000, #0000FF);
• Um gradiente com 45 graus, a partir do canto inferior
esquerdo:
background: linear-gradient(45deg, #FF0000, #0000FF);
• Podemos também adicionar mais de uma cor de parada
– Um gradiente com ângulo de 45 graus do vermelho para o azul
para o verde:
background: linear-gradient(45deg, #FF0000, #0000FF,
#00FF00);
36. Gradientes Radiais
• Gradientes radiais são quase idênticos a gradientes
lineares nos parâmetros que usam
• O padrão é desenhar o gradiente do centro para a borda
do elemento:
background: radial-gradient(#FF0000, #0000FF);
• Podemos especificar a posição usando uma das posições
pré-definidas ou um ponto a partir do canto superior
esquerdo para o centro do gradiente:
background: radial-gradient(top, #FF0000, #0000FF);
• Um gradiente com centro em 20 pixels a direita e 20
pixels para baixo:
background: radial-gradient(20px 20px, #FF0000,
#0000FF);
37. Gradientes Radiais
• Também podemos especificar mais de duas cores de
parada para gradientes radiais
• Um gradiente com centro em 20px, 20px do vermelho,
para o azul, para o verde:
background: radial-gradient(20px 20px, #FF0000,
#0000FF, #00FF00);
38. Gradientes
• Se você quiser criar o seu próprio gradiente...
– http://www.colorzilla.com/gradient-editor/
39. Imagens de Pano de Fundo
• Podemos atribuir o tamanho de uma imagem de um
pano de fundo para uma quantidade fixa de pontos
(pixels) ou um percentual da área do elemento
– A imagem será colocada em escala para caber na área
especificada
• A propriedade background-size recebe dois valores:
um tamanho horizontal e um tamanho vertical
• Se quisermos que uma imagem preencha todo o pano de
fundo de um elemento:
background-size: 100% 100%;
40. Imagens de Pano de Fundo
• Podemos especificar múltiplas imagens de pano de fundo
as separando com vírgulas
– A primeira imagem será desenhada no topo e a última embaixo
• Duas imagens de fundo:
background: url(bg-front.png),
url(bg-back.png);
41. Imagens de Pano de Fundo
• Existe uma nova propriedade background-origin que determina
onde a imagem será desenhada:
– content-box: desenha a imagem apenas na área de conteúdo de um
elemento
– padding-box: desenha a imagem na área de preenchimento de um
elemento
– border-box: desenha a imagem em todo o caminho até a borda de um
elemento
• Exemplo:
background-origin: content-box;
43. Sprites CSS
• Não é uma tecnologia nova do CSS3, mas devemos saber
como utilizá-la quando escrevemos aplicações HTML5
• Sprites CSS permitem que coloquemos todas as imagens
de uma aplicação em um único arquivo de imagens
– Então podemos dividir as imagens individuais em elementos
usando CSS
• Esta técnica diminui o tempo e recursos de rede para
baixar múltiplas imagens
– É especialmente útil se a aplicação possui muitas imagens
pequenas
• Para implementar sprites CSS, devemos colocar todas as
imagens em um único arquivo, chamado de folha de
sprites (sprite sheet)
44. Sprites CSS
• Para buscar uma imagem na planilha e colocá-la em um
elemento da página:
1. Faça com que o elemento tenha o mesmo tamanho da
imagem que queremos mostrar
2. Atribua a imagem de pano de fundo do elemento à imagem da
folha de sprites
3. Ajuste a posição do pano de fundo da folha de sprites de
maneira que a imagem que queremos ver esteja no canto
superior esquerdo do elemento
• Exemplo:
– Supondo que a folha de sprites possui 16 imagens e cada
imagem possui tamanho 10x10 pontos
– Primeiro, atribuímos ao tamanho do elemento (propriedades
width e height) o valor 10px
45. Sprites CSS
• Exemplo (cont.):
– Em seguida atribuímos à imagem do pano de fundo a folha de sprites
(sprite-sheet.png)
– Se pararmos agora, podemos apenas atribuir a primeira imagem ao
nosso elemento
– Mas se quisermos mostrar a sétima imagem, precisaremos atribuir à
posição do pano de fundo a folha de sprites em 20 pontos à esquerda
e 10 ponto acima
– Precisamos usar valores negativos para chegar à posição correta, uma
vez que estamos movendo a imagem e não o elemento
#seven
{
Width: 10px;
height: 10px;
background-image: url(sprite-sheet.png);
background-position: -20px -10px;
}
48. Ação – Adicionando Gradientes
• Primeiro, iremos adicionar um pano de fundo gradiente em nossa
aplicação de lista de tarefas:
– Iremos adicionar um gradiente linear ao elemento <div id=“app”>
– Ele irá iniciar com a cor de fundo anterior no topo e irá terminar com a cor
azul escuro na parte inferior
– Note que mantemos o pano de fundo na cor anterior para compatibilidade
com navegadores que não dão suporte a gradientes
50. Adicionando Imagens dos Botões
• Agora iremos utilizar sprites CSS para adicionar imagens
aos botões da nossa aplicação
• Precisamos de imagens para os botões de exclusão,
mover para cima e mover para baixo
• Como nossos botões terão tamanho de 16x16 pontos, as
imagens deverão possuir o mesmo tamanho
• Como temos três imagens, iremos criar uma folha de
sprites com 48 pontos de largura e 16 de altura
• Iremos colocá-las em um arquivo chamado icons.png
dentro da pasta images
51. Adicionando Imagens dos Botões
• Agora precisamos adicionar as imagens da folha de
sprites em nossos botões:
– Primeiro iremos alterar o estilo aplicado a todos os botões,
atribuindo 16x16 pontos ao tamanho e à imagem de pano de
fundo a nossa folha de sprites
– Desta maneira temos que especificar a folha de sprites apenas
uma vez e ela será aplicada a todos os botões
52. Adicionando Imagens dos Botões
• Agora que todos os botões utilizam icons.png como pano
de fundo, devemos apenas atribuir as posições do pano
de fundo para cada botão, para que se alinhem com a
imagem correta:
55. Transições
• Podemos melhorar ainda mais a nossa interface com
transições
• Transições CSS3 adicionam efeitos de animação aos
elementos quando os seus estilos mudarem
• Por exemplo, se mudarmos o tamanho de um elemento,
ele irá gradualmente mudar do tamanho pequeno para
um tamanho maior, fornecendo um feedback visual ao
usuário
• Quando as coisas mudam gradualmente, chamam mais
atenção que algo que apenas aparece repentinamente na
página
56. Transições
• A propriedade transition de CSS3 tem o seguinte formato:
transition: property duration timing-function delay
• Parâmetros:
– property: a propriedade CSS que deverá ser adicionada uma
transição, por exemplo, width ou color – utilize all para aplicar
transições a todas as propriedades
– duration: a quantidade de tempo que a transição irá durar, por
exemplo, 0.5s leva meio segundo para completar a transição
– timing-function: determina como será o progresso da transição
no tempo de duração
• linear: a mesma velocidade do início ao fim
• ease: inicia lenta, então acelera, e termina lenta
• ease-in: inicia lenta, então acelera
• ease-out: inicia rápida, então se torna lenta
• ease-in-out: combinação das duas
57. Transições
– timing-function (cont.):
• cubic-bezier(): se não quisermos utilizar uma função predefinida,
podemos criar a nossa própria
– delay: a quantidade de tempo a aguardar antes de iniciar a
transição
• A função cubic-bezier receber quatro parâmetros que
são número entre 0 e 1
– O exemplo a seguir produz o mesmo efeito que a função ease:
transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1);
• Se quiser explorar a construção de suas próprias funções
de tempo:
– http://cubic-bezier.com/
58. Transições
• Assim como gradientes, vários navegadores dão suporte
a transições, mas ainda devemos usar prefixos específicos
quando as declararmos:
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
59. Transições
• A maneira mais fácil de aplicar uma transição é em
combinação com um seletor CSS hover
• O código a seguir irá esvair a cor de fundo de um
elemento de branco para azul, em um quarto de
segundo, quando o usuário mover o mouse sobre ele:
#some-element
{
background-color: White;
transition: all 0.25s ease;
}
#some-element:hover
{
background-color: Blue;
}
60. Transformações
• Transformações CSS3 permitem efeito ainda mais sofisticados
• Existem transformações 2D e 3D disponíveis
– Iremos discutir apenas transformações 2D
• Forma básica da propriedade transform:
transform: function();
• Existem algumas poucas funções transform 2D diferentes
• A função translate() move um elemento da posição atual
para uma nova posição
– Ela recebe como parâmetros posições x e y
– Podemos usar valores negativos para mover para cima e para
esquerda
– A instrução a seguir move um elemento 10 pontos para a direita e 25
pontos para cima:
transform: translate(10px, -25px);
61. Transformações
• A função rotate() gira um elemento dada um valor
– O tamanho da rotação pode ser especificado em graus ou
radianos
– Use valores negativos para girar no sentido anti-horário
transform: rotate(45deg);
• A função scale() ajusta o tamanho de um elemento
com base em algum fator
– Ela recebe um ou dois parâmetros
– Se apenas um parâmetro for fornecido, usa como escala o valor
– Se dois parâmetros forem fornecidos, ela utilizará valores de
escalas horizontal e vertical separadamente
– O exemplo a seguir dobra o comprimento e diminui pela
metade a altura de um elemento
transform: scale(2, 0.5);
62. Transformações
• A função skew() distorce ou alonga um elemento
– Ela recebe dois parâmetros que são quantidades para girar os
eixos x e y
– Ângulos são especificados da mesma maneira que na função
rotate()
transform: skew(45deg, 10deg);
• Transformações requerem prefixos específicos para cada
navegador:
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
65. Ação – Efeitos
• Vamos adicionar alguns efeitos na lista de tarefas:
– Primeiro, iremos adicionar a habilidade de selecionar uma
tarefa na lista
– Quando a tarefa for clicada, ela irá aumentar em tamanho e ter
uma borda colorida, de maneira a nos mostrar facilmente que
está selecionada
– Iremos também adicionar o efeito de flutuação (hover) nas
tarefas, para que quando o usuário passar o mouse sobre a
mesma, os botões de ação apareçam; quando o mouse sair da
tarefa, os botões devem desaparecer
66. Modificando taskAtHand.js
• Devemos modificar o arquivo taskAtHand.js para
adicionar um manipulador de evento de clique para o
elemento task após a sua criação no método
addTaskElement():
$task.click(function() { onSelectTask($task); });
• Ela chamará o método onSelectTask() quando uma
tarefa é clicada
– Neste método iremos marcar um elemento task como
selecionado atribuindo-lhe uma classe de nome selected
– Iremos também remover a classe selected do elemento
previamente selecionado
68. #task-list .task.selected
• De volta ao arquivo taskAtHand.css, iremos adicionar
um estilo para uma tarefa selecionada
– Iremos aumentar o preenchimento (padding) de maneira a
tornar o elemento maior
– Adicionar uma borda para destacá-lo
– E modificar a cor de fundo
69. Adicionando Uma Transição
• Iremos adicionar uma transição através da propriedade
transition da classe .task
– Ela será do tipo ease e terá uma duração de um quarto de
segundo em qualquer mudança de propriedade
– Ela dará um bom retorno visual quando o usuário clicar em uma
tarefa
70. Adicionando Uma Transição
• Iremos adicionar mais uma transição – iremos esconder
os botões de ação até que o usuário mova o mouse sobre
uma tarefa ou a selecione
– Primeiro iremos atribuir 0 à propriedade opacity para
esconder o elemento que contém os botões de tarefa,
tornando-o transparente
– Então adicionamos as mesmas propriedades de transição como
fizemos anteriormente
72. Efeito de Flutuação (hover)
• Agora iremos adicionar um seletor hover para o
elemento de tarefa que atribui 1 à propriedade opacity,
para torná-lo visível
– Isto, em conjunto com a transição, fará com que os botões de
tarefa apareçam gradualmente quando o usuário passar o
mouse sobre uma tarefa
– Também devemos adicionar um seletor para que os botões
apareçam quando estiverem selecionados
• Antes de CSS3, poderíamos fazer isso utilizando os
métodos jQuery fadeIn() e fadeOut() em conjunto
com algum evento de mouse, mas necessitando
consideravelmente de mais código
76. Estilos Dinâmicos
• Iremos adicionar uma nova funcionalidade à nossa
aplicação: a capacidade do usuário escolher um esquema
de cores ou tema, para que ele possa customizar a
aparência da aplicação
• Podemos mudar a aparência de páginas Web carregando
dinamicamente arquivos CSS, sobrepondo estilos
existentes na folha de estilos padrão
• Para fazer isso, iremos adicionar uma lista drop-down de
temas para que o usuário possa escolher – quando ele
mudar o tema, a folha de estilos será mudada e
consequentemente as cores da página
77.
78. Adicionando Um Seletor de Tema
• Vamos adicionar uma barra de tarefas à aplicação de lista
de tarefas no arquivo taskAtHand.html:
– Iremos colocá-la entre os elementos <header> e <div
id=“main”>
– A barra de tarefas irá conter um <label> e uma lista de seleção
<select>
– A lista irá conter quatro tipos diferentes de temas: blue, green,
magenta e red
80. Estilo da Barra de Tarefas
• Iremos tornar a fonte um pouco menor que a do resto da
página, e o pano de fundo preto com alguma
transparência:
81. Implementando os Temas
• Vamos criar alguns arquivos CSS, um para cada tema
– Iremos colocá-los em uma pasta chamada themes a fim de
mantê-los agrupados
– Os arquivos CSS deverão ter os mesmos nomes dos valores de
<option>: blue.css, green.css, magenta.css e red.css
• Código de green.css:
82. Implementando os Temas
• Primeiro, sobrepomos os gradientes de pano de fundo
para o elemento app (verde em vez de azul)
• Mudamos também os elementos header e footer,
também para torná-los verde
• Os outros arquivos CSS serão exatamente iguais, exceto
por possuírem cores diferentes
86. Editando o Arquivo HTML
• Devemos adicionar um elemento <link> ao elemento
<header> do arquivo HTML para o arquivo de tema CSS
• Uma vez que o tema padrão é o azul, iremos carregar o
blue.css:
– Note que incluímos a folha de estilos de tema logo abaixo do
tema base
– Note também que demos ao elemento <link> um atributo id,
para que possamos usá-lo no JavaScript posteriormente
87. Editando o Arquivo JavaScript
• Primeiro iremos adicionar um manipulador de evento de
mudança ao seletor de temas no método
TaskAtHand.start():
$("#theme").change(onChangeTheme);
• Quando o usuário escolher um novo tema, o método
privado onChangeTheme() será chamado:
88. onChangeTheme()
• Este método captura a opção selecionada na lista
buscando por elementos <option>, então utiliza o
seletor jQuery :selected dentro de filter() para
encontrar a opção selecionada
• Então chama o método setTheme(), que será
implementado a seguir
• Finalmente, salva o tema selecionado no localStorage,
de maneira que possamos atribuí-lo da próxima vez que o
usuário retornar à aplicação
89. setTheme()
• O método setTheme() recebe o nome do tema como
parâmetro
• Então captura o elemento <link id=“theme-style”>
e muda o seu atributo href para a nova URL da folha de
estilos
• Quando isto acontecer, a página irá carregar a nova folha
de estilos e aplicar os seus estilos sobre os existentes,
fazendo com que a página mude de cor
90. loadTheme()
• Precisamos agora carregar o tema quando o usuário
retornar à aplicação
• Iremos criar o método loadTheme() para fazer isso:
– O método carrega o nome do tema do localStorage
– Se encontrar algum, chama setTheme() para atribuí-lo
– Então seleciona o tema na lista drop-down encontrando o
<option> na lista que tem como valor o nome do tema e atribui
selected a ele
94. Ocupando a Janela
• Iremos fazer uma última alteração no estilo de nossa
aplicação de lista de tarefas – ocupar todo o espaço da
tela
• Do modo atual, se a lista cresce, o gradiente de pano de
fundo cresce e o rodapé se move para baixo
• Seria melhor se o gradiente cobrisse toda a tela e o
rodapé sempre permanecesse embaixo
95.
96. Expandindo a Aplicação
• Podemos preencher a janela do navegador utilizando
posicionamento absoluto
• Vamos adicionar o código a seguir no elemento <div
id=“app”>:
97. Expandindo a Aplicação
• Primeiro, atribuímos ao elemento posicionamento
absoluto, para que possamos posicionar o elemento no
local que quisermos na tela
• Em seguida atribuímos 0 a todos as propriedades
position
– Isto faz com que o elemento ocupe todo o espaço da janela
• Finalmente, atribuímos auto à propriedade overflow
– Isto fará com que a barra de rolagem apareça e o gradiente se
expanda abaixo da janela se a lista de tarefas for além da altura
da janela
98. Expandindo a Aplicação
• Também precisamos reposicionar o rodapé para que
fique no final da janela
• Podemos fazer da mesma maneira, atribuindo absolute
à propriedade position e 0 a bottom
• Note que não atribuímos 0 a right, assim o rodapé não irá
se expandir por toda a largura, de outro modo poderia
interferir na lista de tarefas:
100. UNIVERSIDADE ESTADUAL DO SUDOESTE DA BAHIA
CURSO DE CIÊNCIA DA COMPUTAÇÃO
DESENVOLVIMENTO DE SISTEMAS WEB – 2015.2
Fábio M. Pereira
(fabio.mpereira@uesb.edu.br)