Cómo insertar vídeo YouTube responsive

Insertar vídeo YouTube responsive

En el artículo de hoy vamos a explicar cómo insertar un vídeo de YouTube responsive a través de un ejemplo gráfico.

Pero antes de mostrar cómo se inserta un vídeo de YouTube de manera responsive os contaré que un diseño responsive redimensiona y coloca los elementos de una página web de forma que se adapten al ancho de cada dispositivo permitiendo una correcta visualización y una mejor experiencia de usuario.

Como crear menú horizontal con CSS

Tutorial: Como crear un menú horizontal con CSS

En este tutorial vamos a ver como crear un menú de navegación horizontal con CSS utilizando listas, en primer para crear una barra de navegación horizontal por listas deberemos modificar el funcionamiento estándar de las listas para conseguir que se muestren en la misma línea y no una debajo de otra.

Cada elemento del menú será un enlace y al pasar el ratón sobre ellos resaltaremos de alguna manera el elemento lo que aportará el dinamismo a la barra de navegación.

Todo lo expuesto anteriormente lo haremos mediante CSS.

En primer lugar mostraremos el resultado de crear un menú horizontal con CSS, de esta manera os haréis una idea del resultado final, para ver como queda visualizaremos la página characters and words counter.

Este es el código HTML necesario para la creación del menú horizontal:

<div id="nav">
   <a class="topnav" href="#" target="_top">Opcion 1</a>
   <a class="topnav" href="#" target="_top">Opcion 2</a>
   <a class="topnav" href="#" target="_top">Opcion 3</a>
</div>

Este es el código CSS necesario para la creación del menú horizontal:

a.topnav:link,a.topnav:visited {color:#555555;text-decoration:none;padding-left:15px;}
a.topnav:hover,a.topnav:active {color:#ff4800;text-decoration:none;padding-left:15px;}

#nav {
   margin: 5px 0px 10px;
   padding: 0px;
   background-color: rgb(238, 238, 238);
   background-image: url("img/topnav_bg.gif");
   background-position: center bottom;
   background-repeat: repeat-x;
   font-size: 12px;
}

Artículos que te pueden interesar

Como detectar el idioma del visitante de tu web

Como crear página de error 404 personalizada

Como recibir notificación cada vez que Google visita tu web

Como crear fondos degradados con CSS3

Tutorial: Como crear fondos degradados con CSS3

En el presente tutorial explicaremos como crear fondos degradados con CSS3 que funcionan en los siguientes navegadores:

1. Mozilla Firefox
2. Webkit: Safari, Google Chrome, Epiphany, etc

Como ya os podéis imaginar, Internet Explorer  en sus versiones 6, 7 y 8 no dan soporte a CSS3, aunque existen soluciones para 'hacerlos compatibles'.

Aunque CSS3 es un estándar y todos los navegadores deberían funcionar con la misma sintaxis, nos encontramos, una vez más, con la libre interpretación que hacen los diferentes navegadores con un mismo estándar, por este motivo vamos a explicar como crear fondos degradados con CSS3 con Mozilla Firefox y con Webkit por separado.

Crear fondos degradados con CSS3 y Mozilla Firefox

La sintaxis con Mozilla Firefox es la siguiente:
-moz-linear-gradient( [ || <ángulo>,]? , [, ]* )
Veamos un ejemplo de degradado de negro a blanco desde arriba:
background: -moz-linear-gradient(top, black, white);

Crear fondos degradados con CSS3 y Webkit

La sintaxis con Webkit es la siguiente:
-webkit-gradient(, [, ]?, [, ]? [, ]*)
Veamos un ejemplo de degradado de negro a blanco desde arriba:
background: -webkit-gradient(linear, 0 0, 0 100%, from(black), to(white));

En este caso estamos realizando degradado lineal desde el punto 0 0 (esquina superior izquierda) hasta el punto 0 100% (esquina inferior izquierda) desde el color negro al color blanco

Artículos que te pueden interesar

Como crear un localizador con HTML5
Como crear una página de error 404 personalizada