27 de novembro de 2009

Inspiration Showcase - Sites #6

Mais um blog para a seção Inspiration Showcase, dessa vez é o maniasdabeleza.com, um blog sobre beleza, moda, maquiagem e outras informações relacionadas a estética.

sitesubmit1.jpg

sitesubmit1.jpg

Envie também seu blog ou site para a seção Inspiration Showcase.

24 de novembro de 2009

Tableless, conceito e importância



Anos atrás se usavam as famosas tags de tabelas HTML como o <table>, <tr>, <td> para montar o layout de um site (eu mesmo já usei muito nos meus primeiros sites :D) e dispor os elementos visuais na tela, mas hoje, quem assume esse papel é o CSS e as <div>s, que além de deixar a página mais leve e melhorar a acessibilidade, faz parte das web standars da W3C.

Simplificando, um site "Tableless" é aquele site que não usa tabelas em sua composição e sim CSS para dispor os elementos. Atualmemte na era dos sites da Web 2.0 é o tableless que possibilita que os sites sejam mais facilmente indexados pelos mecanismos de busca como o Google e Yahoo e compatíveis com qualquer navegador do mercado.

Se você quiser saber se seu site ou blog é "Tableless" viste o w3tableless.com, você digita o endereço do seu site ou blog, que é analizado e o resultado é exibido se é tableless ou não, esse site também disponibiliza um selo para você colocar no seu site e mostrar que é um site tableless.

22 de novembro de 2009

CSS Tutorial - Modificando o cursor do mouse



Podemos modificar o cursor do mouse quando ele fica sobre uma determinada palavra com a propriedade cursor.
Como exemplo, vamos aplicar essa propriedade na tag <abbr>:

O <abbr title="browser da Mozilla">Firefox</abbr> é um browser.
A empresa <abbr>Google<abbr> tem crescido muito.

Se quiser que a descrição apareça quando cursor do mouse ficar em cima da palavra, basta inserir o "title" na tag.

A empresa <abbr title="Uma empresa">Google<abbr> tem
crescido muito.

Esse é o CSS para a tag <abbr>, adicionamos também a propriedade border-bottom para destacar a palavra:

abbr {cursor:help; border-bottom:dashed 1px #008cff;}

Vai ficar assim (mantenha o mouse em cima da palavra "Google" e "Firefox" para ver o resultado):

O Firefox é um browser.
A empresa Google tem crescido muito.

Não existe só o ponteiro com o "?", existem outros modelos, basta adicionar o respectivo valor na propriedade cursor, veja:

cursor:help; -> Um ponto de exclamação "?" junto como o cursor.
cursor:wait; -> Uma apulheta no lugar do cursor.
cursor:progress; -> Uma apulheta junto com o cursor.
cursor:crosshair; -> Uma cruz no lugar do cursor.
cursor:move; -> Ponteiro que indica que algo pode se mover.
cursor:pointer; -> A clássica "mãozinha" no lugar do cursor.
cursor:n-resize; -> Cursor de duas pontas na vertical.
cursor:e-resize; -> Cursor de duas pontas na horizontal.
cursor:sw-resize; -> Cursor de duas pontas inclinado para a direita.
cursor:nw-resize; -> Cursor de duas pontas inclinado para a esquerda.

Enjoy ;)

20 de novembro de 2009

Inspiration Showcase - Sites #5

Blog Designerd enviado pelo Guilherme Dantaz, com links e dicas sobre webdesign, SEO e outros assuntos relacionados a web. Um blog com um layout interessante e "clean", vale a pena conferir.




16 de novembro de 2009

Botões de siga-me (folow-me) no twitter para seu site ou blog



Milhões de pessoas visitam sites e blogs diariamente, e hoje, é quase impossível não ver aquele passarinho azul, símbolo do twitter, nas páginas.
E se você está procurando por um eu indico o site twitterbuttons.comExt., lá você encontra vários tipos de botão (veja a imagem abaixo) especificamente para o twitter (é claro), o botãozinho de "Siga-me no Twitter" também faz parte do design, nesse site você pode encontar um com a "cara" do seu blog/site.

Falando em Twitter vou aproveitar a oportunidade pra dizer que esse é o meu: @cssorbit, "sigam-me os bons" :)


