html5 css3 réaliser le modèle de fond

Question

Je dois réaliser ce modèle pour un site Web d'arrière-plan. Qui peut m'aider à réaliser le modèle? Je ne sais pas comment cela doit être développé.

J'ai réalisé le gradient avec ce code CSS3:

background: rgb(152,152,152); /* Old browsers */ 
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzk4OTg5OCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==); 
background: -moz-linear-gradient(left, rgba(152,152,152,1) 0%, rgba(255,255,255,1) 100%, rgba(255,255,255,1) 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(152,152,152,1)), color-stop(100%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(left, rgba(152,152,152,1) 0%,rgba(255,255,255,1) 100%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(left, rgba(152,152,152,1) 0%,rgba(255,255,255,1) 100%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(left, rgba(152,152,152,1) 0%,rgba(255,255,255,1) 100%,rgba(255,255,255,1) 100%); /* IE10+ */ 
background: linear-gradient(to right, rgba(152,152,152,1) 0%,rgba(255,255,255,1) 100%,rgba(255,255,255,1) 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#989898', endColorstr='#ffffff',GradientType=1); /* IE6-8 */ 

Answer 1

Comme commenté, il est utilisé comme solution de repli pour certains vieux navigateurs par exemple I.E.6

background: rgb(152,152,152); /* Old browsers */ 

Inclure une image de fond en ligne (en utilisant Base64 au lieu d'une url)

background: url(data:image/svg+xml;base64,PD94bWw...); 

Pour les lignes de gradient -XX linéaire, nous l'appelons propriétés spécifiques au fournisseur.

background: -moz-linear-gradient(left, rgba(152,152,152,1) 0%, rgba(255,255,255,1) 100%, rgba(255,255,255,1) 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(152,152,152,1)), color-stop(100%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(left, rgba(152,152,152,1) 0%,rgba(255,255,255,1) 100%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(left, rgba(152,152,152,1) 0%,rgba(255,255,255,1) 100%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(left, rgba(152,152,152,1) 0%,rgba(255,255,255,1) 100%,rgba(255,255,255,1) 100%); /* IE10+ */ 
background: linear-gradient(to right, rgba(152,152,152,1) 0%,rgba(255,255,255,1) 100%,rgba(255,255,255,1) 100%); /* W3C */ 

Il ne s'agit pas nécessairement de règles W3C standard. Le but de l'existence d'accessoires spécifiques au fournisseur est de permettre aux fournisseurs de navigateurs d'ajouter leurs propres accessoires CSS pour fournir plus de fonctionnalités que ce que la norme a suggéré aux développeurs.

La dernière ligne est utilisée par I.E. qui supporte la propriété "filter".

Donc en bref, les lignes ci-dessous la première ligne ne sont que faire le même travail mais ils sont tout simplement conçus pour être utilisés par différents navigateurs. Il s'assure que l'élément avec les règles appliquées à la même apparence dans tous les principaux navigateurs.