19 de dezembro de 2009

Inspiration Showcase - Ilustração #6

Incríveis árvores de natal

Natal, sinônimo de presentes e de felicidade, e especialmente para essa data um seleção de ilustrações de belas árvores de natal. Mas não esqueça de uma coisa, o principal motivo do natal é o nascimento de Jesus Cristo, O Salvador ! Divirta-se ;D !
























16 de dezembro de 2009

Inspiration Showcase - Ilustração #5

Criativos código de barras

Sabe aquelas linhas, geralmente pretas e brancas, que se encontram em embalagens de diversos produtos, e que só são lembradas quando passamos no caixa do supermercado? É, os japoneses viram que com códigos de barra também é possível fazer arte, os código de barras super criativos criados pelo D-barcode geraram até um prêmio de Cannes, veja abaixo uma seleção que o CSS Orbit fez dos criativos códigos de barras do D-Barcode !





Veja a coleção completa no barcoderevolution.com: aqui.

14 de dezembro de 2009

Internet Explorer 9, melhorias e mais melhorias !

Boa notícia para os web designers de plantão, a Microsoft anunciou que a sua nova versão do Internet Explorer, o IE 9, sofreu uma série de melhorias, uma delas é o suporte para propriedades do CSS3 e utilização de procesador gráfico para aceleração do browser.(...)


Como dito anteriormente uma das principais melhorias será o suporte para as propriedades do CSS3 que tanto facilita a vida de qualquer designer, uma dessas propriedades é a "border-radius" que exibe cantos arredondados sem o uso de imagens.

Esse novo browser conseguiu uma pontuação de 574 dos 578 pontos no teste de seletores CSS3 da CSS.info enquanto que sua versão 8 conseguiu apenas 330, uma ótima melhoria.

ie9teste.png
Fonte da imagem:beta.blogs.msdn.com

Não se sabe precisamente quando o Interet Explorer 9 será lançado, mas é previsto que fique pronto em 2011, e a Mozilla não vai ficar parada, possivelmente vai sair na frente do IE como disse no Twitter Christopher Blizzard que trabalha para a Mozilla.

11 de dezembro de 2009

Que tipo de artista ou designer você é ?

Segundo o wikipedia, um designer é "o profissional habilitado a efetuar atividades relacionadas ao design.(...)". Todo designer tem um jeito de ser, se inspiram com coisas diferentes e muitas vezes em seus trabalhos, seja voltado para a web ou outro meio, levam um toque exclusivo daquela pessoa.

Dê um mesmo tema a dois designers e veja que trabalhos diferentes se formarão, pois se trata de pessoas diferentes, vidas diferentes e isso é quase impossível não influenciar em seus trabalhos. Mas e você ? Que tipo de designer você é? Veja essa imagem bem humorada abaixo e saiba ;D.


Fonte da imagem: loldwell.com

9 de dezembro de 2009

Lorem ipsum dolor sit, hum...o que?



Você já deve ter visto o "Loren ipsum" em algum lugar, muito usado como texto de exemplo, principalmente quando se dá um exemplo de algo relacionados ao desenvolvimento de páginas e não se sabe com que texto preencher para mostrar ao leitor :D . Mas você já teve a curiosidade de saber o que é esse tal de "Lorem ipsum" e porque é tão usado?


O "Lorem Ipsum" é um texto em latim, que foi muito utilizado pela indústria da tipografia, e com a internet se
tornou mais popular ainda, sendo usado para fins de teste do layout antes de usar o texto que realmente vai ser utilizado,
mas esse texto não é um texto qualquer, tem origem do
"de Finibus Bonorum et Malorum", traduzindo, "Os Extremos do Bem e do Mal" escrito por Cícero a mais de 2000 anos atras, mais precisamente
em 45 a.c . Um breve parágrafo do texto "de Finibus Bonorum et Malorum" com a tradução:

"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."

"Não há quem goste de dor, que a procure e a queira ter, simplesmente porque é dor..."

Eita, bem profundo não acha?! ;)

Fontes de algumas informações pt.lipsum.com e wikipedia

5 de dezembro de 2009

Funcionalidades do Chrome através de belos efeitos !

Um video super criativo que mescla efeitos 2D e 3D criado pelo Google junto com a Motion Theory. Os diretores Mark Kudsi e John Fan mostram as funcionalidades que o Chrome traz através de belos efeitos com uma música de fundo por Tim Meyers. Vale a pena conferir, uma arte.



Uma variedade de menus CSS, grátis !



Se você está procurado um menu já pronto ou está com dificuldades para desenvolver um, existe uma ótima alternativa pra você encontrar um menu com a "cara" do seu site ou blog.

Entre no StyledMenus.com, nesse site você encontra um variedade de menus com diversas cores e estilos prontos para o uso, é só baixar o arquivo zipado (que já vem com o HTML, CSS e as imagens) e pronto ! É só colocar no seu blog, segundo o site os menus são compatíveis com diversos browsers e o código fonte dos menus são validados pelo w3c validator, para mais informações leia a FAQ do Styled Menus.

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 !

31 de outubro de 2009

Inspiration Showcase - Sites #4

Mais um blog para a seção Inspiration Showcase, dessa vez é o supercomentario.com.br enviado pelo Tioni, nesse blog predominam as cores preta e branca, design simples mas bonito.

sitesubmit1.jpg

sitesubmit1.jpg

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

26 de outubro de 2009

Inspiration Showcase - Ilustração #3

Linhas e cores

Não é preciso desenhar paisagens, homens ou mulheres para exibir incríveis ilustrações, ultilizando linhas e cores pode se desenvolver um bom, quer dizer, ótimo trabalho, veja essa seleção de incríveis ilustrações com linhas e cores. Clique nas imagens para ver com mais detalhes.







Desktop Wallpaper  Vector  Green Ice Vector.jpg

Desktop Wallpaper  Vector  Aurora Rebirth Vector Blue.jpg



Color_Picker_Control_Interface.jpg

Imagens encontradas em wallpapers.bpix.org

22 de outubro de 2009

CSS Tutorial - Adicionando sombra nos boxes sem o uso de imagens

Mais uma propriedade do CSS3, o box-shadow, com ela podemos criar um efeito sombreado nos boxes, sem o uso de imagens. CSS3 = facilidade :)

Mas atenção, por enquanto essa propriedade é suportada por alguns browsers, nessa lista estão o Firefox 3.5+, Safari 3+, testei no Chrome 3 e funcionou .

Para que os browsers renderizem o box-shadow, temos que adicionar o prefixo -moz- (para o firefox) e o -webkit- (para o Safari e o Chrome).

-moz-box-shadow:5px 5px 10px #101010;
-webkit-box-shadow:5px 5px 10px #101010;

* Sombra vertical do box;
* sombra horizontal do box;
* Blur da sombra;
* cor da sombra.



Se você quiser deixar os boxes com cantos arredondados como na imagem acima veja esse tutorial aqui.
Espero que esse tutorial tenha sido esclarecedor =) .

18 de outubro de 2009

Inspiration Showcase - Sites #3

Apresento o blog zenorocha.com/blog enviado pelo Zeno Rocha para a seção Inspiration Showcase. Confira esse blog:

sitesubmit1.jpg

sitesubmit1-2.jpg

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

16 de outubro de 2009

CSS Tutorial - bordas com cantos arredondados, sem o uso de imagens

Agora não é mais preciso ficar batendo cabeça para fazer aqueles boxes com cantos arredondados inserindo imagens nos cantos (um saco), agora o CSS3 veio pra facilitar a vida dos web designers com a propriedade border-radius. Só tem um pequeno problema, essa propriedade não é suportada pelo navegador Opera nem pelo IE, esse último não é novidade :( , mas é suportada pelo Firefox e o Safari.

Para o firefox renderizar o border-radius, usa-se o -moz-border-radius e para o Safari -webkit-border-radius. Recomendo usar os dois juntos, já que nunca se sabe em que browser irão acessar a página.

Importante! Não esqueça de colocar também a propriedade border para que a borda e consequentemente os cantos sejam exibidos.

#umadiv{
-moz-border-radius: 8px;
-webkit-border-radius: 8px;

border:2px #ffffff solid;
}

Essas são as propriedades para cada canto dos boxes:

topo esquerdo:
-moz-border-radius-topleft: 8px;
-webkit-border-top-left-radius: 8px;

topo direito:
-moz-border-radius-topright: 8px;
-webkit-border-top-right-radius: 8px;

iferior esquerdo:
-moz-border-radius-bottomleft: 8px;
-webkit-border-bottom-left-radius: 8px;

inferior direito:
-moz-border-radius-bottomright: 8px;
-webkit-border-bottom-right-radius: 8px;


Respectivamente:

bordasarredondadas.gif

Para não haver muito trabalho redimensione todos os quatro cantos de uma vez, use:

-moz-border-radius: 8px;
-webkit-border-radius: 8px;

bordasarredondadas2.gif

13 de outubro de 2009

Inspiration Showcase - Sites #2

Olá webdesigners e leitores do CSS Orbit, apresento a segunda seção do Inspiration Showcase, nessa seção sites com um belo design e o tema "animais", clique nos links para conferir os detalhes de cada site.


mailchimp.com


yellowbirdproject.com


orcabayseafoods.com


mutantlabs.co.uk


owltastic.com