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

12 de outubro de 2009

Envie seu site para a seção Inspiration Showcase!

Acha que seu site ou blog tem um design legal? Quer que ele seja exibido aqui na seção "Inspiration Showcase"? Faça como eles que enviaram e tiveram seu seus sites/blogs publicados! Então envie um comentário nessa postagem ou um e-mail para cssorbit@hotmail.com com os seguintes dados:

Seu nome;
Link do blog ou site;
E uma pequena mensagem dizendo que quer seu site na seção "Inspiration Showcase".

Após o envio do link, seu site ou blog será analizado.
Não é difícil seu site ser exibido aqui, se for bem organizado e ter um layout legal, será publicado ;)

Atenção ! Não esqueça dos três dados como ditos acima, seja nessa postagem ou envio por e-mail, caso contrário seu blog não será analizado !

Veja os blogs já enviados e publicados !

5 de outubro de 2009

CSS Tutorial - Imagem transparente com CSS (mudando a opacidade).

Você não precisar criar nenhuma imagem em png para criar uma transparência, basta usar as propriedades filter e a opacity em qualquer JPEG ou GIF no seu site.


exemplotransparencia.jpg


Bom, vamos começar pela propriedade opacity, ela define a transparêcia da imagem. Alternado o número 0.7 podemos mudar a intensidade da opacidade na imagem, você pode definir um valor de 0.1 a 1.0, menores valores deixam a imagem mais transparente.

img{
opacity:0.7;
}

Uma coisa muito importante, o opacity é uma das novas propriedades do CSS3, ou seja, não é suportado por todas as versões de browser :( por isso recomendo usar essa propriedade junto com a propriedade filter.

A propriedade filter tem a mesma função, aterando o número 70 do alpha(opacity=70) podemos mudar a intensidade da opacidade na imagem, você pode definir um valor de 0 a 100, menores valores deixam a imagem mais transparente. Essa propriedade é usada para o Internet Explorer (IE).

img{
filter:alpha(opacity=70);
}

Finalizando, use sempre os dois juntos para evitar o problema da transparência ser mal suportada por algum browser.

img{
opacity:0.7;
filter:alpha(opacity=70);
}