Novo Layout e experiências com CSS3…
Autor: Bruno Eugenio | Publicado: 2011-01-11T18:05:00-08:00

Primeiro post de 2011! Depois das festas e do (merecido) descanso estou voltando a minha vidinha mais ou menos… Aproveitei este tempo de festas e comida a vontade para atualizar o tema do meu blog e resolvi fazer algumas experiências com o tão falado HTML 5 e CSS3 que são as novas atualizações das linguagens de marcação tão queridas por nós desenvolvedores, designers e afins!

Durante as minhas “férias” eu andei me atualizando dos padrões web e vi que tinha perdido algumas coisas como o beta do Internet Explorer 9 que, segundo quem testou, está bem afinado com as novas tecnologias e padrões web… Opera 11 agora com suporte a apps (além dos já presentes widgets) e temas o que o torna mais próximo dos seus rivais Chrome (que ganhou uma app store bem legal) e Mozila Firefox. Ai pensei “poxa, meu tema do Blogger tá tão aguado…” ai o que faço? Corro no colourlovers.com e procuro uma paleta de cores pra trabalhar em cima! Até ai tudo bem isso eu sempre faço mas fiquei espantado com a minha rapidez de criar algo com as cores! Eis que eu fiz o esboço do blog rapidinho e me deparei com algumas coisas que já tinha lido e que talvez o HTML 5 e o CSS3 resolvessem pra mim sem precisar de hacks ou gambiarras: Bordas com cantos arredondados e estilos de fontes diferentes. Eis que ai começou a minha pesquisa e a dor de cabeça…
Quero tipografias diferentes no meu blog, na sidebar, sem usar IMAGENS! E ai?Ai que no CSS3 temos já um recurso bem bacana chamado @font-face que “injeta” as fontes no texto de um lugar remoto (pode ser seu servidor, junto dos arquivos CSS ou qualquer lugar da net com link externo) acabando assim com aquela briga que tinhamos para colocar um estilo de fonte diferente que com o font-family não ia funcionar por que ninguém tinha aquela fonte lindona-esquisita que você usou no layout! É o fim das imagens nos menus!!! E o melhor que é super simples a lógica de utilização: Primeiro você chama o @font-face no seu CSS dizendo onde está a fonte que você quer trazer para o site, definindo um nome para a fonte e depois disso é só usar o nome da fonte normalmente. O único problema é os navegadores só reconhecem os formatos TTF (true type fonts) OTF (open true fonts) para o Chrome, Safari e Firefox e Opera sendo que o Internet Explorer (sempre ele!) aceita apenas EOT. Você pode converter suas fontes de outros formatos no Font Squirrel (ele gera o webkit do @font-face e um exemplo). Tendo as fontes no formato certo é só adicionar no CSS:
   1: @font-face {   2:     font-family: 'CrystalRegular';   3:     src: url('caminhodafonte/crysrg__-webfont.eot');   4:     src: local('â˜º'), url('caminhodafonte/crysrg__-webfont.woff') format('woff'), url('caminhodafonte/layout2k11/crysrg__-webfont.ttf') format('truetype'), url('caminhodafonte/crysrg__-webfont.svg#webfontsFEWMVKA') format('svg');   5:     font-weight: normal;   6:     font-style: normal;   7: }
Veja que importei no extensões .eot, .ttf, woff e svg que são suficientes para cobrir todos os navegadores web atuais e de quebra o iPhone (a fonte em .svg). Depois da font “importada” é so utilizar como uma fonte normal:
   1: #teste{   2:&nbsp;    3: background-color: #402737;   4: padding: 10px;   5: color: #d9d6d2;   6: font-family: CrystalRegular, Helvetica;   7: }E as bordas redondinhas? É com imagens??Simplesmente cansei de ficar ter que ficar criando, no mínimo, três divs diferentes para deixar as bordas com cantos arredondados!! Fiz isso pela última vez no Radar Cidade… tenho amor ao meu sono!! E sem contar que é uma “gambiarra” fazer isso por que você lota o código com coisas que não tem NADA dentro (eu ainda colocava algo do tipo &lt;!—cantosArredondadosTop—&gt; pra tapiar e meus amigos não apagarem a div sem querer) mas agora já temos umas coisas legais para sanar (um pouco) este problema: Jquery e CSS3! Na parte do CSS temos os webkits do mozila, da google e o nativo do CSS 3…É só setar a propriedade e correr pro abraço! Muito simples e prático mas tem um problema bem conhecido de todos nós: simplesmente ainda não pega no Internet Explorer. E ponto. Ai usamos nosso amiguinho Jotaquery para fazer um gráfico vetorial usando coordenadas e mágica, a div fica redondinha… Tem vários plug-ins Jquery para isto mas gostei bastante do Malsup que tem além de cantos arredondados vários estilos bacanas de bordas…


Mostrando no CSS como fica os webkits não tem nem mistério:
   1: .jump-link{   2: -webkit-border-radius: 3px; /*chrome*/   3: -moz-border-radius: 3px;/*firefox*/   4: border-radius: 3px; /*padrão*/   5: padding: 4px 6px;   6: float:right;   7: background-color: #402737;   8: }
Ou seja: dá pra economizar tempo, espaço em disco (“dãaa Bruno!! Com essas hospedagens gigantescas?” sim, eu penso sempre nisso!) e deixa seu código mais legivel com certeza, sem aquelas divs “sem nada” espalhadas pela página. 
Dá pra usar mais coisas… Inclusive de HTML 5 como o &lt;nav&gt; &lt;video&gt; que já tem suporte no chrome por exemplo! Claro que os efeitos nem sempre são idênticos em TODOS os navegadores… Mas eu penso que não somos obrigados a ter o MESMO resultado em todos os navegadores! É como comparar várias TVs LED rodando o mesmo Blu Ray… Sempre vamos notar diferenças!! E acredito que a web ainda vai ter muito disso (espero que o Internet Explorer 9 me prove o contrário).


É isso pessoal! Espero que tenham gostado do tema novo! Todos os comentários são bem vindos!


Até a próxima!!