Archive

Posts Tagged ‘design’

Design Responsivo com o Flexbox


O CSS Flexible Box Layout Module, carinhosamente chamado de Flexbox permite um controle total no posicionamento dos elementos filho de um box vertical ou horizontal.

Além disso, podemos ainda controlar o seu espaçamento.

Logicamente que não é apenas isso, mas também podemos definir orientações para os elementos, alinhamento, etc.

Com certeza é uma mão na roda, e vale a pena realizar alguns testes para quem sabe facilitar o posicionamento dos elementos no seu design responsivo sem muita dor de cabeça.

Ele pode ser acessado neste link: http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/

Tem uma excelente documentação, exemplos e explicações.

O Flexbox ainda está em fase inicial, é um trabalho em andamento. Se você acessar o caniuse.com e buscar pelo Flexbox notará que com os prefixos do fabricante é possível utilizar o Flexbox.

Mas eu vou testar no meu próximo layout e você?

Divirta-se e inspire-se.

Categorias:CSS, WEB Design Tags:,

Design Responsivo em 3 passos

janeiro 30, 2012 1 comentário

Muitos me perguntam: por onde eu começo para aprender as técnicas e o uso do design responsivo?

Pois comece por algo simples, fácil e útil como este EXEMPLO.

Notou? Simples e útil. As 3 etapas para fazer este layout de exemplo são:

1) Uso das meta tags
2) Aprendendo a estrutura do HTML
3) Media Queries ( aqui está o grande segredo )

Acesse o tutorial no link abaixo e comece agora mesmo, afinal você nao quer ficar para trás com tantos tablets por aí não é?

TUTORIAL – DESIGN RESPONSIVO EM 3 ETAPAS

Divirta-se e inspire-se.

 

Categorias:Tutoriais, WEB Design Tags:

Design Responsivo – Tabelas – Tutoriais e Exemplos

julho 28, 2011 2 comentários

Identifique abaixo qual das 2 tabelas adaptadas para o IPhone está errada:

Acertou quem respondeu: AS DUAS.

Sim , nenhuma delas serve para uma tabela adaptada ao IPhone.

A da esquerda está com as fontes visiveis, mas de difícil compreensão, afinal o conteúdo ultrapassou a largura determinada.

A da direita só com uma lupa. Ela está adaptada na largura, mas de que adianta? Não dá pra enxergar nada.

Pois o resultado de uma tabela aplicada ao design responsivo seria este:

Lindo não é mesmo? E o melhor de tudo, é uma tabela responsiva, ou seja, usando media queries, não precisamos ficar fazendo gambiarras com o objetivo de adaptar para o monitorzão de 1920 x 1080 e para o IPhone do tiozinho.

Segue abaixo um link contendo o tutorial de como fazer esta tabela, e também vários outros exemplos de tabelas e gráficos.

http://css-tricks.com/9096-responsive-data-tables/

E fica a dica, aqui no blog temos tutoriais e bastante conteúdo sobre design responsivo.

Divirta-se e inspire-se.

Categorias:CSS, Tutoriais, WEB Design Tags:,

Tutorial – Como trabalhar com design responsivo

julho 5, 2011 5 comentários

O segredo do design responsivo são as media queries. Note neste exemplo: Clique aqui

Para ver funcionando, diminua a largura do seu navegador. Viu?

Não é tão complicado como você imaginava.

O que são as media queries?

Media Queries é a utilização de Media Types com uma ou mais expressões envolvendo características de uma media para definir formatações para diversos dispositivos. O browser ou a aplicação lê as expressões definidas na query, caso o dispositivo se encaixe nestas requisições, o CSS será aplicado.

Então vamos lá para um exemplo.

Primeiro passo é definir o viewport para largura. Fica assim:

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

Depois linkamos as folhas de estilo externas específicas para iphone e ipad:

<!--[if !IE]>--> <link type="text/css" rel="stylesheet" media="only screen and
(max-device-width: 480px)" href="iphone.css" /> <link type="text/css" 
rel="stylesheet" media="only screen and (min-device-width: 768px) 
and (max-device-width: 1024px)" href="ipad.css" /> <!--<![endif]-->

Ou então colocamos os estilos no mesmo arquivo mesmo. Ficaria mais ou menos assim:

 /* target the minimum width of the browser window */ @media screen and 
(min-width: 900px) { .class { background: #FFE11A; } }
/* target the maximum width of the browser window */
 @media screen and (max-width: 600px)
{ }
/* target both the minimum and maximum width of the browser window */
 @media screen and (min-width: 600px) and (max-width: 900px)
{ }
/* target the maximum width of the device */
 @media only screen and (max-device-width: 480px)
{ }
/* target the maximum width of the device and it's orientation */
 @media only screen and (max-device-width: 480px) and (orientation:portrait)
{ }
 @media only screen and (max-device-width: 480px) and (orientation:landscape)
{ }
/* target the iPhone4 retina display */
 @media only screen and (max-device-width: 480px) and
(-webkit-min-device-pixel-ratio: 2)
{ }
}

Compatibilidade com Browsers: As últimas versões do Firefox, Safari, Chrome e Opera já comportam tranquilamente as media queries. O IE9 usará ( em breve ) e o IE8 se consegue com o plugin que você encontra aqui.

Outras fontes de tutoriais e exemplos são os seguintes sites:

mediaqueri.es – Coleções de design responsivos.
Less Framework – Um sistema de grids CSS para websites responsivos.
CSSgrid – Um grid wide de 1140px, com 12 colunas. Ideal para versões mobile.
A Jason Grigsby article – Artigo sobre media queries para mobile.

Divirta-se e inspire-se.

Categorias:CSS, WEB Design Tags:,
%d blogueiros gostam disto: