{"id":430,"date":"2010-08-10T10:55:15","date_gmt":"2010-08-10T08:55:15","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=430"},"modified":"2015-01-18T17:38:40","modified_gmt":"2015-01-18T16:38:40","slug":"effet-lightbox-en-css3-grace-a-transition","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/effet-lightbox-en-css3-grace-a-transition","title":{"rendered":"Effet Lightbox en CSS3 gr\u00e2ce \u00e0 transition"},"content":{"rendered":"

C’est en parcourant un lien<\/a> partag\u00e9 par Rapha\u00ebl<\/a> hier dans la journ\u00e9e, que je me suis d\u00e9cid\u00e9 \u00e0 tripoter un petit peu de CSS et HTML pour am\u00e9liorer le rendu de M. Chris Coyier.<\/p>\n

O\u00f9 cela se passe-t-il ?<\/h2>\n

Vous trouverez les fichiers sur l’espace de test de CreativeJuiz<\/a>, pr\u00e9cis\u00e9ment \u00e0 cette adresse :
\nhttp:\/\/www.creativejuiz.fr\/trytotry\/lightbox-with-tabindex-and-css3\/<\/a><\/p>\n

Le HTML<\/h2>\n

Le code HTML utilis\u00e9 est vraiment basique. Pour pimenter le jeu j’ai utilis\u00e9 HTML5.
\nL’id\u00e9e c’est d’avoir un conteneur, une image et un titre pour l’image… rien de mieux qu’un jeu de figure<\/code> et figcaption<\/code> pour cela !<\/p>\n

<figure tabindex=\"0\"> \r\n   <img src=\"images\/demo1.jpg\" alt=\"Demo\" \/> \r\n   <figcaption>Rorschach Artefact<\/figcaption> \r\n<\/figure> \r\n<span><\/span> \r\n\t\t\t\t\t\t\t\r\n<figure tabindex=\"0\"> \r\n   <img src=\"images\/demo2.jpg\" alt=\"Demo\" \/> \r\n   <figcaption>Mystic Light<\/figcaption> \r\n<\/figure> \r\n<span><\/span> \r\n\t\t\t\t\t\t\t\r\n<figure tabindex=\"0\"> \r\n   <img src=\"images\/demo3.jpg\" alt=\"Demo\" \/> \r\n   <figcaption>A simple idea...<\/figcaption> \r\n<\/figure> \r\n<span><\/span><\/code><\/pre>\n
Vous remarquerez l’ajout d’un attribut tabindex<\/code> sur chacun des figure<\/code>, le but est de permettre le focus sur ces \u00e9l\u00e9ments.
\nL’utilisation de span<\/code> vides permettra d’imiter le petit overlay<\/em> que l’on retrouve souvent sur les versions JavaScript des lightbox (fancybox, zommbox, etc.).<\/p>\n
Le CSS<\/h2>\n
Nous allons b\u00eatement effectuer des animations au focus des figure<\/code>, c’est tout l’int\u00e9r\u00eat des tabindex :<\/p>\n
\"\"<\/p>\n
#slideshow figure {\r\n\tposition: relative;\r\n\tfloat: left;\r\n\tmargin: 20px 37px;\r\n\tz-index: 100;\r\n\twidth: 200px;\r\n\tbackground: #fff;\r\n\tborder: 10px solid #fff;\r\n\t\r\n\t-webkit-border-radius: 8px;\r\n\t-moz-border-radius: 8px;\r\n\tborder-radius: 8px;\r\n\t\r\n\t-webkit-box-shadow: 0 3px 10px #ccc; \r\n\t-moz-box-shadow: 0 3px 10px #ccc;\r\n\tbox-shadow: 0 3px 10px #ccc;\r\n\t\r\n\t-webkit-transition: all 0.7s ease; \r\n\t-moz-transition: all 1s ease;\r\n\t-o-transition: all 1s ease;\r\n\ttransition: all 1s ease;\r\n}\r\n#slideshow figure img {\r\n\twidth: 100%;\r\n}\r\n#slideshow figcaption {\r\n\tfont-family: verdana, arial, sans-serif;\r\n\tfont-size: 1.1em;\r\n\ttext-align: center;\r\n\tcolor: #5d7885;\r\n\tbackground: #fff;\r\n}\r\n\r\n\/*actions*\/\r\n#slideshow figure:focus {\r\n\toutline: none;\r\n\tz-index: 200;\r\n\tmargin-top: 100px;\r\n    -webkit-transform: scale(1.8); \r\n\t-moz-transform: scale(1.8);\r\n\t-o-transform: scale(1.8);\r\n\ttransform: scale(1.8);\r\n    \r\n\t-webkit-box-shadow: 0 3px 10px #333; \r\n\t-moz-box-shadow: 0 3px 10px #333;\r\n\tbox-shadow: 0 3px 10px #333;\r\n}\r\n\r\n#slideshow figure:focus+span {\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tleft: 0;\r\n\twidth: 100%;\r\n\theight: 100%;\r\n\tbackground: #000;\r\n\tz-index: 150;\r\n\t-moz-opacity: 0.6;\r\n\t-webkit-opacity: 0.6;\r\n\topacity: 0.6;\r\n}<\/code><\/pre>\n
Beaucoup de code, mais rien de bien compliqu\u00e9, il y a beaucoup de lignes dupliqu\u00e9es \u00e0 cause des diff\u00e9rences de prise en charge de CSS3 des navigateurs \ud83d\ude09
\nPour que l’effet overlay<\/em> couvre tout le viewport<\/em>, il faudra ruser pour que chaque parent du span<\/code> soit \u00e0 100% en hauteur et sans position relatif (assez marrant en pratique, en effet).<\/p>\n
Contenteditable<\/h2>\n
M. Chris Coyier, dans son article<\/a>, utilisait (hier m\u00eame) l’attribut HTML5 contenteditable pour rendre \u00ab\u00a0focusable\u00a0\u00bb un \u00e9l\u00e9ment.
\nC’est toujours bon de savoir que des styles pourront \u00eatre appliqu\u00e9s \u00e0 ces \u00e9l\u00e9ments au contenu \u00e9ditable, c’est un comportement qui devient donc tr\u00e8s proche d’un simple input<\/code> ou textarea<\/code>.<\/p>\n
Liens utiles :
\n– TryToTry – Espace de test de CreativeJuiz<\/a>
\n– TryToTry – Lightbox en CSS3 avec Tabindex<\/a>
\n– Article de Chris Coyier sur le sujet<\/a><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
C’est en parcourant un lien partag\u00e9 par Rapha\u00ebl hier dans la journ\u00e9e, que je me suis d\u00e9cid\u00e9 \u00e0 tripoter un petit peu de CSS et HTML pour am\u00e9liorer le rendu de M. Chris Coyier.<\/p>\n","protected":false},"author":4,"featured_media":317,"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":[155,156,16,153,154,121],"coauthors":[597],"class_list":["post-430","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-css3","category-tutoriels","category-veille-technologique","tag-clavier","tag-focus","tag-html5","tag-lightbox","tag-tabindex","tag-transition"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/430","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=430"}],"version-history":[{"count":0,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/430\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/317"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=430"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=430"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=430"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=430"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}