border: 0;
margin: 0;
padding: 0;
}
Muestra en fila verticales los items
article, figcaption, figure, footer, header, hgroup, nav, section{
display: block;
}
Asigna un fondo, tipo y tamaño de letra al cuerpo entero cuando no se ha especificado un tipo.
body{
background: url(../img/fondo.jpg);
color: #252525;
font-family:"BauhausLT-Medium",Helvetica, Verdana;
font-size: 1em;
}
Asigna un color, negrita al texto del link y quita el subrayado del texto
a {
color: #57ABB8;
font-weight: bold;
text-decoration: none;
}
Propiedad que cambia el color de letra cuando el mouse esta sobre el texto, quita la el subrayado.
a:hover{
color: #F60;
text-decoration: none;
}
Asigna tamaño, separacion de la imagen y alineacion del texto de la imagen.
figcaption{
font-size: 0.85em;
padding: 0.25em;
text-align: center;
}
Asigna el 100% de espacio para imagines y vídeos.
img, video{
max-width: 100%;
}
Asigna un fondo, margen cero con centrado auto, uso del espacio disponible al 90% y texto centrado
header, section#contenedorg1, footer{
background: #FFF url(../img/fondo-intermedio.jpg);
margin: 0 auto;
max-width: 90%;
text-align: center;
}
Separa los contenidos en columna y los coloca en fila, usa el 100% del espacio disponible y centra el contenido total al centro verticalmente. Display inline block es una de las propiedades mas importantes en el html5
header h1, nav{
display: inline-block;
max-width: 100%;
vertical-align: middle;
}
Remueve las viñetas de los enlaces del ul
nav ul{
list-style: none;
}
Dispone el menu li en forma lineal horizontal, con una separacion y alineado vertical al tope.
nav li{
display: inline-block;
padding: 0.1em;
vertical-align: top;
}
Estilo del menu
Efecto del menu con hover y transition
Configura el estilo del menu, correspondiente a los enlaces <a>. Asigna un fondo, borde, contornea las ezquinas con berder radius, color de letra, disposicion en bloque, tipo de letra, tamanio de letra, separación entre cada menu, y un efecto de transición compatible con cada navegador.
nav a{
background: #FFF;
border: 0.1em solid #57ABB8;
border-radius: 0.25em;
color: #F60;
display: block;
font-family:"BauhausLT-Medium",Helvetica, Verdana;
font-size: 1.4em;
padding: 0.5em;
-ms-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
transition: all 0.3s ease-in;
}
Cambia el estilo del menu al pasar el puntero por el menu, por medio de la propiedad hover. En ese caso border radios, asigna borde a dos ezquinas y dos ezquinas se quedan sin borde, y finalmente libera el efecto de transicion con ease-out
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;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.3s ease-out;
}
Asigna al section y al aside un fondo, un borde en las esquinas, disposición en fila, margen con centrado automatico, y hasta un 100% de espacio de su elemento contenedor padre, el "contenedorg1" que se encuentra un ejemplo de el estilizado en la parte superior, un espacio del elemento contenedorg1 a contenedorp1 de 0.25em, alineamiento vertical al arriba de todos los elementos, y un espacio mínimo ocupado inicialmente del 65%, pero expansible hasta el 100%.
section#contenedorp1, aside{
background: #1E6381;
border-radius: 0.25em;
display: inline-block;
margin: 0 auto;
max-width: 100%;
padding: 0.25em;
vertical-align: top;
width: 65%;
}
Asigna al article dentro de un section, un borde, un margen o distancia del article al section de 0.5em y una distancia del section hacia al article de 0.5em, alineamiento de texto izquierda y un 95% de uso del espacio disponible, no se puede usar el 100% por el borde, margen y padding asignados.
article#galeria-inicio{
border-radius: 0.25em;
margin: 0.5em;
padding: 0.5em;
text-align: left;
width: 95%;
}
Se define que el aside ocupara un 30% del espacio disponible en el sectiong1, compartido con el section arriba definido que ocupa un 65%, ya que ambos comparten el espacio del sectiong1, la sumatoria es igual 95%, dejando un 5% libre, por los margenes, bordes y padding asignados.
aside{
width: 30%;
}
aside img{
border: 0.25em;
}
footer{
color: #000;
font-size: 0.85em;
padding: 0.75em 0;
}
Con la clase fade perteneciente al tag img del logo, le damos una opacidad al logo con efecto de transición o a cualquier imagen de deseemos si le implementamos una clase o un id.
.fade{
opacity: 1;
filter:alpha(opacity=10);
-ms-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
transition: all 0.3s ease-in;
}
.fade:hover{
opacity: 0.7;
filter:alpha(opacity=7);
-ms-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.3s ease-out;
}
Con la media estamos definiendo un condicional y decimos que si la pantalla tiene mas de 1081px el h1 que contiene al logo se alinea a la izquierda y el menu nav a la derecha.
@media(min-width: 1081px){
header h1{
text-align: left;
width: 35%;
}
nav{
text-align: right;
width: 60%;
}
}
@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.9em;
}
article#galeria-inicio{
width: 88%;
}
}
@media(max-width: 600px){
nav li{
display: inline-block;
margin: 0px;
width: 98%;
}
section#contenedorp1,aside{
display: block;
margin-bottom: 0.25em;
width: 95%;
}
}
No hay comentarios.:
Publicar un comentario