An olde style radio (well, olde-ish).
A Pen by Adam Henley on CodePen.
An olde style radio (well, olde-ish).
A Pen by Adam Henley on CodePen.
#container | |
#radio_shadow | |
#radio_handle | |
#radio | |
#aerial | |
#tuning | |
#tuning_gauge | |
%div | |
%p FM | |
%ul#fm_gauge | |
%li{:data => {:num=>88}} | |
%li | |
%li | |
%li | |
%li | |
%li | |
%li | |
%li | |
%li{:data => {:num=>92}} | |
%li | |
%li | |
%li | |
%li | |
%li | |
%li | |
%li | |
%li{:data => {:num=>96}} | |
%li | |
%li | |
%li | |
%li | |
%li | |
%li | |
%li | |
%li{:data => {:num=>100}} | |
%li | |
%li | |
%li#marker | |
%li | |
%li | |
%li | |
%li | |
%li{:data => {:num=>104}} | |
%li | |
%li | |
%li | |
%li | |
%li | |
%li | |
%li | |
%li{:data => {:num=>108}} | |
%li | |
%li | |
%li | |
%li | |
%li | |
%li | |
%li | |
%div | |
%p AM | |
%ul#am_gauge | |
%li{:data => {:num=>54}} | |
%li | |
%li{:data => {:num=>60}} | |
%li | |
%li{:data => {:num=>70}} | |
%li | |
%li{:data => {:num=>80}} | |
%li{:data => {:num=>100}} | |
%li{:data => {:num=>120}} | |
%li{:data => {:num=>140}} | |
%li{:data => {:num=>160}} | |
#tuning_knob | |
#radio_body | |
#speaker_grille | |
#other_dials | |
#fm_am_selector_labels AFC AM FM | |
#fm_am_selector | |
#volume_knob_label Volume | |
#volume_knob |
body{ background: rgb(134,106,72); | |
font-family: "Arial", sans-serif;} | |
#container{ height:100%; width:100%; position:absolute; top:0; left:0; .bg_gradient(); } | |
:before,:after {content:'';} | |
@radio_width:500px; | |
@radio_height:300px; | |
@tuning_silver_border:4px; | |
@tuning_black_border:4px; | |
@tuning_face_height:110px; | |
@total_tuning_height: ((@tuning_silver_border*2) + (@tuning_black_border*2) + @tuning_face_height); | |
@radio_body_height: @radio_height - @total_tuning_height ; | |
@radio_body_color:rgb(68, 68, 68); | |
#radio{ | |
width:@radio_width; | |
height: @radio_height; | |
background-color:rgb(30,30,30,0.8); | |
border:6px solid black; | |
position:absolute; | |
top:0;right:0;bottom:0;left:0; | |
margin:auto; | |
//overflow:hidden; | |
z-index:100; | |
} | |
#radio_shadow{ | |
display:inline-block; position:absolute; | |
background-color:rgba(30,30,30,0.8); | |
.box-shadow(0 0 18px 8px rgba(30,30,30,0.8)); | |
width:@radio_width+(@radio_width*0.04); | |
height:50px; | |
top:290px; | |
right:0;bottom:0; | |
left:@radio_width*0.04; | |
margin:auto; | |
z-index:50; | |
.transform(perspective(600px) rotateX(50deg)); | |
} | |
#radio_handle{ | |
width:@radio_width/1.5; | |
height:@radio_width/1.5; | |
.border-radius(80% 10% 70% 20%); | |
background-color:transparent; | |
border:8px solid black; | |
.box-shadow(-3px 3px rgb(80,80,80), 3px -3px rgb(60,60,60)); | |
position:absolute; | |
top:-160px;right:0;bottom:0;left:0; | |
margin:auto; | |
.transform(rotate(45deg)); | |
} | |
#tuning{ | |
display:inline-block; position:absolute; | |
width:(@radio_width - ((@tuning_black_border*2) + (@tuning_silver_border*2) ) ); | |
height: @tuning_face_height; | |
background-color: rgba(200,200,200,0.8); | |
border:4px solid rgb(45,45,45); | |
box-shadow:0 0 0 @tuning_silver_border rgba(200,200,200,0.8); | |
margin-left:@tuning_silver_border;margin-top:@tuning_silver_border; | |
} | |
#tuning_knob{ | |
display:inline-block; | |
width: 64px; height:64px; | |
border-radius:50%; | |
background-color: green; | |
position:absolute; | |
right:20px; bottom:25px; | |
border:2px solid black; | |
&:before{ | |
font-family: "Arial", sans-serif; | |
content:"Tuning"; | |
text-align:right; | |
display:inline; | |
position:absolute; | |
left:-75%; | |
font-size:10px; | |
width:40px; | |
line-height:64px; | |
height: 64px; | |
//border:1px solid black; | |
} | |
} | |
#tuning_gauge{ | |
display:inline-block; | |
position:absolute; | |
background-color:black; | |
border-radius:10px; | |
width:285px; | |
height:70px; | |
left:25px; | |
top: 16px; | |
font-size:14px; | |
color:rgba(255,255,255,0.7); | |
div { | |
position:relative; | |
height:50%; | |
width:96%; left:2%; | |
p{ | |
float:left; | |
display:inline-block; | |
margin:0; padding:0; | |
margin-top:7px; | |
} | |
ul{ | |
position:relative; | |
float:left; | |
list-style-type: none; | |
margin:0; | |
margin-top:7px; margin-left:20px; | |
padding:0; | |
text-align: justify; | |
li { | |
float:left; | |
display:inline; | |
} | |
} | |
} | |
div:first-of-type{ | |
border-bottom:2px solid rgba(255,255,255,0.7); | |
} | |
} | |
ul#fm_gauge > li { | |
width:2px; | |
height:8px; | |
background-color:white; | |
margin-right:2px; | |
margin-top:22px; | |
&:after { | |
content: attr(data-num); | |
position:relative; | |
top:-22px; | |
} | |
} | |
ul#am_gauge > li { | |
width:2px; | |
height:8px; | |
background-color: rgba(255,255,255,0.7); | |
margin-right:17px; | |
margin-top:-7px; | |
&:after { | |
content: attr(data-num); | |
position:relative; | |
font-size:0.82em; | |
top:9px; left:-2px; | |
} | |
} | |
#radio_body{ | |
position:absolute; display:inline-block; | |
top: @total_tuning_height; left:0; | |
background-color:@radio_body_color; | |
width:100%; | |
height:@radio_body_height; | |
border-top: 3px solid rgb(20,20,20); | |
} | |
#other_dials{ | |
position:absolute; | |
width:130px; | |
height:100%; | |
background-color:@radio_body_color; | |
border-left:4px solid green; | |
right:0; | |
} | |
@knob_diameter:36px; | |
#fm_am_selector,#volume_knob { | |
position:absolute; display:block; | |
background-color: yellow; | |
width: @knob_diameter; height:@knob_diameter; | |
.border-radius(50%); | |
right:30px; | |
top:20px; | |
.rotate(-120deg); | |
&:after{ | |
position:absolute; | |
width:2px; | |
height:@knob_diameter/2; | |
background-color: blue; | |
top:0px; | |
left:(@knob_diameter/2) - 1px; | |
} | |
} | |
#volume_knob{ | |
top:100px; | |
.rotate(30deg); | |
} | |
#fm_am_selector_labels, #volume_knob_label { | |
text-align:right; | |
display:inline; | |
position:absolute; | |
right:55%; top:23px; | |
font-size:10px; | |
width:21px; | |
line-height:9px; | |
height: @knob_diameter; | |
} | |
#volume_knob_label { | |
width:45px; | |
top: 113px; | |
} | |
.bg_gradient(){ | |
background: rgb(134,106,72); /* Old browsers */ | |
background: -moz-linear-gradient(top, rgba(134,106,72,1) 0%, rgba(187,157,127,1) 60%, rgba(245,244,239,1) 61%, rgba(245,244,239,1) 100%); /* FF3.6+ */ | |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(134,106,72,1)), color-stop(60%,rgba(187,157,127,1)), color-stop(61%,rgba(245,244,239,1)), color-stop(100%,rgba(245,244,239,1))); /* Chrome,Safari4+ */ | |
background: -webkit-linear-gradient(top, rgba(134,106,72,1) 0%,rgba(187,157,127,1) 60%,rgba(245,244,239,1) 61%,rgba(245,244,239,1) 100%); /* Chrome10+,Safari5.1+ */ | |
background: -o-linear-gradient(top, rgba(134,106,72,1) 0%,rgba(187,157,127,1) 60%,rgba(245,244,239,1) 61%,rgba(245,244,239,1) 100%); /* Opera 11.10+ */ | |
background: -ms-linear-gradient(top, rgba(134,106,72,1) 0%,rgba(187,157,127,1) 60%,rgba(245,244,239,1) 61%,rgba(245,244,239,1) 100%); /* IE10+ */ | |
background: linear-gradient(to bottom, rgba(134,106,72,1) 0%,rgba(187,157,127,1) 60%,rgba(245,244,239,1) 61%,rgba(245,244,239,1) 100%); /* W3C */ | |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#866a48', endColorstr='#f5f4ef',GradientType=0 ); /* IE6-9 */ | |
} |