{"id":93,"date":"2018-02-18T20:07:38","date_gmt":"2018-02-18T20:07:38","guid":{"rendered":"http:\/\/thingography.com\/my-things\/?p=93"},"modified":"2019-02-18T17:12:25","modified_gmt":"2019-02-18T17:12:25","slug":"css-easter","status":"publish","type":"post","link":"https:\/\/thingography.com\/css-easter\/","title":{"rendered":"Easter Eggs with Pure CSS"},"content":{"rendered":"<style>\n.ani-box { height: 500px; position: relative; overflow: hidden;}\n.ani-box {\n\tbackground: #207cca;\n\tbackground: -moz-linear-gradient(top,  #207cca 0%, #629bc9 19%, #b6eaf9 65%, #39931d 69%, #39931d 72%, #39931d 78%, #4aa821 89%, #36a001 97%); \n\tbackground: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#207cca), color-stop(19%,#629bc9), color-stop(65%,#b6eaf9), color-stop(69%,#39931d), color-stop(72%,#39931d), color-stop(78%,#39931d), color-stop(89%,#4aa821), color-stop(97%,#36a001));\n\tbackground: -webkit-linear-gradient(top,  #207cca 0%,#629bc9 19%,#b6eaf9 65%,#39931d 69%,#39931d 72%,#39931d 78%,#4aa821 89%,#36a001 97%); \n\tbackground: -o-linear-gradient(top,  #207cca 0%,#629bc9 19%,#b6eaf9 65%,#39931d 69%,#39931d 72%,#39931d 78%,#4aa821 89%,#36a001 97%); \n\tbackground: -ms-linear-gradient(top,  #207cca 0%,#629bc9 19%,#b6eaf9 65%,#39931d 69%,#39931d 72%,#39931d 78%,#4aa821 89%,#36a001 97%); \n\tbackground: linear-gradient(to bottom,  #207cca 0%,#629bc9 19%,#b6eaf9 65%,#39931d 69%,#39931d 72%,#39931d 78%,#4aa821 89%,#36a001 97%); \n\tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#207cca', endColorstr='#36a001',GradientType=0 ); \n}\n.egg1, .egg2, .egg3, .egg4, .egg6, .egg5, .egg7, .egg8, .egg9, .egg10, .egg11, .egg12, .egg13, .egg14, .egg15, .egg16, .egg17, .egg18, .egg19, .egg20, .egg21, .egg22, .egg23, .egg24   {\n\tborder: 1px solid #969696;\n\tdisplay: block;\n\twidth: 94px;\n\theight: 135px;\n\tborder-radius: 50% 50% 50% 50% \/ 40% 40% 60% 60%;\n\tbox-shadow: 0px 0px 5px 0px #000000;\n\tposition: absolute;\n\tz-index: 10;\n}\n\/*  Egg Placement and animation setup for 10 different Eggs *\/\n.egg1 {\n\tbackground-color:#FFFF00;\n\tbackground-image: radial-gradient(#FF6A00 15%, transparent 16%),radial-gradient(#00FF21 15%, transparent 16%);\n\tbackground-size:30px 30px;\n\tbackground-position: 10px 10px, 30px 30px;\n\tmargin-left: 8%;\n\tanimation: floatsmall 18s linear infinite;\n}\n.egg2 {\n\tbackground-color:#00FFFF;\n\tbackground-image: linear-gradient(90deg, rgba(255,0,0,.5) 50%, transparent 50%), linear-gradient(rgba(255,0,0,.5) 50%, transparent 50%);\n\tbackground-size:25px 25px;\n\tmargin-left: 35%;\n\tanimation: float 10s linear infinite;\n}\n.egg3 {\n\tbackground-color:#FFFF00;\n\tbackground-image: linear-gradient(90deg, rgba(0,255,255,.5) 50%, transparent 50%), linear-gradient(rgba(0,255,255,.5) 50%, transparent 50%);\n\tbackground-size:25px 25px;\n\tmargin-left: 75%;\n\tanimation: float 11s linear infinite, left 11s infinite;\n}\n.egg4 {\n\tbackground-color:#FF0000;\n\tbackground-image: radial-gradient(#00D607 15%, transparent 16%), radial-gradient(#51C2FF 15%, transparent 16%);\n\tbackground-size:60px 60px;\n\tbackground-position: 0 0, 30px 30px;\n\tmargin-left: 60%;\n\tanimation: float 12s linear infinite;\n}\n.egg5 {\n\tbackground-color: #0094FF;\n\tbackground-image: linear-gradient(90deg, transparent 50%, rgba(255,255,255,.5) 50%);\n\tbackground-size: 10px 10px;\n\tmargin-left: 85%;\n\tanimation: floatsmall 8s linear infinite;\n}\n.egg6 {\n\tbackground-color: orange;\n\tbackground-image: linear-gradient(90deg, transparent 50%, rgba(255,255,255,.5) 50%);\n\tbackground-size: 10px 10px;\n\tmargin-left: 20%;\n\tanimation: float 12s linear infinite, left 12s infinite;\n}\n.egg7 {\n\tbackground-color: #FFFF00;\n\tbackground-image: linear-gradient(transparent 0%, rgba(205,200,205,.9) 50% );\n\tbackground-size: 20px 20px;\n\tmargin-left: 30%;\n\tanimation: floatsmall 9s linear infinite, right 9s infinite;\n}\n.egg8 {\n\tbackground:linear-gradient(135deg, #FFFF00 25%, transparent 25%) -50px 0, linear-gradient(225deg, #00FF00 25%, transparent 25%) -50px 0, linear-gradient(315deg, #FFFF00 25%, transparent 25%), linear-gradient(45deg,  #00FF00 25%, transparent 25%);\t\n\tbackground-size: 25px 25px;\n\tbackground-color: #EC173A;\n\tmargin-left: 45%;\n\tanimation: float 7s linear infinite;\n}\n.egg9 {\n\tbackground-color: #00CCFF;\n\tbackground-image: linear-gradient(45deg, #FF92BB 25%, transparent 25%, transparent 75%, #FF92BB 75%, #FF92BB), linear-gradient(-45deg, #FF92BB 25%, transparent 25%, transparent 75%, #FF92BB 75%, #FF92BB);\n\tbackground-size:25px 25px;\n\tmargin-left: 1%;\n\tanimation: float 10s linear infinite, right 10s infinite;\n}\n.egg10  {\n\tbackground: linear-gradient(135deg, #0000FF 25%, transparent 25%) 0px 0px, linear-gradient(225deg, #FF0000 25%, transparent 25%) 0px 0px, linear-gradient(315deg, #FFFF00 25%, transparent 25%), linear-gradient( 45deg, #00FFFF 25%, transparent 25%);\t\n\tbackground-size: 30px 30px;\n\tbackground-color: #00FF00;\n\tmargin-left: 96%;\n\tanimation: float 15s linear infinite, right 15s infinite;\n}\n.egg11 {\n\tbackground: linear-gradient(135deg, #0000FF 25%, transparent 25%) -10px -5px, linear-gradient(225deg, #FF0000 25%, transparent 25%) -10px -5px, linear-gradient(315deg, #FFFF00 25%, transparent 25%), linear-gradient( 45deg, #00FFFF 25%, transparent 25%);\t\n\tbackground-size: 30px 60px;\n\tbackground-color: #00FF00;\n\tmargin-left: 52%;\n\tanimation: float 18s linear infinite;\n}\n.egg12 {\n\tbackground: linear-gradient(135deg, #0000FF 25%, transparent 25%) -10px 0, linear-gradient(225deg, #FF0000 25%, transparent 25%) -10px 0, linear-gradient(315deg, #FFFF00 25%, transparent 25%), linear-gradient( 45deg, #00FFFF 25%, transparent 25%);\t\n\tbackground-size: 30px 30px;\n\tbackground-color: #FF00FF;\n\tmargin-left: 92%;\n\tanimation: float 13s linear infinite;\n}\n.egg13 {\n\tbackground: linear-gradient(135deg, #FFFF00 25%, transparent 25%) -50px 0, linear-gradient(225deg, #ECEDDC 25%, transparent 25%) -50px 0, linear-gradient(315deg, #FFFF00 25%, transparent 25%), linear-gradient(45deg, #ECEDDC 25%, transparent 25%);\t\n\tbackground-size: 15px 15px;\n\tbackground-color: #EC173A;\n\tmargin-left: 17%;\n\tanimation: float 17s linear infinite;\n}\n.egg14 {\n\tbackground: linear-gradient(135deg, #FF0000 25%, transparent 25%) -10px 0, linear-gradient(225deg, #FF0000 25%, transparent 25%) -10px 0, linear-gradient(315deg, #FF0000 25%, transparent 25%), linear-gradient( 45deg, #FF0000 25%, transparent 25%);\t\n\tbackground-size: 20px 20px;\n\tbackground-color: #FF00FF;\n\tmargin-left: 67%;\n\tanimation: float 15s linear infinite;\n}\n.egg15 {\n\tbackground: linear-gradient(135deg, #FF92FF 25%, transparent 25%) -5px 0, linear-gradient(225deg, #FF92FF 25%, transparent 25%) -5px 0,\tlinear-gradient(315deg, #FF92FF 25%, transparent 25%), linear-gradient( 45deg, #FF92FF 25%, transparent 25%);\t\n\tbackground-size: 20px 20px;\n\tbackground-color: #00FFFF;\n\tmargin-left: 77%;\n\tanimation: float 10s linear infinite;\n}\n.egg16 {\n\tbackground-color:#FF0000;\n\tbackground-image: linear-gradient(90deg, rgba(0,0,255,.5) 50%, transparent 50%),linear-gradient(rgba(0,0,255,.5) 50%, transparent 50%);\n\tbackground-size:25px 25px;\n\tmargin-left: 20%;\n\tanimation: float 20s linear infinite;\n}\n.egg17 {\n\tbackground-color: #FF92FF;\n\tbackground-image: linear-gradient(335deg, #b00 23px, transparent 23px),\tlinear-gradient(155deg, #d00 23px, transparent 23px),linear-gradient(335deg, #b00 23px, transparent 23px),linear-gradient(155deg, #d00 23px, transparent 23px);\n\tbackground-size: 50px 50px;\t\n\tbackground-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;\n\tmargin-left: 57%;\n\tanimation: float 8s linear infinite;\n}\n.egg18 {\n\tbackground-color: #FF8F00;\n\tbackground-image: linear-gradient(335deg, #b00 23px, transparent 23px),\tlinear-gradient(155deg, #FFFF00 23px, transparent 23px),linear-gradient(155deg, #FFFF00 23px, transparent 23px);\n\tbackground-size: 58px 58px;\t\n\tbackground-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;\n\tmargin-left: 60%;\n\tanimation: floatsmall 14s linear infinite;\n}\n.egg19 {\n\tbackground: radial-gradient(circle, transparent 20%, #AFA7FF 20%, #AFA7FF 80%, transparent 80%, transparent),radial-gradient(circle, transparent 20%, #AFA7FF 20%, #AFA7FF 80%, transparent 80%, transparent) 50px 50px,linear-gradient(#A8B1BB 8px, transparent 8px) 0 -4px,linear-gradient(90deg, #A8B1BB 8px, transparent 8px) -4px 0;\n\tbackground-color: #8EFFAE;\n\tbackground-size:20px 20px, 20px 20px, 50px 50px, 50px 50px;\n\tmargin-left: 44%;\n\tanimation: float 17s linear infinite;\n}\n.egg20 {\n\tbackground: radial-gradient(circle, transparent 20%, #0026FF 20%, #0026FF 80%, transparent 80%, transparent),radial-gradient(circle, transparent 20%, #AFA7FF 20%, #AFA7FF 80%, transparent 80%, transparent) 50px 50px, linear-gradient(#A8B1BB 8px, transparent 8px) 0 4px, linear-gradient(90deg, #A8B1BB 8px, transparent 8px) 4px 0;\n\tbackground-color: #FFF7A5;\n\tbackground-size:30px 30px, 30px 30px, 50px 50px, 50px 50px;\n\tmargin-left: 41%;\n\tanimation:float 11s linear infinite;\n}\n.egg21 {\n\tbackground: linear-gradient(135deg, #708090 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px), linear-gradient(225deg, #708090 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px)0 64px;\n\tbackground-color:#708090;\n\tbackground-size: 32px 32px;\n\tmargin-left: 32%;\n\tanimation: floatsmall 20s linear infinite;\n}\n.egg22 {\n\tbackground: linear-gradient(135deg, #E7FF7F 22px, #FFFF00 22px, #FF0000 24px, transparent 24px, transparent 47px, #FFFF00 67px, #d9ecff 69px, transparent 69px), linear-gradient(225deg, #E7FF7F 22px, #FF9F32 22px, #FF0000 24px, transparent 24px, transparent 47px, #FFFF00 67px, #d9ecff 69px, transparent 69px)0 64px;\n\tbackground-color:#708090;\n\tbackground-size: 32px 64px;\n\tmargin-left: 70%;\n\tanimation: float 20s linear infinite, left 20s infinite;\n}\n.egg23 {\n\tbackground-color:white;\n\tbackground-image: radial-gradient(red 9px, transparent 10px), repeating-radial-gradient(red 0, red 4px, transparent 5px, transparent 20px, red 21px, red 25px, transparent 26px, transparent 50px);    \n\tbackground-size: 30px 30px, 30px 30px; \n\tbackground-position: 0 0;\n\tmargin-left: 10%;\n\tanimation: float 19s linear infinite;\n}\n.egg24 {\n\tbackground-color: #00FFFF;\n\tbackground-image: repeating-linear-gradient(120deg, rgba(255,0,0,.1), rgba(255,0,0,.1) 1px, transparent 1px, transparent 60px),repeating-linear-gradient(60deg, rgba(255,0,0,.1), rgba(255,0,0,.1) 1px, transparent 1px, transparent 60px), linear-gradient(60deg, rgba(255,0,0,.1) 25%, transparent 85%, transparent 75%, rgba(255,0,0,.1) 75%, rgba(255,0,0,.1)),\tlinear-gradient(60deg, rgba(255,0,0,.1) 25%, transparent 85%, transparent 75%, rgba(255,0,0,.1) 75%, rgba(255,0,0,.1));\n\tbackground-size: 10px 30px;\n\tmargin-left: 20%;\n\tanimation: float 16s linear infinite;\n}\n\/* Balloon Animation Keyframes  *\/\n@keyframes float  {\n\t0%  {top:-40%; transform:rotateZ(  0deg);}\n\t100%{top:110%; transform:rotateZ(720deg);}\n} \n@keyframes floatsmall  {\n\t0%  {top:-40%; transform:rotateZ(  0deg);}\n\t100%{top:110%; transform:rotateZ(720deg);}\n} \n@keyframes left  {\n\t0%  {transform:translateX(   0px) rotateZ(  0deg);}\n\t100%{transform:translateX(-400px) rotateZ(720deg);}\n}\n@keyframes right  {\n\t0%  {transform:translateX(   0px) rotateZ(   0deg);}\n\t100%{transform:translateX(300px) rotateZ(-720deg);}\n} \n.layer0, .layer1{\n\twidth: 100%;\n\theight: 100%;\n\ttop: 0px;\n\tleft: 0px;\n\tposition: absolute;\n\topacity: 1;\n\tz-index: 10;\n}\n.layer0  {\n\tbackground-image: url('images\/conf-0.png');\n\tanimation: conf0 10s linear infinite;\n}\n.layer1  {\n\topacity: 0.5;\n\tbackground-image: url('images\/conf-1.png');\n\tanimation: conf1 25s linear infinite, conf1z 40s linear;   \n}\n\/* Layer 0 - Base Layer conf Falling Animation *\/\n@keyframes conf0 { \n\t0%  {background-position:   0px   0px;} \n\t100%{background-position: 300px 300px;}\n}\n\/* Layer 1 - 1st Addition conf Falling Animation *\/\n@keyframes conf1 { \n\t0%  {background-position:   0px   0px; transform:scale(1.0,1.0);}\n\t50% {                                  transform:scale(0.9,0.9);}\n\t100%{background-position: 500px 500px; transform:scale(1.0,1.0);}\n}\n\/* Sbow Layer 1 Addition Fade-In Animation - these layers are not visible until desired time *\/\n@keyframes conf1z { \n\t0%  { opacity: 0.0;}\n\t50% { opacity: 0.7;}\n\t100%{ opacity: 0.5;}\n}\n\/* Text Fade-In Animation *\/\n@keyframes conf2z { \n\t0%  { opacity: 0;}\n\t25% { opacity: 0;}\n\t33% { opacity: 1;}\n\t66% { opacity: 1;}\n\t100%{ opacity: 0;}\n}\n\/*  Happy New Year Text  *\/\n.text  {\n\tmargin: 1em auto 0em auto;\n\tfont-size: 5em;\n\tfont-family: Arial;\n\ttext-align: center;\n\tposition: relative;\n\ttext-shadow: 0 0.04em 0.005em #333333, -0.01em -0.01em 0.2em #000000, 0 0.04em 0.5em #000000;\n\tline-height: 1.5em;\n\tz-index: 999;\n\tanimation: conf2z 30s linear infinite;\n}\n\/*  Text Colors *\/\n.text1 {color: #FFFF00;}\n.text2 {color: #FFCC00;\tfont-weight: bold;}\n#h {color: #33CC33;}\n#a {color: #FF9900;}\n#p {color: #990099;}\n#p2{color: #FF6666;}\n#y {color: #FFFF00;}\n<\/style>\n<div class=\"ani-box\">\n<div class=\"layer0\"><\/div>\n<div class=\"layer1\"><\/div>\n<div class=\"egg1\"><\/div>\n<div class=\"egg2\"><\/div>\n<div class=\"egg3\"><\/div>\n<div class=\"egg4\"><\/div>\n<div class=\"egg5\"><\/div>\n<div class=\"egg6\"><\/div>\n<div class=\"egg7\"><\/div>\n<div class=\"egg8\"><\/div>\n<div class=\"egg9\"><\/div>\n<div class=\"egg10\"><\/div>\n<div class=\"egg11\"><\/div>\n<div class=\"egg12\"><\/div>\n<div class=\"egg13\"><\/div>\n<div class=\"egg14\"><\/div>\n<div class=\"egg15\"><\/div>\n<div class=\"egg16\"><\/div>\n<div class=\"egg17\"><\/div>\n<div class=\"egg18\"><\/div>\n<div class=\"egg19\"><\/div>\n<div class=\"egg20\"><\/div>\n<div class=\"egg21\"><\/div>\n<div class=\"egg22\"><\/div>\n<div class=\"egg23\"><\/div>\n<div class=\"egg24\"><\/div>\n<div class=\"text\">\n\t\t<b class=\"text1\"><b id=\"h\">H<\/b><b id=\"a\">a<\/b><b id=\"p\">p<\/b><b id=\"p2\">p<\/b><b id=\"y\">y<\/b><\/b><br \/>\n\t\t<b class=\"text2\"> Easter  <\/b>\n\t<\/div>\n<\/div>\n<p> <!-- Ani-box --><\/p>\n<p>\nSurprisingly, all the eggs with patterns are all pure CSS. Easter Egg fun without JavaScript. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Happy Easter Surprisingly, all the eggs with patterns are all pure CSS. Easter Egg fun without JavaScript.<\/p>\n","protected":false},"author":2,"featured_media":2582,"comment_status":"open","ping_status":"open","sticky":false,"template":"ani-post-single.php","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[6,4,5,18,16],"_links":{"self":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/93"}],"collection":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/comments?post=93"}],"version-history":[{"count":1,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/93\/revisions"}],"predecessor-version":[{"id":2810,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/93\/revisions\/2810"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media\/2582"}],"wp:attachment":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media?parent=93"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/categories?post=93"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/tags?post=93"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}