Série PHP: Trabalhando com data e hora

Seu aplicativo precisa de informações de data e horário? Precisa de funções que façam operações com o calendário e o registro do tempo?

Sem problemas! O PHP oferece os recursos necessários para aplicações desse tipo através dos elementos Date (data) e Time (tempo). Você pode os métodos relacionados para, por exemplo, exibir a a data e hora corrente em diversos formatos, registrar exatamente quando o usuário fez login no sistema, quando uma compra foi efetuada, quantos dias faltam para o lançamento de um novo produto, quantos dias se passaram desde tal evento até o momento etc.

São muitos recursos e nós vamos ver aqui os principais.

Exibição prática de data

Em uma página em php, escreva o código seguinte para exibir a data atual:

<?php

   $hoje = date('Y/m/d');

   echo $hoje;

?>

O aplicativo irá exibir exatamente a data atual fornecida pelo servidor.

No caso acima, abrimos e fechamos o código com as tags da linguagem php; criamos a variável $hoje e para seu valor, atribuímos o método que chama a data (date) configurada para o ano (Y), o mês (m) e o dia corrente (d). Depois, publicamos (echo) a variável, que então exibirá a data de hoje, no caso aqui, mostrando:

2015/09/29

Veja que os parâmetros (ano, dia e mês) foram separados por uma barra, conforme é o nosso padrão. De outra forma, você poderia usar espaço, vírgulas ou traço para fazer essa separação.

date('Y m d') = 2015 09 29

date('Y, m, d') = 2015, 09, 29

date('Y-m-d') = 2015-09-29

Se não usar separador, os dígitos aparecerão juntos:

date('Ymd') = 20150929

Vemos que o dia foi representado pela letra d, o mês pela letra m e o ano pela letra Y. Essas descrições são estabelecidas pelo sistema, mas há outras descrições possíveis, por exemplo, chamar o mês pelo nome (setembro), em vez do numeral (09); descrever o dia da semana (terça-feira). É possível! Basta apenas usar o caractere referente ao parâmetro.

Veja a seguir, uma tabela com os formatos para datas:

Dia (day)

d - dia com preenchimento de zero = 01, 02... 10... 31

j - dia sem preenchimento de zero  = 1, 2, 3... 20... 31

D - dia textual abreviado = Seg, ter... dom

l (L minúsculo) - dia textual = Segunda-feira... Sábado, Domingo

Mês (Month)

m - mês com preenchimento de zero = 01... 05... 11, 12

n - mês sem preenchimento de zero = 1, 2... 10, 11, 12

M - mês textual abreviado = Jan, Fev... Nov, Dez

F - mês textual = Janeiro... Junho... Dezembro

Ano (Year)

Y - ano completo = 1975... 1999, 2000... 2012... 2015

y - ano abreviado = 12 (2012)... 15 (2015)...

Vamos a um novo exemplo:

<?php

   $hoje = date('l, d, M, Y');

   echo 'Hoje é ' . $hoje;

?>

Fizemos o seguinte: declaramos a variável $hoje com o valor da função que puxa a data (date) pelos parâmetros do dia textual (l) mais o mês textual abreviadol (M) e o ano completo (Y); depois exibimos uma linha de texto ('Hoje é ') concatenado (.) com o valor da variável $hoje.

O meu resultado foi:

Hoje é Terça-feira, 29, Set, 2015

Exibição prática da hora

Para exibir a hora certa, basta acrescentar os parâmetros adequados na declaração da função da data (date), no caso, H para hora, i para minutos e  $ para segundos. Veja:

<?php

   $tempo = date('d/M/Y, H:i:s');

   echo $tempo;

?>

O que veremos é algo do tipo:

29/Set/2015, 15:51:04

Salvando data no Banco de Dados (formato internacional)

ATENÇÃO: o formato correto para salvar data em um banco de dados é conforme o padrão internacional (formato americano), cuja ordem é inversa da que usamos no Brasil. Enquanto usamos a sequência dia, mês e ano, o padrão internacional usado para salvar o registro de hora em um BD é year, month, day, ou seja, ano, mês e dia.

