Aula de Desenvolvimento de Sistemas Web - CSS3

UNIVERSIDADE ESTADUAL DO SUDOESTE DA BAHIA CURSO DE CIÊNCIA DA COMPUTAÇÃO

DESENVOLVIMENTO DE SISTEMAS WEB – 2014.1

Fábio M. Pereira

([email protected])

“Em questões de estilo, nade com a correnteza; em questões de princípios, se mantenha firme como uma

rocha” Thomas Jefferson

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

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

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

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

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!

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

O Atlas de Munsell

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 :

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

O Modelo HSL

Escolha a Sua Cor...

http://hslpicker.com

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

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;

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;

Bordas Arredondadas

• Exemplos:

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

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)

Sombras de Caixa

• Exemplos:

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:

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 baixa em torno de cada tarefa com cantos arredondados e uma sombra

<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

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%:

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

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

Executando...

• Execute a aplicação e depois tente redimensionar a janela do navegador para ver o que acontece

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

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

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

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

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

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

Gradientes

• Se você quiser criar o seu próprio gradiente...

– http://www.colorzilla.com/gradient-editor/

http://www.colorzilla.com/gradient-editor/




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


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


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


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)

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

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;

}

Sprites CSS

• O resultado:

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

Resultado...

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


• 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


• 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:

Executando a Aplicação...

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

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

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/

http://cubic-bezier.com/




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;

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;

}

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

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

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

Transformações

• Exemplos:

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

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

Modificando taskAtHand.js

#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

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

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

#task-list .task .tools

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

Efeito de Flutuação (hover)


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

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

Adicionando Um Seletor de Tema

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:

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:

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

blue.css

magenta.css

red.css

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

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:

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

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

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

start()

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


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

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”>:


• 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


• 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:


UNIVERSIDADE ESTADUAL DO SUDOESTE DA BAHIA CURSO DE CIÊNCIA DA COMPUTAÇÃO

DESENVOLVIMENTO DE SISTEMAS WEB – 2014.1

Fábio M. Pereira

([email protected])

Education

Aula de Desenvolvimento de Sistemas Web - CSS3