{"id":18749,"date":"2021-12-28T10:07:21","date_gmt":"2021-12-28T09:07:21","guid":{"rendered":"https:\/\/www.jng-web.com\/labo\/?p=18749"},"modified":"2021-12-28T11:05:58","modified_gmt":"2021-12-28T10:05:58","slug":"un-bonhomme-de-neige-en-css","status":"publish","type":"post","link":"https:\/\/jng-web.com\/labo\/un-bonhomme-de-neige-en-css\/","title":{"rendered":"Un bonhomme de neige en CSS"},"content":{"rendered":"<div class=\"advads-avant-le-contenu\" id=\"advads-3214649346\"><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-4944504088214075\" crossorigin=\"anonymous\"><\/script><ins class=\"adsbygoogle\" style=\"display:block;\" data-ad-client=\"ca-pub-4944504088214075\" \ndata-ad-slot=\"4514395581\" \ndata-ad-format=\"auto\"><\/ins>\n<script> \n(adsbygoogle = window.adsbygoogle || []).push({}); \n<\/script>\n<\/div><div class=\"advads-test\" style=\"margin-left: auto;margin-right: auto;text-align: center;\" id=\"advads-460154214\"><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-4944504088214075\" crossorigin=\"anonymous\"><\/script><ins class=\"adsbygoogle\" style=\"display:block;\" data-ad-client=\"ca-pub-4944504088214075\" \ndata-ad-slot=\"4514395581\" \ndata-ad-format=\"auto\"><\/ins>\n<script> \n(adsbygoogle = window.adsbygoogle || []).push({}); \n<\/script>\n<\/div><p>Sur CodePen, vous pourrez d\u00e9couvrir le code pour cr\u00e9er un bonhomme de neige en CSS. Ce code est propos\u00e9 par Alvaro Montoro. Vous trouverez le lien vers la d\u00e9monstration en fin d&rsquo;article.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-18750\" src=\"https:\/\/www.jng-web.com\/labo\/wp-content\/uploads\/2021\/12\/bonhomme-de-neige-css.png\" alt=\"bonhomme de neige css\" width=\"733\" height=\"463\" srcset=\"https:\/\/jng-web.com\/labo\/wp-content\/uploads\/2021\/12\/bonhomme-de-neige-css.png 733w, https:\/\/jng-web.com\/labo\/wp-content\/uploads\/2021\/12\/bonhomme-de-neige-css-300x189.png 300w\" sizes=\"auto, (max-width: 733px) 100vw, 733px\" \/><\/p>\n<p>Comme indiqu\u00e9 sur la page d\u00e9di\u00e9e \u00e0 ce projet vous allez devoir cr\u00e9er une page HTML et une page CSS :<\/p>\n<ul>\n<li>code HTML<\/li>\n<\/ul>\n<pre class=\"brush: html; gutter: true; first-line: 1; html-script: true\">div class=\"canvas\"&gt;\r\n  &lt;div class=\"hill\"&gt;&lt;\/div&gt;\r\n  &lt;div class=\"shadow\"&gt;&lt;\/div&gt;\r\n  &lt;div class=\"body\"&gt;\r\n    &lt;div class=\"button\"&gt;&lt;\/div&gt;\r\n    &lt;div class=\"button\"&gt;&lt;\/div&gt;\r\n    &lt;div class=\"arm\"&gt;&lt;\/div&gt;\r\n    &lt;div class=\"arm\"&gt;&lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n  &lt;div class=\"thread\"&gt;&lt;\/div&gt;\r\n  &lt;div class=\"scarf-hanging\"&gt;&lt;\/div&gt;\r\n  &lt;div class=\"scarf\"&gt;&lt;\/div&gt;\r\n  &lt;div class=\"head\"&gt;\r\n    &lt;div class=\"cheek\"&gt;&lt;\/div&gt;\r\n    &lt;div class=\"cheek\"&gt;&lt;\/div&gt;\r\n    &lt;div class=\"eye\"&gt;&lt;\/div&gt;\r\n    &lt;div class=\"eye\"&gt;&lt;\/div&gt;\r\n    &lt;div class=\"mouth\"&gt;&lt;\/div&gt;\r\n    &lt;div class=\"nose\"&gt;&lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n  &lt;div class=\"hat-base\"&gt;&lt;\/div&gt;\r\n  &lt;div class=\"hat-top\"&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;a id=\"youtube\" href=\"https:\/\/www.youtube.com\/watch?v=fXq6G00iKD0\" target=\"_blank\"&gt;\r\n  &lt;span&gt;See how this demo was coded&lt;\/span&gt;\r\n&lt;\/a&gt;<\/pre>\n<ul>\n<li>code CSS :<\/li>\n<\/ul>\n<pre class=\"brush: css; gutter: true; first-line: 1\">body {\r\n  margin: 0;\r\n  height: 100vh;\r\n  overflow: hidden;\r\n  background: linear-gradient(#adf, #ddd);\r\n}\r\n\r\n\r\n.canvas {\r\n  width: 80vmin;\r\n  height: 80vmin;\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translate(-50%, -50%);\r\n}\r\n\r\n.canvas *,\r\n.canvas *::before,\r\n.canvas *::after {\r\n  position: absolute;\r\n  box-sizing: border-box;\r\n  display: block;\r\n} \r\n\r\n.head {\r\n  width: 43%;\r\n  height: 33%;\r\n  background:\r\n    radial-gradient(170% 100% at 50% 0%, #0005, #0001 37%, #0000 0)\r\n    ;\r\n  background-color: #fff;\r\n  border-radius: 100% \/ 90% 90% 110% 110%;\r\n  top: 24%;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n  box-shadow:\r\n    inset 2vmin 0 6vmin 1vmin #fffa,\r\n    inset -2vmin 0 6vmin 1vmin #fffa,\r\n    inset 0 0 4vmin 1vmin #0004,\r\n    0 0.25vmin 0 1vmin\r\n    ;\r\n}\r\n\r\n.body {\r\n  width: 59%;\r\n  height: 50%;\r\n  background:\r\n    linear-gradient(45deg, #0000 45%, #0002 0 55%, #0000 0) no-repeat 118% 47% \/ 20% 20%,\r\n    linear-gradient(-45deg, #0000 45%, #0002 0 55%, #0000 0) no-repeat -15% 45% \/ 20% 20%,\r\n    radial-gradient(100% 100% at 50% 0%, #0001 34%, #0000 0)\r\n    ;\r\n  background-color: #fff;\r\n  border-radius: 100% \/ 110% 110% 90% 90%;\r\n  bottom: 0%;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n  box-shadow:\r\n     inset 3vmin 0 5vmin #fffa,\r\n    inset -3vmin 0 5vmin #fffa,\r\n    inset 0 0 6vmin #0004,\r\n    0 0.25vmin 0 1vmin\r\n    ;\r\n}\r\n\r\n.scarf {\r\n  width: 37%;\r\n  height: 25%;\r\n  border-radius: 50%;\r\n  background: #d00;\r\n  box-shadow:\r\n    inset 3vmin 1vmin 3vmin -2vmin #fffa,\r\n    inset -3vmin 2vmin 3vmin -2vmin #fffa,\r\n    inset 0 -1vmin 2vmin #8008,\r\n    0 0.25vmin 0 1vmin;\r\n  top: 38%;\r\n  left: 50%;\r\n  transform: translate(-50%);\r\n}\r\n\r\n.scarf-hanging {\r\n  width: 10%;\r\n  height: 20%;\r\n  background: #d00;\r\n  top: 50%;\r\n  left: 58%;\r\n  border-radius: 100% 100% 100% 100% \/ 20% 140% 30% 10%;\r\n  transform: rotate(-3deg);\r\n  box-shadow: \r\n    inset 3vmin 1vmin 3vmin -2vmin #fff7,\r\n    inset -3vmin 2vmin 3vmin -2vmin #fff7,\r\n    inset 0 -1vmin 2vmin #8008,\r\n    0 0.25vmin 0 1vmin;\r\n}\r\n\r\n.thread {\r\n  top: 67%;\r\n  left: 56.5%;\r\n  width: 13.33%;\r\n  height: 7%;\r\n  border-radius: 100% \/ 50%;\r\n  transform: rotate(-4deg);\r\n  background:\r\n    repeating-linear-gradient(to right, #0000 0 7%, #000 7.5% 14%, #0000 0 14.5%)\r\n}\r\n\r\n.button {\r\n  box-shadow: 0 0.25vmin 0 0.8vmin;\r\n  background:\r\n    radial-gradient(circle at 35% 35%, #fff3 20%, #0000 )\r\n    ;\r\n  background-color: black;\r\n  width: 7%;\r\n  height: 9%;\r\n  border-radius: 100% 90% 110% 100%;\r\n  top: 40%;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n}\r\n\r\n.button + .button {\r\n  top: 60%;\r\n  transform: translateX(-50%) rotate(20deg);\r\n}\r\n\r\n.eye {\r\n  --pos: 20%;\r\n  box-shadow: \r\n    inset 0 0 1vmin 0.125vmin #000,\r\n    inset -0.5vmin -0.5vmin 1vmin #000,\r\n    inset -1.5vmin -1vmin 2vmin #fffb,\r\n    0.25vmin 1.25vmin 0 0.8vmin #0002,\r\n    0 0.25vmin 0 0.8vmin;\r\n  background-color: #222;\r\n  width: 13%;\r\n  height: 22%;\r\n  border-radius: 100% 90% 110% 100%;\r\n  top: 38%;\r\n  left: var(--pos);\r\n  transform: rotate(10deg);\r\n  overflow: hidden;\r\n}\r\n\r\n.eye + .eye {\r\n  left: auto;\r\n  right: var(--pos);\r\n}\r\n\r\n.eye::before {\r\n  content: \"\";\r\n  width: 45%;\r\n  height: 50%;\r\n  background: #fff;\r\n  border-radius: 100%;\r\n  top: 15%;\r\n  left: 10%;\r\n  transform: rotate(15deg);\r\n  box-shadow: 0 0 3vmin 1.5vmin #000;\r\n}\r\n\r\n.mouth {\r\n  width: 12%;\r\n  height: 16%;\r\n  border-radius: 100% 90% 110% 100%;\r\n  top: 70%;\r\n  left: 50%;\r\n  transform: translate(-50%) rotate(3deg);\r\n  border:0.6vmin solid;\r\n  border-bottom-width: 0.9vmin;\r\n  clip-path: polygon(-20% 40%, 120% 30%, 120% 120%, -20% 120%)\r\n}\r\n\r\n.nose {\r\n  width: 15%;\r\n  height: 11%;\r\n  background:\r\n    linear-gradient(#ff05, #0000, #d805)\r\n    ;\r\n  background-color: #fa0;\r\n  border-radius: 150% 60% 60% 150% \/ 100%;\r\n  left: 45%;\r\n  top: 55%;\r\n  transform: translate(-50%, 0);\r\n  box-shadow: -0.0625vmin 0 0 0.7vmin\r\n}\r\n\r\n.nose::before,\r\n.nose::after {\r\n  content: \"\";\r\n  width: 40%;\r\n  height: 80%;\r\n  border-radius: 100%;\r\n  border-right: 0.5vmin solid darkorange;\r\n  top: 50%;\r\n  left: 45%;\r\n  transform: translate(-50%, -50%);\r\n}\r\n\r\n.nose::after {\r\n  width: 25%;\r\n  height: 60%;\r\n  left: 25%;\r\n}\r\n\r\n.cheek {\r\n  width: 25%;\r\n  height: 18%;\r\n  background: red;\r\n  border-radius: 50%;\r\n  background: radial-gradient(farthest-side, #f003, #0000);\r\n  top: 65%;\r\n  left: 12%;\r\n}\r\n\r\n.cheek + .cheek {\r\n  left: auto;\r\n  right: 12%;\r\n}\r\n\r\n.cheek::before,\r\n.cheek::after {\r\n  content: \"\";\r\n  width: 30%;\r\n  height: 35%;\r\n  border-radius: 100%;\r\n  border-top: 0.5vmin solid #f004;\r\n  top: 50%;\r\n  left: 40%;\r\n  transform: translate(-50%, -50%) rotate(-40deg);\r\n}\r\n\r\n.cheek::after {\r\n  transform: translate(-10%, -35%) rotate(-20deg);\r\n}\r\n\r\n.arm {\r\n  width: 40%;\r\n  height: 20%;\r\n  border-radius: 0% 50% 50% 50%;\r\n  top: 30%;\r\n  right: 5%;\r\n  transform: translateX(100%) rotate(-25deg);\r\n  box-shadow: 0 -2.5vmin 0 -1vmin\r\n}\r\n\r\n.arm::before,\r\n.arm::after {\r\n  content: \"\";\r\n  width: 30%;\r\n  height: 1.5vmin;\r\n  background: black;\r\n  border-radius: 0 100% 100% 0;\r\n  right: -5%;\r\n  top: -1.25vmin\r\n}\r\n\r\n.arm::after {\r\n  transform-origin: left center;\r\n  transform: rotate(-30deg);\r\n  width: 25%;\r\n  right: 5%;\r\n}\r\n\r\n.arm + .arm {\r\n  left: 12%;\r\n  top: 10%;\r\n  border-radius: 15% 50% 50% 50%;\r\n  transform: scaleX(-1) translateX(100%) rotate(-10deg) scaleY(-1);\r\n}\r\n\r\n.hat-base {\r\n  width: 55%;\r\n  height: 14%;\r\n  background: #333;\r\n  border-radius: 100% \/ 120% 120% 90% 90%;\r\n  box-shadow:\r\n    inset 2vmin -1.5vmin 4vmin 0.5vmin #fff5,\r\n    inset -2vmin -1.5vmin 4vmin 0.5vmin #fff5,\r\n    inset 0 0 5vmin 2vmin #000,\r\n    inset 0 -2vmin 4vmin 1vmin #000,\r\n    \r\n    0 0.25vmin 0 1vmin\r\n    ;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n  top: 18%;\r\n}\r\n\r\n.hat-top {\r\n  width: 29%;\r\n  height: 25%;\r\n  background:\r\n    radial-gradient(300% 50% at 50% 0, #000 18%, #0000 0),\r\n    radial-gradient(200% 100% at 50% 0, #0000 0 80%, #000 0 82%, purple 0)\r\n    ;\r\n  background-color: #333;\r\n  box-shadow:\r\n    inset 0 1vmin 1vmin -1vmin #fff8,\r\n    inset 1.5vmin 1.5vmin 3vmin 0.25vmin #fff5,\r\n    inset -2vmin 1.5vmin 3vmin 0.25vmin #fff3,\r\n    inset 0 0 5vmin 1vmin #0007,\r\n    inset 0 -2vmin 4vmin 1vmin #0007,\r\n    0 0.1vmin 0 1vmin\r\n    ;\r\n  border-radius: 100% \/ 10% 10% 10% 5%;\r\n  left: 50%;\r\n  top: 1%;\r\n  transform: translate(-50%, 0);\r\n  overflow: hidden;\r\n}\r\n\r\n.hat-top::before {\r\n  content: \"\";\r\n  width: 100%;\r\n  height: 100%;\r\n  background:\r\n    radial-gradient(300% 50% at 50% 0, #0000 18%, #000 18.5% 24%, #0000 24.5%)\r\n}\r\n\r\n.shadow {\r\n  width: 100%;\r\n  height: 15%;\r\n  background: #0001;\r\n  border-radius: 50%;\r\n  bottom: -6%;\r\n  filter: blur(0.5vmin)\r\n}\r\n\r\n.hill {\r\n  width: 200vmax;\r\n  height: 100vmax;\r\n  background: linear-gradient(aliceblue, #fff 25%);\r\n  top: 75%;\r\n  left: 50%;\r\n  transform: translate(-50%, 0);\r\n  border-radius: 100% \/ 20%;\r\n  border: 1.25vmin solid;\r\n}\r\n\r\n\r\n\/***\/\r\n\r\n#youtube {\r\n  z-index: 2;\r\n  display: block;\r\n  width: 100px;\r\n  height: 70px;\r\n  position: absolute;\r\n  top: 20px;\r\n  right: 20px;\r\n  background: red;\r\n  border-radius: 50% \/ 11%;\r\n  transition: transform 0.5s;\r\n}\r\n\r\n#youtube:hover,\r\n#youtube:focus {\r\n  transform: scale(1.1);\r\n}\r\n\r\n#youtube::before {\r\n  content: \"\";\r\n  display: block;\r\n  position: absolute;\r\n  top: 7.5%;\r\n  left: -6%;\r\n  width: 112%;\r\n  height: 85%;\r\n  background: red;\r\n  border-radius: 9% \/ 50%;\r\n}\r\n\r\n#youtube::after {\r\n  content: \"\";\r\n  display: block;\r\n  position: absolute;\r\n  top: 20px;\r\n  left: 40px;\r\n  width: 45px;\r\n  height: 30px;\r\n  border: 15px solid transparent;\r\n  box-sizing: border-box;\r\n  border-left: 30px solid white;\r\n}\r\n\r\n#youtube span {\r\n  font-size: 0;\r\n  position: absolute;\r\n  width: 0;\r\n  height: 0;\r\n  overflow: hidden;\r\n}<\/pre>\n<p style=\"text-align: center;\">Source et d\u00e9monstration : <a href=\"https:\/\/codepen.io\/alvaromontoro\/pen\/MWEOBPO\" target=\"_blank\" rel=\"noopener\">https:\/\/codepen.io\/alvaromontoro\/pen\/MWEOBPO<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sur CodePen, vous pourrez d\u00e9couvrir le code pour cr\u00e9er un bonhomme de neige en CSS. Ce code est propos\u00e9 par Alvaro Montoro. Vous trouverez le &hellip; <\/p>\n","protected":false},"author":2,"featured_media":18750,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[9],"tags":[28,37],"class_list":["post-18749","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-5-et-css-3","tag-css","tag-html"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.9.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Un bonhomme de neige en CSS - Labo JNG WEB<\/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:\/\/jng-web.com\/labo\/un-bonhomme-de-neige-en-css\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Un bonhomme de neige en CSS - Labo JNG WEB\" \/>\n<meta property=\"og:description\" content=\"Sur CodePen, vous pourrez d\u00e9couvrir le code pour cr\u00e9er un bonhomme de neige en CSS. Ce code est propos\u00e9 par Alvaro Montoro. Vous trouverez le &hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jng-web.com\/labo\/un-bonhomme-de-neige-en-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Labo JNG WEB\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webmaster.referencement.dijon\" \/>\n<meta property=\"article:author\" content=\"https:\/\/fr-fr.facebook.com\/JNGWEB.webmaster\" \/>\n<meta property=\"article:published_time\" content=\"2021-12-28T09:07:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-12-28T10:05:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/jng-web.com\/labo\/wp-content\/uploads\/2021\/12\/bonhomme-de-neige-css.png\" \/>\n\t<meta property=\"og:image:width\" content=\"733\" \/>\n\t<meta property=\"og:image:height\" content=\"463\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"J\u00e9r\u00f4me\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"J\u00e9r\u00f4me\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jng-web.com\/labo\/un-bonhomme-de-neige-en-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jng-web.com\/labo\/un-bonhomme-de-neige-en-css\/\"},\"author\":{\"name\":\"J\u00e9r\u00f4me\",\"@id\":\"https:\/\/jng-web.com\/labo\/#\/schema\/person\/8dceaae857bc9738baa63b3d19fb4590\"},\"headline\":\"Un bonhomme de neige en CSS\",\"datePublished\":\"2021-12-28T09:07:21+00:00\",\"dateModified\":\"2021-12-28T10:05:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jng-web.com\/labo\/un-bonhomme-de-neige-en-css\/\"},\"wordCount\":77,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/jng-web.com\/labo\/#organization\"},\"keywords\":[\"CSS\",\"HTML\"],\"articleSection\":[\"HTML 5 et CSS 3\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/jng-web.com\/labo\/un-bonhomme-de-neige-en-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jng-web.com\/labo\/un-bonhomme-de-neige-en-css\/\",\"url\":\"https:\/\/jng-web.com\/labo\/un-bonhomme-de-neige-en-css\/\",\"name\":\"Un bonhomme de neige en CSS - Labo JNG WEB\",\"isPartOf\":{\"@id\":\"https:\/\/jng-web.com\/labo\/#website\"},\"datePublished\":\"2021-12-28T09:07:21+00:00\",\"dateModified\":\"2021-12-28T10:05:58+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jng-web.com\/labo\/un-bonhomme-de-neige-en-css\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jng-web.com\/labo\/un-bonhomme-de-neige-en-css\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jng-web.com\/labo\/un-bonhomme-de-neige-en-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Labo Jng Web\",\"item\":\"https:\/\/jng-web.com\/labo\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML 5 et CSS 3\",\"item\":\"https:\/\/jng-web.com\/labo\/html-5-et-css-3\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Un bonhomme de neige en CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jng-web.com\/labo\/#website\",\"url\":\"https:\/\/jng-web.com\/labo\/\",\"name\":\"Labo JNG WEB\",\"description\":\"R\u00e9f\u00e9rencement, Webmastering, CMS, Logiciels ...\",\"publisher\":{\"@id\":\"https:\/\/jng-web.com\/labo\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jng-web.com\/labo\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jng-web.com\/labo\/#organization\",\"name\":\"JNG WEB \/\/ J\u00e9r\u00f4me Guri\",\"url\":\"https:\/\/jng-web.com\/labo\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/jng-web.com\/labo\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jng-web.com\/labo\/wp-content\/uploads\/2015\/04\/logo.png\",\"contentUrl\":\"https:\/\/jng-web.com\/labo\/wp-content\/uploads\/2015\/04\/logo.png\",\"width\":342,\"height\":110,\"caption\":\"JNG WEB \/\/ J\u00e9r\u00f4me Guri\"},\"image\":{\"@id\":\"https:\/\/jng-web.com\/labo\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webmaster.referencement.dijon\",\"https:\/\/twitter.com\/jng_web\",\"https:\/\/fr.linkedin.com\/in\/jeromeguri\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/jng-web.com\/labo\/#\/schema\/person\/8dceaae857bc9738baa63b3d19fb4590\",\"name\":\"J\u00e9r\u00f4me\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/jng-web.com\/labo\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/21ca560712e7f1303d8c7c22d9ac9254b56517b653bfcb97d6736933471b2ea3?s=96&d=http%3A%2F%2Fwww.jng-web.com%2Flabo%2Fwp-content%2Fuploads%2F2013%2F12%2Favatar-blog-jng-web.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/21ca560712e7f1303d8c7c22d9ac9254b56517b653bfcb97d6736933471b2ea3?s=96&d=http%3A%2F%2Fwww.jng-web.com%2Flabo%2Fwp-content%2Fuploads%2F2013%2F12%2Favatar-blog-jng-web.png&r=g\",\"caption\":\"J\u00e9r\u00f4me\"},\"description\":\"Passionn\u00e9 par le web, je m'int\u00e9resse depuis quelques ann\u00e9es aux technologies de l'information et de la communication, et plus particuli\u00e8rement \u00e0 la cr\u00e9ation et au r\u00e9f\u00e9rencement de sites internet.\",\"sameAs\":[\"http:\/\/www.jng-web.com\",\"https:\/\/fr-fr.facebook.com\/JNGWEB.webmaster\",\"https:\/\/twitter.com\/JngWeb21\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Un bonhomme de neige en CSS - Labo JNG WEB","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:\/\/jng-web.com\/labo\/un-bonhomme-de-neige-en-css\/","og_locale":"fr_FR","og_type":"article","og_title":"Un bonhomme de neige en CSS - Labo JNG WEB","og_description":"Sur CodePen, vous pourrez d\u00e9couvrir le code pour cr\u00e9er un bonhomme de neige en CSS. Ce code est propos\u00e9 par Alvaro Montoro. Vous trouverez le &hellip;","og_url":"https:\/\/jng-web.com\/labo\/un-bonhomme-de-neige-en-css\/","og_site_name":"Labo JNG WEB","article_publisher":"https:\/\/www.facebook.com\/webmaster.referencement.dijon","article_author":"https:\/\/fr-fr.facebook.com\/JNGWEB.webmaster","article_published_time":"2021-12-28T09:07:21+00:00","article_modified_time":"2021-12-28T10:05:58+00:00","og_image":[{"width":733,"height":463,"url":"https:\/\/jng-web.com\/labo\/wp-content\/uploads\/2021\/12\/bonhomme-de-neige-css.png","type":"image\/png"}],"author":"J\u00e9r\u00f4me","twitter_misc":{"\u00c9crit par":"J\u00e9r\u00f4me","Dur\u00e9e de lecture estim\u00e9e":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jng-web.com\/labo\/un-bonhomme-de-neige-en-css\/#article","isPartOf":{"@id":"https:\/\/jng-web.com\/labo\/un-bonhomme-de-neige-en-css\/"},"author":{"name":"J\u00e9r\u00f4me","@id":"https:\/\/jng-web.com\/labo\/#\/schema\/person\/8dceaae857bc9738baa63b3d19fb4590"},"headline":"Un bonhomme de neige en CSS","datePublished":"2021-12-28T09:07:21+00:00","dateModified":"2021-12-28T10:05:58+00:00","mainEntityOfPage":{"@id":"https:\/\/jng-web.com\/labo\/un-bonhomme-de-neige-en-css\/"},"wordCount":77,"commentCount":0,"publisher":{"@id":"https:\/\/jng-web.com\/labo\/#organization"},"keywords":["CSS","HTML"],"articleSection":["HTML 5 et CSS 3"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/jng-web.com\/labo\/un-bonhomme-de-neige-en-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/jng-web.com\/labo\/un-bonhomme-de-neige-en-css\/","url":"https:\/\/jng-web.com\/labo\/un-bonhomme-de-neige-en-css\/","name":"Un bonhomme de neige en CSS - Labo JNG WEB","isPartOf":{"@id":"https:\/\/jng-web.com\/labo\/#website"},"datePublished":"2021-12-28T09:07:21+00:00","dateModified":"2021-12-28T10:05:58+00:00","breadcrumb":{"@id":"https:\/\/jng-web.com\/labo\/un-bonhomme-de-neige-en-css\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jng-web.com\/labo\/un-bonhomme-de-neige-en-css\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jng-web.com\/labo\/un-bonhomme-de-neige-en-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Labo Jng Web","item":"https:\/\/jng-web.com\/labo\/"},{"@type":"ListItem","position":2,"name":"HTML 5 et CSS 3","item":"https:\/\/jng-web.com\/labo\/html-5-et-css-3\/"},{"@type":"ListItem","position":3,"name":"Un bonhomme de neige en CSS"}]},{"@type":"WebSite","@id":"https:\/\/jng-web.com\/labo\/#website","url":"https:\/\/jng-web.com\/labo\/","name":"Labo JNG WEB","description":"R\u00e9f\u00e9rencement, Webmastering, CMS, Logiciels ...","publisher":{"@id":"https:\/\/jng-web.com\/labo\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jng-web.com\/labo\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/jng-web.com\/labo\/#organization","name":"JNG WEB \/\/ J\u00e9r\u00f4me Guri","url":"https:\/\/jng-web.com\/labo\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/jng-web.com\/labo\/#\/schema\/logo\/image\/","url":"https:\/\/jng-web.com\/labo\/wp-content\/uploads\/2015\/04\/logo.png","contentUrl":"https:\/\/jng-web.com\/labo\/wp-content\/uploads\/2015\/04\/logo.png","width":342,"height":110,"caption":"JNG WEB \/\/ J\u00e9r\u00f4me Guri"},"image":{"@id":"https:\/\/jng-web.com\/labo\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webmaster.referencement.dijon","https:\/\/twitter.com\/jng_web","https:\/\/fr.linkedin.com\/in\/jeromeguri"]},{"@type":"Person","@id":"https:\/\/jng-web.com\/labo\/#\/schema\/person\/8dceaae857bc9738baa63b3d19fb4590","name":"J\u00e9r\u00f4me","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/jng-web.com\/labo\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/21ca560712e7f1303d8c7c22d9ac9254b56517b653bfcb97d6736933471b2ea3?s=96&d=http%3A%2F%2Fwww.jng-web.com%2Flabo%2Fwp-content%2Fuploads%2F2013%2F12%2Favatar-blog-jng-web.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/21ca560712e7f1303d8c7c22d9ac9254b56517b653bfcb97d6736933471b2ea3?s=96&d=http%3A%2F%2Fwww.jng-web.com%2Flabo%2Fwp-content%2Fuploads%2F2013%2F12%2Favatar-blog-jng-web.png&r=g","caption":"J\u00e9r\u00f4me"},"description":"Passionn\u00e9 par le web, je m'int\u00e9resse depuis quelques ann\u00e9es aux technologies de l'information et de la communication, et plus particuli\u00e8rement \u00e0 la cr\u00e9ation et au r\u00e9f\u00e9rencement de sites internet.","sameAs":["http:\/\/www.jng-web.com","https:\/\/fr-fr.facebook.com\/JNGWEB.webmaster","https:\/\/twitter.com\/JngWeb21"]}]}},"views":4196,"_links":{"self":[{"href":"https:\/\/jng-web.com\/labo\/wp-json\/wp\/v2\/posts\/18749","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jng-web.com\/labo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jng-web.com\/labo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jng-web.com\/labo\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/jng-web.com\/labo\/wp-json\/wp\/v2\/comments?post=18749"}],"version-history":[{"count":0,"href":"https:\/\/jng-web.com\/labo\/wp-json\/wp\/v2\/posts\/18749\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jng-web.com\/labo\/wp-json\/wp\/v2\/media\/18750"}],"wp:attachment":[{"href":"https:\/\/jng-web.com\/labo\/wp-json\/wp\/v2\/media?parent=18749"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jng-web.com\/labo\/wp-json\/wp\/v2\/categories?post=18749"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jng-web.com\/labo\/wp-json\/wp\/v2\/tags?post=18749"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}