No has iniciado sesión
Conectar al sistema | Registrar usuario
Categorías Articulo
 
4 votos
Marco para videos con CSS
 
Hola amigos,

Me llamo David, no se si es aquí donde hay que presentarse pero ya que no conozco otro lado pues lo hago por aquí, tengo 20 años y llevo algo menos de un mes tocando código html y css.

Con lo que he ido aprendiendo he ido echando una mano a mi padre que es programador (es el que me ha enseñado). Tenemos una empresa en común que es una tienda web donde el a llevado a cabo toda la maquetación y la programación de la misma.

Sin mas dilaciones, os traigo una cosa graciosa que he hecho a partir de una convinación de html y css.
Os escribo el código aquí ya que no se como ponerlo para que se vea bonito XD.

Solo tenéis que pegarlo en un documento de texto y a este añadirle al nombre el .html, abrir con vuestro navegador (IE no por favor) y echar unas risas jejeje.

PD:(este codigo va destinado a marcos para videos, cuando encuentre la manera de hacerlo ya os comentare, y si me atasco os preguntare)

Un cordial saludo, ya me contareis ;)


<HTML>
<HEAD>
<STYLE type="text/css">
.galaxy{
width: 2399px;
height: 1239px;
margin: auto auto;
}
.iborde{
width: 2151px;
height: 1107px;
margin: auto auto;
border: 26px ridge #B8B8B8;
border-radius: 139px;
background-color: #000;

}
.iscreen{
width: 1655px;
height: 1007px;
margin: auto auto;
margin-top: 50px;
border: 0px solid #252525;
border-radius: 9px;
webkit-border-radius: 9px;
-moz-border-radius: 9px;
background: url(images/screen.png), no-repeat;
background-color: #252525;

}
.ibutton{
width: 104px;
height: 193px;
margin-left: 1969px;;
margin-top: -608px;
border: 16px ridge grey;
border-radius: 30px;
background-color: #000;
}
.iauricular{
width: 28px;
height: 275px;
margin-left: 58px;
margin-top: 413px;
margin-right: 0px;
border: 3px inset #707070;
border-radius: 162px;
background: url(http://img29.imageshack.us/img29/1914/auricular.jpg), no-repeat;
position: absolute;
}
.icameraout{
width: 62px;
height: 62px;
margin: auto auto;
margin-top: 893;
margin-left: 42.5px;
border: 0px ridge grey;
border-radius: 31px;
background-color: #3C3C3C;
position: absolute;
box-shadow: inset 4px 4px 10px black;

}
.icamerain{
width: 30px;
height: 30px;
margin: 16px;
border: 0px solid transparent;
border-radius: 20px;
background-color: #4D4F53;
box-shadow: inset 3px 3px 12px rgba(0, 0, 0, 0.58);

}
.icameraend{
width: 18px;
height: 18px;
margin-top: 6px;
margin-left: 6px;
border: 0px solid transparent;
border-radius: 9px;
background-color: #284F56;
position: absolute;
}
.botonizq{
width: 40px;
height: 74px;
margin-top: -190px;
margin-left: 1993px;
background: url(http://img838.imageshack.us/img838/8290/botonizq.jpg), no-repeat;
position: absolute;
}
.botonder{
width: 46px;
height: 71px;
margin-top: -454px;
margin-left: 1991px;
background: url(http://img163.imageshack.us/img163/5584/botonder.png), no-repeat;
position: absolute;
}
.marc{
width: 46px;
height: 312px;
margin-left: 131px;
margin-top: 401px;
margin-right: 0px;
background: url(http://img706.imageshack.us/img706/724/samsungn.png), no-repeat;
position: absolute;
}
.sensor1{
width: 30px;
height: 30px;
border: 0px solid;
border-radius: 15px;
margin-left: 16px;
margin-top: -232px;
margin-right: 0px;
background-color: #181818;
position: absolute;
}
.sensor2{
width: 30px;
height: 30px;
border: 0px solid;
border-radius: 15px;
margin-left: 16px;
margin-top: -174px;
margin-right: 0px;
background-color: #181818;
position: absolute;
}
</STYLE>
</HEAD>
<BODY>
<div class="galaxy">
<div class="iborde">
<div class="marc">
</div>
<div class="icameraout">
<div class="icamerain">
<div class="icameraend">
</div>
</div>
<div class="sensor1">
</div>
<div class="sensor2">
</div>
</div>
<div class="iauricular">
</div>
<div class="iscreen">
<iframe width="1655" height="1007" src="http://www.youtube.com/embed/IiWHdSNtbck" frameborder="0" allowfullscreen></iframe>
</div>
<div class="botonizq">
</div>
<div class="ibutton">
<div class="ibuttonicon">
</div>
</div>
<div class="botonder">
</div>
</div>
</div>
</BODY>

</HTML>
 
 
¿? Resolver dudas
Si tienes problemas o dudas con el contenido del artículo no dudes a preguntar en los foros de CSS de Programación Web indicando el artículo al que te refieres.
 
Comentarios
Este artículo no ha sido comentado hasta el momento
 
Redes Sociales
Programación Webon

Compartir en Google Plus