Cómo crear una navegación con pestañas CSS3

Hola gente! Hoy vamos a divertirnos creando una navegación con pestañas CSS3. En este sentido, vamos a crear la versión de darkwash jean a partir de los muchos temas diferentes disponibles para estas increíbles pestañas, ¿solo porque? # 1 podemos y # 2, hay más estilo involucrado y puedo mostrarte más trucos con CSS3 que con los otros estilos. Si lo prefiere, hay temas mucho más simples en los archivos de origen, así que siéntase libre de seguirlos, ya que la estructura es prácticamente la misma..

Nota: el soporte para IE7 y 8 está ahí, pero está limitado en que la funcionalidad funciona perfectamente pero algunos de los estilos de superposición no se tratan correctamente. Si no fuera por la maravillosa y asombrosa solución de CSSPIE y Dean Edwards, no habría soporte para ninguna versión que no sea IE9.

Ok, ahora que está fuera del camino, creo que es hora de que empecemos!

El video tutorial

Ofrecemos este tutorial en dos formatos diferentes: un video y un tutorial escrito completo a continuación. Siga junto con cualquier método de aprendizaje que prefiera (o ambos):

El tutorial escrito

El tutorial escrito paso a paso se encuentra a continuación. Asegúrese de agarrar la fuente descargable completa también!

Paso 1 Creando el Marcado

La cabeza

Para nuestro primer bit de marcado, vamos a crear nuestra cabeza usando el doctype HTML5, insertando nuestras hojas de estilo y diciéndole a IE 7 y 8 que está bien usar CSS3.

    Pestañas CSS3

Construyendo los Contenedores

Después de agregar la cabecera, entre las etiquetas del cuerpo necesitamos crear algunos contenedores para la navegación con pestañas. Vamos a descomponerlo?

Como puedes ver, el primer contenedor es. Esto se utiliza para crear un ancho completo de la navegación con pestañas y para posicionarlo como desee..

La última es la que es la envoltura de las pestañas reales y ayuda a contener el bloque de contenido. Esta es una clase muy importante y no es necesario editarla, aunque explicaré el estilo más adelante en este tutorial..

     Las pestañas irán aquí

"El último es el. Esta es una clase muy importante y no hay necesidad de editarla"

Creando tu primera pestaña

El último marcado que queremos escribir es para nuestras pestañas reales y el contenido que contienen..

En primer lugar, queremos crear un div con una identificación para que podamos saber qué contenido mostrar al hacer clic en la pestaña correspondiente. Eso se parece a esto?

  // El siguiente marcado irá aquí

Luego, crearemos la pestaña para ese id de contenido y le diremos que muestre el div con un id de c1 usando un hash con c1 después en el enlace. Así que ahora tu marca debería verse así?

  primero  // El siguiente marcado irá aquí

Ahora vamos a crear un lugar para poner nuestro contenido. Para hacer esto, simplemente crearemos un div con una clase de contenido .tab e insertaremos un texto ficticio, haciendo que su marca ahora tenga este aspecto?

  primero          2 Tipos de pestañas - Regular y Newsreel
 Si tiene una pestaña de apertura como esta, siempre debería estar en último lugar en la lista de pestañas, de lo contrario no se mostrará primero cuando se cargue la página..
 El texto a veces se superpone con pestañas ocultas en IE7 y 8

Su navegación por pestañas debe verse algo como esto. Se ve bien en su forma básica, pero vamos a agregar un poco de estilo y hacer que este bebé funcione!

Paso 2 Cavando en algunos CSS

Ahora que hemos resuelto el marcado, ¡te sientes como un ganador ahora mismo! ¿Vamos a dar un paso más y aumentar esa confianza aplicando un CSS impresionante al marcado que acaba de crear? entonces realmente tendrás algo de lo que presumir!

Etiquetas globales

Ok, para los fines de este tutorial, estamos usando una navegación con pestañas independiente, así que vamos a agregar algunos estilos globales como el cuerpo, las etiquetas p, el encabezado, etc..