Inclusive, esse sistema é -- devemos reconhecer -- é mais inteligente que o nosso, pois faculta literal e corretamente uma ordem crescente e decrescente. Por exemplo, se você pegar os valores literais das datas 3 de julho de 2025 e 29 de junho de 2010, literalmente, você compreenderá que a segunda data tem um valor maior e, numa ordem crescente, posterior que a primeira data fictícia, pois, já pelo valor do dia (3 e 29), teríamos um desajuste na ordem, uma vez que o dia 3 é menor que 29, embora pelo valor do ano respectivo de cada qual seria o contrário (2025 é maior que 2010). Já no padrão internacional, isso nunca ocorre, pois a ordem começa pelo ano, depois pelo mês e por último o dia.

Então, se você precisa salvar uma data escrita no nosso formato num BD, será preciso converter para o padrão internacional (de dia/mês/ano para yearr/month/day). Mas, sem problemas! Basta usar o código conversor adiante:

$hoje = 29/09/2015;

$convert = implode("-", array_reverse(explode("/", $hoje)));

Então o BD receberá a data convertida pronta para ser salva como: 2015-09-29

Por outro lado, se a data está salva no BD (no padrão internacional: ano, mês, dia), e você precisa mostrá-la no nosso padrão (de yearr/month/day para dia/mês/ano), use o código a seguir:

$bd = xxxx/xx/xx // variável com o registro do BD

$convert = implode("/", array_reverse(explode("-", $data)));

echo $convert;

Então o resultado será: 29/09/2015

Configurando a localidade

Bem, mas o servidor do seu site pode estar configurado com os dados de outra localidade, dando diferença na hora certa de sua cidade. Nesse caso, será preciso configurar a zona do tempo.

Então, usamos o date_default_timezone_set:

<?php

   date_default_timezone_set('America/Sao_Paulo');

   $tempo = date('d/M/Y, H:i:s');

   echo $tempo;

?>

A hora será exibida pelo local estabelecido (no caso aqui, definimos o horário da cidade de São Paulo).

Ah, outra coisa, talvez a descrição textual do dia semana e do mês também não esteja de acordo com o nosso português, sendo então impresso as datas em inglês (Monday, Sunday, January, September etc.).

Bom, só para garantir, você pode fazer um truquezinho para converter os valores dos parâmetros e assim traduzir as descrições.

Eis um exemplo:

<?php

    $data = date('D');

    $mes = date('M');

    $dia = date('d');

    $ano = date('Y');

    

    $semana = array(

        'Sun' => 'Domingo', 

        'Mon' => 'Segunda-feira',

        'Tue' => 'Terça-feira',

        'Wed' => 'Quarta-feira',

        'Thu' => 'Quinta-feira',

        'Fri' => 'Sexta-feira',

        'Sat' => 'Sábado'

    );

    

    $mes_textual = array(

        'Jan' => 'Janeiro',

        'Feb' => 'Fevereiro',

        'Mar' => 'Março',

        'Apr' => 'Abril',

        'May' => 'Maio',

        'Jun' => 'Junho',

        'Jul' => 'Julho',

        'Aug' => 'Agosto',

        'Nov' => 'Novembro',

        'Sep' => 'Setembro',

        'Oct' => 'Outubro',

        'Dec' => 'Dezembro'

    );

    

    echo $semana["$data"] . ", {$dia} de " . $mes_textual["$mes"] . " de {$ano}";

?>

O resultado será:

Terça-feira, 29 de Setembro de 2015

O que fizemos dessa vez foi separar os parâmetros do dia, mês e ano, declarando-os em variáveis diferentes.

Para a descrição textual da semana, criamos a variável $semana com uma tabela de valores (array) que verte a abreviação dos dias da semana em inglês para português. Quando então essa variável é chamada, ela pega o valor do dia atual contido na variável $data e traduz para o valor correspondente.

Semelhante ao truque da descrição textual do dia da semana, fizemos com a descrição textual do mês, que configuramos pela array declarada na variável $mes_textual.

