{"id":11718,"date":"2013-12-06T11:02:31","date_gmt":"2013-12-06T10:02:31","guid":{"rendered":"http:\/\/touk.pl\/blog\/?p=11718"},"modified":"2022-07-26T16:50:03","modified_gmt":"2022-07-26T14:50:03","slug":"saint-nicholas-in-css","status":"publish","type":"post","link":"https:\/\/touk.pl\/blog\/2013\/12\/06\/saint-nicholas-in-css\/","title":{"rendered":"Saint Nicholas in CSS"},"content":{"rendered":"<p>Happy Saint Nicholas Day ! And special present for all CSS geeks:\u00a0<a href=\"http:\/\/cssdeck.com\/labs\/2dbqfo15\" title=\"CSS Santa\">CSS Santa<\/a> Example on jsfiddle can be found\u00a0<a href=\"http:\/\/jsfiddle.net\/P5EzY\/\">here<\/a>\u00a0(thanks to Piotr Przybylski)<\/p>\n<pre><code>html {\n    height: 100%;\n}\nbody {\n    background-image: url('background.png');\n    display: table;\n    margin: 0;\n    height: 100%;\n    width: 100%;\n    background-color: #eee;\n}\n.panelWrapper {\n    display: table-cell;\n    vertical-align: middle;\n}\n\n.face {\n    background-color: #FFC4A7;\n    border-radius: 60px 60px 60px 60px;\n    height: 102px;\n    left: 50px;\n    position: absolute;\n    top: 105px;\n    width: 100px;\n}\n\n.santa {\n    height: 300px;\n    width: 200px;\n    position: relative;\n    margin: 50px auto 0;\n    cursor: pointer;\n}\n\n.santa .hat {\n    position: absolute;\n    left: 50%;\n    margin: 0 0 0 -50px;\n    width: 0px;\n    height: 0px;\n    border-style: solid;\n    border-width: 0 50px 110px 50px;\n    border-color: transparent transparent #a40000 transparent;\n    line-height: 0px;\n    _border-color: #000000 #000000 #a40000 #000000;\n    _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000'); \n}\n\n.santa .hat:after {\n    content: '';\n    position: absolute;\n    width: 0px;\n    height: 0px;\n    border-style: solid;\n    border-width: 40px 0 0 100px;\n    border-color: transparent transparent transparent #a40000;\n\n    -webkit-transform: rotate(15deg);\n    -webkit-transform-origin: top left;\n\n    -moz-transform: rotate(15deg);\n    -moz-transform-origin: top left;\n\n    -ms-transform: rotate(15deg);\n    -ms-transform-origin: top left;\n\n    -o-transform: rotate(15deg);\n    -o-transform-origin: top left;\n\n    transform: rotate(15deg);\n    transform-origin: top left;\n}\n\n.santa .hat:before {\n    content: '';\n    position: absolute;\n    width: 16px;\n    height: 16px;\n    background: #fff;\n    left: 75px;\n    top: 55px;\n    -webkit-border-radius: 50%;\n    -moz-border-radius: 50%;\n    border-radius: 50%;\n    z-index: 1;\n}\n\n.santa .hatFur {\n    background: none repeat scroll 0 0 #FFFFFF;\n    border-radius: 50px 50px 50px 50px;\n    box-shadow: 0 6px 2px -6px #000000;\n    height: 24px;\n    left: 50%;\n    margin: 0 0 0 -55px;\n    position: absolute;\n    top: 100px;\n    width: 110px;\n}\n\n.santa .eyeLeft {\n    background: none repeat scroll 0 0 #FFFFFF;\n    border-radius: 50% 50% 50% 50%;\n    content: \"\";\n    height: 16px;\n    left: 65px;\n    position: absolute;\n    top: 135px;\n    width: 20px;\n}\n\n.santa .eyeRight {\n    background: none repeat scroll 0 0 #FFFFFF;\n    border-radius: 50% 50% 50% 50%;\n    content: \"\";\n    height: 16px;\n    position: absolute;\n    right: 65px;\n    top: 135px;\n    width: 20px;\n}\n\n.eyeLeft:after, .eyeRight:after {\n    background-color: #000099;\n    border-radius: 5px 5px 5px 5px;\n    content: \"\";\n    height: 10px;\n    left: 6px;\n    opacity: 0.75;\n    position: absolute;\n    top: 4px;\n    width: 10px;\n}\n\n.santa:hover .eyeLeft:after, .santa:hover .eyeRight:after {\n    opacity: 0.05;\n}\n\n.santa:hover .eyeLeft, .santa:hover .eyeRight {\n    background-color: #FFB391;\n    border-bottom: 1px solid #FF7D55;\n    height: 14px;\n}\n\n.santa .beard_left, .santa .beard_right {\n    position: absolute;\n    height: 120px;\n    width: 60px;\n    bottom: 0;\n    left: 50%;\n    margin: 0 0 0 -60px;\n    overflow: hidden;\n}\n\n.santa .beard_right {\n    margin: 0;\n}\n\n.santa .beard_left:after {\n    content: '';\n    position: absolute;\n    background: white;\n    width: 150px;\n    height: 150px;\n    -webkit-border-radius: 50%;\n    -moz-border-radius: 50%;\n    border-radius: 50%;\n    bottom: 0px;\n    left: 0;\n}\n\n.santa .beard_left:before {\n    content: '';\n    position: absolute;\n    background-color: #FFC4A7;\n    width: 73px;\n    height: 50px;\n    border-radius: 50%;\n    top: -45px;\n    left: 2px;\n    z-index: 5;\n}\n\n.santa .beard_right:after {\n    content: '';\n    position: absolute;\n    background-color: #FFC4A7;\n    width: 73px;\n    height: 50px;\n    border-radius: 50%;\n    top: -45px;\n    right: 2px;\n    z-index: 5;\n}\n\n.santa .beard_right:before {\n    content: '';\n    position: absolute;\n    background: white;\n    width: 150px;\n    height: 150px;\n    -webkit-border-radius: 50%;\n    -moz-border-radius: 50%;\n    border-radius: 50%;\n    bottom: 0px;\n    right: 0\n}\n.nose {\n    background-color: #FFB391;\n    border: 1px solid #FFB391;\n    border-radius: 10px 10px 5px 5px;\n    box-shadow: 0 3px 2px #666666;\n    height: 20px;\n    left: 93px;\n    position: absolute;\n    top: 162px;\n    width: 15px;\n    z-index: 100;\n}\n\n.mouth {\n    background-color: #FFB391;\n    border-radius: 0 0 15px 15px;\n    height: 10px;\n    left: 87px;\n    position: absolute;\n    top: 200px;\n    width: 30px;\n}\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"Happy Saint Nicholas Day !\nAnd special present for all CSS geecks: CSS SantaHappy Saint Nicholas Day !\nAnd special present for all CSS geecks: CSS Santa\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[71],"_links":{"self":[{"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/posts\/11718"}],"collection":[{"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/comments?post=11718"}],"version-history":[{"count":15,"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/posts\/11718\/revisions"}],"predecessor-version":[{"id":14410,"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/posts\/11718\/revisions\/14410"}],"wp:attachment":[{"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/media?parent=11718"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/categories?post=11718"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/tags?post=11718"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}