Al implementar las pestañas, es posible que ya tenga estos estilos en su hoja de estilos. En ese caso, puede eliminar estos estilos o etiquetar el .contenedor de pestañas para crear un estilo de tabulación específico para no sobrescribir los estilos propios de sus sitios web.

 cuerpo font-size: 13px; Familia tipográfica: Arial, Helvetica, sans-serif; color: # E7E7E7;  p, .tab-content li, h1, h2, h3 / * Esto asegura que haya suficiente espacio entre sus párrafos, encabezados, etc. * / margin-bottom: 10px;  a texto-decoración: ninguno; color: # EFD24A;  a: hover color: # AF9B41;  .tab-container h3 / * Solo afecta los encabezados h3 dentro de las pestañas * / font-size: 147%; color: # EFDFB3;

Estilo de los contenedores

Ahora vamos a estilizar nuestros dos contenedores. Para este tutorial vamos a centrar ese contenedor principal usando el margen: 0 auto, dale un ancho de 480px y empújalo hacia abajo desde la parte superior aproximadamente 4%.

 #container / * Use esto para colocar todo el módulo de pestañas * / margin: 0 auto; ancho: 480px; margen superior: 4%;

Para el contenedor .tab, es importante agregar una posición relativa para que cada bloque de contenido de pestaña se superponga entre sí correctamente en un espacio agradable y contenido. Queremos que nuestro ancho coincida con el ancho de nuestro contenedor principal 100% y un índice z de 0 que ayudará a evitar que IE muestre el texto del bloque de contenido detrás del actual.

 .pestaña-contenedor posición: relativo; ancho: 100%; índice z: 0;

En este punto debe tener una navegación de pestañas de trabajo. Todavía no se ve bonito pero ¿oye? ¡esta funcionando! Mis disculpas si es difícil de ver.

Estilo de las pestañas y su contenido

Ok, ya que tenemos pestañas de trabajo, lo primero que queremos hacer es alinearlas horizontalmente. Para hacerlo, simplemente agregaremos una pantalla: en línea a la primera división de cada pestaña.

 .tab-container> div display: inline;

Así que ahora necesitamos agregar algunos estilos predeterminados a las pestañas. Vamos a agregar una publicación de relativa que es importante para IE. También pondremos una pantalla de bloque en línea para alinearlos correctamente con el contenido de la pestaña. Al poner un margen de 2px, podemos agregar algo de espacio alrededor de cada pestaña para hacerlo más limpio. ¡También agregaremos un fondo degradado para cada navegador junto con un radio de borde y un cuadro sombreado para un poco más de asombro! Ya que estamos usando CSSPIE nuevamente para IE 7 y 8, no hay necesidad de filtros desagradables en los gradientes.

 .tab-container> div> a position: relative! important; / * Mantiene las pestañas alineadas entre sí * / text-decoration: none; color: # D7D7D7; pantalla: bloque en línea; relleno: 4px 14px; tamaño de fuente: 15px; Familia tipográfica: "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: negrita; transformación de texto: mayúsculas; margen: 2px; fondo: # 4C4648; / * navegadores antiguos * / fondo: -moz-lineal-gradiente (arriba, # 4C4648 0%, # 474344 52%, # 2F2D2E 100%); / * firefox * / background: gradiente lineal (arriba, # 4C4648 0%, # 474344 52%, # 2F2D2E 100%); / * navegadores futuros * / -pie-background: gradiente lineal (arriba, # 4C4648 0%, # 474344 52%, # 2F2D2E 100%); / * pie para ie * / background: -webkit-gradient (linear, left superior, left inferior, stop de color (0%, # 4C4648), stop de color (52%, # 474344), stop de color (100% , # 2F2D2E)); / * webkit * / border: dashed 2px # CFA840; relleno: 4px 14px; -moz-border-radius: 3px; -webkit-border-radius: 0px; radio del borde: 3px; text-shadow: 0 -1px 0 # 000000; -moz-box-shadow: 0 4px 10px -5px # 000000; cuadro de sombra: 0 4px 10px -5px # 000000; -webkit-box-shadow: 0 4px 10px -5px # 000000;

A continuación en la lista, queremos que el usuario sepa en qué pestaña están. Entonces para hacer eso usaremos el selector de objetivos y usaremos Dean Edwards IE9.js para hacer que IE 7 y 8 lo reconozcan..

Entonces .tab-container> div: target> dice que cuando se selecciona el primer div (es decir, div, etc) o es el objetivo, cambiaremos el botón (es decir: a) que se verá dentro de ese div.

 .tab-container> div: target> a background: none repita scroll 0 0 # 948a81; text-shadow: 0 1px 0 # 4C4648;

Ahora que hemos diseñado los botones de la pestaña, avancemos y agreguemos algunos caracteres al área de contenido.