Mais especificações, consulte o manual online do PHP clicando aqui.

Google Web Designer é o estúdio gráfico da vez!

O Google lançou em junho deste ano o seu estúdio gráfico Google Web Designer, com o qual você cria animações interativas para web, por exemplo, para anúncios ou infográficos para sites, ou mesmo uma web propriamente dita. É, digamos, a aposta da empresa para a substituição dos memoráveis filmezinhos rodados em Flash Player.

O software é gratuito, porém ainda é anunciado como programa beta, ou seja, em fase de testes.

Visite o site oficial do Google Web Designer.

Basicamente o estúdio trabalha assim: você cria uma peça  visual e dá vida a ela através de recursos como animação e interação.

A animação se dá com a montagem de frames (quadros) em uma timeline (linha do tempo), que pode ser executado linearmente (por exemplo, seguidamente do primeiro quadro até o último) ou com interações (por exemplo, com um clique ou simplesmente se o mouse for rolado sobre o objeto) que movam a reprodução do filme para um quadro determinado.

O estúdio permite o uso de camadas, o que viabiliza animações mais dinâmicas ainda. Por exemplo, você usa uma camada para o background e sobre ela você usa uma nova camada para um objeto especial que receberá animações ou funções específicas, como uma caixa de texto, um botão, figuras recortadas etc. Controlando as camadas isoladamente, você pode fazer coisas muito interessantes.

Veja um projeto modelo clicando aqui.

O Google Web Designer já vem com vários samples (modelos) que você pode editar para ajustar aos seus projetos ou mesmo para ajudar no aprendizado das funcionalidades que o estúdio oferece. No final, basta exportar o arquivo e tudo fica prontinho para ser publicado na internet.

Vale a pena dar uma conferida.

Aprenda como usar as fontes do Google em seu site

Melhore seu site adicionando fontes diferentes e elegantes. Para tanto, o Google tem um servidor exclusivo para esse serviço e te oferece inúmeras opções gratuitamente.

Algumas palavras sobre tipografia

Fonte é um modelo de tipografia, ou seja, de desenho dos caracteres (letras, números e símbolos). Quando usamos um programa de texto, este precisa nos oferecer uma tabela de caracteres para que possamos escrever algo.

Alguns softwares oferecem várias fontes e permitem que o usuário escolha a que deseja usar.

Os navegadores de internet também dispõem desse recurso. No Google Chrome, por exemplo, você vai nas Configurações Avançadas e no item Conteúdo da Web você pode escolher a fonte padrão para os textos das páginas que visitar. Nesse caso, o browser vai puxar as fontes disponíveis no dispositivo (no seu computador, por exemplo) para que você selecione uma. Então, todos os textos dos sites vai ser exibidos pelo modelo tipográfico que for selecionado no navegador — desde que o desenvolvedor não tenha estilizado a tipografia do seu site.

Então, o ideal sempre é estabelecer uma fonte padrão para o seu site e — por que não? — usar mesmo várias fontes, um modelo para cada classe (título, subtítulo, parágrafo, links, texto em destaque etc.).

Estilizando fontes no seu site

Bom, então você tem na sua máquina uma bela fonte e está certo de que ela cairia muito bem no seu site. O problema é que, se os usuários que acessarem a página não tiverem o mesmo arquivo dessa fonte, o browser vai redirecionar a tabela para outro modelo — muitas vezes, com tamanho diferente, ou com ausência de caracteres especiais (letras acentuadas, por exemplo), o que pode prejudicar o layout do site.

Para não correr o risco de sua página ser deformada com o uso de fontes indesejadas, a solução é usar tabelas de fontes online. Então, quando o site é aberto, ele puxa a fonte do servidor e carregada os textos perfeitamente, como você estilizou.

O servidor Google Fonts

A dica atual é o servidor Google Fonts, que contém muitos modelos de fontes, prontas para serem usadas livremente.

Não é preciso fazer nenhum cadastro, nem download de arquivo, nada disso. Para usar as fontes do Google você só precisa seguir os seguintes passos:

