{"id":2588,"date":"2012-06-04T08:41:45","date_gmt":"2012-06-04T06:41:45","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=2588"},"modified":"2012-06-10T20:25:22","modified_gmt":"2012-06-10T18:25:22","slug":"css3-effet-feuilles-superposees","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/css3-effet-feuilles-superposees","title":{"rendered":"CSS3 – Effet de feuilles superpos\u00e9es"},"content":{"rendered":"

Il y a quelques jours de cela je r\u00e9pondais \u00e0 un petit tweet d’un confr\u00e8re pour donner une astuce sur la cr\u00e9ation d’un effet graphique de feuilles superpos\u00e9es en CSS3. Le d\u00e9fi \u00e9tait de ne pas multiplier les \u00e9l\u00e9ments HTML pour r\u00e9aliser cet effet. C’est chose faite. Jetons un \u0153il sur la technique utilis\u00e9e. <\/p>\n

Tweet et r\u00e9ponse<\/h2>\n
\n

L’un de vous saurait-il faire \u00e7a en CSS3 ? Merci d’avance \ud83d\ude09 twitpic.com\/9mgntn<\/a><\/p>\n

— Daniel Roch, SeoMix (@rochdaniel) Mai 18, 2012<\/a><\/p><\/blockquote>\n

L’id\u00e9e me semblait int\u00e9ressante, voici ma proposition visible sur dabblet et correspondant au mieux \u00e0 l’image fournie par Daniel :
\nEffet de feuilles superpos\u00e9es<\/a><\/p>\n

Comment faire ? Comment l’utiliser ?<\/h2>\n

Nous allons voir plusieurs exemples pour r\u00e9aliser deux effets similaires.<\/p>\n

D\u00e9monstration<\/a><\/p>\n

\"\"<\/p>\n

Pour r\u00e9aliser le premier effet, utilisons un code HTML simple correspondant \u00e0 un bloc de citation :<\/p>\n

<blockquote>\r\n    <p>C'est en forgeant qu'on devient forgeron<\/p>\r\n<\/blockquote><\/code><\/pre>\n
Ce code suffit amplement pour notre affaire. Voyons notre CSS.<\/p>\n
\/* on fixe la largeur du bloc (optionnel)\r\n   et on le d\u00e9finit comme r\u00e9f\u00e9rent *\/\r\nblockquote {\r\n    position: relative;\r\n    width: 300px;\r\n    padding: 10px;\r\n}\r\n\/* on ajoute des effets graphiques\r\n   sur nos futures feuilles *\/\r\nblockquote,\r\nblockquote:after,\r\nblockquote:before {\r\n    background: #fff;\r\n    box-shadow: 0 0 4px rgba(0,0,0,0.4);\r\n}\r\n \r\n\/* on utilise les pseudo \u00e9l\u00e9ments pour ajouter des feuilles *\/\r\nblockquote:after,\r\nblockquote:before {\r\n    position: absolute;\r\n    top: 0; right:3px; bottom:0; left:-3px;\r\n    content: \"\";\r\n    z-index: -10;\r\n    \/* d\u00e9finit le centre de transformation *\/\r\n    transform-origin: 100% 0;\r\n}\r\nblockquote:after {\r\n    transform: rotate(-0.6deg);\r\n}\r\nblockquote:before {\r\n    transform: rotate(-1.2deg);\r\n    right: 5px; left: -5px;\r\n}<\/code><\/pre>\n
N’oubliez pas que ce code CSS n’est pas pr\u00e9fix\u00e9 (-webkit-, -moz-, etc.) et qu’il convient de le faire pour les propri\u00e9t\u00e9s CSS3 (ici box-shadow<\/code>, transform-origin<\/code> et transform<\/code>).<\/p>\n
Aller plus loin<\/h2>\n
L’exemple de code fourni \u00e0 Daniel propose d’ajouter un auteur de la citation, ainsi que des guillemets autour de celle-ci.
\nAjoutez un paragraphe portant le nom de l’auteur apr\u00e8s le paragraphe de la citation.<\/p>\n
Puis en CSS nous allons utiliser \u00e0 nouveau les pseudo \u00e9l\u00e9ments pour ajouter nos guillemets. La fonte Georgia propose de jolis guillemets, soit dit en passant.<\/p>\n
\/* on style les deux paragraphes *\/\r\np {\r\n    margin:0;\r\n}\r\nblockquote p + p {\r\n    text-align: right;\r\n    line-height: 1.2em;\r\n    margin:-1.1em 0 0 0;\r\n    color: #999;\r\n}\r\n \r\n\/* on ajoute les guillemets *\/\r\nblockquote p:first-child:before,\r\nblockquote p:first-child:after {\r\n\tfont-size: 1.75em;\r\n\tfont-family: Georgia, serif;\r\n\tcolor: #888;\r\n}\r\nblockquote p:first-child:before {\r\n\tcontent : \"\u201c \";\r\n\tvertical-align: -.05em;\r\n}\r\nblockquote p:first-child:after {\r\n\tcontent : \" \u201d\";\r\n\tvertical-align: -.55em;\r\n}<\/code><\/pre>\n
Le plus difficile ici est de trouver le bon alignement pour les guillemets, tout en jouant avec les marges des paragraphes.<\/p>\n
Toujours plus loin (toujours plus fort !)<\/h2>\n
\"\"<\/p>\n
Pour r\u00e9aliser le deuxi\u00e8me effet de la d\u00e9monstration<\/a>, nous allons appliquer les m\u00eames styles sur des liens autour d’images. Le code HTML est plut\u00f4t simple :<\/p>\n
<a href=\"#\">\r\n    <img src=\"http:\/\/lorempixel.com\/200\/200\/sports\/1\" alt=\"\" width=\"200\" height=\"200\">\r\n<\/a>\r\n<a href=\"#\">\r\n    <img src=\"http:\/\/lorempixel.com\/200\/200\/sports\/4\" alt=\"\" width=\"200\" height=\"200\">\r\n<\/a>\r\n<a href=\"#\">\r\n    <img src=\"http:\/\/lorempixel.com\/200\/200\/sports\/5\" alt=\"\" width=\"200\" height=\"200\">\r\n<\/a><\/code><\/pre>\n
Nous pr\u00e9parons ensuite notre code CSS, fortement ressemblant au pr\u00e9c\u00e9dent :<\/p>\n
a {\r\n    display:inline-block;\r\n    position: relative;  \r\n    padding: 10px;\r\n    margin: 0 2em;\r\n    width: 200px;\r\n    height: 200px;\r\n}\r\n\/* on ajoute des effets graphiques \r\n   sur nos futures feuilles *\/  \r\na,\r\na:after,\r\na:before {  \r\n    background: #fff;\r\n    \/* ombres l\u00e9g\u00e8rement diminu\u00e9es en opacit\u00e9 *\/\r\n    box-shadow: 0 0 4px rgba(0,0,0,0.2);  \r\n    \/* on pr\u00e9voit une transition g\u00e9n\u00e9rale *\/\r\n    transition: all .7s;\r\n}  \r\n \t   \r\n\/* on utilise les pseudo \u00e9l\u00e9ments pour ajouter des feuilles *\/  \r\na:after,\r\na:before {\r\n    position: absolute;  \r\n    top: 0; right:0; bottom:0; left:0;  \r\n    content: \"\";  \r\n    z-index: -10;  \r\n    \/* d\u00e9finit le centre de transformation *\/  \r\n    transform-origin: 100% 0;\r\n}<\/code><\/pre>\n
Nous pr\u00e9parons notre transition sur la rotation, le d\u00e9placement et le changement d’ombre de notre \u00e9l\u00e9ment. Pour simplifier, j’ai fait le choix d’effectuer la transition sur all<\/code>.
\nAu survol ou au focus sur un lien, nous effectuons nos changements d’\u00e9tat :<\/p>\n
a:hover:after,\r\na:focus:after\t{  \r\n    transform: rotate(-1deg); \r\n    right: 6px; left:-6px;\r\n}  \r\na:hover:before,\r\na:focus:before {  \r\n    transform: rotate(-2.2deg);  \r\n    right: 12px; left: -12px;  \r\n}\r\n \r\n\/* on r\u00e9-hausse l'opacit\u00e9 des ombres *\/\r\na:hover,\r\na:hover:after,\r\na:hover:before,\r\na:focus,\r\na:focus:after,\r\na:focus:before\t{\r\n    box-shadow: 0 0 4px rgba(0,0,0,0.4);  \r\n}<\/code><\/pre>\n
Les s\u00e9lecteurs CSS sont un peu longs du fait de la prise en charge du focus et du survol sur les 3 \u00e9l\u00e9ments.<\/p>\n
D\u00e9monstration<\/a><\/p>\n
Et voil\u00e0, vous \u00eates arriv\u00e9s au bout !
\nJ’ai bien conscience que les commentaires au sein du code CSS ne seront peut-\u00eatre pas suffisants pour tout le monde, n’h\u00e9sitez pas \u00e0 commenter si vous rencontrez des difficult\u00e9s.<\/p>\n","protected":false},"excerpt":{"rendered":"
Il y a quelques jours de cela je r\u00e9pondais \u00e0 un petit tweet d’un confr\u00e8re pour donner une astuce sur la cr\u00e9ation d’un effet graphique de feuilles superpos\u00e9es en CSS3. Le d\u00e9fi \u00e9tait de ne pas multiplier les \u00e9l\u00e9ments HTML pour r\u00e9aliser cet effet. C’est chose faite. Jetons un \u0153il sur la technique utilis\u00e9e.<\/p>\n","protected":false},"author":4,"featured_media":2603,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[17,9,12],"tags":[323,142,428,463,121],"coauthors":[],"class_list":["post-2588","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-css3","category-tutoriels","category-veille-technologique","tag-box-shadow","tag-css","tag-css3","tag-transform-origin","tag-transition"],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t