Real feels of old 7 segments LCD displays. Counters displays, dashboards, automation and similars. Referenced by old 80's and 90's devices . Pure CSS.
Add LCD font CDN reference in your HEAD block:
<link href="https://fonts.cdnfonts.com/css/digital-7-mono" rel="stylesheet">
Just add CSS code to your base file.
.led-blue {
width: 180px;
height: 50px;
background-color: rgb(0,0,128);
text-align:center;
line-height: 50px;
font-size:32pt;
border-top: 3px solid #000000cc;
border-left: 3px solid #000000cc;
border-bottom: 1px solid #cfcfcf33;
border-right: 1px solid #cfcfcf33;
border-radius: 10px;
box-shadow: 0px 0px 50px #000000ee inset;
text-shadow: 0px 0px 20px #00ffffcc;
margin: 5px;
color: #00ffffcc;
}
.led-green {
width: 180px;
height: 50px;
background-color: rgb(0,64,0);
text-align:center;
line-height: 50px;
font-size:32pt;
border-top: 3px solid #000000ee;
border-left: 3px solid #000000ee;
border-bottom: 1px solid #cfcfcf33;
border-right: 1px solid #cfcfcf33;
border-radius: 10px;
box-shadow: 0px 0px 50px #000000ee inset;
text-shadow: 0px 0px 20px #ffff00cc;
margin: 5px;
color: #00ff77cc;
}
.led-red {
width: 180px;
height: 50px;
background-color: rgb(128,0,0);
text-align:center;
line-height: 50px;
font-size:32pt;
border-top: 3px solid #000000ee;
border-left: 3px solid #000000ee;
border-bottom: 1px solid #cfcfcf33;
border-right: 1px solid #cfcfcf33;
border-radius: 10px;
box-shadow: 0px 0px 50px #000000ee inset;
text-shadow: 0px 0px 20px #ffff00cc;
margin: 5px;
color: #ff9999cc;
}
.led-old {
width: 180px;
height: 50px;
background-color: rgb(127,138,70);
text-align:center;
line-height: 50px;
font-size: 40px;
border-top: 3px solid #000000ce;
border-left: 3px solid #000000ce;
border-bottom: 1px solid #cfcfcf33;
border-right: 1px solid #cfcfcf33;
border-radius: 10px;
box-shadow: 0px 0px 50px #000000ee inset;
text-shadow: 0px 0px 20px #ffff0022;
margin: 5px;
color: #000000aa;
}
.led-off {
width: 180px;
height: 50px;
background-color: rgb(20,20,20);
text-align:center;
line-height: 50px;
font-size: 40px;
border-top: 3px solid #000000ce;
border-left: 3px solid #000000ce;
border-bottom: 1px solid #cfcfcf33;
border-right: 1px solid #cfcfcf33;
border-radius: 10px;
box-shadow: 0px 0px 50px #000000ee inset;
text-shadow: 0px 0px 20px #55555544;
margin: 5px;
color: #000000aa;
overflow: hidden;
}HTML5 examples:
<div id="clock" class="led-blue">88:88:888</div>
<div id="humidity" class="led-green">78 %</div>
<div id="stat" class="led-red">DANGER</div>
<div id="rds" class="led-old">88888888</div>
<div id="ununsed" class="led-off">OFF</div>
Result
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent