mando-dvd-css

Aunque no sirva para nada, solo por ver la flexibilidad que puede alcanzar CSS, este mando de DVD creado totalmente en CSS nos mostrará que CSS no tiene límites.

Si deseamos crearlo, añadimos este código CSS a nuestro documento:

<style type="text/css">
* {font-family:'Arial Narrow',Arial,Helvetica,sans-serif;}

#remote {
width:200px;
height:500px;
padding:5px;
border:6px outset #999;
background-color:#ccc;
}

div div {
float:left;
width:50px;
height:50px;
font-size:10px;
text-align:center;
line-height:2;
}

div div div {
width:24px;
height:24px;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
color:#555;
font-weight:bold;
border:2px outset #bbb;
margin-left:10px;
background-color:#f6f6f6;
}

#break {
height:40px;
}

.clear {clear:both;}

#power div, #record div {
color:#fff;
border-color:#b90000;
background-color:#f90000;
}

</style>

El código HTML sería este:

<div id="remote">

<div id="open">OPEN
<br /><div>=</div>
</div>

<div id="display">DISPLAY
<br /><div>&amp;nbsp;</div>
</div>

<div id="setup">SETUP
<br /><div>&amp;nbsp;</div>
</div>

<div id="power">POWER
<br /><div>O</div>
</div>

<div id="channel_7">
<br /><div>7</div>
</div>

<div id="channel_8">ABC
<br /><div>8</div>
</div>

<div id="channel_9">DEF
<br /><div>9</div>
</div>

<div id="channel_up">

<br /><div>^</div>
</div>

<div id="channel_4">GHI
<br /><div>4</div>
</div>

<div id="channel_5">JKL
<br /><div>5</div>

</div>

<div id="channel_6">MNO
<br /><div>6</div>
</div>

<div id="channel_down">CH
<br /><div>v</div>
</div>

<div id="channel_1">PQRS
<br /><div>1</div>
</div>

<div id="channel_2">TUV
<br /><div>2</div>
</div>

<div id="channel_3">WXYZ
<br /><div>3</div>

</div>

<div id="channel_0">
<br /><div>0</div>
</div>

<div class="break">&amp;nbsp;</div>

<div class="clear" id="chapter_previous">

<br /><div>|&amp;lt;&amp;lt;</div>
</div>

<div id="rewind">
<br /><div>&amp;lt;&amp;lt;</div>
</div>

<div id="fast_forward">
<br /><div>&amp;gt;&amp;gt;</div>

</div>

<div id="chapter_next">
<br /><div>&amp;gt;&amp;gt;|</div>
</div>

<div id="navi">NAVI
<br /><div>&amp;nbsp;</div>
</div>

<div id="edit">EDIT
<br /><div>|</div>
</div>

<div id="copy">COPY
<br /><div>oo</div>
</div>

<div id="timeshift">TIMESHIFT
<br /><div>&amp;nbsp;</div>

</div>

<div id="record">RECORD
<br /><div>&amp;nbsp;</div>
</div>

<div id="hdd_dvd">HDD/DVD
<br /><div>&amp;nbsp;</div>
</div>

<div id="videoplus">VIDEOPLUS+
<br /><div>&amp;nbsp;</div>
</div>

<div id="timer">TIMER
<br /><div>&amp;nbsp;</div>
</div>

Podemos ver un ejemplo de su funcionamiento.