CSS: un fond de couleur différente?

J'essaye de faire une implémentation de fond d'écran de fond en 2 parties de couleur différente.CSS: un fond de couleur différente?

Comme ceci: http://imgur.com/l6ajF2q

Pour cela, je l'ai écrit le code suivant (violon: http://jsfiddle.net/yrQAx/):

<!DOCTYPE html> 
<html> 
    <head> 
    <title>test</title> 
    <style type="text/css"> 
     .block { 
     position: relative; 
     background-color: #ddd; 
     overflow: hidden; 
     } 

     .block .bottom-color { 
     position: absolute; 
     z-index: 999; 
     top: 10%; 
     left: 0px; 
     width: 150%; 
     height: 300%; 
     background-color: #bbb; 
     -moz-transform:rotate(173deg); 
     -webkit-transform:rotate(173deg); 
     -o-transform:rotate(173deg); 
     -ms-transform:rotate(173deg); 
     transform:rotate(173deg); 
     filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1.73); 
     } 

     .block .content { 
     position: relative; 
     background: transparent; 
     z-index: 1000; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="block"> 
     <div class="content"> 
     <h2>Lorem ipsum</h2> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia, nibh nec cursus ultricies, est ligula tempus lectus, eget eleifend orci ipsum vitae velit. Proin mollis pharetra fermentum. Nullam sed semper nulla. Donec fermentum faucibus faucibus. Aenean rhoncus, mi viverra ultrices tincidunt, erat nibh auctor nisi, nec fermentum turpis orci euismod ligula. Sed eu tincidunt nunc, non molestie nisi. Nunc consequat, est in euismod consequat, libero justo laoreet lectus, id ornare ante tortor non magna. Fusce porta fringilla elementum. Maecenas pharetra nunc orci, ut facilisis ipsum iaculis ultrices. Vestibulum non odio eget enim pulvinar facilisis a ac nunc. Vestibulum sodales augue et lorem pulvinar bibendum id id turpis. 

     Vestibulum blandit cursus imperdiet. Vestibulum venenatis massa diam, auctor pretium nisl rhoncus sit amet. Sed interdum metus tellus, id faucibus risus rhoncus vel. Duis tincidunt est quis justo suscipit pulvinar. Donec condimentum libero in turpis interdum, sed feugiat enim tempus. Vivamus a quam venenatis dui porta consectetur. Mauris ac scelerisque erat. Cras adipiscing purus a sem varius interdum ac sit amet nunc. Quisque iaculis ante nisl, non fringilla ante egestas eget. Sed sit amet est ultricies, commodo odio vitae, blandit justo. Fusce volutpat laoreet blandit. Mauris sapien arcu, sollicitudin quis porta non, rhoncus sed orci. Pellentesque faucibus neque at est ultrices dignissim. Quisque viverra, tortor ut feugiat aliquet, nisl nulla ullamcorper nisl, id laoreet dui turpis vel mi. Nunc sagittis, dui in posuere pharetra, libero nulla sollicitudin quam, venenatis imperdiet mi velit quis nibh. 

     Pellentesque nibh massa, faucibus et nisl nec, ullamcorper tincidunt nibh. Proin iaculis commodo sapien, nec dapibus augue luctus eget. Praesent magna augue, semper non orci id, vehicula imperdiet justo. Nulla porta gravida euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque vitae est egestas, dictum quam ut, semper nisl. Suspendisse ligula orci, tincidunt venenatis convallis eu, condimentum in nunc. Vestibulum mollis fermentum malesuada. Sed rutrum erat quis quam molestie condimentum. 

     Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer consectetur congue massa, eu viverra nisi tristique ut. Maecenas pulvinar eget sem in pharetra. Nulla malesuada ultricies eros, ac tristique massa pulvinar ut. Fusce mattis auctor leo, ut ultrices eros ultricies vel. Fusce ac augue nec mi congue sollicitudin at quis nisi. In nec venenatis arcu. Integer ac mauris dapibus, imperdiet nibh suscipit, venenatis arcu. Etiam hendrerit magna ligula, et sodales nunc imperdiet id. Praesent dapibus erat ac ipsum tempor fringilla. Fusce posuere massa sit amet elit porta, in facilisis ipsum dapibus. 
     </div> 
     <div class="bottom-color"></div> 
    </div> 
    </body> 
</html>

Comme vous pouvez le voir est basé sur la rotation élément div.bottom-color qui est responsable de la deuxième couleur . Il y a un gros problème: chaque fois que je redimensionne le conteneur (div.block), la seconde couleur peut être perdue ou la première couleur (div.container arrière-plan) est perdue. Donc, ma question est: comment résoudre ce problème? Ou est-ce que je fais cela mal et cet effet devrait être fait d'une autre manière?

Source

2013-06-10 Daniel

Votre meilleur pari serait d'utiliser un fond dégradé. L'angle devra être ajusté, bien sûr.

http://cssdeck.com/labs/xbmc9zum

.content { 
    background: #ebf1f6; /* Old browsers */ 
    background: -moz-linear-gradient(-45deg, , #bbb, #bbb 20em, #ddd 20em); /* FF3.6+ */ 
    background: -webkit-linear-gradient(-45deg, , #bbb, #bbb 20em, #ddd 20em); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(-45deg, , #bbb, #bbb 20em, #ddd 20em); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(-45deg, , #bbb, #bbb 20em, #ddd 20em); /* IE10+ */ 
    background: linear-gradient(135deg, #bbb, #bbb 20em, #ddd 20em); /* W3C */ 
}

http://www.colorzilla.com/gradient-editor/

Source

2013-06-11 00:05:21 cimmanon

Ceci, parce que ma bête noire est un balisage qui n'a d'autre but que de fournir un gadget visuel –

Votre solution n'est pas compatible avec le cross-borwser. Ce que vous devez faire à la place est de créer une image .png qui a un triangle latéral avec le gris foncé. Et rends l'autre côté 100% transparent et laisse voir la couleur de fond. L'image que vous faites sera grande - mais heureusement, les images png ne prennent que quelques octets lorsque vous n'utilisez que 2 couleurs.

Source

2013-06-10 22:58:16 ProfileTwist

Je veux vraiment en faire du CSS pur. Je comprends que le format PNG est le moyen le plus efficace, mais il nécessitera des changements de backend que je voudrais éviter. – Daniel

Pour quelque chose de purement esthétique, est-ce important que ce ne soit pas compatible avec les navigateurs? Les fichiers PNG ne sont pas compatibles avec les navigateurs croisés si vous considérez les navigateurs de texte Lynx. – cimmanon

Citation de OP: 'J'essaie de faire une implémentation de fond de navigateur de crostsbrowser. '... d'où la convivialité cross-navigateur. Il n'y a pas d'autre solution. Vous devez utiliser CSS3 + ... mais vous allez aliéner les utilisateurs qui utilisent des navigateurs hérités (c'est-à-dire que mon travail utilise toujours Ie7). – ProfileTwist

Votre meilleur pari est d'utiliser la solution cimmanon (gradients).

Cependant, si vous voulez faire votre travail de solution, voir que CSS

top: 0px; 
    right: 0px; 
    width: 150%; 
    height: 300%; 
    background-color: #bbb; 
    -moz-transform:rotate(-26deg); 
    -webkit-transform:rotate(-26deg); 
    -o-transform:rotate(-26deg); 
    -ms-transform:rotate(-26deg); 
    transform:rotate(-26deg); 
    -webkit-transform-origin: top right; 
    transform-origin: top right;

J'ai ajouté une origine trandform de haut à droite. De cette façon, vous faites tourner la div autour de ce point. Notez également les 0px supérieurs et les 0px droits, qui font également ce point (le coin supérieur droit) bien positionné.

Avec ces changements, le div sera toujours où vous le voulez.

demo

Source

2013-06-11 16:06:08 vals

CSS: un fond de couleur différente?

Répondre

Questions connexes