easter – Thingography.com https://thingography.com More than a Photo Gallery Mon, 18 Feb 2019 17:12:25 +0000 en-US hourly 1 Pysanky – Ukrainian Easter Eggs https://thingography.com/pysanky/ https://thingography.com/pysanky/#respond Mon, 19 Feb 2018 15:43:37 +0000 http://thingography.com/my-things/?p=1579

A collection of Pysanky – Ukrainian Easter Eggs. My uncle’s craftsmanship.

]]> https://thingography.com/pysanky/feed/ 0 Easter Eggs with Pure CSS https://thingography.com/css-easter/ https://thingography.com/css-easter/#respond Sun, 18 Feb 2018 20:07:38 +0000 http://thingography.com/my-things/?p=93 .ani-box { height: 500px; position: relative; overflow: hidden;} .ani-box { background: #207cca; background: -moz-linear-gradient(top, #207cca 0%, #629bc9 19%, #b6eaf9 65%, #39931d 69%, #39931d 72%, #39931d 78%, #4aa821 89%, #36a001 97%); background: -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)); background: -webkit-linear-gradient(top, #207cca 0%,#629bc9 19%,#b6eaf9 65%,#39931d 69%,#39931d 72%,#39931d 78%,#4aa821 89%,#36a001 97%); background: -o-linear-gradient(top, #207cca 0%,#629bc9 19%,#b6eaf9 65%,#39931d 69%,#39931d 72%,#39931d 78%,#4aa821 89%,#36a001 97%); background: -ms-linear-gradient(top, #207cca 0%,#629bc9 19%,#b6eaf9 65%,#39931d 69%,#39931d 72%,#39931d 78%,#4aa821 89%,#36a001 97%); background: linear-gradient(to bottom, #207cca 0%,#629bc9 19%,#b6eaf9 65%,#39931d 69%,#39931d 72%,#39931d 78%,#4aa821 89%,#36a001 97%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#207cca', endColorstr='#36a001',GradientType=0 ); } .egg1, .egg2, .egg3, .egg4, .egg6, .egg5, .egg7, .egg8, .egg9, .egg10, .egg11, .egg12, .egg13, .egg14, .egg15, .egg16, .egg17, .egg18, .egg19, .egg20, .egg21, .egg22, .egg23, .egg24 { border: 1px solid #969696; display: block; width: 94px; height: 135px; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; box-shadow: 0px 0px 5px 0px #000000; position: absolute; z-index: 10; } /* Egg Placement and animation setup for 10 different Eggs */ .egg1 { background-color:#FFFF00; background-image: radial-gradient(#FF6A00 15%, transparent 16%),radial-gradient(#00FF21 15%, transparent 16%); background-size:30px 30px; background-position: 10px 10px, 30px 30px; margin-left: 8%; animation: floatsmall 18s linear infinite; } .egg2 { background-color:#00FFFF; background-image: linear-gradient(90deg, rgba(255,0,0,.5) 50%, transparent 50%), linear-gradient(rgba(255,0,0,.5) 50%, transparent 50%); background-size:25px 25px; margin-left: 35%; animation: float 10s linear infinite; } .egg3 { background-color:#FFFF00; background-image: linear-gradient(90deg, rgba(0,255,255,.5) 50%, transparent 50%), linear-gradient(rgba(0,255,255,.5) 50%, transparent 50%); background-size:25px 25px; margin-left: 75%; animation: float 11s linear infinite, left 11s infinite; } .egg4 { background-color:#FF0000; background-image: radial-gradient(#00D607 15%, transparent 16%), radial-gradient(#51C2FF 15%, transparent 16%); background-size:60px 60px; background-position: 0 0, 30px 30px; margin-left: 60%; animation: float 12s linear infinite; } .egg5 { background-color: #0094FF; background-image: linear-gradient(90deg, transparent 50%, rgba(255,255,255,.5) 50%); background-size: 10px 10px; margin-left: 85%; animation: floatsmall 8s linear infinite; } .egg6 { background-color: orange; background-image: linear-gradient(90deg, transparent 50%, rgba(255,255,255,.5) 50%); background-size: 10px 10px; margin-left: 20%; animation: float 12s linear infinite, left 12s infinite; } .egg7 { background-color: #FFFF00; background-image: linear-gradient(transparent 0%, rgba(205,200,205,.9) 50% ); background-size: 20px 20px; margin-left: 30%; animation: floatsmall 9s linear infinite, right 9s infinite; } .egg8 { background: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%); background-size: 25px 25px; background-color: #EC173A; margin-left: 45%; animation: float 7s linear infinite; } .egg9 { background-color: #00CCFF; background-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); background-size:25px 25px; margin-left: 1%; animation: float 10s linear infinite, right 10s infinite; } .egg10 { background: 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%); background-size: 30px 30px; background-color: #00FF00; margin-left: 96%; animation: float 15s linear infinite, right 15s infinite; } .egg11 { background: 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%); background-size: 30px 60px; background-color: #00FF00; margin-left: 52%; animation: float 18s linear infinite; } .egg12 { background: 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%); background-size: 30px 30px; background-color: #FF00FF; margin-left: 92%; animation: float 13s linear infinite; } .egg13 { background: 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%); background-size: 15px 15px; background-color: #EC173A; margin-left: 17%; animation: float 17s linear infinite; } .egg14 { background: 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%); background-size: 20px 20px; background-color: #FF00FF; margin-left: 67%; animation: float 15s linear infinite; } .egg15 { background: linear-gradient(135deg, #FF92FF 25%, transparent 25%) -5px 0, linear-gradient(225deg, #FF92FF 25%, transparent 25%) -5px 0, linear-gradient(315deg, #FF92FF 25%, transparent 25%), linear-gradient( 45deg, #FF92FF 25%, transparent 25%); background-size: 20px 20px; background-color: #00FFFF; margin-left: 77%; animation: float 10s linear infinite; } .egg16 { background-color:#FF0000; background-image: linear-gradient(90deg, rgba(0,0,255,.5) 50%, transparent 50%),linear-gradient(rgba(0,0,255,.5) 50%, transparent 50%); background-size:25px 25px; margin-left: 20%; animation: float 20s linear infinite; } .egg17 { background-color: #FF92FF; background-image: linear-gradient(335deg, #b00 23px, transparent 23px), linear-gradient(155deg, #d00 23px, transparent 23px),linear-gradient(335deg, #b00 23px, transparent 23px),linear-gradient(155deg, #d00 23px, transparent 23px); background-size: 50px 50px; background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px; margin-left: 57%; animation: float 8s linear infinite; } .egg18 { background-color: #FF8F00; background-image: linear-gradient(335deg, #b00 23px, transparent 23px), linear-gradient(155deg, #FFFF00 23px, transparent 23px),linear-gradient(155deg, #FFFF00 23px, transparent 23px); background-size: 58px 58px; background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px; margin-left: 60%; animation: floatsmall 14s linear infinite; } .egg19 { background: 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; background-color: #8EFFAE; background-size:20px 20px, 20px 20px, 50px 50px, 50px 50px; margin-left: 44%; animation: float 17s linear infinite; } .egg20 { background: 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; background-color: #FFF7A5; background-size:30px 30px, 30px 30px, 50px 50px, 50px 50px; margin-left: 41%; animation:float 11s linear infinite; } .egg21 { background: 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; background-color:#708090; background-size: 32px 32px; margin-left: 32%; animation: floatsmall 20s linear infinite; } .egg22 { background: 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; background-color:#708090; background-size: 32px 64px; margin-left: 70%; animation: float 20s linear infinite, left 20s infinite; } .egg23 { background-color:white; background-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); background-size: 30px 30px, 30px 30px; background-position: 0 0; margin-left: 10%; animation: float 19s linear infinite; } .egg24 { background-color: #00FFFF; background-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)), linear-gradient(60deg, rgba(255,0,0,.1) 25%, transparent 85%, transparent 75%, rgba(255,0,0,.1) 75%, rgba(255,0,0,.1)); background-size: 10px 30px; margin-left: 20%; animation: float 16s linear infinite; } /* Balloon Animation Keyframes */ @keyframes float { 0% {top:-40%; transform:rotateZ( 0deg);} 100%{top:110%; transform:rotateZ(720deg);} } @keyframes floatsmall { 0% {top:-40%; transform:rotateZ( 0deg);} 100%{top:110%; transform:rotateZ(720deg);} } @keyframes left { 0% {transform:translateX( 0px) rotateZ( 0deg);} 100%{transform:translateX(-400px) rotateZ(720deg);} } @keyframes right { 0% {transform:translateX( 0px) rotateZ( 0deg);} 100%{transform:translateX(300px) rotateZ(-720deg);} } .layer0, .layer1{ width: 100%; height: 100%; top: 0px; left: 0px; position: absolute; opacity: 1; z-index: 10; } .layer0 { background-image: url('images/conf-0.png'); animation: conf0 10s linear infinite; } .layer1 { opacity: 0.5; background-image: url('images/conf-1.png'); animation: conf1 25s linear infinite, conf1z 40s linear; } /* Layer 0 - Base Layer conf Falling Animation */ @keyframes conf0 { 0% {background-position: 0px 0px;} 100%{background-position: 300px 300px;} } /* Layer 1 - 1st Addition conf Falling Animation */ @keyframes conf1 { 0% {background-position: 0px 0px; transform:scale(1.0,1.0);} 50% { transform:scale(0.9,0.9);} 100%{background-position: 500px 500px; transform:scale(1.0,1.0);} } /* Sbow Layer 1 Addition Fade-In Animation - these layers are not visible until desired time */ @keyframes conf1z { 0% { opacity: 0.0;} 50% { opacity: 0.7;} 100%{ opacity: 0.5;} } /* Text Fade-In Animation */ @keyframes conf2z { 0% { opacity: 0;} 25% { opacity: 0;} 33% { opacity: 1;} 66% { opacity: 1;} 100%{ opacity: 0;} } /* Happy New Year Text */ .text { margin: 1em auto 0em auto; font-size: 5em; font-family: Arial; text-align: center; position: relative; text-shadow: 0 0.04em 0.005em #333333, -0.01em -0.01em 0.2em #000000, 0 0.04em 0.5em #000000; line-height: 1.5em; z-index: 999; animation: conf2z 30s linear infinite; } /* Text Colors */ .text1 {color: #FFFF00;} .text2 {color: #FFCC00; font-weight: bold;} #h {color: #33CC33;} #a {color: #FF9900;} #p {color: #990099;} #p2{color: #FF6666;} #y {color: #FFFF00;}
Happy
Easter

Surprisingly, all the eggs with patterns are all pure CSS. Easter Egg fun without JavaScript.

]]> https://thingography.com/css-easter/feed/ 0