CSS Font Stacks!

Posted: October 16th, 2009 | Author: andre | Filed under: CSS, Design | No Comments »

Este é um problema muito comum ao se criar websites é manter a tipografia pelo menos com a mesma “cara” independente do sistema operacional.

Dependendo do sistema operacional os tipos de fontes instaladas – e estas serão usadas na renderização do texto do seu website, por isso é necessário criar as chamadas “Font Stacks” que são “cadeias” de fontes que serão utilizadas para renderizar o seu texto. O princípio é simples, é preciso definir a propriedade “font-family” no CSS de modo que siga uma ordem de uso. Por exemplo:

body{
font-family:Verdana,Geneva,sans-serif;
}

Neste caso, a primeira tentativa de uso seria  a “Verdana” que está presente na maioria dos sistemas, se por um acaso não houver suporte para esta fonte, é utilizada a segunda fonte Geneva, num caso raro onde não encontrada esta segunda será utilizada a ultima fonte que é o tipo de fonte genérico “Sans-serif”.

A partir dessa ideologia e após uma busca pela internet encontrei vários casos onde são mostrados font stacks interessantes, esta foi a que achei melhor:

The ‘wide’ sans serif stack

body{font-family:Verdana,Geneva,sans-serif;}

The ‘narrow’ sans serif stack

body{font-family:Tahoma,Arial,Helvetica,sans-serif;}

The ‘wide’ serif stack

body{font-family:Georgia,Utopia,Palatino,'Palatino Linotype',serif;}

The ‘narrow’ serif stack

body{font-family:'Times New Roman',Times,serif;}

The monospace stack

body{font-family:'Courier New','Courier',monospace;}

Fontes:

http://www.codestyle.org/css/font-family/BuildBetterCSSFontStacks.shtml#common-font-stacks
http://www.sitepoint.com/article/eight-definitive-font-stacks/3/
http://www.inspirationbit.com/striking-web-sites-with-font-stacks-that-inspire/


CSS3 module: Multi-column layout

Posted: March 6th, 2009 | Author: andre | Filed under: CSS, Design | No Comments »

Resumindo, o Modulo “Multi-column” do CSS3 serve para separar o conteúdo de um elemento em multiplas colunas.

Image:Diagram-css3multicolumn.gif

O Módulo Multi-Column é parte das específicões  do CSS3 propostas pela W3C.

This extension to the CSS Box Model opens a new range of possibilities in terms of web design. Multi-column layouts that are so pervasive in the print media (think newspapers, magazines) can now become a reality on the web

http://www.csscripting.com/css-multi-column/example1.php


47+ Excellent Ajax CSS Forms

Posted: February 20th, 2009 | Author: andre | Filed under: CSS, Design | No Comments »

Forms needs a solid visual structure, a profound hierarchy of form elements (Fields and Labels), powerful techniques and Functionality (AJAX) to make the form look and work creatively. There is a great bunch of creative, outstanding and individually designed from scratch forms.Thanks to AJAX, we can provide real-time feedback to our users using server-side validation scripts and eliminate the need for redundant validation functions and processing data.

Let’s take a look, hopefully you’ll find new ideas you can develop further on your own.

http://www.noupe.com/css/47-excellent-ajax-css-forms.html


Minha “Duct Tape Wallet”

Posted: August 29th, 2008 | Author: andre | Filed under: Design, Geral | No Comments »

Para quem não conhece, Duct tape wallet são aquelas carteiras feitas com o famoso Silver Tape.
Existe um empresa hoje especializada em fazer produtos com este tipo de fita, é a Ducti. Eu ainda não tive a chance de adquirir uma carteira dessas para conferir a qualidade do produto, mas fica claro o visual moderno que uma carteira dessa tem.

Ducti Tape Wallet

Partindo do fato de que esta carteira teve ínicio no “fundo de casa” de alguem por ae, é lógico que HJ ainda é comum ver pessoas que ainda fazem suas carteiras dessa maneira. Um dos pontos legais de se fazer uma carteira dessa manualmente é facilidade de se poder “customizar” sua carteira, já que o processo é bem simples (Cortar, colar etc..)

Pensando nisso resolvi criar minha propria carteira:
Bagunça Duct Tape Wallet

Olha a bagunça! lol =D

Duct Tape Wallet DONE!

Mas olha que legal que ficou!!

Eu recomendo comprar fitas de qualidade, a fita que utilizei dependendo do nivel de calor (sol) ela começa a desprender cola, e vira uma bagunça se vc estiver sentado com ela em seu bolso.