{"id":1425,"date":"2011-08-18T19:48:41","date_gmt":"2011-08-18T18:48:41","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=1425"},"modified":"2015-01-18T16:25:49","modified_gmt":"2015-01-18T15:25:49","slug":"un-volet-coulissant-en-css3-grace-a-transition-et-target","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/un-volet-coulissant-en-css3-grace-a-transition-et-target","title":{"rendered":"Un volet coulissant en CSS3 gr\u00e2ce \u00e0 <code>transition<\/code> et <code>:target<\/code>"},"content":{"rendered":"<p>Un mois sans article ! Heureusement que les vacances me donnent une bonne excuse \ud83d\ude42<br \/>\nCe court article pour relayer un tutoriel diffus\u00e9 sur Alsacr\u00e9ations qui vous permettra de cr\u00e9er un volet coulissant gr\u00e2ce \u00e0 la pseudo-classe <code>:target<\/code> et \u00e0 la propri\u00e9t\u00e9 <code>transition<\/code> en <abbr>CSS<\/abbr>3.<!--more--><\/p>\n<p>Dans ce tutoriel divis\u00e9 en deux grosses \u00e9tapes, vous apprendrez \u00e0 faire appara\u00eetre un volet tout en transition (de mani\u00e8re anim\u00e9e et fluide).<\/p>\n<p class=\"center\"><img decoding=\"async\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2011\/08\/open.jpg\" alt=\"D\u00e9monstration du volet en train de s&#039;ouvrir.\" title=\"\" width=\"470\" height=\"276\" class=\"aligncenter size-full wp-image-1426\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2011\/08\/open.jpg 470w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2011\/08\/open-300x176.jpg 300w\" sizes=\"(max-width: 470px) 100vw, 470px\" \/><\/p>\n<p>L&rsquo;utilisation de <code>:target<\/code> permet de rendre la fonctionnalit\u00e9 accessible au clavier, et vous permet de partager une URL pourvue de l&rsquo;ancre permettant d&rsquo;afficher directement le volet ouvert.<\/p>\n<p>Vous trouverez sur la <a href=\"http:\/\/www.alsacreations.com\/tuto\/lire\/1234-creer-volet-coulissant-CSS3-target-transition.html\" title=\"Quitter CreativeJuiz pour vous rendre sur le tutoriel sur alsacreations.com\">page du tutoriel<\/a> les codes et d\u00e9monstrations n\u00e9cessaires \u00e0 la bonne r\u00e9alisation de cet objet.<\/p>\n<p>Bonne lecture ! \ud83d\ude09<\/p>\n<p><small>PS : merci \u00e0 <a href=\"http:\/\/goetter.fr\">Rapha\u00ebl<\/a> pour la base de travail !<\/small><\/p>\n<div class=\"sources\">\n<h2>Liens utiles et sources<\/h2>\n<ul>\n<li><a href=\"http:\/\/www.alsacreations.com\/tuto\/lire\/1234-creer-volet-coulissant-CSS3-target-transition.html\" title=\"Quitter CreativeJuiz pour vous rendre sur le tutoriel sur alsacreations.com\">page du tutoriel<\/a><\/li>\n<li><a href=\"http:\/\/jq.creativejuiz.fr\/plugins-jquery\/slidebox.php\">Plugin Juiz Slidebox<\/a><\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Un mois sans article ! Heureusement que les vacances me donnent une bonne excuse \ud83d\ude42 Ce court article pour relayer un tutoriel diffus\u00e9 sur Alsacr\u00e9ations qui vous permettra de cr\u00e9er un volet coulissant gr\u00e2ce \u00e0 la pseudo-classe :target et \u00e0 la propri\u00e9t\u00e9 transition en CSS3.<\/p>\n","protected":false},"author":4,"featured_media":340,"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":[120,378,121],"coauthors":[597],"class_list":["post-1425","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-css3","category-tutoriels","category-veille-technologique","tag-animation","tag-target","tag-transition"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/1425","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/comments?post=1425"}],"version-history":[{"count":0,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/1425\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/340"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=1425"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=1425"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=1425"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=1425"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}