{"id":1556,"date":"2011-05-25T12:17:05","date_gmt":"2011-05-25T10:17:05","guid":{"rendered":"http:\/\/www.nyamsprod.com\/blog\/?p=1556"},"modified":"2012-03-07T14:18:16","modified_gmt":"2012-03-07T12:18:16","slug":"pure-html-post-it","status":"publish","type":"post","link":"https:\/\/nyamsprod.com\/blog\/pure-html-post-it\/","title":{"rendered":"Pure HTML post it"},"content":{"rendered":"
\n

Attention:<\/strong> Les informations de ce billet sont susceptibles d'être obsolètes car vieux de plus 2 ans.<\/p>\n

Warning: <\/strong> The information you are reading may be obsolete, this post was published more than 2 years ago.<\/p>\n<\/div>

Here’s a little trick that I’ve come up with yesterday after seeing what a colleague of mine was trying to achieve using background images. I’ve created an html Post It using css 2.1 and css3 properties. This example should work on any recent browser and degrade gracefully on older versions of IE. The only problem that I encountered was with Opera 11.10<\/em> with a little CSS bug when rendering the <tfoot><\/code> CSS property<\/a>.<\/p>\n

Voici une exp\u00e9rience CSS3 que j’ai concoct\u00e9 hier apr\u00e8s avoir vu un coll\u00e8gue essay\u00e9 de cr\u00e9er une effet papier autoadh\u00e9sive amovible en utilisant une image d’un Post It vierge en image d’arri\u00e8re plan. Ma version elle est bas\u00e9e \u00e0 100% sur du HTML + CSS et se d\u00e9cline sans probl\u00e8me sur les versions anciennes de Internet Explorer qui ne prennent pas en charge tous le CSS 2.1 ou les propri\u00e9t\u00e9s \u00e9mergentes du CSS3. Je n’ai rencontr\u00e9 qu’un seul bug mineur sous Opera 11.10<\/em><\/a> que je n’ai pas essay\u00e9 de corriger car il n’est pas li\u00e9 \u00e0 l’effet Post It mais plut\u00f4t au rendu des propri\u00e9t\u00e9s CSS appliqu\u00e9 \u00e0 la balise\u00a0 <tfoot><\/code> du tableau utilis\u00e9 dans la page.<\/p>\n

Demo: <\/strong>Pure CSS PostIt <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Attention: Les informations de ce billet sont susceptibles d’être obsolètes car vieux de plus 2 ans. Warning: The information you are reading may be obsolete, this post was published more than 2 years ago. Here’s a little trick that I’ve come up with yesterday after seeing what a colleague of mine was trying to achieve […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"aside","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[5],"tags":[78,135,292,404,593,594],"class_list":["post-1556","post","type-post","status-publish","format-aside","hentry","category-web","tag-box-shadow","tag-css","tag-javascript","tag-opera","tag-postit","tag-transformation","post_format-post-format-aside"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts\/1556","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/comments?post=1556"}],"version-history":[{"count":5,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts\/1556\/revisions"}],"predecessor-version":[{"id":1837,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts\/1556\/revisions\/1837"}],"wp:attachment":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/media?parent=1556"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/categories?post=1556"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/tags?post=1556"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}