Lo que vamos a hacer aquí es apuntar al segundo div dentro del .tab-container que es div y darle una altura mínima de 250px, lo que es importante para que todos los divs de contenido detrás del div objetivo no se superpongan. Entonces, dado que tenemos el contenido con la altura correcta, todavía debemos ocultar la división de contenido inactiva detrás del objetivo y, para ello, simplemente agregaremos un índice z de -2. También queremos que IE 7 y 8 jueguen bien, así que agregaremos una posición de absoluta. Así que eso es lo importante y el resto del código está ahí para agregar un poco de estilo adicional y darnos un buen aspecto de darkwash jean.

 .tab-container> div> div / * Este es el contenedor que contiene el contenido de la pestaña * / background: # 4C4648; / * navegadores antiguos * / fondo: -moz-lineal-gradiente (arriba, # 4C4648 0%, # 474344 84%, # 2F2D2E 100%); / * firefox * / background: gradiente lineal (arriba, # 4C4648 0%, # 474344 84%, # 2F2D2E 100%); / * navegadores futuros * / -pie-background: gradiente lineal (arriba, # 4C4648 0%, # 474344 84%, # 2F2D2E 100%); / * pie para ie * / background: -webkit-gradient (linear, left superior, left inferior, stop de color (0%, # 4C4648), stop de color (84%, # 474344), stop de color (100% , # 2F2D2E)); / * webkit * / -moz-box-shadow: 0 0 12px 1px # 000000 inset; -webkit-box-shadow: 0 0 12px 1px # 000000 inset; box-shadow: 0 0 12px 1px # 000000 inset; índice z: -2; superior: 50px; relleno: 20px; borde: sólido 6px # 4C4648; esquema: 2px punteado # CFA840; contorno-desplazamiento: -8px; / * Eliminar si no desea un desplazamiento * / min-height: 250px; / * Cambie este valor si necesita más o menos espacio de contenido * / position: absolute; / * Corrige IE 7 y 8 * /

Después de que los divs de contenido iniciales hayan sido diseñados, querremos poner el objetivo al frente. Para hacer esto, simplemente usamos el selector de objetivos con un índice z de 3 y lo hacemos importante.

 .tab-container> div: target> div posición: absoluta; índice z: 3! importante; / * Lleva el contenido al frente según la pestaña en la que se hizo clic * /

Lo último que haremos es agregar un poco de relleno al contenido y un estilo predeterminado si desea agregar una imagen dentro de sus pestañas.

En una nota al margen, no olvide importar su archivo reset.css en la parte superior de la hoja de estilo, necesitamos esto para anular los valores predeterminados del navegador.

 div.tab-content / * Da estilo al contenido interno de las pestañas * / padding-bottom: 70px; relleno-izquierda: 20px; derecho de relleno: 20px;  .tab-content img margin: 0 auto; bloqueo de pantalla; parte inferior de relleno: 20px; relleno superior: 10px;  / ****** Esto importa otras hojas de estilo para que no tenga que llamarlas en un archivo html ***** / @import url ('? /? /Reset.css');

Después de que todo esto haya terminado, deberías terminar con algo como la siguiente imagen. Si el tuyo no se ve igual o similar, entonces o te perdiste algo o decidiste ir con tu propio estilo, simplemente regresa y vuelve a revisar tu trabajo, estoy seguro de que es solo algo menor.

Una cosa más?

Queremos decirle a IE7 y 8 que está bien usar sombras de cuadro, esquinas redondeadas, etc. Por lo tanto, simplemente agregamos los elementos que están en nuestra hoja de estilos con características CSS3 a nuestro archivo ie.css, luego usamos el comportamiento para CSSPIE al igual que?

 .tab-container> div> div, .tab-container> div> a comportamiento: url (? /styles/csspie/PIE.htc);

¿Gran trabajo? Estás terminado!

Si has llegado tan lejos, ¿entonces eso significa que ya lo hiciste? ¡Felicidades! Espero que hayas disfrutado este tutorial tanto como yo disfruté escribiéndolo. Siempre es un placer enseñarle nuevos consejos y trucos que quizás no conozca. Con eso dicho, buen trabajo, sea paciente y continúe absorbiendo todo el conocimiento que pueda y antes de saberlo, será un maestro en lo que sea que haga!

Deja tus comentarios y preguntas a continuación;)

Diseño web