A Pen by Adam Henley.

AM-FM-Radio.markdown

AM/FM Radio

An olde style radio (well, olde-ish).

A Pen by Adam Henley on CodePen.

License.

index.haml

#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

style.less

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 */
}