1. Escolha uma fonte: navegue pelo site e veja quantas e belas opções você tem lá. Para exemplificação, vamos pegar a fonte Lobster.
   
   
   
   
   
2. Abra a guia de códigos: clique no botão Quick-Use para ir abrir uma nova página, de onde vamos pegar os códigos.
   
   
   
   
3. Copie os códigos: na página que se abre você verá no item 1 o estilo selecionado (no nosso exemplo, Lobster - Normal), no item 2, configurado na categoria de fontes para Latin, no item 3 temos o link da fonte a ser posto no seu site, pois esse endereço vai dizer aos navegadores que acessarem sua página, que vá no servidor Google Fonts e carregue esse arquivo de fonte para então usar no conteúdo a ser aberto no browser. Portanto, você copia essa linha e cola no cabeçalho (head) da sua página:
   <link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
   
   
4. Usando o arquivo de fonte carregado: agora, basta estilizar onde você vai usar a fonte lincada. Você pode definir que todo o site use essa fonte como padrão escrevendo assim no seu CSS:
   body {font-family: 'Lobster', cursive;}
   
   
5. Estilizando uma classe: se preferir, pode aplicar a fonte apenas a uma classe específica. Por exemplo:
   
   .textoEspecial {font-family: 'Lobster', cursive;}
   
   Daí então é só usar a classe no conteúdo do seu site, por exemplo, configurando um título assim:
   
   <h2 class="textoEspecial">Usando uma fonte do Google</h2>
   
   O resultado será esse:

Usando fontes do Google

Gostou? Beleza, não é?

Bom, então agora é só visitar o servidor e escolher mais fontes para o seu site.

Para uma melhor visualização dos estilos, você pode abrir o mapa de caracteres de cada modelo clicando no botão Pop out:

E para facilitar sua busca por um modelo mais apropriado ao seu site, navegue pelo menu lateral esquerdo do servidor.

Lá você tem a opção de definir alguns atributos que simplifica a procura, para você não ter que perder muito tempo visualizando todos os modelos.

A primeira coisa a ser observada é o tipo de script. Nosso tipo padrão é o Latin. Mas se estiver desenhando um site em grego, use o Greek.

A categoria Thickness diz respeito à espessura da fonte. Se gostar de letras finas e elegantes, mova o seletor para thin; se quiser fontes mais grossas e impactantes, opte por thick.

A categoria Slant se refere à inclinação, em que Straigth é o tipo aprumadinho e slanted é o tipo de fonte inclinada, como nos modelos handwrite (escrita de mão).

Por fim, a categoria Width classifica as fonte por tamanho, em que narrow se aplica a fontes menores e estreitas e wide se aplica aos tipos maiores e mais largos.

No mais, vale lembrar que uma forma de dar um destaque ainda mais sofisticado os textos (especialmente nos títulos e subtítulos) é acrescentar sombreamento (veja aqui).

Outra dica válida é que as cores dão um diferencial aos textos. Títulos, parágrafos e links ficam bem salientes quando você aplica matizes distantes de uma mesma tonalidade, por exemplo: azul celeste, azul petróleo e azul marinho.

Mas, cuidado, diferentes tipos de fontes usados ao mesmo tempo, com cores muito diferentes e fortes, podem poluir o visual do seu site. É sempre bom visitar sites do mesmo ramo de atividade para se ter uma ideia dos estilos empregados.

Text-shadow - estilizando sombras nos textos com CSS

Um efeito simples e ao mesmo tempo bem eficiente para sofisticar o site é o text-shadow, ou seja, texto com sombreamento, aplicável em CSS.

Vamos direto a um exemplo, para entendermos a sintaxe básica.
No CSS escrevemos assim: a classe .item vai ter cor da fonte branca (color: white) e um sombreamento com afastamento horizontal de 0.1em e afastamento vertical de 0.2em, na cor amarelo (yellow):

.item {
   color: white;

   text-shadow: 0.1em 0.2em yellow;

}

Daí, no corpo da página (body), usamos a classe num título:

<h2 class="item">Texto com sombreamento</h2>

O resultado será esse:

