Gaming UI

Developer
Event Horizon
Size
3,024 Kb
Views
48,576
  1. Gaming UI Previews
  2. Gaming UI HTML Codes
  3. Gaming UI CSS Codes

How do I make an gaming ui?

Inspired by Old Cities Skylines UI: https://i.imgur.com/3g80fay.png (not responsive/no mobile design yet). What is a gaming ui? How do you make a gaming ui? This script and codes were developed by Event Horizon on 30 July 2022, Saturday.

Gaming UI Previews
IQ Test

Gaming UI - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Gaming UI</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="nav"> <div class="topbar"> <div class="padbigbut"></div><a class="cbut" href="#"><i class="fa fa-gear"></i></a><a class="cbut" href="#"><i class="fa fa-flag"></i></a><a class="cbut" href="#"><i class="fa fa-plus"></i></a> </div> <div class="midbar"><a class="cbut large" href="#"><i class="fa fa-globe"></i></a><a class="cbut" href="#"><i class="fa fa-question"></i></a></div> <div class="botbar"> <div class="contbar center"> <a class="contbarb pullleft" href="#"><i class="fa fa-pause"></i></a>01/01/2015<a class="contbarb pullright" href="#"><i class="fa fa-fast-forward"></i></a></div> <div class="happy"><i class="fa fa-smile-o"></i></div> <div class="contbar center">Name Here</div> <div class="contbar"><i class="fa fa-dollar"></i>250,000,000<span class="pullright">+852</span></div> <div class="contbar pullright"><i class="fa fa-users"></i> 5,647<span class="pullright">+147</span></div> </div>
</div>
</body>
</html>

Gaming UI - Script Codes CSS Codes

*{ box-sizing:border-box;
}
html,body{ margin-bottom:32px;
}
.nav{ position:fixed; bottom:0px; left:0px; width:100%;
}
.topbar{ height:18px; background-color:#111; border-top:4px solid #069; box-shadow:0px 4px 8px -4px #000 inset; padding:4px; /*GRADIENT*/ background: rgb(0,66,89); background: -webkit-linear-gradient(top, rgba(0,66,89,1) 0%,rgba(0,47,63,1) 40%,rgba(0,0,0,1) 100%); background: linear-gradient(to bottom, rgba(0,66,89,1) 0%,rgba(0,47,63,1) 40%,rgba(0,0,0,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004259', endColorstr='#000000',GradientType=0 );
}
.midbar{ height:48px; background-color:#111; box-shadow:0px 0px 32px 1px #999 inset; padding:4px; /*GRADIENT*/ background: rgb(0,149,191); background: -webkit-linear-gradient(left, rgba(0,149,191,0.5) 0%,rgba(0,0,0,0.5) 45%,rgba(0,0,0,0.5) 50%,rgba(0,0,0,0.5) 55%,rgba(0,149,191,0.5) 100%), -webkit-linear-gradient(top, rgba(0,149,191,1) 0%,rgba(0,167,214,1) 50%,rgba(0,149,191,1) 52%,rgba(0,99,127,1) 100%); background: linear-gradient(to right, rgba(0,149,191,0.5) 0%,rgba(0,0,0,0.5) 45%,rgba(0,0,0,0.5) 50%,rgba(0,0,0,0.5) 55%,rgba(0,149,191,0.5) 100%), linear-gradient(to bottom, rgba(0,149,191,1) 0%,rgba(0,167,214,1) 50%,rgba(0,149,191,1) 52%,rgba(0,99,127,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0095bf', endColorstr='#00637f',GradientType=0 );
}
.botbar{ height:40px; background-color:#034; border-top:4px solid #069; box-shadow:0px 2px 8px -4px #999 inset, 0px -8px 12px -6px #067 inset; padding:4px;
}
.topbar .cbut{ top:-18px;
}
.midbar .cbut{ margin-top:8px;
}
.midbar .cbut.large{ width:64px; height:64px; border-radius:64px; line-height:58px; font-size:3em; top:-40px;
}
.midbar .cbut.large:hover{ box-shadow:0px 0px 32px 2px #069 inset;
}
.cbut{ position:relative; display:inline-block; width:24px; height:24px; background-color:#ccc; border-radius:24px; padding:4px; text-decoration:none; color:#57c; margin:0px 2px; text-align:center; vertical-align:top; /*GRADIENT*/ background: rgb(220,225,229);
background: -webkit-linear-gradient(top, rgba(220,225,229,1) 0%,rgba(203,235,255,1) 47%,rgba(191,230,255,1) 72%,rgba(161,219,255,1) 100%);
background: linear-gradient(to bottom, rgba(220,225,229,1) 0%,rgba(203,235,255,1) 47%,rgba(191,230,255,1) 72%,rgba(161,219,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dce1e5', endColorstr='#a1dbff',GradientType=0 );
}
.cbut:hover{ box-shadow:0px 0px 8px 1px #069 inset;
}
.padbigbut{ display:inline-block; margin-left:64px;
}
.contbar{ display:inline-block; width:192px; height:24px; line-height:16px; padding:4px; margin-top:2px; background-color:#bbb; border-radius:8px; margin:0px 12px; color:#067; font-family:Verdana,sans-serif; font-size:0.9em; vertical-align:top;
}
.contbarb{ display:inline-block; width:32px; height:24px; border-radius:8px; background-color:#eee; margin:-4px -5px; padding:4px; color:#067; text-decoration:none;
}
.contbarb:hover{ box-shadow:0px 0px 16px 1px #079 inset;
}
.pullleft{ float:left;
}
.pullright{ float:right;
}
.happy{ display:inline-block; width:24px; height:24px; background-color:#9DD544; border-radius:24px; text-align:center; line-height:26px; font-size:1.3em; vertical-align:top;
}
.center{ text-align:center;
}
Gaming UI - Script Codes
Gaming UI - Script Codes
Home Page Home
Developer Event Horizon
Username Event_Horizon
Uploaded July 30, 2022
Rating 3
Size 3,024 Kb
Views 48,576
Do you need developer help for Gaming UI?

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!

Event Horizon (Event_Horizon) Script Codes
Name
Window Designing
Sidebar Main Menu
Textbox Memory
KSP altimeter
Music Player
Tabs
List Sections
Content Panels
Spinning Loader
Slider Colorpicker
Create amazing blog posts 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!