HTML 5 CSS 3 - Eliminando imagens para fazer layout sem perder a impressão visual.

Primeiro Post sobre HTML 5.

Esta chegando a hora de dizer bay bay as páginas pesadas na WEB com a chegada do html5 não precisamos mais de usar imagens para fazer layout, com CSS3 e HTML 5 resolvemos o problema de uma só vez veja neste post como é simples fazer um layout(desenho de uma página WEB) com html5 segue abaixo o código e logo depois o exemplo, é uma pena ainda não podermos aderi a essas tecnicas de forma global devido a incompatibilidade de certos navegadores principalmente do MSIE(Microsoft internet explorer) que sempre foi um pé no saco para qual quer desenvolvedor web, pra mim esse navegador tinha que ser exonerado da WEB falou em incompatibilidade falou em MSIE ou ele muda(muda não nasce de novo) ou ele vai sumir essa é a tendência.


A  W3C prevê a publicação oficial do html5 para 2012 mas esta fazendo de tudo para adiantar o cronograma bom aproveitem!

<style>
/* nenhuma novidade*/
.bodyY{
border:1px #CCC solid;
width:500px; 
}
.estremos{
padding:4px;
width:480px;
margin:5px;
}
.conteudo{
width:295px;
margin-right:5px;
padding:5px
}
.ColAuxiliar{
width:155px;
float:right;
padding:5px; 
}
/* Novidades */
.bordaredonda{
-moz-border-radius:20px;  /* mozila */
border-radius: 20px;  /* outros */
exemplo
border-radius: 20px 30px 40px 50px.
*/
}
.gradienteL{
background-image: -moz-linear-gradient(top, #999, #FFF);
background-image: -webkit-gradient(linear, left top, left bottom, from(#999), to(#FFF));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#999,endColorstr=#FFF);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#999,endColorstr=#FFF)";
}
.gradienteLF{background-image: -moz-linear-gradient(top, #CCC, #FFF);
background-image: -webkit-gradient(linear, left top, left bottom, from(#CCC), to(#FFF));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCC,endColorstr=#FFF);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCC,endColorstr=#FFF);
}
.sombra{
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
}
.reflexo{
-webkit-box-reflect: below 10px -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(rgba(255, 255, 255, 0.25))) 0 0 0 0 stretch stretch;
}
h4{
margin:0;
}
</style>
<div class="gradienteLF reflexo bodyY">
<div class="gradienteL sombra bordaredonda estremos" ><h4>Eliminando imagens para criar layout com CSS3 e HTML5</h4></div>
<div style="height:350px; margin:10px;">
<div class="gradienteL sombra bordaredonda ColAuxiliar">Coluna Auxiliar para colocarmos propagandas, links, seguidores, enquetes entre outros gadgets........</div>
<div class="gradienteL sombra bordaredonda conteudo">Aqui viria o conteudo do su site. bom é isso ai a unica conclusão que eu consigo tirar disso tudo é que HTML5 é uma maravilha vamos poder eliminar muitos dos aplicativos para criar nossos web sites e o usuário uma exeperiencia ja mais vista antes com tanta leveza e rapidez viva ao HTML5. <br />
</div>
</div>
<div class="gradienteL sombra bordaredonda estremos">CSS3 HTML5</div>
</div>

Pontos a serem observados


*Sintaxe: border-radius: top left top right bottom right bottom left;


Exemplo: border-radius: 20px 30px 40px 50px.

isso vale tambem para seus derivados como por exemplo -moz-border-radius:

*Sintaxe: background-image: -moz-linear-gradient(sentido do gradiente top-bottom-left-rigth, cor inicial, cor final);

Exemplo: background-image: -moz-linear-gradient(left, #999, #FFF);


*Sintaxe: background-image: -webkit-gradient sintax(tipo de gradiente linear - radial, sentido inicial do gradiente, sentido final do gradiente, from(cor inicial), to(cor final));


Exemplo: background-image: -webkit-gradient(linear, left top, left bottom, from(#999), to(#FFF));


*Sintaxe:box-shadow: bottom rigth extrusão cor da sombra formato (rgba(x, x, x, x));

Exemplo: sombra vermelha box-shadow:5px 5px 5px rgba(255, 0, 0, 100)

isso vale tambem para seus derivados como por exemplo -webkit-box-shadow: 5px 5px 5px rgba(255, 0, 0, 100);





Para vizualizar corretamente esse exemplo use o ou
Até a data em que foi postado essa matéria o Mozila não dava suporte para animation pulse

body

Eliminando imagens para criar layout com CSS3 e HTML5

Coluna Auxiliar para colocarmos propagandas, links, seguidores, enquetes entre outros gadgets........

Aqui viria o conteudo do su site. bom é isso ai a unica conclusão que eu consigo tirar disso tudo é que HTML5 é uma maravilha vamos poder eliminar muitos dos aplicativos para criar nossos web sites e o usuário uma exeperiencia ja mais vista antes com tanta leveza e rapidez viva ao HTML5.

CSS3 HTML5