Bonjour,
ayant réalisé ma maquette sur photoshop, je me confronte maintenant à un léger problème lors du développement.
Devant réalisé une diagonale avec ombre portée (voir image : http://img15.hostingpics.net/pics/885525port.png), j'ai tout d'abord opté pour une div avec la propriété transform rotate et box-shadow. Cependant, impossible d'arriver à un résultat probant sans mettre une div de milliers de pixels.
Avez vous des suggestions pour arriver à ce résultat?
Je ne voulez pas mettre l'image en dur car le site est composé de plusieurs diagonales telles que celle-ci (largeur : 1500px), et ça risque fortement d'alourdir la page.
Merci d'avance pour vos aides.
7 réponses
Pour IE < 9, pas de transform rotate.
IE < 9 = 70% des utilisateurs ?
image -> plus lourd mais compatible
Perso je ferais avec des images en essayant d'en mettre le moins possible
Peut être qu'avec un script utilisant un bout de diagonale en image qui reconstruit toute la diagonale en jouant sur le placement des éléments ça pourrait le faire ?
Bonjour,
Il est clair qu'utiliser une image sera bien meilleur car plus compatible. De plus, même si l'image est utilisée plusieurs fois, cela ne change rien. L'image n'est chargée qu'une fois et le même fichier est intégré à la page autant de fois que demandé.
Sinon tu code ta div normalement avec le fond en dégradé, (avec un générateur de dégradé css3, plus simple) ensuite tu crée un png (transparence) avec uniquement l'effet d'ombre. Ensuite tu essais de superposé l'effet d'ombre dessus la div précédente avec l'aide de z-index. A voir si ça marche et l'effet produit.
Salut,
Ton effet est possible en full css3 grâce a un background dégradé: Grandient Generator
Compatible Opera, Firefox, Chrome, IE10 et IE9 a moitié (f***ing IE).
Si c'est un effet de "relief" que tu veut faire il faut que tu mette un fond uni a ta div et que tu rajoute une div par dessus (ou va voir du coté de :before :after) de la même taille que t'a div avec un font dégradé en parti transparent dans ce style :
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMTUiLz4KICAgIDxzdG9wIG9mZnNldD0iNTElIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuNDIiLz4KICAgIDxzdG9wIG9mZnNldD0iNTYlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMTYiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjIyIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(-45deg, rgba(0,0,0,0.21) 0%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0.42) 51%, rgba(0,0,0,0.16) 56%, rgba(0,0,0,0.22) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(0,0,0,0.21)), color-stop(50%,rgba(0,0,0,0.15)), color-stop(51%,rgba(0,0,0,0.42)), color-stop(56%,rgba(0,0,0,0.16)), color-stop(100%,rgba(0,0,0,0.22))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(0,0,0,0.21) 0%,rgba(0,0,0,0.15) 50%,rgba(0,0,0,0.42) 51%,rgba(0,0,0,0.16) 56%,rgba(0,0,0,0.22) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(0,0,0,0.21) 0%,rgba(0,0,0,0.15) 50%,rgba(0,0,0,0.42) 51%,rgba(0,0,0,0.16) 56%,rgba(0,0,0,0.22) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(0,0,0,0.21) 0%,rgba(0,0,0,0.15) 50%,rgba(0,0,0,0.42) 51%,rgba(0,0,0,0.16) 56%,rgba(0,0,0,0.22) 100%); /* IE10+ */
background: linear-gradient(135deg, rgba(0,0,0,0.21) 0%,rgba(0,0,0,0.15) 50%,rgba(0,0,0,0.42) 51%,rgba(0,0,0,0.16) 56%,rgba(0,0,0,0.22) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#36000000', endColorstr='#38000000',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */Cordialement,
TWIK.
Salut,
Pour réaliser cet effet tu peux aussi faire deux triangles dessinés en CSS3 et faire passer celui du bas au premier plan grâce à la propriété z-index ou avec une position absolute.
Pour l'ombre c'est simple tu utilises les ombres css3 sur le triangle du bas et tu places l'ombre au niveau de l'hypothénuse ;) .
Je te l'ai fait à l'aide de Jsfiddle tiens:
Jsfiddle
Tu n'as plus qu'à ajouter une ombre interne au triangle haut et placé sur l'hypothénuse puisqu'il est en absolute il est au dessus du triangle du bas ;).