9 de novembro de 2009

Parabéns, Firefox completa 5 anos !



O dia 9 de Novembro é um dia especial para o Firefox, completa 5 anos de vida, foi o dia em que esse querido browser desenvolvido pela Mozilla deu as caras para o mundo e também foi o dia em que um gigante se levantava contra o Internet Explorer.

Em 2002 foi lançada a primeira versão ainda sobre o nome de Phoenix que precisou sem mudados por problemas com direitos autorais sobre esse nome, depois passou a se chamar Firebird que por pressões teve que ser trocado novamente, e em 9 de Novembro de 2004 foi lançado com o nome de, adivinha... Firefox. ;)

Firefox - raposa de fogo ou panda vermelho ?

Hum... Essa é uma dúvida que muitos usuários da web possuem: o logo do Firefox é uma raposa de fogo como o próprio nome já diz, fire = fogo e fox = raposa, ou um panda vermelho que é conhecido como firefox? Essa dúvida pode ser esclarecida com essa declaração de Jon Hicks, o autor do logotipo do Firefox: "Um firefox é na verdade um atraente panda vermelho, porém ele realmente não traz à mente o imaginário correto. O único conceito, dos que fiz, com o qual me senti feliz foi este, inspirado pela visão de uma pintura japonesa de uma raposa" (citação de Jon Hicks encontrada no wikipedia). Bom, então acho que é uma raposa ;)

O Firefox vem crescendo jundo com o grande numero usuários, e realmente não deixa de ser um ótimo browser que revolucionou a navegação na web.
Parabéns Firefox !

8 de novembro de 2009

Inspiration Showcase - Ilustração #4

Universo Marvel

A Marvel é uma das mais importantes editoras de quadrinho do mundo, responsável pelos personagens mais conhecidos do universo dos quadrinhos como o Quarteto Fantástico, Homem-Aranha, O Incrível Hulk, Capitão América, O Justiceiro, Homem de Ferro, Surfista Prateado, X-Men, e outros, possui mais de 4.700 personagens.
Veja aqui uma seleção feita pelo CSS Orbit de 10 incríveis imagens do universo Marvel. Enjoy !

Marvel Comics 2



Marvel Wallpaper 8868

Marvel Comics 3

Captain America 1

Marvel Comics 4







Captain America 1

Fonte: myfreewallpapers.net e cartoonwallpapers.in

6 de novembro de 2009

Site da W3C com cara nova !

O W3C, responsável pela recomendação dos padrões para a web, conhecidos como webstandards, agora tá de cara nova, já estava na hora do site que dita as regras do mundo do desenvolvimento web ter um design mais apresentável :], enfim, o novo design chegou.


w3.org

Se você não sabe o que é a W3C, veja esse post: http://cssorbit.blogspot.com/2009/08/o-w3c-world-wide-web-consortium.html

4 de novembro de 2009

CSS Tutorial - Agrupando seletores, otimizando o CSS

Muitas vezes o código css fica longo e até difícil de achar aquela propriedade em determinado seletor, podemos deixar o CSS menor e consequentemente aumentar a velocidade do carregamento da página usando uma simples técnica de agrupamento de seletores.

Vamos usar como exemplo esse código CSS:

#numero1{
width:720px;
margin:auto;
padding:0px 40px 0px 40px;
border:#ffffff 0px solid;
float:left;
}

#numero2{
width:720px;
margin:auto;
padding:0px 40px 0px 40px;
border:#ffffff 0px solid;
float:left;
}

#numero3{
width:720px;
margin:auto;
padding:0px 40px 0px 40px;
border:#ffffff 0px solid;
float:left;
}

Já que as propriedades são as mesmas para todos os seletores, vamos dar uma comprimida nesse código, usando a "," para agrupar os seletores:

#numero1, #numero2, #numero3{
width:720px;
margin:auto;
padding:0px 40px 0px 40px;
border:#ffffff 0px solid;
float:left;
}

Viu só, três vezes menor.

Não só seletores do tipo id podem ser agrupados, podemos agrupar outros tipos:

b, #numero2, .numero3{
width:720px;
margin:auto;
padding:0px 40px 0px 40px;
border:#ffffff 0px solid;
float:left;
}


Enjoy !