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

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

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

11. O Atlas de Munsell

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);

14. O Modelo HSL

15. Escolha a Sua Cor...
http://hslpicker.com

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;

19. Bordas Arredondadas
• Exemplos:

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)

22. Sombras de Caixa
• Exemplos:

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:

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

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;

42. Imagens de Pano de Fundo

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;
}

46. Sprites CSS
• O resultado:

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

49. Resultado...

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:

53. Executando a Aplicação...

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);

63. Transformações
• Exemplos:

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

67. Modificando taskAtHand.js

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

71. #task-list .task .tools

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

73. Efeito de Flutuação (hover)

74. Executando a Aplicação...

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

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

79. Adicionando Um Seletor de Tema

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

83. blue.css

84. magenta.css

85. red.css

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

91. start()
• Finalmente devemos chamar loadTheme() no método
start()

92. Executando a Aplicação...

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

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:

99. Executando a Aplicação...

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)