O CSS3 está chegando! Confira alguns exemplos!

[Eliseu M. 2]

E aí gente, tudo bem? Então, deu uma pesquisada braba e encontrei algumas dicas de CSS3 já funcionando, mas com algumas incompatibilidades ainda. O navegador Google Chrome, como sempre, foi o único que não apresentou problemas. Quanto ao Firefox, poucos e ao IE... =[

 

Bom, vamos abordar algumas características que ele tem:

 

- Como ainda está sendo lançado, temos que usar alguns códigos fixos por causa da compatibilidade, por ex., no Mozilla, é necessário adicionar -moz- na frente de alguns códigos.

Para maior segurança, acrescente:

 

-webkit-

-moz-

 

na frente dos novos códigos CSS3, por ex.: [red]-moz-border-left: Xpx;[/red] e [red]-webkit-background-size: X%[/red]

 

Tendeu?

- As características estão ficando mais "agrupadas", por ex., tamanho, cor e estilo, em vários casos.

- Parece que o JQuery vai ficar para trás, mas por enquanto ele domina efeitos motion e degradê xD

 

Agora vou dar alguns exemplo que vi:

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif border-radius - Define o raio de curvatura de bordas.

border:1px solid #000;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;

 

Se você deseja ter raios diferentes em cada canto (daqui pra frente não vou mais acrescentar -moz- e -webkit-:

border-top-left-radius:5px;
border-bottom-right-radius:5px;

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif border-image - Coloca uma imagem qualquer como borda.

border-image: url(URL.JPG) 2 2 2 2 round round;

 

Esses 2 são os pixels de largura de cada lado da borda.

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif border-colors - Com isso você pode fazer bordas em degradê ou tipo carnaval =] (testei e só pegou no Firefox mesmo)

border: 6px solid #000;
-moz-border-bottom-colors:#000 #222 #444 #666 #888 #999;
-moz-border-top-colors:#000 #222 #444 #666 #888 #999;
-moz-border-left-colors:#000 #222 #444 #666 #888 #999;
-moz-border-right-colors:#000 #222 #444 #666 #888 #999;
padding: 10px;

É só usar a quantidade de cores igual ao tamanho da borda em pixels.

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif box-shadow - Define as características de sombra.

box-shadow: 3px 3px 5px #000;

 

Máscara: (distância horizontal) (distância vertical) (taxa do borrão ou mancha) (cor)

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif background-size - Adequa o tamanho do fundo ao texto introduzido no mesmo. (nesse caso os códigos fixos são outros)

background-size:100%;
-webkit-background-size: 100%;
-o-background-size: 100%;
-khtml-background-size: 100%;

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif background - Agora você poderá colocar várias imagens de fundo rapidin, só acrescentando uma vírgula! xD

background-image: url(URL.JPG), url(URL2.JPG);
background-position: 20% 100%;
background-repeat: no-repeat;

 

Hmm, isso aí é só fuçando pq eu não aprendi tudo ainda :P

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif text-shadow - Sombra no texto.

text-shadow: 2px 2px 2px #000;

 

Mesma máscara do box-shadow.

 

- Você está cansado de ver o texto sair pra fora da DIV quando a palavra é muito grande, não é? Seu problemas acabaram! (o.o pike tabajara)

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif word-wrap

word-wrap:break-word;

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif column-width e column-grap - O primeira cria colunas e o segundo o espaço entre elas.

column-width:100px;
column-grap:10px;

 

o.O Fazendo esse tuto eu vi outro seletor do CSS que lê o texto, mas só no Opera. Olhem ae:

http://www.css3.info/preview/speech/

 

E um dos melhores seletores de CSS3 chega! Você nunca mais vai quebrar a cabeça criando layouts =D

<style>

#geral {

display: table; width:100%;

}

#conteudo {

display: table-cell; border:1px solid black;

width: 80%px;

padding:5px;

}

aside {

display: table-cell; border:1px solid black;

width: 200px; padding:5px;

}

</style>

<div id="geral">

<aside>Menu</aside>

<div id="conteudo">Conteúdo aqui</div>

</div>

Olha, me pareceu que esse código funciona quase como uma tabela...

O aside pode ser adicionado dos dois lados.

 

Gente, foi difícin achar esses códigos mas eu vou continuar procurando mais. Quanto à incompatibilidade, lembrem-se das dicas lá em cima do -webkit- e do -moz-.

 

É isso aí, espero ajudar! Até mais!

 

Créditos: NetTuts+, CSS3.info, SquareFree, W3.org, DesignShack.

[pslucasps 2]

@Eliseu M.: Parabéns é muito bem alguem postar sobre o CSS3 já que tivemos poucas novidades sobre o mesmo nesses últimos tempos. Além de poder instigar mais pessoas a utilizar CSS incentivadas por eses ótimos recursos que a nova versão vai trazer.

 

na frente dos novos códigos CSS3, por ex.: [red]-moz-border-left: Xpx;[/red] e [red]-webkit-background-size: X%[/red]

Sua intenção foi dexar em vermelho a parte dentro de "[red][/red]" certo? Bom, se foi aconselho arrumar (pois alguns novatos em CSS como eu podem intrepertar errado pensado que o [red] ali é uma formatação do CSS) usando o atributo ao invés de [/red] pois o mesmo não funciona aqui. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Em relação aos recursos eu penso (apesar de ser novato no assunto) que vai dar um UP pro CSS, já que pelo que vejo muitas pessoas que estão começando CSS desistem rápidamente. Não por causa do CSS em sí, mas sim por causa dos bugs nos navegadores que não o suportam 100%, principalmente o IE onde grande parte de quem ta começando a programar pra web o utiiza (não eu). Só resta torcer mesmo que a compatibilidade dos browers fique melhor com o CSS3. :D

[Bruno Augusto 417]

Excelente tópico.

 

Só não concordo totalmente que a jQuery vá perder espaço pois esse framework alienígena, faz coisas que o próprio nem sabe que é possível.

 

Quanto mais evoluído o CSS for, mais espetacular vão ser as possibilidades desse "bichinho" que chegou chegando, que um certo Eliseu ^^

[brcontainer 16]

jQuery vá perder espaço pois esse framework alienígena,

Concordo plenamente, pois o CSS3 não funcionará em navegadores antigos como FF3- , Opera 9- , Safari3- IE8-( o sinal de menos quer dizer igual ou inferior ao navegador descrito, por exemplo o IE8- é igual há Ie8, ie7, ie6), pois o Jquery foi criado para justamente facilitar e dar NOVAS funções para os navegadores ;)

 

Porem sou um dos RAROS que não usa FRAMEWORKs faz tudo na RAÇA kkk ;p , mas não quer dizer que o Jquery é ruim, ele é otimo, mas não necessito ;)