{"id":922,"date":"2012-10-12T09:09:20","date_gmt":"2012-10-12T07:09:20","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=922"},"modified":"2012-10-12T09:09:20","modified_gmt":"2012-10-12T07:09:20","slug":"des-pixels-et-du-code-31","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-31\/","title":{"rendered":"Des pixels et du code #31"},"content":{"rendered":"
Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 13 ans. Il se peut qu'il ne soit plus \u00e0 jour.<\/div>

Une semaine tr\u00e8s orient\u00e9e CSS et CSS3, avec toujours autant de liens utiles sur le responsive webdesign et la mobilit\u00e9.<\/p>\n

Les tutoriels de la semaine<\/h2>\n

#CSS
\nAnimer les pseudo-\u00e9l\u00e9ments avec les transitions CSS<\/a> une technique a base d\u2019inherit pour pallier (tricher?) au fait qu\u2019\u00e0 part Firefox, aucun navigateur ne comprend les transitions sur les pseudo classes pour le moment<\/p>\n

Three line menu navicon ,\u00a0 <\/a>trois fa\u00e7ons de cr\u00e9er une ic\u00f4ne en 3 lignes \u00e0 utiliser comme ic\u00f4ne de navigation<\/p>\n

Simple yet amazing css3 border transition effects<\/a> des effets hover funs et pourtant tr\u00e8s simples avec des transitions CSS3<\/p>\n

#Favicon
\nDon\u2019t Forget About Favicons on Retina Screens<\/a> un petit tutoriel pour g\u00e9rer les favicons de diff\u00e9rente taille pour les sites mobiles<\/p>\n

Des ressources utiles<\/h2>\n

#mobile inspiration
\nMobilemozaic.com\u00a0<\/a> une autre gallerie d\u2019interface mobiles class\u00e9es par type d\u2019interface<\/p>\n

#WordPress
\nHow to Create Grid Column Content in WordPress the \u201cRight\u201d Way <\/a> un plugin pour cr\u00e9er un syst\u00e8me de colonnes \u00e0 base de shortcode<\/p>\n

#CSS3
\nNthmaster.com<\/a> un site pour comprendre visuellement la pseudo classe nth child<\/p>\n

#RWD
\nResponsivedesignweekly.com<\/a> toutes les semaines les actus et astuces concernant le responsive Webdesign<\/p>\n

#Typo
\nFontdropper<\/a> un bookmarklet pour jouer avec les fonts d\u2019un site<\/p>\n

Les outils \u00a0et plugins pour vous faciliter la vie<\/h2>\n

#QRcode
\nQrhacker.com<\/a> un g\u00e9n\u00e9rateur de qrcode pour en faire des sympas et originaux<\/p>\n

#Accessibilit\u00e9
\nContrastA<\/a> un petit outil en ligne pour tester les contrastes entre deux couleurs pour les normes d\u2019accessibilit\u00e9<\/p>\n

Les articles \u00e0 lire<\/h2>\n

#mobile
\nSafari for iPhone ignores viewport settings on .mobi domains <\/a><\/p>\n

#Mobilit\u00e9
\nA pixel is not a pixel<\/a> la conf\u00e9rence de Peter-Paul Koch sur la relativit\u00e9 de l\u2019unit\u00e9 pixel<\/p>\n

#Optimisation SVG
\nsvgs are cool, but icon fonts are just 10% of their file size<\/a> un petit comparatif SVG vs font icon<\/p>\n

#HTML5 Pishing
\nUsing the HTML5 Fullscreen API for Phishing Attacks<\/a>, non vous ne revez pas, on parle bien d\u2019utiliser l\u2019API HTML5 fullscreen pour cr\u00e9er du pishing. Impressionnant et inqui\u00e9tant \u00e0 la fois.<\/p>\n

#CSS
\nCssrefresh.frebsite.nl <\/a>un petit JavaScript \u00e0 placer dans les pages en cours de dev, pour que leur CSS se rafraichisse automatiquement.<\/p>\n

#Inspiration
\n20 Simply Gorgeous Examples of User Interface Design <\/a>un peu d\u2019inspiration pour du design d\u2019interface<\/p>\n","protected":false},"excerpt":{"rendered":"

Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 13 ans. Il se peut qu’il ne soit plus \u00e0 jour.Une semaine tr\u00e8s orient\u00e9e CSS et CSS3, avec toujours autant de liens utiles sur le responsive webdesign et la mobilit\u00e9. Les tutoriels de la semaine #CSS Animer les pseudo-\u00e9l\u00e9ments avec les transitions CSS une technique a base d\u2019inherit pour pallier (tricher?) au fait qu\u2019\u00e0 part Firefox, aucun navigateur ne comprend les transitions sur les pseudo classes pour le moment Three line menu …<\/p>\n","protected":false},"author":3,"featured_media":923,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[105],"tags":[],"class_list":["post-922","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-veille-liens-utiles"],"yoast_head":"\nDes pixels et du code #31 - par St\u00e9phanie Walter - UX Researcher & Designer<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-31\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Des pixels et du code #31 - par St\u00e9phanie Walter - UX Researcher & Designer\" \/>\n<meta property=\"og:description\" content=\"Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 13 ans. Il se peut qu'il ne soit plus \u00e0 jour.Une semaine tr\u00e8s orient\u00e9e CSS et CSS3, avec toujours autant de liens utiles sur le responsive webdesign et la mobilit\u00e9. Les tutoriels de la semaine #CSS Animer les pseudo-\u00e9l\u00e9ments avec les transitions CSS une technique a base d\u2019inherit pour pallier (tricher?) au fait qu\u2019\u00e0 part Firefox, aucun navigateur ne comprend les transitions sur les pseudo classes pour le moment Three line menu …\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-31\/\" \/>\n<meta property=\"og:site_name\" content=\"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.\" \/>\n<meta property=\"article:published_time\" content=\"2012-10-12T07:09:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2012\/10\/pixeletcode.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"700\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"St\u00e9phanie Walter\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/bsky.app\/profile\/stephaniewalter.bsky.social\" \/>\n<meta name=\"twitter:site\" content=\"@walterstephanie\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"St\u00e9phanie Walter\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-31\/\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-31\/\",\"name\":\"Des pixels et du code #31 - par St\u00e9phanie Walter - UX Researcher & Designer\",\"isPartOf\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-31\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-31\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2012\/10\/pixeletcode.jpg\",\"datePublished\":\"2012-10-12T07:09:20+00:00\",\"author\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-31\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-31\/#primaryimage\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/files\/2012\/10\/pixeletcode.jpg\",\"contentUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2012\/10\/pixeletcode.jpg\",\"width\":700,\"height\":200},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#website\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/\",\"name\":\"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.\",\"description\":\"Je partage ici mes conseils, mes ressources et outils sur la conception centr\u00e9e utilisateur, la recherche et tests utilisateur, le design de produits, la strat\u00e9gie mobile, l'utilisabilit\u00e9 et l'accessibilit\u00e9.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/stephaniewalter.design\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\",\"name\":\"St\u00e9phanie Walter\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3311148a94caa2e5ae146ff1cdf9aaf3a0127a7db0337d8c8cbbfc4a425cab0e?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3311148a94caa2e5ae146ff1cdf9aaf3a0127a7db0337d8c8cbbfc4a425cab0e?s=96&d=retro&r=g\",\"caption\":\"St\u00e9phanie Walter\"},\"description\":\"UX Researcher & Product Designer. Mobile Expert. Public speaker. Blog writer. Google Dev Expert Web Platform and Product Design (GDE)\",\"sameAs\":[\"https:\/\/stephaniewalter.design\/\",\"https:\/\/www.linkedin.com\/in\/stephaniewalterpro\/\",\"https:\/\/x.com\/https:\/\/bsky.app\/profile\/stephaniewalter.bsky.social\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Des pixels et du code #31 - par St\u00e9phanie Walter - UX Researcher & Designer","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-31\/","og_locale":"fr_FR","og_type":"article","og_title":"Des pixels et du code #31 - par St\u00e9phanie Walter - UX Researcher & Designer","og_description":"Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 13 ans. Il se peut qu'il ne soit plus \u00e0 jour.Une semaine tr\u00e8s orient\u00e9e CSS et CSS3, avec toujours autant de liens utiles sur le responsive webdesign et la mobilit\u00e9. Les tutoriels de la semaine #CSS Animer les pseudo-\u00e9l\u00e9ments avec les transitions CSS une technique a base d\u2019inherit pour pallier (tricher?) au fait qu\u2019\u00e0 part Firefox, aucun navigateur ne comprend les transitions sur les pseudo classes pour le moment Three line menu …","og_url":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-31\/","og_site_name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","article_published_time":"2012-10-12T07:09:20+00:00","og_image":[{"width":700,"height":200,"url":"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2012\/10\/pixeletcode.jpg","type":"image\/jpeg"}],"author":"St\u00e9phanie Walter","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/bsky.app\/profile\/stephaniewalter.bsky.social","twitter_site":"@walterstephanie","twitter_misc":{"\u00c9crit par":"St\u00e9phanie Walter","Dur\u00e9e de lecture estim\u00e9e":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-31\/","url":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-31\/","name":"Des pixels et du code #31 - par St\u00e9phanie Walter - UX Researcher & Designer","isPartOf":{"@id":"https:\/\/stephaniewalter.design\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-31\/#primaryimage"},"image":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-31\/#primaryimage"},"thumbnailUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2012\/10\/pixeletcode.jpg","datePublished":"2012-10-12T07:09:20+00:00","author":{"@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-31\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-31\/#primaryimage","url":"https:\/\/stephaniewalter.design\/fr\/files\/2012\/10\/pixeletcode.jpg","contentUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2012\/10\/pixeletcode.jpg","width":700,"height":200},{"@type":"WebSite","@id":"https:\/\/stephaniewalter.design\/fr\/#website","url":"https:\/\/stephaniewalter.design\/fr\/","name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","description":"Je partage ici mes conseils, mes ressources et outils sur la conception centr\u00e9e utilisateur, la recherche et tests utilisateur, le design de produits, la strat\u00e9gie mobile, l'utilisabilit\u00e9 et l'accessibilit\u00e9.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/stephaniewalter.design\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf","name":"St\u00e9phanie Walter","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3311148a94caa2e5ae146ff1cdf9aaf3a0127a7db0337d8c8cbbfc4a425cab0e?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3311148a94caa2e5ae146ff1cdf9aaf3a0127a7db0337d8c8cbbfc4a425cab0e?s=96&d=retro&r=g","caption":"St\u00e9phanie Walter"},"description":"UX Researcher & Product Designer. Mobile Expert. Public speaker. Blog writer. Google Dev Expert Web Platform and Product Design (GDE)","sameAs":["https:\/\/stephaniewalter.design\/","https:\/\/www.linkedin.com\/in\/stephaniewalterpro\/","https:\/\/x.com\/https:\/\/bsky.app\/profile\/stephaniewalter.bsky.social"]}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/922","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/comments?post=922"}],"version-history":[{"count":0,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/922\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media\/923"}],"wp:attachment":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media?parent=922"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/categories?post=922"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/tags?post=922"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}