web Design | TRANSIÇÕES E ANIMAÇÕES

by primeiro design

000000003

Durante muito tempo o CSS só serviu para pintar quadradinhos e mais nada. Desde quando o pessoal do WaSP organizou todo o movimento dos Padrões Web fazendo com que todos os desenvolvedores, fabricantes de browsers e até mesmo o W3C acreditassem no poder dos padrões não houve grandes atualizações no CSS. Praticamente formatávamos font, background, cor, tamanhos e medidas de distância e posição.

O básico: propriedade transition
A propriedade transition é praticamente auto-explicativa. Sua sintaxe tão simples que talvez até dispense explicações mais elaboradas. Vamos começar com o código abaixo:

a {
color: white;
background: gray;
}
No código definimos que o link terá sua cor de texto igual a preta e seu background será cinza.

O resultado esperado é que ao passar o mouse no link a cor do texto seja modificada, mudando do branco para o preto e que a cor de background mude de cinza para vermelho. O código abaixo faz exatamente isso:

a {
color: white;
background: gray;
}
a:hover {
color: black;
background: red;
}

O problema é que a transição é muito brusca. O browser apenas modifica as características entre os dois blocos e pronto. Não há nenhuma transição suave entre os dois estados.
Podemos fazer a mudança de um estado para outro utilizando a propriedade transition. Suponha que ao passar o mouse, as mudanças acontecessem em um intervalo de meio segundo. Bastaria colocar a propriedade transition no a:hover e pronto. Ao passar o mouse, o browser modificaria as características do link com uma pequena transição de meio segundo. O código seria como se segue abaixo:

a:hover {
color: black;
background: red;
-webkit-transition: 0.5s;
}

Dessa forma a transição apenas acontece quando o hover é ativado. O problema é que ao tirar o mouse, o browser volta bruscamente para as características iniciais. Para modificar isso basta inserir também a propriedade transition no estado inicial.

a {
color: white;
background: gray;
-webkit-transition: 0.5s;
}
a:hover {
color: black;
background: red;
-webkit-transition: 0.5s;
}

O que a propriedade transition faz é comparar os valores das propriedades em comum entre os dois estados do link ou de qualquer outro elemento, assim ela modifica suavemente os valores quando há a ativação da função. Esta é uma técnica simples e que serve para manipularmos transições básicas como cor, tamanho, posição etc.
Agora suponha que em um bloco há uma determinada propriedade que no outro bloco não há, como no código abaixo:

a {
border:1px solid orange;
color: white;
background: gray;
-webkit-transition: 0.5s;
}
a:hover {
color: black;
background: red;
-webkit-transition: 0.5s;
}

Nesse caso o browser detecta que há uma propriedade no primeiro estado, mas não no segundo, por isso ele não faz a transição desta propriedade, apenas das propriedades em comuns.
Abaixo veja o código. copie em um arquivo HTML e veja o efeito:

<!DOCTYPE html>
<html lang=”pt-br”>
<head>
<meta charset=”utf-8”>
<title>CSS Transition</title>
<style type=”text/css” media=”screen”>
a {
color:white;
background:gray;
-webkit-transition: 0.5s linear;
}
a:hover {
color:black;
background:red;
-webkit-transition: 0.5s linear;
}
</style>
</head>
<body>
<a href=”#”>Link! Hello World!</a>
</body>
</html>

Republished by Blog Post Promoter

O que é o flat design?

by primeiro design

Este novo conceito do design visa a simplicidade e a limpeza de Layouts e elementos, levando a um entendimento mais fácil e mais simples para quem está vendo, deixando de lado relevo, 3D, quantidade grande de cores em um so elemento, gradientes e etc.Ele o estilo flat defende a ideia de que não é necessario mostrar um elemento de forma total para fazer com que as pessoas o entendam e associem a algo material.

exemplo: por que usar uma imagem de uma cadeira quando apenas a silhueta ou o contorno de uma ja deixa a entender do que estamos falando?

A simplicidade e facilidade de entendimento dos elementos facilita ao usuario a assimilar a informação de modo que fica mais simples entender aonde começar e a onde terminar de ver um layout, e esse conceito se aplica a qualquer tipo de mídia sendo digital ou impressa (o flat design tem sido mais utilizado em web sites, porem, é cada vez mais comum se encontrar material impresso com esse estilo)

Os elementos

São em sua maioria bem geométricas como quadrados ou retangulos, quando usado em elementos gráficos que simbolizam objetos reais, a simplicidade permanece ja que o objeto real não é mostrado e sim lembrado com uma imagem simples que remete a ideia do objeto em questão.

Cores

O conceito do flat design tambem se aplica no uso das cores, cores muito mais vivas são implementadas de modo a conseguir uma atenção maior para o elemento em que é aplicado, ja que no flat raramente se usam texturas ou degradês.

Tipografia

A tipografia tambem é muito importante na aplicação do conceito do flat, se a ideia é utilizar elementos visuais simples e cores sem degradês ou texturas, não é recomendado o uso de tipografias muito desenhadas, o ideal é manter a tipografia no mesmo contexto que o resto do projeto.

veja alguns exemplos de aplicação do flat Design:

 

Republished by Blog Post Promoter

GRID? PRA QUE SERVE ISSO?

by primeiro design

Sabemos que a arte da diagramação é, no geral, quase matemática. Não se diagrama uma página dispondo os elementos de forma aleatória. Em uma estante, as prateleiras ajudam a separar os livros, para que eles não pareçam amontoados e tenham um mínimo de harmonia visual. Do mesmo modo, se é preciso organizar as informações e as imagens em um determinado espaço é necessário ter parâmetros e referências para essa organização.

Na editoração eletrônica, ou diagramação, quando vamos organizar os elementos em uma ou várias páginas, utilizamos o grid, a “prateleira” do nosso trabalho. Ele é dividido em linhas e colunas que irão servir de referência para a utilização do espaço de forma a facilitar o trabalho de diagramação e possibilitar combinações e composições de elementos, deixando cada página organizada e mantendo a unidade visual do projeto gráfico.

Primeiro: O grid não é um monstro. Segundo: ele é seu amigo! Você sabia que definir um grid te ajuda a não cair nas garras da página em branco? Agora que vocês já foram apresentados é preciso te ensinar mais uma coisa. O grid não é seu chefe. Ele é seu assistente. Ele vai estar lá quando você tiver dúvidas sobre onde colocar uma imagem, sobre como distribuir os blocos de texto. Ele é flexível! Ele não diz: “olha, amigo diagramador, você só pode colocar imagens nesse espaço aqui, viu?”, ele apenas te sugere: “é melhor você não colar esse texto naquele, porque vai ficar ilegível. As pessoas precisam de áreas de descanso, porque os olhos entendem muita informação colada como se fosse um monte de lixo.”.

 

Ou seja, o grid vai te mostrar as milhares de possibilidades e combinações possíveis de composição de uma página sem que o seu livro, revista, folder ou outro produto pareça um Frankenstein. É como os filhos de uma mesma família: Você reconhece que eles são irmãos, que têm o mesmo material genético, mas cada página pode ter a sua personalidade, o seu caráter, a sua roupa e seus atributos físicos.

 

Devemos entender o grid, portanto, não como limitação, mas como um guia. Um prédio pode ter vários andares, mas a cobertura é sempre diferenciada, os andares inferiores podem ter varandas… Ainda assim, cada morador mobilia e decora seu apartamento de acordo com o seu bom (ou mau) gosto. Se o grid te oferece a estrutura de uma organização funcional é a sua criatividade o que vai tornar cada bloco de informações interessante e atrativo.

Republished by Blog Post Promoter