mirror of
https://gitlab.com/randompenguin/postbox.git
synced 2025-05-09 23:04:12 +02:00
Upload New File
This commit is contained in:
Random Penguin
parent
fcc9883a8f
commit
9e38b48d83
1 changed files with 991 additions and 0 deletions
991
view/src/postbox.css
Normal file
991
view/src/postbox.css
Normal file
|
|
@ -0,0 +1,991 @@
|
|||
/* Post Backgrounds
|
||||
================
|
||||
Solid and Gradient backgrounds with larger text
|
||||
to grab reader attention
|
||||
*/
|
||||
[class^="postbox-"]{
|
||||
display: table-cell;
|
||||
height: 350px;
|
||||
width: 1000px;
|
||||
max-width: 100%;
|
||||
vertical-align: middle;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
line-height: 35px;
|
||||
text-align: center;
|
||||
padding: 50px 30px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
[class^="postbox-"] a {
|
||||
color: inherit !important;
|
||||
}
|
||||
[class^="postbox-"]:hover a,
|
||||
[class^="postbox-"]:focus a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
[class^="postbox-"]:hover,
|
||||
[class^="postbox-"]:hover::before,
|
||||
[class^="postbox-"]:hover::after,
|
||||
[class^="postbox-"]:active,
|
||||
[class^="postbox-"]:active::before,
|
||||
[class^="postbox-"]:active::after {
|
||||
animation: none;
|
||||
}
|
||||
/* SOLID COLOR BACKGROUNDS
|
||||
=======================
|
||||
*/
|
||||
.postbox-black {
|
||||
background-color: #000000;
|
||||
color: white;
|
||||
}
|
||||
.postbox-cornflowerblue, .postbox-blue {
|
||||
background-color: #6495ed;
|
||||
color: white;
|
||||
}
|
||||
.postbox-darkblue, .postbox-ocean {
|
||||
background-color: #00008b;
|
||||
color: white;
|
||||
}
|
||||
.postbox-darkgrey {
|
||||
background-color: #a9a9a9;
|
||||
color: #eeeeee;
|
||||
}
|
||||
.postbox-darkorange, .postbox-orange {
|
||||
background-color: #ff8c00;
|
||||
color: black;
|
||||
}
|
||||
.postbox-darkred {
|
||||
background-color: #8b0000;
|
||||
color: white;
|
||||
}
|
||||
.postbox-darkslateblue {
|
||||
background-color: #483d8b;
|
||||
color: white;
|
||||
}
|
||||
.postbox-forestgreen, .postbox-forest {
|
||||
background-color: #228b22;
|
||||
color: white;
|
||||
}
|
||||
.postbox-gold {
|
||||
background-color: #ffd700;
|
||||
color: black;
|
||||
}
|
||||
.postbox-goldenrod {
|
||||
background-color: #daa520;
|
||||
color: white;
|
||||
}
|
||||
.postbox-honeydew {
|
||||
background-color: #f0fff0;
|
||||
color: black;
|
||||
}
|
||||
.postbox-hotpink {
|
||||
background-color: #ff69b4;
|
||||
color: white;
|
||||
}
|
||||
.postbox-lavender {
|
||||
background-color: #e6e6fa;
|
||||
color: purple;
|
||||
}
|
||||
.postbox-lightpink {
|
||||
background-color: #ffb6c1;
|
||||
color: black;
|
||||
}
|
||||
.postbox-lightyellow {
|
||||
background-color: #ffffe0;
|
||||
color: black;
|
||||
}
|
||||
.postbox-limegreen, .postbox-green {
|
||||
background-color: #32cd32;
|
||||
color: white;
|
||||
}
|
||||
.postbox-lightsalmon, .postbox-salmon {
|
||||
background-color: #ffa07a;
|
||||
color: black;
|
||||
}
|
||||
.postbox-mediumaquamarine {
|
||||
background-color: #66CDAA;
|
||||
color: white;
|
||||
}
|
||||
.postbox-mediumslateblue {
|
||||
background-color: #7b68ee;
|
||||
color: white;
|
||||
}
|
||||
.postbox-mediumvioletred {
|
||||
background-color: #c71585;
|
||||
color: white;
|
||||
}
|
||||
.postbox-mintcream {
|
||||
background-color: #f5fffa;
|
||||
color: black;
|
||||
}
|
||||
.postbox-olivedrab {
|
||||
background-color: #6b8e23;
|
||||
color: white;
|
||||
}
|
||||
.postbox-palegreen {
|
||||
background-color: #98fb98;
|
||||
color: black;
|
||||
}
|
||||
.postbox-peachpuff {
|
||||
background-color: #ffdab9;
|
||||
color: black;
|
||||
}
|
||||
.postbox-pink {
|
||||
background-color: #ffc0cb;
|
||||
color: black;
|
||||
}
|
||||
.postbox-purple {
|
||||
background-color: #800080;
|
||||
color: white;
|
||||
}
|
||||
.postbox-red {
|
||||
background-color: #ff0000;
|
||||
color: white;
|
||||
}
|
||||
.postbox-seagreen {
|
||||
background-color: #2e8b57;
|
||||
color: white;
|
||||
}
|
||||
.postbox-sienna {
|
||||
background-color: #a0522d;
|
||||
color: white;
|
||||
}
|
||||
.postbox-skyblue {
|
||||
background-color: #87ceeb;
|
||||
color: black;
|
||||
}
|
||||
.postbox-thistle {
|
||||
background-color: #d8bfd8;
|
||||
color: black;
|
||||
}
|
||||
.postbox-violet {
|
||||
background-color: #ee82ee;
|
||||
color: lavender;
|
||||
}
|
||||
.postbox-whitesmoke {
|
||||
background-color: #f5f5f5;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.postbox-yellowgreen {
|
||||
background-color: #9acd32;
|
||||
color: white;
|
||||
}
|
||||
/* GRADIENT BACKGROUNDS
|
||||
====================
|
||||
*/
|
||||
.postbox-aurora {
|
||||
background-size: 100% 100%;
|
||||
background-position: 0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px;
|
||||
background-image:
|
||||
radial-gradient(18% 28% at 24% 50%, #CEFAFFFF 7%, #073AFF00 100%),
|
||||
radial-gradient(18% 28% at 18% 71%, #FFFFFF59 6%, #073AFF00 100%),
|
||||
radial-gradient(70% 53% at 36% 76%, #73F2FFFF 0%, #073AFF00 100%),
|
||||
radial-gradient(42% 53% at 15% 94%, #FFFFFFFF 7%, #073AFF00 100%),
|
||||
radial-gradient(42% 53% at 34% 72%, #FFFFFFFF 7%, #073AFF00 100%),
|
||||
radial-gradient(18% 28% at 35% 87%, #FFFFFFFF 7%, #073AFF00 100%),
|
||||
radial-gradient(31% 43% at 7% 98%, #FFFFFFFF 24%, #073AFF00 100%),
|
||||
radial-gradient(21% 37% at 72% 23%, #D3FF6D9C 24%, #073AFF00 100%),
|
||||
radial-gradient(35% 56% at 91% 74%, #8A4FFFF5 9%, #073AFF00 100%),
|
||||
radial-gradient(74% 86% at 67% 38%, #6DFFAEF5 24%, #073AFF00 100%),
|
||||
linear-gradient(125deg, #4EB5FFFF 1%, #4C00FCFF 100%);
|
||||
}
|
||||
.postbox-bluegray {
|
||||
background-image: linear-gradient(to right, #94bbeb 0%,#dedede 100%);
|
||||
color: black;
|
||||
}
|
||||
.postbox-graygrey, .postbox-darkgray {
|
||||
background-image: linear-gradient(135deg, rgb(119, 125, 136), rgb(79, 87, 102));
|
||||
color: white;
|
||||
}
|
||||
.postbox-grayblack {
|
||||
background-image: linear-gradient(45deg, rgb(93, 99, 116), rgb(22, 24, 29));
|
||||
color: white;
|
||||
}
|
||||
.postbox-greengray {
|
||||
background-image: linear-gradient(to right, #c8dbbd 0%,#dedede 100%);
|
||||
color: black;
|
||||
}
|
||||
.postbox-lavendergray {
|
||||
background-image: linear-gradient(to right, #cfbfda 0%,#dedede 100%);
|
||||
color: black;
|
||||
}
|
||||
.postbox-minty {
|
||||
background-image: linear-gradient(135deg, rgb(143, 199, 173), rgb(72, 229, 169));
|
||||
color: black;
|
||||
}
|
||||
.postbox-mintgray {
|
||||
background-image: linear-gradient(135deg, rgb(143, 199, 173), rgb(72, 229, 169));
|
||||
color: black;
|
||||
}
|
||||
.postbox-rainbow {
|
||||
background: linear-gradient(135deg, #ff0000 0%,#f2af00 17%,#fff200 33%,#00e400 50%,#009cfe 69%,#935cf9 86%,#e40df2 100%);
|
||||
color: white;
|
||||
text-shadow: 0 0 3px black, 3px 3px 3px black;
|
||||
}
|
||||
.postbox-redblue {
|
||||
background-image: linear-gradient(45deg, rgb(255, 0, 71), rgb(44, 52, 199));
|
||||
color: white;
|
||||
}
|
||||
.postbox-sherbert, .postbox-sherbet {
|
||||
background-image: linear-gradient(45deg, #fcd6cd 6%,#f8bc44 25%,#fb7d88 44%,#fb7d88 64%,#fb7d88 64%,#fed640 100%);
|
||||
color: black;
|
||||
}
|
||||
.postbox-spectrum {
|
||||
background: linear-gradient(to right, darkred 0%,#ff0000 5%,#f2af00 17%,#fff200 33%,#00e400 50%,#009cfe 69%,#935cf9 86%,#e40df2 95%, darkmagenta 100%);
|
||||
color: white;
|
||||
text-shadow: 0 0 3px black, 3px 3px 3px black;
|
||||
}
|
||||
.postbox-strawberrycream {
|
||||
background: linear-gradient(to bottom, #fff2cd 0%,#ffa0ac 20%,#fea1ac 20%,#ff84a3 28%,#fd4f8c 40%,#d91b65 79%,#d61a64 79%,#c11a5f 100%);
|
||||
color: white;
|
||||
}
|
||||
.postbox-sunset {
|
||||
background-image: linear-gradient(to bottom, #fecf41 0%,#fd7440 50%,#b623b1 100%);
|
||||
color: white;
|
||||
}
|
||||
.postbox-tealblue {
|
||||
background-image: linear-gradient(to bottom, #4bdfdf 0%,#207cca 50%,#19094a 100%);
|
||||
color: white;
|
||||
}
|
||||
.postbox-tealgray {
|
||||
background-image: linear-gradient(to right, #8dcad0 0%,#dedede 100%);
|
||||
color: black;
|
||||
}
|
||||
.postbox-violets {
|
||||
background-image: linear-gradient(45deg, rgb(93, 63, 218), rgb(252, 54, 253));
|
||||
color: white;
|
||||
}
|
||||
.postbox-violetblue {
|
||||
background: linear-gradient(to bottom, #cc258f 0%,#9643b5 25%,#626cdd 48%,#629aed 71%,#80ebff 100%);
|
||||
color: white;
|
||||
}
|
||||
/* PATTERN BACKGROUNDS
|
||||
===================
|
||||
*/
|
||||
.postbox-blueprint {
|
||||
background-color: blue;
|
||||
background-image:
|
||||
linear-gradient(lightblue 2px, transparent 2px),
|
||||
linear-gradient(90deg, lightblue 2px, transparent 2px),
|
||||
linear-gradient(lightblue 1px, transparent 1px),
|
||||
linear-gradient(90deg, lightblue 1px, transparent 1px);
|
||||
background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
|
||||
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
|
||||
color: white;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
font-family: 'Bradley Hand', 'Comic-Sans MS', sans-serif !important;
|
||||
text-shadow: -2px 2px 2px midnightblue, 2px 2px 2px blue, 0 0 20px blue;
|
||||
box-shadow: inset 0 50px 100px black;
|
||||
}
|
||||
.postbox-birds {
|
||||
background:
|
||||
radial-gradient(calc(1.28*50px + 18.75px/2) at left 50% bottom calc(-.8*50px),#BCE4FE calc(100% - 18.75px),#FFFFFF calc(101% - 18.75px) 100%,#0000 101%) calc(2*50px) calc(-1*calc(1.5*50px + 18.75px)),
|
||||
radial-gradient(calc(1.28*50px + 18.75px/2) at left 50% bottom calc(-.8*50px),#FEE993 calc(100% - 18.75px),#FFFFFF calc(101% - 18.75px) 100%,#0000 101%) calc(-1*50px) calc(calc(1.5*50px + 18.75px)/-2),
|
||||
radial-gradient(calc(1.28*50px + 18.75px/2) at left 50% top calc(-.8*50px),#FEE993 calc(100% - 18.75px),#FFFFFF calc(101% - 18.75px) 100%,#0000 101%) 0 calc(1.5*50px + 18.75px),
|
||||
radial-gradient(calc(1.28*50px + 18.75px/2) at left 50% top calc(-.8*50px),#BCE4FE calc(100% - 18.75px),#FFFFFF calc(101% - 18.75px) 100%,#0000 101%) 50px calc(calc(1.5*50px + 18.75px)/ 2),
|
||||
linear-gradient(#BCE4FE 50%,#FEE993 0);
|
||||
background-size: calc(4*50px) calc(1.5*50px + 18.75px);
|
||||
}
|
||||
.postbox-checkered {
|
||||
background-image: repeating-conic-gradient(#000000 0% 25%, #AD0505 0% 50%);
|
||||
background-position: 0 0, 32px 32px;
|
||||
background-size: 64px 64px;
|
||||
background-color: #AD0505;
|
||||
color: white;
|
||||
}
|
||||
.postbox-cubes {
|
||||
background-image: linear-gradient(30deg, #B6AEE5 12%, transparent 12.5%, transparent 87%, #B6AEE5 87.5%, #B6AEE5), linear-gradient(150deg, #B6AEE5 12%, transparent 12.5%, transparent 87%, #B6AEE5 87.5%, #B6AEE5), linear-gradient(30deg, #B6AEE5 12%, transparent 12.5%, transparent 87%, #B6AEE5 87.5%, #B6AEE5), linear-gradient(150deg, #B6AEE5 12%, transparent 12.5%, transparent 87%, #B6AEE5 87.5%, #B6AEE5), linear-gradient(60deg, #B6AEE580 25%, transparent 25.5%, transparent 75%, #B6AEE580 75%, #B6AEE580), linear-gradient(60deg, #B6AEE580 25%, transparent 25.5%, transparent 75%, #B6AEE580 75%, #B6AEE580);
|
||||
background-size: 100px 175px;
|
||||
background-position: 0 0, 0 0, 50px 87.5px, 50px 87.5px, 0 0, 50px 87.5px;
|
||||
background-color: #E4E4ED;
|
||||
text-shadow: -1px -1px 2px white, 1px 1px 2px white;
|
||||
}
|
||||
|
||||
.postbox-lemonlime {
|
||||
background:
|
||||
radial-gradient(calc(1.28 * 42px + 10.5px/2) at top 50% right calc(-.8*42px), #E5E500 calc(99.5% - 10.5px),#FFFFFF calc(101% - 10.5px) 99.5%,#0000 101%) calc(-1*calc(1.8 * 42px + 10.5px)) 42px,
|
||||
radial-gradient(calc(1.28 * 42px + 10.5px/2) at top 50% left calc(-.8*42px), #04E164 calc(99.5% - 10.5px),#FFFFFF calc(101% - 10.5px) 99.5%,#0000 101%) calc(1.8 * 42px + 10.5px) calc(-1*42px),
|
||||
radial-gradient(calc(1.28 * 42px + 10.5px/2) at top 50% right calc(-.8*42px), #04E164 calc(99.5% - 10.5px),#FFFFFF calc(101% - 10.5px) 99.5%,#0000 101%) calc(calc(1.8 * 42px + 10.5px)/-2) calc(-1*42px),
|
||||
radial-gradient(calc(1.28 * 42px + 10.5px/2) at top 50% left calc(-.8*42px), #E5E500 calc(99.5% - 10.5px),#FFFFFF calc(101% - 10.5px) 99.5%,#0000 101%) calc(calc(1.8 * 42px + 10.5px)/ 2) 42px,
|
||||
linear-gradient(90deg, #E5E500 50%, #04E164 0);
|
||||
background-size: calc(1.8 * 42px + 10.5px) 168px;
|
||||
text-shadow: 1px 1px 5px white, -1px -1px 5px white;
|
||||
font-size: 52px !important;
|
||||
font-size: 42px !important;
|
||||
}
|
||||
.postbox-gingham {
|
||||
background-image: linear-gradient(0deg, rgba(226, 9, 4, 0.6) 0% 25%, rgba(251, 248, 239, 0.6) 25% 75%, rgba(226, 9, 4, 0.6) 75% 100%), linear-gradient(90deg, rgba(226, 9, 4, 0.6) 0% 25%, rgba(251, 248, 239, 0.6) 25% 75%, rgba(226, 9, 4, 0.6) 75% 100% );
|
||||
background-size: 64px 64px,64px 64px;
|
||||
color: white;
|
||||
text-shadow: 0 0 2px black, 3px 3px 5px black;
|
||||
}
|
||||
.postbox-grid {
|
||||
background-image: linear-gradient(#027816 2px, transparent 2px), linear-gradient(to right, #027816 2px, transparent 2px);
|
||||
background-size: 24px 24px;
|
||||
background-color: #000000;
|
||||
color: lime;
|
||||
text-shadow: 0 0 3px black, 3px 3px 5px black, -3px -3px 5px black;
|
||||
}
|
||||
.postbox-hearts {
|
||||
background:
|
||||
radial-gradient(at 80% 80%,#FF6969 25.4%,#0000 26%),
|
||||
radial-gradient(at 20% 80%,#FF6969 25.4%,#0000 26%),
|
||||
conic-gradient(from -45deg at 50% 41%,#FF6969 90deg,#FFACAC 0)
|
||||
21px 0;
|
||||
background-size: 42px 42px;
|
||||
color: white;
|
||||
font-size: 42px !important;
|
||||
text-shadow: 2px 2px 3px darkred;
|
||||
}
|
||||
.postbox-honeycomb {
|
||||
background:
|
||||
radial-gradient(circle farthest-side at 0% 50%,#FBEB00 23.5%,#0000 0)33.6px 48px,
|
||||
radial-gradient(circle farthest-side at 0% 50%,#EDBE03 24%,#0000 0)30.4px 48px,
|
||||
linear-gradient(#FBEB00 14%,#0000 0, #0000 85%,#FBEB00 0)0 0,
|
||||
linear-gradient(150deg,#FBEB00 24%,#EDBE03 0,#EDBE03 26%,#0000 0,#0000 74%,#EDBE03 0,#EDBE03 76%,#FBEB00 0)0 0,
|
||||
linear-gradient(30deg,#FBEB00 24%,#EDBE03 0,#EDBE03 26%,#0000 0,#0000 74%,#EDBE03 0,#EDBE03 76%,#FBEB00 0)0 0,
|
||||
linear-gradient(90deg,#EDBE03 2%,#FBEB00 0,#FBEB00 98%,#EDBE03 0%)0 0 #FBEB00;
|
||||
background-size: 64px 96px;
|
||||
background-color: #FBEB00;
|
||||
}
|
||||
.postbox-notebook {
|
||||
background: linear-gradient(to right, transparent 10%, #f7c1c1 10% 10.2%, transparent 10.5%), repeating-linear-gradient(#ebf8e1a2 10%, #b5def0 10%, #b5def0 10.2%, #ebf8e1a2 11%, #ebf8e1a2 18.5%);
|
||||
background-color: #ebf8e1;
|
||||
background-size: 100% 25px, 100% 100%;
|
||||
background-repeat: repeat-y, repeat;
|
||||
font-family: 'Bradley Hand', 'Comic-Sans MS', sans-serif !important;
|
||||
color: #333;
|
||||
}
|
||||
.postbox-plaid {
|
||||
background: repeating-linear-gradient(transparent, transparent 8px, #A19100 8px, #A19100 12px, transparent 12px, transparent 16px, #A19100 12px, #A19100 32px, transparent 32px, transparent 36px, #A19100 36px, #A19100 40px, transparent 40px, transparent 64px), repeating-linear-gradient(90deg, transparent, transparent 8px, #A19100 8px, #A19100 12px, transparent 12px, transparent 16px, #A19100 12px, #A19100 32px, transparent 32px, transparent 36px, #A19100 36px, #A19100 40px, transparent 40px, transparent 64px), #A50000;
|
||||
background-blend-mode: multiply;
|
||||
background-color: #A50000;
|
||||
color: white;
|
||||
text-shadow: 0 0 2px black, 3px 3px 5px black;
|
||||
}
|
||||
.postbox-polkadots {
|
||||
background-image: radial-gradient(#87D9E5 2px, transparent 2px), radial-gradient(#87D9E5 2px, transparent 2px);
|
||||
background-size: 32px 32px;
|
||||
background-position: 0 0, 16px 16px;
|
||||
background-color: #1A8FE5;
|
||||
color: white;
|
||||
text-shadow: 3px 3px 5px darkblue;
|
||||
}
|
||||
.postbox-shadedots {
|
||||
background:
|
||||
conic-gradient(#0CBEFE 25%,#0000 0) 0 0/calc(2*50px) calc(50px/9.5),
|
||||
conic-gradient(#0CBEFE 25%,#0000 0) 0 0/calc(50px/9.5) calc(2*50px),
|
||||
repeating-conic-gradient(#0000 0 25%,#0CBEFE 0 50%)
|
||||
50px 0 /calc(2*50px) calc(2*50px),
|
||||
radial-gradient(50% 50%,#1872A2 98%,#0CBEFE)
|
||||
0 0/50px 50px;
|
||||
color: white;
|
||||
text-shadow: 3px 3px 3px darkblue;
|
||||
}
|
||||
.postbox-shadowbox {
|
||||
background-image: radial-gradient(rgba(0,0,0,.2) 5px, transparent 2px), radial-gradient(ellipse at center, #969faa 0%,#6d7782 35%,#6c7680 35%,#28343b 99%);
|
||||
background-size: 40px 40px, 100% 100%;
|
||||
font-family: Impact, sans-serif !important;
|
||||
text-transform: uppercase;
|
||||
font-size: 42px !important;
|
||||
line-height: 52px !important;
|
||||
color: #ddd;
|
||||
text-shadow: 0px 5px 2px rgba(0,0,0,.5), 0px -1px 0px white;
|
||||
}
|
||||
.postbox-stars {
|
||||
background:
|
||||
conic-gradient(from 162deg at calc(42px * .5) calc(42px * .68), #0D4975 36deg, #0000 0),
|
||||
conic-gradient(from 18deg at calc(42px * .19) calc(42px * .59), #0D4975 36deg, #0000 0),
|
||||
conic-gradient(from 306deg at calc(42px * .81) calc(42px * .59), #0D4975 36deg, #0000 0),
|
||||
#000000;
|
||||
background-position: 0 calc(42px * 0.35);
|
||||
background-size: calc(42px + 1.7px) calc(42px + 1.7px);
|
||||
color: white;
|
||||
}
|
||||
.postbox-warpgrid {
|
||||
background:
|
||||
radial-gradient(farthest-side at -33.33% 50%,#0000 52%,#027816 54% 57%,#0000 59%) 0 calc(128px/2),
|
||||
radial-gradient(farthest-side at 50% 133.33%,#0000 52%,#027816 54% 57%,#0000 59%) calc(128px/2) 0,
|
||||
radial-gradient(farthest-side at 133.33% 50%,#0000 52%,#027816 54% 57%,#0000 59%),
|
||||
radial-gradient(farthest-side at 50% -33.33%,#0000 52%,#027816 54% 57%,#0000 59%),
|
||||
#000000;
|
||||
background-size: calc(128px/4.667) 128px,128px calc(128px/4.667);
|
||||
color: lime;
|
||||
text-shadow: 0 0 3px black, 3px 3px 5px black, -3px -3px 5px black;
|
||||
}
|
||||
.postbox-wavy {
|
||||
background: radial-gradient(at bottom right, #57D2FF 0, #57D2FF 12.5px, #57D2FF33 12.5px, #57D2FF33 25px, #57D2FFBF 25px, #57D2FFBF 37.5px, #57D2FF40 37.5px, #57D2FF40 50px, #57D2FF4D 50px, #57D2FF4D 62.5px, #57D2FFBF 62.5px, #57D2FFBF 75px, #57D2FF33 75px, #57D2FF33 87.5px, transparent 87.5px, transparent 100px), radial-gradient(at top left, transparent 0, transparent 12.5px, #57D2FF33 12.5px, #57D2FF33 25px, #57D2FFBF 25px, #57D2FFBF 37.5px, #57D2FF4D 37.5px, #57D2FF4D 50px, #57D2FF40 50px, #57D2FF40 62.5px, #57D2FFBF 62.5px, #57D2FFBF 75px, #57D2FF33 75px, #57D2FF33 87.5px, #57D2FF 87.5px, #57D2FF 100px, transparent 100px, transparent 250px);
|
||||
background-blend-mode: multiply;
|
||||
background-size: 100px 100px, 100px 100px;
|
||||
background-color: #E4E4ED;
|
||||
color: darkblue;
|
||||
}
|
||||
|
||||
/* ANIMATED */
|
||||
|
||||
.postbox-anigradient {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-size: 300% 300%;
|
||||
background-image: linear-gradient(-45deg, yellow 0%, yellow 25%, yellow 51%, #ff357f 100%);
|
||||
-webkit-animation: anigrad 20s ease infinite;
|
||||
animation: anigrad 20s ease infinite;
|
||||
}
|
||||
@-webkit-keyframes anigrad {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
@keyframes anigrad {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.postbox-blob {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: red;
|
||||
z-index: 0;
|
||||
color: white;
|
||||
}
|
||||
.postbox-blob::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
left: 50%;
|
||||
top: -5%;
|
||||
width: 90%;
|
||||
height: 120%;
|
||||
margin-left: -45%;
|
||||
background: rgba(120, 60, 240, 0.35);
|
||||
box-shadow: inset 0 0 50px rgb(120,60,240);
|
||||
border-radius: 62% 47% 82% 35% / 45% 45% 80% 66%;
|
||||
will-change: border-radius, transform, opacity;
|
||||
display: block;
|
||||
z-index: -1;
|
||||
animation: blobby 5s linear infinite;
|
||||
}
|
||||
@keyframes blobby {
|
||||
0%,100%{
|
||||
border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
|
||||
transform: translate3d(0,0,0) rotateZ(0.01deg);
|
||||
}
|
||||
34%{
|
||||
border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%;
|
||||
transform: translate3d(0,5px,0) rotateZ(0.01deg);
|
||||
}
|
||||
50%{
|
||||
transform: translate3d(0,0,0) rotateZ(0.01deg);
|
||||
}
|
||||
67%{
|
||||
border-radius: 100% 60% 60% 100% / 100% 100% 60% 60% ;
|
||||
transform: translate3d(0,-3px,0) rotateZ(0.01deg);
|
||||
}
|
||||
}
|
||||
|
||||
.postbox-colorfade {
|
||||
background: #33CCCC; /* Fallback */
|
||||
animation: colorfade 9s infinite linear;
|
||||
}
|
||||
@keyframes colorfade {
|
||||
0% { background: #33CCCC; }
|
||||
20% { background: #33CC36; }
|
||||
40% { background: #B8CC33; }
|
||||
60% { background: #FCCA00; }
|
||||
80% { background: #33CC36; }
|
||||
100% { background: #33CCCC; }
|
||||
}
|
||||
|
||||
.postbox-gridrunner {
|
||||
background-image: linear-gradient(rgb(93, 63, 218), rgb(252, 54, 253));
|
||||
z-index: 0;
|
||||
position: relative;
|
||||
transform: perspective;
|
||||
overflow: hidden;
|
||||
color: white;
|
||||
}
|
||||
.postbox-gridrunner::after{
|
||||
content: '';
|
||||
background-image:
|
||||
linear-gradient(blue 2px, transparent 2px),
|
||||
linear-gradient(to right,blue 2px, transparent 2px);
|
||||
background-size: 24px 24px;
|
||||
background-color: transparent;
|
||||
color: lime;
|
||||
text-shadow: 0 0 3px black, 3px 3px 5px black, -3px -3px 5px black;
|
||||
display: block;
|
||||
-webkit-transform: perspective(300px) rotate3d(0,1,.5,3.142rad);
|
||||
transform: perspective(300px) rotate3d(0,1,.5,3.142rad);
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
background-position: 0px 100px;
|
||||
animation: gridrun 120s linear infinite;
|
||||
}
|
||||
@keyframes gridrun {
|
||||
from {
|
||||
background-position: 0px 100px;
|
||||
}
|
||||
to {
|
||||
background-position: 0px 10000px;
|
||||
}
|
||||
}
|
||||
|
||||
.postbox-heartbeat {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 0;
|
||||
background-color: hotpink;
|
||||
color: white;
|
||||
}
|
||||
.postbox-heartbeat::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin: -12px 0 0 -12px;
|
||||
background: red;
|
||||
-webkit-clip-path: path("M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 10 15.808 6.43-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z");
|
||||
clip-path: path("M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 12 15.808 6.43-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z");
|
||||
transform: scale(5);
|
||||
box-shadow: inset 0 0 10px darkred;
|
||||
z-index: -1;
|
||||
animation: heartbeat 5s ease-in-out infinite;
|
||||
}
|
||||
@keyframes heartbeat {
|
||||
0% {
|
||||
transform: scale(5);
|
||||
}
|
||||
50% {
|
||||
transform: scale(8);
|
||||
}
|
||||
100% {
|
||||
transform: scale(5);
|
||||
}
|
||||
}
|
||||
|
||||
.postbox-moonrise {
|
||||
background: url('../images/stars.svg');
|
||||
background-color: black;
|
||||
background-repeat: repeat;
|
||||
background-position: 0px 100%;
|
||||
background-size: 200px 200px;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
color: yellow;
|
||||
text-shadow: 0 0 3px blue;
|
||||
animation: moonrise 20s linear infinite;
|
||||
}
|
||||
.postbox-moonrise::before {
|
||||
content: '';
|
||||
animation: moonrise1 20s linear infinite;
|
||||
animation-delay: 0s;
|
||||
display: block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: transparent;
|
||||
position: absolute;
|
||||
bottom: 75%;
|
||||
left: 75%;
|
||||
margin-left: -50px;
|
||||
z-index: -1;
|
||||
border-radius: 100%;
|
||||
box-shadow: 20px 20px 0px #eee;
|
||||
}
|
||||
.postbox-moonrise::after {
|
||||
animation: moonrise2 20s linear infinite;
|
||||
content: '';
|
||||
display: block;
|
||||
width: 150%;
|
||||
height: 25%;
|
||||
bottom: -12%;
|
||||
position: absolute;
|
||||
background-color: #333;
|
||||
left: -25%;
|
||||
z-index: -1;
|
||||
border-radius: 100%;
|
||||
box-shadow: 0 -50px 200px #8589bf;
|
||||
}
|
||||
@keyframes moonrise {
|
||||
0% {
|
||||
background-color: midnightblue;
|
||||
background-position: 0px 100%;
|
||||
}
|
||||
100% {
|
||||
background-color: black;
|
||||
background-position: 100px 0%;
|
||||
}
|
||||
}
|
||||
@keyframes moonrise1 {
|
||||
0% {
|
||||
bottom: -25%;
|
||||
left: 5%;
|
||||
}
|
||||
100% {
|
||||
bottom: 100%;
|
||||
left: 75%;
|
||||
}
|
||||
}
|
||||
@keyframes moonrise2 {
|
||||
0% {
|
||||
background-color: darkgreen;
|
||||
}
|
||||
50% {
|
||||
background-color: #01530e;
|
||||
}
|
||||
100% {
|
||||
background-color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.postbox-rainy {
|
||||
position: relative;
|
||||
color: white;
|
||||
background: none;
|
||||
background-color: black;
|
||||
background-image: url("../images/rain.svg"), url("../images/rain.svg");
|
||||
background-size: 500px 500px, 250px 250px;
|
||||
-webkit-animation: rainy 5s linear infinite;
|
||||
-moz-animation: rainy 5s linear infinite;
|
||||
-o-animation: rainy 5s linear infinite;
|
||||
-ms-animation: rainy 5s linear infinite;
|
||||
animation: rainy 5s linear infinite;
|
||||
overflow: hidden;
|
||||
z-index: 0;
|
||||
}
|
||||
.postbox-rainy::after {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
z-index: 1;
|
||||
background-image: url("../images/rain.svg");
|
||||
background-size: 900px 900px;
|
||||
background-position: top left;
|
||||
-webkit-animation: rainy 5s linear infinite;
|
||||
-moz-animation: rainy 5s linear infinite;
|
||||
-o-animation: rainy 5s linear infinite;
|
||||
-ms-animation: rainy 5s linear infinite;
|
||||
animation: rainy 5s linear infinite;
|
||||
}
|
||||
.postbox-rainy:hover::after,
|
||||
.postbox-rainy:active::after {
|
||||
z-index: -1;
|
||||
}
|
||||
@-moz-keyframes rainy {
|
||||
0% {
|
||||
background-position: 0px 0px, 0px 0px;
|
||||
}
|
||||
75% {
|
||||
background-position: 0px 750px, 0px 600px;
|
||||
}
|
||||
100% {
|
||||
background-position: 0px 1000px, 0px 800px;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes rainy {
|
||||
0% {
|
||||
background-position: 0px 0px, 0px 0px;
|
||||
}
|
||||
75% {
|
||||
background-position: 0px 750px, 0px 600px;
|
||||
}
|
||||
100% {
|
||||
background-position: 0px 1000px, 0px 800px;
|
||||
}
|
||||
}
|
||||
@-o-keyframes rainy {
|
||||
0% {
|
||||
background-position: 0px 0px, 0px 0px;
|
||||
}
|
||||
75% {
|
||||
background-position: 0px 750px, 0px 600px;
|
||||
}
|
||||
100% {
|
||||
background-position: 0px 1000px, 0px 800px;
|
||||
}
|
||||
}
|
||||
@keyframes rainy {
|
||||
0% {
|
||||
background-position: 0px 0px, 0px 0px;
|
||||
}
|
||||
75% {
|
||||
background-position: 0px 750px, 0px 600px;
|
||||
}
|
||||
100% {
|
||||
background-position: 0px 1000px, 0px 800px;
|
||||
}
|
||||
}
|
||||
|
||||
.postbox-rocket {
|
||||
color: white;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
background: url("../images/stars.svg"),url("../images/stars.svg");
|
||||
background-color:black;
|
||||
background-size: 200px, 400px;
|
||||
background-position: 0px 0px, 100px 100px;
|
||||
animation: starfield 100s linear infinite;
|
||||
overflow: hidden;
|
||||
}
|
||||
.postbox-rocket::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 0; left: 0;
|
||||
background: url("../images/rocketship.svg");
|
||||
background-position: center center;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
animation: rocket 15s linear infinite;
|
||||
z-index: -1;
|
||||
}
|
||||
@keyframes starfield {
|
||||
from {
|
||||
background-position: 0px 0px, 100px 100px;
|
||||
}
|
||||
to {
|
||||
background-position: -1000px 1000px, -10000px 10000px;
|
||||
}
|
||||
}
|
||||
@keyframes rocket {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
z-index: 1;
|
||||
}
|
||||
50% {
|
||||
z-index: 1;
|
||||
}
|
||||
51% {
|
||||
z-index: -1;
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
.postbox-snowy {
|
||||
color: white;
|
||||
position: relative;
|
||||
background: none;
|
||||
background-color: darkblue;
|
||||
background-image: url("../images/snow.svg"),url("../images/snow.svg");
|
||||
background-size: 500px 500px, 250px 250px, 125px 125px;
|
||||
-webkit-animation: snowy 9s linear infinite;
|
||||
-moz-animation: snowy 9s linear infinite;
|
||||
-o-animation: snowy 9s linear infinite;
|
||||
-ms-animation: snowy 9s linear infinite;
|
||||
animation: snowy 9s linear infinite;
|
||||
}
|
||||
@-moz-keyframes snowy {
|
||||
0% {
|
||||
background-position: 0px 0px, 0px 0px, 0px 0px;
|
||||
}
|
||||
75% {
|
||||
background-position: 325px 750px, 275px 600px, -5px 150px;
|
||||
}
|
||||
100% {
|
||||
background-position: 500px 1000px, 400px 800px, 0px 300px;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes snowy {
|
||||
0% {
|
||||
background-position: 0px 0px, 0px 0px, 0px 0px;
|
||||
}
|
||||
75% {
|
||||
background-position: 325px 750px, 275px 600px, -5px 150px;
|
||||
}
|
||||
100% {
|
||||
background-position: 500px 1000px, 400px 800px, 0px 300px;
|
||||
}
|
||||
}
|
||||
@-o-keyframes snowy {
|
||||
0% {
|
||||
background-position: 0px 0px, 0px 0px, 0px 0px;
|
||||
}
|
||||
75% {
|
||||
background-position: 325px 750px, 275px 600px, -5px 150px;
|
||||
}
|
||||
100% {
|
||||
background-position: 500px 1000px, 400px 800px, 0px 300px;
|
||||
}
|
||||
}
|
||||
@keyframes snowy {
|
||||
0% {
|
||||
background-position: 0px 0px, 0px 0px, 0px 0px;
|
||||
}
|
||||
75% {
|
||||
background-position: 325px 750px, 275px 600px, -5px 150px;
|
||||
}
|
||||
100% {
|
||||
background-position: 500px 1000px, 400px 800px, 0px 300px;
|
||||
}
|
||||
}
|
||||
|
||||
.postbox-sunrise {
|
||||
background: lightblue;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
color: white;
|
||||
text-shadow: 0 0 3px black;
|
||||
}
|
||||
.postbox-sunrise::before {
|
||||
content: '';
|
||||
animation: sunrise 30s linear infinite;
|
||||
animation-delay: 0s;
|
||||
display: block;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
bottom: -25%;
|
||||
left: 50%;
|
||||
margin-left: -100px;
|
||||
z-index: -1;
|
||||
border-radius: 100%;
|
||||
box-shadow: 0 0 20px white;
|
||||
}
|
||||
.postbox-sunrise::after {
|
||||
animation: sunrise2 30s linear infinite;
|
||||
content: '';
|
||||
display: block;
|
||||
width: 150%;
|
||||
height: 25%;
|
||||
bottom: -12%;
|
||||
position: absolute;
|
||||
background-color: green;
|
||||
left: -25%;
|
||||
z-index: -1;
|
||||
border-radius: 100%;
|
||||
box-shadow: 0 -50px 400px orange, 0 -100px 300px yellow;
|
||||
}
|
||||
@keyframes sunrise {
|
||||
0% {
|
||||
bottom: -50%;
|
||||
background-color: gold;
|
||||
box-shadow: 0 0 20px gold;
|
||||
}
|
||||
50% {
|
||||
background-color: yellow;
|
||||
box-shadow: 0 0 20px yellow;
|
||||
}
|
||||
100% {
|
||||
bottom: 100%;
|
||||
background-color: white;
|
||||
box-shadow: 0 0 20px white;
|
||||
}
|
||||
}
|
||||
@keyframes sunrise2 {
|
||||
0% {
|
||||
background-color: darkgreen;
|
||||
box-shadow: 0 -50px 400px red, 0 -100px 300px orange;
|
||||
}
|
||||
50% {
|
||||
background-color: green;
|
||||
box-shadow: 0 -50px 300px orange, 0 -100px 200px yellow;
|
||||
}
|
||||
100% {
|
||||
background-color: lightgreen;
|
||||
box-shadow: 0 -50px 200px white, 0 -100px 100px lightblue;
|
||||
}
|
||||
}
|
||||
|
||||
.postbox-waves {
|
||||
position: relative;
|
||||
background: url('../images/wave.svg'), url('../images/wave.svg');
|
||||
background-size: 100% 15%, 100% 20%;
|
||||
background-color: #3586ff;
|
||||
background-position: 0px 100%, 500px 100%;
|
||||
background-repeat: repeat-x;
|
||||
animation: wave 30s linear infinite;
|
||||
animation-delay: 5s;
|
||||
z-index: 0;
|
||||
color: white;
|
||||
overflow: hidden;
|
||||
}
|
||||
.postbox-waves::before, .postbox-waves::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 20%;
|
||||
display: block;
|
||||
z-index: -1;
|
||||
background: url('../images/wave.svg');
|
||||
background-repeat: repeat-x;
|
||||
background-position: bottom left;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.postbox-waves::before {
|
||||
animation: wave1 40s linear infinite;
|
||||
}
|
||||
.postbox-waves::after {
|
||||
animation: wave2 60s linear infinite;
|
||||
bottom: -20px;
|
||||
}
|
||||
@keyframes wave {
|
||||
0% {
|
||||
background-position: 0px 100%, 500px 100%;
|
||||
}
|
||||
100% {
|
||||
background-position: 1000px 100%, -1000px 100%;
|
||||
}
|
||||
}
|
||||
@keyframes wave1 {
|
||||
0% {
|
||||
background-position-x: 0px;
|
||||
bottom: 0;
|
||||
}
|
||||
50% {
|
||||
bottom: -20px;
|
||||
}
|
||||
100% {
|
||||
background-position-x: 1000px;
|
||||
bottom: 0px
|
||||
}
|
||||
}
|
||||
@keyframes wave2 {
|
||||
0% {
|
||||
background-position-x: 0px;
|
||||
bottom: -20px;
|
||||
}
|
||||
50% {
|
||||
bottom: 0px;
|
||||
}
|
||||
100% {
|
||||
background-position-x: -1000px;
|
||||
bottom: -20px;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue