Tiger Bird Webdesign: Retro Telly With CSS

Retro Telly With CSS

This TV includes 6 div elements which display the TV outer box ("telly_frame"), the screen ("screen"), two antennas ("antenna_left", "antenna_right") and the two buttons on the left ("upper_button", "downside_button"). All div elements are put inside the outer box to position the rest of the elements absolute to this element.

The screen, the buttons are relative to the box which is described with the property position:absolute. The metallic effect of the buttons is created with the CSS background:linear-gradient property and don't forget to put the prefixes -o-, -moz- and -webkit- to show it in all browsers.

CSS & HTML CODE


<!Doctype html>

<html>

<head>
<style>
#telly_frame
{position:relative;
top:100px;
left:100px;
width:200px;
height:145px;
background-color:#01DF01;
border-style:solid;
border-color:#21610B;
border-width:3px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
float:right;

}


#antenna_left
{position:absolute;
left:5px;
top:-77px;
width:5px;
height:75px;
-ms-transform-origin:bottom left;
-webkit-transform-origin:bottom left;
transform-origin:bottom left;
-ms-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
background-color:#BDBDBD;
background:-o-linear-gradient(gray,#585858);
background:-moz-linear-gradient(gray,#585858);
background:-webkit-linear-gradient(gray,#585858);
background:linear-gradient(gray,#585858);
}


#antenna_right
{position:absolute;
left:10px;
top:-77px;
width:5px;
height:75px;
-ms-transform-origin:bottom right;
-webkit-transform-origin:bottom right;
transform-origin:bottom right;
-ms-transform:rotate(315deg);
-webkit-transform:rotate(315deg);
transform:rotate(315deg);
background-color:#BDBDBD;
background:-o-linear-gradient(gray,#585858);
background:-moz-linear-gradient(gray,#585858);
background:-webkit-linear-gradient(gray,#585858);
background:linear-gradient(gray,#585858);
}

#screen
{position:absolute;
top:20px;
left:20px;
height:100px;
width:125px;
background-color:#848484;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border-width:3px;
border-style:solid;
border-color:#585858;
float:right;

}



#upper_button
{position:absolute;
top:20px;
left:160px;
width:30px;
height:30px;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
background-color:gray;
background:-o-linear-gradient(45deg,gray,white,gray);
background:-webkit-linear-gradient(45deg,gray,white,gray);
background:-moz-linear-gradient(45deg,gray,white,gray);
background:linear-gradient(45deg,gray,white,gray);
float:right;

}

#downside_button
{position:absolute;
top:60px;
width:30px;
height:30px;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
background-color:gray;
background:-o-linear-gradient(135deg,gray,white,gray);
background:-webkit-linear-gradient(135deg,gray,white,gray);
background:-moz-linear-gradient(135deg,gray,white,gray);
background:linear-gradient(135deg,gray,white,gray);
float:right;

}
</style>
<title>Retro Telly</title>

</head>

<body>

<div id="telly_frame">
 <div id="screen">
 </div>
<div id="antenna_left">
 </div>
<div id="antenna_right">
 </div>
<div id="upper_button">
 <div id="downside_button">
 </div>
</div>
</body>
</html>

Tiger Bird Webdesign

Wednesday, 19 November 2014

Retro Telly With CSS

CSS & HTML CODE

No comments:

Post a Comment