<!DOCTYPE html <html> <head> <title></title> </head> <body> <table> <tr> <td>Email</td> <td> <input type="email" value placeholder="ejemplo@dominio.com"> </td> </tr> </table> </body> </html>
Veamos la implementacion de este ejemplo:
<!DOCTYPE html <html> <head> <title></title> </head> <body> <table> <tr> <td>Email</td> <td> <input type="email" value placeholder="ejemplo@dominio.com"> </td> </tr> </table> </body> </html>
<!DOCTYPE html <html> <head> <title></title> </head> <body> <table> <tr> <td>Fecha</td> <td> <input type="date"> </td> </tr> </table> </body> </html>
<!DOCTYPE html <html> <head> <title></title> <style type="text/css"> [required]{ box-shadow: 0 0 10px 1px #818181; } </style> </head> <body> <table> <tr> <td>Nombre</td> <td> <input type="text" required> </td> <td>Apellido</td> <td> <input type="text" required> </td> </tr> </table> </body> </html>
<!DOCTYPE html <html> <head> <title></title> </head> <body> <table> <tr> <td>Encuestas</td> <td> <input type="range" min="0" max="10" value="5" step="5"> </td> </tr> </table> </body> </html>
<html> <audio> </audio> </html>
<html> <audio> parce..tu navegador no soporta audio HTML5 </audio> </html>
<html> <audio src="carpeta_musica/audio.mp3" controls="controls"> parce..tu navegador no soporta audio HTML5 </audio> </html>
<html> <video> </video> </html>
<html> <video> parce..tu navegador no soporta video HTML5 </video> </html>
<html> <video src="carpeta_video/video.mp4" controls="controls"> parce..tu navegador no soporta video HTML5 </video> </html>
<html> <video src="carpeta_video/video.mp4" controls="controls" width=300 height=150> parce..tu navegador no soporta video HTML5 </video> </html>
.estilo_div{ background:#ff6600; border-radius:15px; height:100px; width:250; }Vista previa:
.estilo_div{ background:#ff6600; border:solid 10px #ccc; border-radius:15px; height:100px; width:250; }
.estilo_div{ background:#ff6600; border:solid 10px #ccc; border-radius:15px; box-shadow: 8px 8px 10px 0px #818181; height:100px; width:250; }
.estilo_div{ background:#ff6600; border:solid 10px #ccc; border-radius:15px; box-shadow: 0px 20px 15px -15px #818181; height:100px; width:250; }Vista previa:
.estilo_div{ background:#ff6600; border:solid 10px #ccc; border-radius:15px; box-shadow: inset 0px 0px 20px #818181; height:100px; width:250; }Vista previa:
.estilo_div{ background:#ff6600; border:solid 10px #ccc; border-radius:15px; box-shadow: inset 10px 10px RGBA(0,0,0,0.5); height:100px; width:250; }Vista previa:
.estilo_div{ background:#ff6600; border:solid 10px #ccc; border-radius:15px; box-shadow: -8px -8px 10px 0px red,8px -8px 10px yellow, 8px 8px 10px green, -8px 8px 10px blue; height:100px; width:250; }Vista previa:
.estilo_div{ background:#ff6600; border:solid 10px #ccc; border-radius:15px; -webkit-box-shadow: -8px -8px 10px 0px red,8px -8px 10px yellow, 8px 8px 10px green, -8px 8px 10px blue; height:100px; width:250; }
.estilo_div{ background:#ff6600; border:solid 10px #ccc; border-radius:15px; -moz-box-shadow: -8px -8px 10px 0px red,8px -8px 10px yellow, 8px 8px 10px green, -8px 8px 10px blue; height:100px; width:250; }Para Opera debemos anteponer la propiedad [ -o- ]
.estilo_div{ background:#ff6600; border:solid 10px #ccc; border-radius:15px; -moz-box-shadow: -8px -8px 10px 0px red,8px -8px 10px yellow, 8px 8px 10px green, -8px 8px 10px blue; height:100px; width:250; }
<html> <head> </head> <body> <div class="estilo_div"></div> </body> </html>
.estilo_div{ background:#ff6600; height:100px; width:250; }Que nos arroja como resultado:
.estilo_div{ background:#ff6600; border-radius:15px; height:100px; width:250; }
.estilo_div{ background:#ff6600; border-radius:15px 20px 30px 5px; height:100px; width:250; }