{"id":4225,"date":"2011-07-06T12:45:40","date_gmt":"2011-07-06T10:45:40","guid":{"rendered":"http:\/\/flaven.fr\/?p=4225"},"modified":"2011-07-06T12:45:40","modified_gmt":"2011-07-06T10:45:40","slug":"comment-personnaliser-les-articles-les-boutons-et-les-images","status":"publish","type":"post","link":"https:\/\/flaven.fr\/2011\/07\/comment-personnaliser-les-articles-les-boutons-et-les-images\/","title":{"rendered":"Comment personnaliser les articles, les boutons et les images ?"},"content":{"rendered":"<p><body><\/p>\n<h4>Voici des exemples de personnalisation possibles avec 3WDOC Studio pour des boutons, images et articles de vos s\u00e9quences :<\/h4>\n<style>\n\t.button_0, .button_1, .button_2, .button_3, .button_4 {\n\t    background-attachment: scroll;\n\t}\n\t.button_2 {\n\t\tfont-family: Verdana, Arial, sans-serif;\n\t\tbackground-color: #423A24;\n\t\tbackground-position: 0% 0%;\n\t\tbackground-image: url();\n\t\tbackground-repeat: repeat;\n\t\tborder-style: solid;\n\t\tborder-width: 1px;\n\t\tborder-color: #515048;\n\t\topacity: 1;\n\t\tfont-size: 12px;\n\t\tfont-weight: normal;\n\t\tfont-style: italic;\n\t\tcolor: #ECE9DF;\n\t\ttext-align: left;\n\t\ttext-decoration: none;\n\t\ttext-transform: lowercase;\n\t\tpadding: 5px;\n\t\tborder-radius: 5px 5px 5px 5px;\n\t\tcursor: help;\n\t\t-webkit-transition: all 0.5s linear 0s;\n\t    -moz-transition: all 0.5s linear 0s;\n\t\ttransition: all 0.5s linear 0s;\n\t}\n\t.button_2:hover {\n\t\t-moz-transform: rotate(0deg) translateX(0px) translateY(0px) scaleX(1.5) scaleY(1.5);\n\t\t-webkit-transform: rotate(0deg) translateX(0px) translateY(0px) scaleX(1.5) scaleY(1.5);\n\t\ttransform: rotate(0deg) translateX(0px) translateY(0px) scaleX(1.5) scaleY(1.5);\n\t\tbackground-color: #696969;\n\t\tbackground-image: url(\"\");\n\t\tborder-color: #BFBFBF;\n\t\tborder-style: solid;\n\t\tborder-width: 0;\n\t\tcolor: #FFFFFF;\n\t\topacity: 0.7;\n\t\ttext-decoration: none;\n\t}<\/style>\n<div class=\"line\">\n<h5 class=\"title\"><em>Survolez les \u00e9l\u00e9ments suivants avec votre souris !<\/em> <\/h5>\n<div class=\"pbox button\" style=\"float:left; width:140px; height:50px; padding:20px 0;\">\n\t<button class=\"button_2\" > Button 2 <\/button>\n\t<\/div>\n<p><!-- End button --><\/p>\n<div class=\"pbox img\" style=\"float:left; width:450px; height:263px;\">\n<style>\n\t.the-content .img_3 {\n\t    border-color: transparent;\n\t    border-radius: 0 0 0 0;\n\t    border-style: solid;\n\t    border-width: 0;\n\t    cursor: auto;\n\t    opacity: 1;\n\t\tpadding:0;\n\t\t-webkit-transition: all 0.5s ease-in 0s;\n\t\t-webkit-box-shadow: black -5px 5px 10px;\n\t\t-moz-transition: all 0.5s ease-in 0s;\n\t\t-moz-box-shadow: black -5px 5px 10px;\n\t\ttransition: all 0.5s ease-in 0s;\n\t\tbox-shadow: black -5px 5px 10px;\n\t}\n\t.the-content .img_3:hover {\n\t\t-moz-transform: rotate(0deg) translateX(0px) translateY(0px) scaleX(1.1) scaleY(1.1);\n\t\t-webkit-transform: rotate(0deg) translateX(0px) translateY(0px) scaleX(1.1) scaleY(1.1);\n\t\ttransform: rotate(0deg) translateX(0px) translateY(0px) scaleX(1.1) scaleY(1.1);\n\t    border-color: transparent;\n\t    border-style: solid;\n\t    border-width: 0;\n\t    opacity: 1;\n\t}\n\t<\/style>\n<p>\t<img decoding=\"async\" class=\"img_3\" alt=\"img_3\" src=\"http:\/\/blog.3wdoc.com\/en\/wp-content\/uploads\/2011\/07\/route_css3.png\"><br \/>\n\t<\/p><\/div>\n<p><!-- End img --><\/p>\n<style>\n\t.article_2{\n\t\tfont-family: Verdana, Arial, sans-serif;\n\t\tbackground-color: #887F72;\n\t\tbackground-position: 0% 0%;\n\t\tbackground-repeat: repeat;\n\t\tborder-style: solid;\n\t\tborder-width: 5px;\n\t\tborder-color: #433F37;\n\t\topacity: 0.6;\n\t\tfont-size: 15px;\n\t\tfont-weight: normal;\n\t\tfont-style: normal;\n\t\tcolor: white;\n\t\ttext-align: left;\n\t\ttext-decoration: none;\n\t\ttext-transform: none;\n\t\tpadding: 10px;\n\t\tborder-radius: ;\n\t\tcursor: pointer;\n\t\t-webkit-transition: all 1s ease-in 0s;\n\t\t-moz-transition: all 1s ease-in 0s;\n\t\ttransition: all 1s ease-in 0s;\n\t}\n\t.article_2:hover{\n\t\tbackground-color: #B5A99B;\n\t\tbackground-image: url();\n\t\tborder-style: solid;\n\t\tborder-width: 5px;\n\t\tborder-color: #8C8169;\n\t\topacity: 1;\n\t\tcolor: white;\n\t\ttext-decoration: none;\n\t\t-webkit-transform: rotate(-3deg) translateX(0px) translateY(0px) scaleX(1) scaleY(1);\n\t\t-webkit-box-shadow: #333 2px 2px 5px;\n\t\t-moz-transform: rotate(-3deg) translateX(0px) translateY(0px) scaleX(1) scaleY(1);\n\t\t-moz-box-shadow: #333 2px 2px 5px;\n\t\ttransform: rotate(-3deg) translateX(0px) translateY(0px) scaleX(1) scaleY(1);\n\t\tbox-shadow: #333 2px 2px 5px;\n\t}\n\t<\/style>\n<div class=\"pbox article\" style=\"float:left; width:300px; height:150px;\">\n<article class=\"article_2\">\n\t\t\tArticle 2<br \/>\n\t\t\tLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br \/>\n\t\t<\/article>\n<\/p><\/div>\n<p><!-- End article --><br \/>\n\t<br style=\"clear:both;\" \/>\n\t<\/div>\n<p><!-- End line --><br \/>\n\t<br style=\"clear:both;\" \/><\/p>\n<p>Chaque \u00e9l\u00e9ment est personnalisable dans un onglet de style. Ce sont les m\u00eames param\u00e8tres pour les articles, les boutons et les images. Pour les images, \u00e9videmment, il n&#8217;y a pas de personnalisation du texte.<\/p>\n<p>Les trois onglets sont semblables \u00e0 l&#8217;image suivante.<\/p>\n<p>\t<a href=\"http:\/\/blog.3wdoc.com\/en\/wp-content\/uploads\/2011\/07\/style_article_button_image.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2011\/07\/article_fr.png\" alt=\"\" title=\"style_article_button_image\" width=\"800\" height=\"920\" class=\"aligncenter size-full wp-image-2932\" \/><\/a><\/p>\n<p>Ci-dessous, nous allons d\u00e9finir tous les \u00e9l\u00e9ments. Tout d&#8217;abord, vous devez d\u00e9finir le contour de l&#8217;\u00e9l\u00e9ment, puis d\u00e9finir le style du texte (uniquement pour les articles et les boutons) et les param\u00e8tres de &#8220;hover&#8221; (changements de style lorsque la souris survole l&#8217;\u00e9l\u00e9ment).<\/p>\n<h4>Le contour de l&#8217;\u00e9l\u00e9ment<\/h4>\n<p>\tChaque \u00e9l\u00e9ment (image, article et bouton) est dans une bo\u00eete qui permet de lui offrir un contour. Par exemple, vous pouvez cr\u00e9er une bordure autour d&#8217;une image, un article ou un bouton et le concevoir.<\/p>\n<ul>\n\t<!-- MAIN --><\/p>\n<table cellpadding=\"2\" cellspacing=\"2\" border=\"0\" width=\"100%\">\n<tr>\n<td valign=\"top\"><code>cursor :<\/code> D\u00e9finit le type de curseur au survol de la souris.<\/td>\n<tr>\n<td valign=\"top\"><code>border-radius:<\/code>D\u00e9finit l&#8217;arrondi des angles de l&#8217;\u00e9l\u00e9ment<\/td>\n<tr>\n<td valign=\"top\"><code>border-style:<\/code> D\u00e9finit le style de la bordure<\/td>\n<tr>\n<td valign=\"top\"><code>border-width:<\/code> D\u00e9finit la largeur de la bordure<\/td>\n<tr>\n<td valign=\"top\"><code>border-color:<\/code> D\u00e9finit la couleur de la bordure<\/td>\n<tr>\n<td valign=\"top\"><code>box-shadow: <\/code> D\u00e9finit l&#8217;ombre de l&#8217;\u00e9l\u00e9ment. Une ombre interne peut aussi \u00eatre appliqu\u00e9e<\/td>\n<\/tr>\n<\/table>\n<p>\t<!-- \/\/ MAIN -->\n\t<\/ul>\n<h4>Les param\u00e8tres de texte<\/h4>\n<p>\tCe sont tous les param\u00e8tres pour personnaliser le texte, <strong>SEULEUMENT POUR UN ARTICLE OU UN BOUTON <\/strong>! En fait, vous pouvez contr\u00f4ler l&#8217;ensemble de son apparence (police, taille, couleur, etc).<\/p>\n<ul>\n\t<!-- MAIN --><\/p>\n<table cellpadding=\"2\" cellspacing=\"2\" border=\"0\" width=\"100%\">\n<tr>\n<td valign=\"top\"><code>color:<\/code> D\u00e9finit la couleur du texte<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\"><code>font-size:<\/code> D\u00e9finit la taille de la police en pixel <\/td>\n<\/tr>\n<tr>\n<td valign=\"top\"><code>font-family:<\/code> D\u00e9finit la police<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\"><code>font-weight:<\/code> D\u00e9finit la graisse de la police<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\"><code>font-style: <\/code>D\u00e9finit le style de la police<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\"><code>text-align:<\/code> D\u00e9finit l&#8217;alignement du texte (\u00e0 gauche, centr\u00e9, \u00e0 droite)<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\"><code>text-decoration:<\/code> D\u00e9finit la d\u00e9coration du texte<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\"><code>text-transform:<\/code> D\u00e9finit la casse du texte<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\"><code>padding:<\/code>D\u00e9finit la marge autour du texte par rapport \u00e0 son contenant<\/td>\n<\/tr>\n<\/table>\n<p>\t<!-- \/\/ MAIN -->\n\t<\/ul>\n<h4>Param\u00e8tres &#8220;Hover&#8221; <\/h4>\n<p>Ce sont tous les changements de style d&#8217;un \u00e9l\u00e9ment lorsque la souris le survole. Avec ces param\u00e8tres, vous pouvez cr\u00e9er des changements de style CSS, comme la couleur, la bordure ou l&#8217;opacit\u00e9.<br \/>\nMais vous pouvez \u00e9galement ajouter des transitions CSS3 , ces param\u00e8tres permettent des petites animations.<\/p>\n<ul>\n\t<!-- MAIN --><\/p>\n<table cellpadding=\"2\" cellspacing=\"2\" border=\"0\" width=\"100%\">\n<tr>\n<td valign=\"top\"><code>color:hover:<\/code>D\u00e9finit la couleur du texte au survol de la souris<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\"><code>text-decoration:hover:<\/code> D\u00e9finit la d\u00e9coration du texte au survol de la souris<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\"><code>background-color:hover:<\/code> D\u00e9finit la couleur d&#8217;arri\u00e8re plan au survol de la souris<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\"><code>background-image:hover:<\/code> D\u00e9finit l&#8217;image d&#8217;arri\u00e8re plan au survol de la souris<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\"><code>border-style:hover:<\/code> D\u00e9finit le style de bordure au survol de la souris<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\"><code>border-width:hover:<\/code> D\u00e9finit la largeur de la bordure au survol de la souris<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\"><code>border-color:hover:<\/code> D\u00e9finit la couleur de bordure au survol de la souris<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\"><code>opacity:hover:<\/code> D\u00e9finit l&#8217;opacit\u00e9 au survol de la souris<\/td>\n<td valign=\"top\"><\/td>\n<\/tr>\n<tr>\n<td valign=\"top\"><code>transition-delay:<\/code> D\u00e9finit le temps de d\u00e9marrage de l&#8217;effet de transition<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\"><code>transition-timing-function:<\/code> D\u00e9finit la fluidit\u00e9 de l&#8217;effet de transition<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\"><code>transition-duration:<\/code> D\u00e9finit la dur\u00e9e de l&#8217;effet de transition<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\"><code>transition-property:<\/code> D\u00e9finit l&#8217;\u00e9l\u00e9ment de style sur lequel l&#8217;effet de transition va s&#8217;appliquer<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\"><code>rotate:hover: <\/code>D\u00e9finit en degr\u00e9 l&#8217;angle de rotation, de 180\u00b0 \u00e0 -180\u00b0, au survol de la souris<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\"><code>scaleY:hover:<\/code> D\u00e9finit un redimensionnement vertical au survol de la souris. Cela peut-\u00eatre un agrandissement ou un rapetissement<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\"><code>scaleX:hover:<\/code> D\u00e9finit un redimensionnement horizontal au survol de la souris. Cela peut-\u00eatre un agrandissement ou un rapetissement<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\"><code>translateY:hover:<\/code> D\u00e9finit un d\u00e9placement vertical au survol de la souris<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\"><code>translateX:hover:<\/code> D\u00e9finit un d\u00e9placement horizontal au survol de la souris<\/td>\n<\/tr>\n<\/table>\n<p>\t<!-- \/\/ MAIN -->\n\t<\/ul>\n<h2>Pour aller plus loin<\/h2>\n<ul>\n<li>Tutorial interactif <br \/><a href=\"https:\/\/flaven.fr\/2011\/06\/22\/comment-appliquer-un-style-a-une-image\/\" target=\"_blank\">Comment appliquer un style \u00e0 une image ?<\/a><\/li>\n<li>Tutorial interactif <br \/><a href=\"https:\/\/flaven.fr\/2011\/06\/25\/appliquer-un-style-a-un-bouton\/\" target=\"_blank\">Appliquer un style \u00e0 un bouton<\/a><\/li>\n<li>Tutorial interactif <br \/><a href=\"https:\/\/flaven.fr\/2011\/06\/27\/comment-appliquer-un-style-a-un-article\/\" target=\"_blank\">Comment appliquer un style \u00e0 un article ?<\/a><\/li>\n<li>Tutorial<br \/><a href=\"https:\/\/flaven.fr\/2011\/07\/08\/comment-utiliser-lediteur-de-style-de-3wdoc-studio\/\" target=\"_blank\">Comment utiliser l\u2019\u00e9diteur de style ?<\/a><\/li>\n<li>Tutorial<br \/><a href=\"https:\/\/flaven.fr\/2011\/06\/24\/comment-personnaliser-les-boutons-ui-play-stop-fwd-etc\/\" target=\"_blank\">Comment personnaliser les boutons UI (play, stop, fwd, etc.) ?<\/a><\/li>\n<li>Tutorial<br \/><a href=\"https:\/\/flaven.fr\/2011\/07\/04\/comment-personnaliser-le-player\/\" target=\"_blank\">Comment personnaliser le player ?<\/a><\/li>\n<\/ul>\n<p><\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Voici des exemples de personnalisation possibles avec 3WDOC Studio pour des boutons, images et articles de vos s\u00e9quences : Survolez les \u00e9l\u00e9ments suivants avec votre&hellip; <\/p>\n<p class=\"text-center\"><a href=\"https:\/\/flaven.fr\/2011\/07\/comment-personnaliser-les-articles-les-boutons-et-les-images\/\" class=\"more-link\">Continue reading &rarr; <span class=\"screen-reader-text\">Comment personnaliser les articles, les boutons et les images ?<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":4298,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bf_ai_meta_description":"Personnalisez articles, boutons et images avec 3WDOC Studio. D\u00e9finissez contours et styles pour des s\u00e9quences uniques. Suivez les exemples.","bf_ai_og_title":"Personnaliser articles, boutons et images","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[3433,1],"tags":[],"class_list":["post-4225","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3wdoc-tutorials","category-miscellaneous-other"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3Vuhl-169","jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/4225","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/comments?post=4225"}],"version-history":[{"count":0,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/4225\/revisions"}],"wp:attachment":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media?parent=4225"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/categories?post=4225"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/tags?post=4225"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}