\nL’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>\nL’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>\nComment faire ? Comment l’utiliser ?<\/h2>\n
Nous allons voir plusieurs exemples pour r\u00e9aliser deux effets similaires.<\/p>\n
D\u00e9monstration<\/a><\/p>\n![\"\"](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2012\/06\/blockquote-paper-css3.png\" "\\"\\"")
<\/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>\nCe 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>\nN’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>\nAller 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>\nLe 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
![\"\"](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2012\/06\/photo-paper-css3.jpg\" "\\"\\"")
<\/p>\n