Texto com sombreamento

Você pode alterar o posicionamento como quiser, aumentando os valores das propriedades das coordenadas X (horizontal) e Y (vertical), além de alterar a cor. Por exemplo, você pode querer que a sombra fique à esquerda do texto. Nesse caso, o valor da coordenada X deve ser negativo. Vamos ver como fica? Mas, além disso, vamos acrescentar mais um valor numérico à sintaxe, nesse caso, especificando a densidade da sombra. Quando menor o valor, mais denso; quanto maior o valor, mais desfocado (o famoso efeito blur). Vejamos:
No CSS, estilizamos a classe .item2 com a cor da fonte alaranjada (#F90) e um sombreamento posicionado no eixo X em -0.1em (um pouquinho à esquerda), no eixo Y com 0.1em (um pouquinho abaixo), com um blur de 0.2em com sombra em tom azul (#00F):

.item2 {
   color: #F90;

   text-shadow: -0.1em 0.1em 0.2em #00F;

}

Em seguida, aplicamos a classe em um título (h2) no corpo da página:

<h2 class="item2">Sombreamento desfocado</h2>

O resultado será esse:

Sombreamento desfocado

O efeito text-shadow permite aplicar mais de um sombreamento num mesmo elemento, com isso nós podemos criar umas aplicações muito bacanas, por exemplo, criando a ilusão de alto relevo e baixo relevo.
O alto relevo pode ser feito assim:

Exemplo de baixo relevo

Para chegarmos ao resultado acima, precisamos estilizar a cor da fonte com o mesmo valor do fundo da página e criarmos então dois sombreamentos, sendo um mais escuro (para a parte superior) e um levemente mais claro (parte inferior do texto) em tons aproximados ao fundo da página. No nosso caso, (que usamos um fundo de avermelhado para vinho), os valores são esses:

.item3 {
   color: #311523;

   text-shadow: 1px 1px #50233A, -1px -1px black;

}

Note que agora nós usamos os valores em Pixel ao invés de EM, que usamos nos exemplos anteriores (Saiba mais sobre esses tipos de valores clicando aqui).
Veja que na linha do text-shadow, há dois sombreamentos configurados, separados por uma vírgula. No primeiro, o da parte inferior, tem valores positivos (1px tanto para o eixo X quanto para o Y) e uma cor clara (#50233A). Depois da vírgula vem o segundo, com valores negativos (-1px) na cor preta.
Daí, então, aplicamos a classe item3 em um título (h1, para ficar maior) no corpo da página:

<h1 class="item3">Sombreamento desfocado</h1>

Agora, vamos para o .item4, que terá a ilusão de um texto em alto relevo, criado pela dupla camada de sombreamento, dessa vez, invertendo os valores negativos e positivos do posicionamento dos eixos X e Y.
O código é esse:

.item4 {
   color: #311523;

   text-shadow: -1px -1px #50233A, 1px 1px black;

}

E o resultado será assim:

Ilusão de alto relevo

Quer mais?

Mantendo a fonte com a mesma cor do fundo da página (dando a ilusão de fonte transparente) e criando dois sombreamentos (a primeira para a parte inferior e à direita do texto; a segunda para a parte superior e à esquerda do texto) ambas de um cor só, nós criamos um modelo de fonte contornada. Veja o resultado:

Fonte apenas contornada

Para o exemplo acima, nós estilizamos da seguinte forma no CSS:

.item5 {
   color: #311523;

   text-shadow: -1px -1px white, 1px 1px white;

}

De maneira parecida, você pode usar o contorno sobre uma fonte colorida. Por exemplo, como no item abaixo:

Fonte colorida e contornada

Para o título assim, usamos o .item6 estilizado com uma fonte na cor azul e agora com quatro camadas de text-shadow, para dar uma espessura maior à sombra, que recebeu a cor laranja. Veja o código dessa classe:

.item6 {
   color: blue;

   text-shadow: -2px 0 orange,
                0 -2px orange,
                2px 0 orange,
                0 2px orange;

}

E tem mais!
Para finalizar, o .item7 vai ser estilizado assim:

.item7 {
   color: orange;

   text-shadow: 0 0 1em red;

}

Veja que nós colorimos a fonte em laranja e aplicamos uma só camada de sombreamento, na cor vermelha, sem distanciamento (nem no eixo X, nem no Y), aplicando um desfocamento de 1em.
Veja só como fica:

Texto brilhoso

Dê uma olhada também nesses modelos de sombreamento.
Bem, agora é com você. Use sua criatividade e deixe seu site mais sofisticado aplicando o efeito text-shadow em CSS. Ele fica bacana especialmente em títulos e subtítulos, além de textos quaisquer que precisem de um contraste em relação ao background da página.

Transition: transição suave com CSS3

Comece agora a usar uma das grandes novidades da versão 3 do padrão CSS: transition.

Antes, os eventos de foco eram abruptos; agora, eles são suavizados, criando uma transição entre dois estágios configurados.

Por exemplo, num primeiro momento, o texto de um link tem a cor vermelha e, está configurado para mudar para azul caso o mouse role sobre ele (evento :hover). No modo tradicional, a alteração da cor do texto é imediata. Com o CSS3 é possível fazer com que a cor transite suavemente de vermelho para azul. E não é só: o texto pode ganhar uma animação, aumentando ou diminuindo, girando, desaparecendo etc.

O elemento transition analisa as propriedades iniciais e as propriedades do segundo estágio e aplica uma transição conforme os valores que configurarmos (por exemplo, a duração da transição).

De fato, são quatro propriedades atualmente:

• Transition-property: propriedade sobre a qual será aplicada a transição, por exemplo, cor do texto, espessura da borda, posição do objeto (texto, imagem etc) e assim por diante E possível usar o valor all para configurar transição para todas as propriedades.
• Transition-duration: duração do efeito, contado em segundos.
• Transition-timing-function: permite configurar o ritmo do efeito, por exemplo, acelerado no início e andamento decrescente, acelerar no final do tempo. O andamento linear é o padrão. Essa propriedade igualmente permite criar efeitos de andamento extraordinários, fora de um padrão natural, chamada de curva de Bezier, por exemplo, fazer o objeto dar saltos no intercurso da transição Veja aqui alguns exemplos dessas funções.
• transition-delay: permite especificar um atraso em segundos para o começo do efeito a ser aplicado. O padrão é zero, ou seja, a transição começa imediatamente.

As duas primeiras são obrigatórias e as demais são declaradas opcionalmente.

A sintaxe de transição é escrita assim no CSS:

transition-property: propriedade;
transition-duration: valor;
transition-timing-function: valor;
transition-delay: valor;

Ou, de forma simplifica, numa só linha:

transition: propriedade duração função-de-andamento atraso;

Por exemplo:

.objeto {
   transition: width 2s linear 0;
}

No exemplo acima, aplicamos a transição a um objeto (pode ser uma div, um texto, uma imagem etc.) relativo à propriedade largura (width), cuja duração será de dois segundos, num andamento linear e sem atraso (0 delay). Nesse caso, como as duas últimas propriedades (timing-function e delay) têm os valores padrões, eles poderiam ser omitidos. O código simples ficaria assim:

.objeto {
   transition: width 2s;
}

Agora, para que a transição ocorra, seria preciso estilizar um evento :hover ou :foccus para o mesmo objeto, alterando a propriedade width desse objeto, para quando o usuário efetuar o ação (rolar o mouse sobre o objeto) se processe a transição.

Importante: veja aqui quais navegadores suportam a aplicação transition.

Vamos a um exemplo prático?

Em uma página qualquer de html, cria uma div e lhe atribua a classe box:

<div class="box"></div>

No css, estilize essa classe aplicando-lhe largura (width), altura (height), borda e cor de fundo com os seguintes valores:

.box {

   width: 100px;

   height: 100px;

   border: 5px solid red;

   background-color: black;

}

Em seguida, no mesmo CSS, vamos estilizar essa div para quando ela receber o foco (o mouse rolar sobre ela), duplicando a largura e a altura, alterando as cores da borda e do preenchimento da div:

.box:hover {

   width: 200px;

   height: 200px;

   border: 25px solid yellow;

   background-color: red;

}

Abra a página num navegador e verá que a transformação abrupta da div quando rolar o mouse sobre ela.

Mas então, vamos aplicar a transição, comecemos ativando as alterações na borda, estabelecendo um tempo de cinco segundos.

Acrescente a seguinte linha para a classe da box no CSS:

   -webkit-transition: border, 5s;

Rode a página agora e veja a transformação suave que ocorre com a borda mudando de cor (de preto para amarelo) e ficando mais grossa (de 5px para 25px).

No entanto, não há ainda transição para as alteração nos valores de altura e largura, nem para a cor do preenchimento da div. Então, vamos configurar esse efeito editando a linha acima para acrescentar as demais propriedades:

   -webkit-transition: border, 5s, width, width 3s, height 3s, background-color 10s;

Atualize a página no navegador, role o mouse sobre a div e veja o resultado. o quadrado cresce suavemente (de 100px para 200px), a borda engrossa e muda de cor e o preenchimento, num período de dez segundos, muda de azul para vermelho.

O código completo da html com o exemplo acima é esse:

<!DOCTYPE HTML>

<html>

  <head>

    <meta charset="utf-8">

    <title>Transitions em CSS3</title>

    <style>

      .box {

        border:5px solid black;

        width: 100px;

        height: 100px;

        background-color: blue;

        transition: width 3s, height 3s, border 5s, background-color 10s;

      }

      .box:hover {

         border:25px solid yellow;

         background-color: red;

         width: 200px;

         height: 200px;

       }

    </style>

  </head>

  <body>

     <div class="box"></div>

  </body>

</html>

Ah, vamos acrescentar mais umas coisinhas:

Primeiro, vamos replicar a instrução das transições acrescentando os prefixos necessários para os navegadores (-webkit para o Chrome e Safari, -moz para Mozila e -o para o Opera) e acrescentar o efeito de rotação da div. O código final é este:

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Transitions em CSS3</title>
    <style>
.box {
border:5px solid black;
width: 100px;
height: 100px;
background-color: blue;
-webkit-transition: all 3s;
  -moz-transition: all 3s;
                 -o-transition: all 3s;
          transition: all 3s;
}

.box:hover {
border:25px solid yellow;
background-color: red;
width: 200px;
height: 200px;
-webkit-transform: rotate(180deg);
               -moz-transform: rotate(180deg);
                 -o-transform: rotate(180deg);
                    transform: rotate(180deg);
}

    </style>

  </head>
  <body>
     <div class="box"></div>
  </body>
</html>

Veja abaixo como fica o nosso brinquedinho:

Mais especificações e exemplos de transitions nesse site.

Tamanho de fonte para sites: Pixel (px), porcentagem, EM ou REM — qual o melhor tipo?

Está iniciando sua carreira de desenvolvedor web e está procurando saber mais sobre tamanho de fontes, qual o melhor formato para estilizar o tamanho das letras no site? Então siga nossas dicas.

Padrão Pixel

O primeiro modelo padronizado — e talvez ainda o mais usado até hoje — é o do Pixel. Um pixel é o menor ponto de luz exibido na tela.

Imagine que uma imagem exibida no monitor é formada por uma tabela de milhares de pontos de luz (pixels), como num mosaico, numa tabela numerada na horizontal e na vertical.

Então você preenche essa tabela, pintando cada pixel (cada quadradinho da tabela) para criar a ilusão de uma imagem montada pelo contraste das cores. Logicamente, quanto maior a tabela, melhor será a definição da figura montada.
Quando a resolução é baixa, é possível notar a montagem. Daí se diz que a imagem ficou pixerizada.

Da mesma forma são formadas a imagem dos textos. A letra (fonte) é montada também em pixels.

O tamanho da fonte dos principais programas digitais são previamente configurados em pixels, inclusive os navegadores de internet. Se você abrir as configurações avançadas do Google Chrome (computadores), na guia Conteúdo da Web, verá que o tamanho da Fonte padrão é de 16px — ou seja, 16 pixels de altura.
Se, ao escrever uma página de internet, você não atribuir uma configuração diferente para o tamanho da fonte, o browser vai exibir o texto com a fonte padrão (16px). Por conseguinte, se o usuário alterar o tamanho da fonte padrão no navegador, então este modifica o tamanho da fonte das páginas sem pré-formatação. Essa mudança pode deformar o layout do site. Por isso, é importante sempre especificar o font-size, que, para tal, basta escrever o seguinte script:

body{
    font-size: 25px;
}

Padrão EM

Um padrão que ganha adeptos diariamente é o EM, baseado na porcentagem do tamanho da letra M normal (16px). Assim, 1em equivale a 16 pontinhos.
Funciona assim: você atribui um valor em pixel para a fonte padrão do site (por exemplo, 16px mesmo) e estiliza outras classes (título, subtítulo, parágrafo etc.) com tamanhos relativos.
Digamos que o parágrafo deva ter o tamanho padrão (16px), basta então atribuir 1em para ele — o que equivaleria a 100% do padrão.

.paragrafo{
    font-size: 1em;
}

Agora vamos pensar que queira criar uma classe para um título que deva ficar enorme, quem sabe o dobro do tamanho da fonte do parágrafo. Logo, 2 x 16px = 32px ou 2 x 1em = 2em — o que equivaleria a 200% do padrão.

.titulo{
    font-size: 2em;
}

E além dessas classes, vamos dizer que queira criar outra para subtítulo, que deva ser um pouco maior que o parágrafo e um pouco menor que o título, combinemos então 24px: então vamos calcular 24 ÷ 16 = 1.5em — o que equivaleria a 150% do padrão (lembre-se que na contagem em inglês, a vírgula é substituída pelo ponto para separar as frações).

.titulo{
    font-size: 1.5em;
}

Digamos ainda que queira formatar uma classe com um texto menor para legendas de fotos, equivalente a 12px. Assim, vamos calcular 12 ÷ 16 = 0.75em — o que equivaleria a 75% do padrão.

Dessa maneira então, você faz o cálculo e vai atribuindo as porcentagens nas classes do seu site.

Mas há alguma vantagem de usar EM ao invés de usar diretamente Pixel?

Sim!

É que se você formatar todas as classes em EM e depois o padrão for alterado (e os diversos tipos de dispositivos de navegação fazem isso), tudo vai se arranjar muito bem, porque as suas formatações estarão em acordo com a porcentagem do padrão e não com valores específicos.

E tem mais: caso queira você mesmo alterar o padrão, basta atribuir um valor a classe principal body, em porcentagem.

body{
    font-size: 120%;
}

No exemplo acima, atribuímos o tamanho da fonte para 120%, o que equivale a mais ou menos 19px, pois 120% de 16 é 19,2.

Padrão REM

A questão é que, a porcentagem de um elemento sempre fica sujeito ao cálculo do elemento onde está inserido — por exemplo, o parágrafo dentro da div pai. Assim, o cálculo das porcentagens segue uma hierarquia e não diretamente do padrão raiz da página, que é a body.

Para resolver isso, convencionou-se criar o padrão REM, em que R vem de root (raiz).

Portanto, a estilização uniforme fica assim:

body{
    font-size: 120%;
}
.paragrafo{
    font-size: 1rem;
}
.titulo{
    font-size: 2rem;
}
.subtitulo{
    font-size: 1.5rem;
}

Para prevenir que um dispositivo não possa compreender o padrão REM (e as versões antigas dos browsers não o reconhecem mesmo), por via das dúvidas, você pode atribuir um valor em Pixels antes de cada formatação em REM. Veja:

body{
    font-size: 100%;
}
.paragrafo{
    font-size: 16px;
    font-size: 1rem;
}
.titulo{
    font-size: 32px;
    font-size: 2rem;
}
.subtitulo{
    font-size: 24px;
    font-size: 1.5rem;
}

Agora é só gastar a criatividade nos scripts!