http://bextlan.com/recursos/tutoriales/html5/video05-html5.zip
index.html
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Sitio con Responsive Web Desing en HTML5, CSS3 y jQuery</title>
<meta name="description" content="Bienvenido a mi portafolio web hecho en HTML5, CSS3 y jQuery con Responsive Web Design">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link rel="author" type="text/plain" href="humans.txt" />
<link rel="stylesheet" href="css/estilos.css">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1>
<a href="index.html">
<img class = "fade" src="img/bextlan-logo.png" alt="bextlan.com | Lugar de bits, vectores y pixeles">
</a>
</h1>
<nav>
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="acerca.html">Acerca de</a></li>
<li><a href="servicos.html">Servicios</a></li>
<li><a href="trabajos.html">Trabajos</a></li>
<li><a href="contacto.html">Contacto</a></li>
</ul>
</nav>
</header>
<section id="contenido">
<section id="principal">
<article id="galeria-inicio">
Aquí habrá una galería con jQuery
</article>
</section>
<aside>
Widgets Sociales
</aside>
</section>
<footer>
Aprendindo HTML5, CSS3, jQuery y Responsive Web Desing con <a rel ="author" href="http://twitter.com/@bextlan">@bextaln</a>
</footer>
</body>
</html>
estilos.css
Reseteo Univerdal con la ayuda del *: Modelo de caja
*{
border: 0;
margin: 0;
padding: 0;
}
Estructuras que trabajamos con etiquetas semánticas:
article,figcaption,figure,footer,header,hgroup,nav,section {
display:block;
}
Hoja de Estilos en Cascada
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on February 2, 2014 */
@font-face {
font-family: 'Chalet';
src: url('../fonts/Chalet.eot');
src: url('../fonts/Chalet.eot?#iefix') format('embedded-opentype'),
url('../fonts/Chalet.woff') format('woff'),
url('../fonts/Chalet.ttf') format('truetype'),
url('../fonts/Chalet.svg#Chalet') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Pecita';
src: url('../fonts/Pecita.eot');
src: url('../fonts/Pecita.eot?#iefix') format('embedded-opentype'),
url('../fonts/Pecita.woff') format('woff'),
url('../fonts/Pecita.ttf') format('truetype'),
url('../fonts/Pecita.svg#Phalet') format('svg');
font-weight: normal;
font-style: normal;
}
body {
background: #212121 url(../img/fondo.jpg);
color: #FFF;
font-family: "Chalet",Helvetica,Verdana;
font-size: 1em;
}
a {
color: #57ABB8;
font-weight: bold;
Para quitarle la underline a los enlaces:
text-decoration: none;
}
hover: cuando se pasa el ratón por encima
a:hover {
color:#F60;
}
La etiqueta <figcaption> es únicamente para enmarcar un titular dentro de la etiqueta <figure>. Mas info: wsnetcorp
figcaption {font-size: 0.85em;
padding: 0.25em;
text-align: center;
}
Para que se ajusten las imágenes y el vídeo al tamaño de la pantalla (objetos flexibles):
img,video {max-width: 100%
}
header,section#contenido,footer {
background: #FFF url(../img/fondo-interno.jpg);
margin: 0 auto;
max-width: 90%;
text-align:center;
}
header h1, nav {
display:inline-block;
max-width: 100%;
vertical-align:middle;
}
Para quitar el punto de la lista (viñetas):
nav ul {list-style: none;
}
nav li {
display:inline-block;
padding: 0.1em;
vertical-align:top;
}
nav a {
background: #FFF;
border: 0.1em solid #57ABB8;
border-radius: 0.25em;
color: #F60;
display:block;
font-family:"Pecita", Helvetica, Verdana;
font-size: 1.4em;
padding: 0.2em;
Transiciones: para que los cambios se produzcan con cierta transición. in es al principio del efecto. (ms: microsoft explorer, mos: mozilla firefox, o: opera, webkit: safari y chrome)
-ms-transition: all 0.5s ease-in;-mos-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
Estilo de una línea discontinua: dashed. Transición out: al final del efecto.
nav a:hover {background: #212121;
border: 0.1em dashed #F60;
border-radius: 0 0.5em 0 0.5em;
color: #FFF;
-ms-transition: all 0.5s ease-out;
-mos-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
section#principal,aside {
background: #1E6381;
border-radius: 0.5em;
display:inline-block;
margin: 0 auto;
max-width: 100%;
padding: 0.25em;
vertical-align: top;
width: 65%;
}
article#galeria-inicio {
border-radius: 0.5em;
margin: 0.5em;
padding: 0.5em;
text-align: left;
width: 95%;
}
aside {
width: 30%
}
aside img {
border-radius: 0.5em;
}
footer {
color: #000;
font-size: 0.85em;
padding: 0,75em 0;
}
Opacity: equivale al canal alpha (transparencia). Para que el explorer funcione correctamente se utiliza filter:
.fade {opacity: 1;
filter: alpha(opacity=10);
-ms-transition: all 0.5s ease-in;
-mos-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
.fade:hover {
opacity: 0.7;
filter: alpha(opacity=7);
-ms-transition: all 0.5s ease-out;
-mos-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
Trabajando con MediaQuery: cuando se cumple la condición se modifican los estilos.
Cuando el ancho del navegador es superior a un número determinado de pixeles:
@media(min-width:1081px) {header h1{
text-align: left;
width: 35%;
}
nav {
text-align: right;
width: 60%;
}
}
Cuando el ancho del navegador es iferior a un número determinado de pixeles:
@media(max-width: 1080px) {nav li {
font-size: 1.3em;
}
article#galeria-inicio {
width: 90%;
}
aside {
width: 20%
}
}
@media(max-width: 800px) {
nav li {
font-size: 0.95em;
}
article#galeria-inicio {
width: 88%;
}
}
@media(max-width: 600px) {
nav li {
display:inline-block;
margin: 0px;
width: 98%
}
section#principal {
margin-bottom: 0.2em;
}
section#principal,aside {
display:block;
width: 95%
}
}
No hay comentarios:
Publicar un comentario
Nota: solo los miembros de este blog pueden publicar comentarios.