Comment pourrions-nous implémenter le gradient diagonal d'un PSD dans notre code CSS xhtml?

Question

Tout d'abord, je tiens à vous dire que je ne suis pas un concepteur et pas un codeur css/xhtml. Je pose cette question à l'un de mes amis, Il travaille sur un site qui a un gradient diagonal (cela signifie que le dégradé est dans les deux directions X et Y), donc il commence à avoir du mal à découper l'image pour afin qu'il puisse remplir l'image découpée en arrière-plan d'une manière qui maintiendra le gradient dans les deux directions X et Y. Donc, c'est comme Si le dégradé est dans la direction X seulement que nous découpons généralement une image verticale de largeur 1px. De même, si le dégradé est dans la direction Y seulement alors nous découpons généralement une image de hauteur horizontale 1px. Mais que se passe-t-il si le dégradé est dans les deux directions X et Y? Dans ce cas, comment allons-nous découper l'image ou comment l'implémenter en CSS/XHTML?

Merci beaucoup

Pukhraj

Answer 1

simple. Ne pas l'épisser du tout. Vous pouvez simplement prendre l'image d'arrière-plan dans son ensemble et utiliser la directive CSS background dans votre tag body. Le seul problème que je pourrais vous voir est la largeur de votre image en dégradé. Si c'est (par exemple) 1024px de large et que le client bascule 1920px ils verront beaucoup de blanc. Il est un peu difficile de répondre sans savoir qui est votre moniteur démographique et votre mise en page.

Answer 2

Votre ami devrait envisager de le faire avec CSS, à condition qu'il ne travaille qu'avec des navigateurs modernes autres que IE.

Exemple: http://jsfiddle.net/h9rpE/2/

html, body { 
    font: bold 20px Helvetica, Arial, sans-serif; 
    height: 100%; 
} 
body { 
    background: white -moz-linear-gradient(135deg, black, white) fixed; 
    background: white -webkit-gradient(linear, left top, right bottom, from(white), to(black)) fixed; 
} 

Ou vous pouvez utiliser background-size:

Exemple: http://jsfiddle.net/rLttj/2/

body { 
    background: white url('http://dropbox.smallparade.com/grad.jpg') no-repeat fixed; 
    -moz-background-size: 100% 100%; -webkit-background-size: 100% 100%; background-size: 100% 100%; 
}