Angle de 45 degrés + ombre de boîte-en utilisant rien mais CSS
j'ai besoin de recréer le dessin suivant en utilisant uniquement CSS:
ce que vous voyez dans l'image est le haut d'un conteneur de site web - les "liens" font partie du menu principal.
en l'état, j'ai créé le conteneur mais je ne sais pas comment faire la pente sur la navigation sans utiliser une image.
pour information: je préfère ne pas utiliser une image comme les chances de l'ombre de boîte sur la pente correspondance avec zone d'ombre rendus par le navigateur sont minces à aucun, surtout quand il s'agit de plusieurs navigateurs.
je pensais à un div positionné et rotatif avec un fond blanc et une ombre de boîte, mais je n'ai pas encore été capable de le construire.
des idées?
4 réponses
Il y a quelque chose qui s'appelle papier de verre cela peut vous aider à transformer vos éléments, même en IE!
.myDiv {
-sand-transform: rotate(45deg);
}
vous pouvez simplement le brancher sur votre site et vous êtes prêt.
vous pouvez aussi utiliser les transformations CSS3, que vous avez demandées dans votre question: "N'utiliser que CSS."
Pour ce faire, vous pouvez utiliser:
.myDiv {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=5); /*for IE*/
}
Et merci à patrick et Robert pour l'Opéra équivalent:
-o-transform: rotate(45deg);
Internet Explorer va tomber ClearType sur tout texte qui a un filtre appliqué. Mais vous pouvez ajouter un élément supplémentaire vide à l'intérieur de l'élément principal et appliquer un filtre à cet élément supplémentaire. Après cette ClearType sera pas ruiné et le même résultat peut être obtenu.
Pour la rotation, vous êtes à la recherche de:
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
Gardez à l'esprit que la rotation est un CSS3 attribut, de sorte que vous n'allez pas avoir le même comportement sur tous les navigateurs. Plutôt que de faire juste l'inclinaison avec une image, il serait probablement mieux de recréer l'ensemble du contour. Je l'approcherais avec:
- la section en-tête, qui aurait l'inclinaison, l'ombre, le fond du menu et le rembourrage en haut du contenu, à peu près comme votre screenshot y.
- une image qui peut répéter-y sur tout le corps du contenu avec une ombre.
- la section du pied de page.
Vous pouvez également utiliser des bibliothèques externes pour tenter de recréer des attributs CSS3, mais les images peuvent être la manière la plus facile car vous savez comment elles seront rendues.
je pense que vous pouvez utiliser les techniques de http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
c'est une très belle compilation et source d'inspiration pour l'utilisation de CSS. Profiter.
PS: il est plus sûr que CSS3 transforme.
la Rotation semble inutile. J'essaierais d'utiliser un effet CSS triangle.
je vais supposer que vos liens sont dans un ul ainsi votre css pourrait choisir ul:before et dans la forme correcte.
je ne sais pas ce qui va arriver avec le box-shadow mais cela pourrait valoir le coup, et sera probablement plus facile de s'aligner dans IE sans recourir au JavaScript.