Fallout Shelter
How do I make an fallout shelter?
Made the 'FALLOUT SHELTER' sign using HTML and CSS. The background, lense and smoke textures are images altered with CSS. The music is the Fallout 3 main theme from youtube. It probably doesn't look good without -webkit-filters. . What is a fallout shelter? How do you make a fallout shelter? This script and codes were developed by Jordan on 03 December 2022, Saturday.
Fallout Shelter Previews
Fallout Shelter - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fallout Shelter</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html{ margin:0; height:100%; background:url(https://i.imgur.com/rkGkRYu.jpg) no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; box-shadow:inset 0 0 10em black; animation: shift 100s infinite alternate; -webkit-filter:contrast(150%) brightness(0%); transform: translateZ(0); overflow:hidden;
}
body{ margin:0; height:100%; background:rgba(0,0,0,.6); animation: wallBurn 120s;
}
.smoke{ position:fixed; opacity:0; margin:0; width:100%; height:100%; opactiy:0; background:url(https://i.imgur.com/s3lHB15.png) no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}
.l1{ z-index:4; animation:smoke 60s infinite alternate; -moz-transform: scale(-1); -o-transform: scale(-1); -webkit-transform: scale(-1); transform: scale(-1); filter: FlipH; -ms-filter: "FlipH"; -webkit-filter:contrast(50%) saturate(10%) sepia(100%) hue-rotate(60deg);
}
.l2{ z-index:5; -webkit-filter:contrast(50%) saturate(20%) sepia(50%) hue-rotate(60deg); animation:smoke 40s infinite alternate;
}
.l3{ z-index:6; animation:smoke 30s infinite alternate; -webkit-filter:contrast(120%) saturate(50%) sepia(20%) hue-rotate(600deg);
}
.lense{ position:fixed; margin:0; width:100%; height:100%; opacity:0; background:url(https://i.imgur.com/x4dG04I.png) no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; -moz-transform: scale(-1); -o-transform: scale(-1); -webkit-transform: scale(-1); transform: scale(-1); filter: FlipH; -ms-filter: "FlipH"; background-position: left top; -webkit-filter:contrast(200%) saturate(10%) sepia(10%) hue-rotate(20deg) blur(2em); z-index:3; animation:lense 30s infinite alternate;}
.texture{ position:fixed; margin:0; width:100%; height:100%; background:url(https://i.imgur.com/rkGkRYu.jpg) no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; -moz-transform: scale(-1); -o-transform: scale(-1); -webkit-transform: scale(-1); transform: scale(-1); filter: FlipH; -ms-filter: "FlipH"; opacity:.2; z-index:2; animation: burn 100s;
}
.sign{ margin:0 auto; position:relative; top:3em; width:25em; box-shadow:-.25em .5em 5em rgba(0,0,0,.65); transform:rotate(2deg);
}
.upper{ background:#f7d621; padding:1.5em;
}
.circle{ margin:0 auto; background:#191a1f; width:20em; height:20em; border-radius:12em; padding:1em;
}
.tri{ width: 0; height: 0; border-left: 5em solid transparent; border-right: 5em solid transparent; border-top: 8.5em solid #f7d621; position:relative; top:1.25em;
}
.tri:nth-child(1){ margin:0 auto;
}
.tri:nth-child(2){ float:right;
}
.lower{ background:#191a1f; text-align:center; color:#f7d621;
}
.lower h1{ font-family: 'Anton', sans-serif; font-size:3.8em; line-height:1.25em; margin-bottom:1em;
}
.lower h2{ font-family:sans-serif; font-size:6px; line-height:5em;
}
@keyframes wallBurn{ 0%{background:rgba(193,191,178,1);} 20%{background:rgba(193,191,178,.15);} 30%{background:rgba(46,52,24,.3);} 50%{background:rgba(0,0,0,.6);}
}
@keyframes burn{ 0%{opacity:0;} 20%{opacity:.1;} 100%{ -webkit-filter:contrast(110%) sepia(100%);opacity:.2;}
}
@-webkit-keyframes shift { 0% { -webkit-filter:contrast(150%) brightness(0%);transform:scale(1);} 1%{ -webkit-filter:contrast(250%) brightness(10%)} 5%{ -webkit-filter:contrast(120%) brightness(100%);} 20%{ -webkit-filter:contrast(300%) brightness(100%);} 25%{ -webkit-filter:contrast(200%) brightness(50%);} 45%{ -webkit-filter:contrast(120%) brightness(70%);transform:scale(1.09);} 51%{ -webkit-filter:contrast(160%) brightness(3%));} 61%{ -webkit-filter:contrast(150%) brightness(30%);} 71%{ -webkit-filter:contrast(160%) brightness(110%);} 100% { -webkit-filter:contrast(200%) brightness(90%);transform:scale(1);}
}
@keyframes smoke{ 0%{ opacity:0; background-size:300%; transform:skew(0deg) scale(1); -webkit-filter:contrast(100%) saturate(90%) sepia(0%) blur(.5em); } 50%{ opacity:.5; background-size:200%; transform:skew(10deg) scale(1.1); -webkit-filter:contrast(200%) saturate(200%) brightness(75%) sepia(10%) blur(.5em); } 100%{ opacity:0; transform:skew(0deg) scale(1); -webkit-filter:contrast(100%) saturate(90%) sepia(00%)blur(.25em); background-size:300%; background-position: bottom; }
}
@keyframes lense{ 0%{ opacity:.75; background-size:300%; -webkit-filter:contrast(100%) saturate(10%) sepia(10%) hue-rotate(20deg) blur(2em); background-position: bottom; } 50%{ opacity:.25; background-size:100%; -webkit-filter:contrast(150%) saturate(100%) sepia(100%) hue-rotate(60deg) blur(2em); background-position: left; } 100%{ opacity:.75; background-size:300%; -webkit-filter:contrast(100%) saturate(100%) sepia(60%) hue-rotate(50deg) ; background-position: top; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="smoke l1"></div>
<div class="smoke l2"></div>
<div class="smoke l3"></div>
<div class="lense"></div>
<div class="texture"></div>
<div class="sign"> <div class="upper"> <div class="circle"> <div class="tri"></div> <div class="tri"></div> <div class="tri"></div> </div> </div> <div class="lower"> <h1>FALLOUT SHELTER</h1> <h2>DOD FS NO.2 (NOT TO BE REPRODUCED OR USED WITHOUT DEPARTMENT OF DEFENSE PERMISSION)</h2> </div>
</div>
<iframe width="0" height="0" src="//www.youtube.com/embed/Hl5xbFXrFU4?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
<link href='https://fonts.googleapis.com/css?family=Anton' rel='stylesheet' type='text/css'>
</body>
</html>
Fallout Shelter - Script Codes CSS Codes
html{ margin:0; height:100%; background:url(https://i.imgur.com/rkGkRYu.jpg) no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; box-shadow:inset 0 0 10em black; animation: shift 100s infinite alternate; -webkit-filter:contrast(150%) brightness(0%); transform: translateZ(0); overflow:hidden;
}
body{ margin:0; height:100%; background:rgba(0,0,0,.6); animation: wallBurn 120s;
}
.smoke{ position:fixed; opacity:0; margin:0; width:100%; height:100%; opactiy:0; background:url(https://i.imgur.com/s3lHB15.png) no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}
.l1{ z-index:4; animation:smoke 60s infinite alternate; -moz-transform: scale(-1); -o-transform: scale(-1); -webkit-transform: scale(-1); transform: scale(-1); filter: FlipH; -ms-filter: "FlipH"; -webkit-filter:contrast(50%) saturate(10%) sepia(100%) hue-rotate(60deg);
}
.l2{ z-index:5; -webkit-filter:contrast(50%) saturate(20%) sepia(50%) hue-rotate(60deg); animation:smoke 40s infinite alternate;
}
.l3{ z-index:6; animation:smoke 30s infinite alternate; -webkit-filter:contrast(120%) saturate(50%) sepia(20%) hue-rotate(600deg);
}
.lense{ position:fixed; margin:0; width:100%; height:100%; opacity:0; background:url(https://i.imgur.com/x4dG04I.png) no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; -moz-transform: scale(-1); -o-transform: scale(-1); -webkit-transform: scale(-1); transform: scale(-1); filter: FlipH; -ms-filter: "FlipH"; background-position: left top; -webkit-filter:contrast(200%) saturate(10%) sepia(10%) hue-rotate(20deg) blur(2em); z-index:3; animation:lense 30s infinite alternate;}
.texture{ position:fixed; margin:0; width:100%; height:100%; background:url(https://i.imgur.com/rkGkRYu.jpg) no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; -moz-transform: scale(-1); -o-transform: scale(-1); -webkit-transform: scale(-1); transform: scale(-1); filter: FlipH; -ms-filter: "FlipH"; opacity:.2; z-index:2; animation: burn 100s;
}
.sign{ margin:0 auto; position:relative; top:3em; width:25em; box-shadow:-.25em .5em 5em rgba(0,0,0,.65); transform:rotate(2deg);
}
.upper{ background:#f7d621; padding:1.5em;
}
.circle{ margin:0 auto; background:#191a1f; width:20em; height:20em; border-radius:12em; padding:1em;
}
.tri{ width: 0; height: 0; border-left: 5em solid transparent; border-right: 5em solid transparent; border-top: 8.5em solid #f7d621; position:relative; top:1.25em;
}
.tri:nth-child(1){ margin:0 auto;
}
.tri:nth-child(2){ float:right;
}
.lower{ background:#191a1f; text-align:center; color:#f7d621;
}
.lower h1{ font-family: 'Anton', sans-serif; font-size:3.8em; line-height:1.25em; margin-bottom:1em;
}
.lower h2{ font-family:sans-serif; font-size:6px; line-height:5em;
}
@keyframes wallBurn{ 0%{background:rgba(193,191,178,1);} 20%{background:rgba(193,191,178,.15);} 30%{background:rgba(46,52,24,.3);} 50%{background:rgba(0,0,0,.6);}
}
@keyframes burn{ 0%{opacity:0;} 20%{opacity:.1;} 100%{ -webkit-filter:contrast(110%) sepia(100%);opacity:.2;}
}
@-webkit-keyframes shift { 0% { -webkit-filter:contrast(150%) brightness(0%);transform:scale(1);} 1%{ -webkit-filter:contrast(250%) brightness(10%)} 5%{ -webkit-filter:contrast(120%) brightness(100%);} 20%{ -webkit-filter:contrast(300%) brightness(100%);} 25%{ -webkit-filter:contrast(200%) brightness(50%);} 45%{ -webkit-filter:contrast(120%) brightness(70%);transform:scale(1.09);} 51%{ -webkit-filter:contrast(160%) brightness(3%));} 61%{ -webkit-filter:contrast(150%) brightness(30%);} 71%{ -webkit-filter:contrast(160%) brightness(110%);} 100% { -webkit-filter:contrast(200%) brightness(90%);transform:scale(1);}
}
@keyframes smoke{ 0%{ opacity:0; background-size:300%; transform:skew(0deg) scale(1); -webkit-filter:contrast(100%) saturate(90%) sepia(0%) blur(.5em); } 50%{ opacity:.5; background-size:200%; transform:skew(10deg) scale(1.1); -webkit-filter:contrast(200%) saturate(200%) brightness(75%) sepia(10%) blur(.5em); } 100%{ opacity:0; transform:skew(0deg) scale(1); -webkit-filter:contrast(100%) saturate(90%) sepia(00%)blur(.25em); background-size:300%; background-position: bottom; }
}
@keyframes lense{ 0%{ opacity:.75; background-size:300%; -webkit-filter:contrast(100%) saturate(10%) sepia(10%) hue-rotate(20deg) blur(2em); background-position: bottom; } 50%{ opacity:.25; background-size:100%; -webkit-filter:contrast(150%) saturate(100%) sepia(100%) hue-rotate(60deg) blur(2em); background-position: left; } 100%{ opacity:.75; background-size:300%; -webkit-filter:contrast(100%) saturate(100%) sepia(60%) hue-rotate(50deg) ; background-position: top; }
}
| Developer | Jordan |
| Username | Jordan |
| Uploaded | December 03, 2022 |
| Rating | 3 |
| Size | 4,320 Kb |
| Views | 16,192 |
Do you need developer help for Fallout Shelter?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Jordan (Jordan) Script Codes
| Name | Size |
| Warp V2 | 9,549 Kb |
| Wut | 7,627 Kb |
| V.35 The Monolith Update - Hero Release Notes | 12,045 Kb |
| Webkit Filter Neon Buttons | 2,651 Kb |
| CSS Isometric | 2,314 Kb |
| Hover thing | 2,514 Kb |
| Warp | 10,400 Kb |
| Div Screen Saver | 8,930 Kb |
| LOADING | 2,095 Kb |
| Liquid | 6,785 Kb |
Create amazing marketing copy with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Stylize Stories | Jvhti | 2,465 Kb |
| Slider | Mohammed-fawzy | 2,634 Kb |
| Flexbox playground | Enxaneta | 5,418 Kb |
| SVG Text Masking | JMChristensen | 2,141 Kb |
| Nice responsive team page | Infomiho | 3,139 Kb |
| BabyStore | Pablo-Ai | 3,807 Kb |
| Learning FlexBox | Alex_rodrigues | 2,821 Kb |
| Awesome Full Page Menu Nav | Ey_intuitive | 4,194 Kb |
| Css3 slide | Nakome | 3,190 Kb |
| Automatic scroll | Skeurentjes | 4,042 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!