Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Site Elements
Webdesign

Cómo Crear una Cinta Moderna de Banner para la Barra de Navegación completamente con HTML/CSS3

by
Length:MediumLanguages:

Spanish (Español) translation by Rodney Martinez (you can also view the original English article)

Debido a que CSS3 se ha vuelto más sólido y tiene un soporte más amplio, las opciones para los elementos de diseño modernos divertidos que pueden ser creados sin gráficos, ¡son virtualmente ilimitadas! Para un proyecto reciente decidí ver si podría crear una cinta de banner centrado con solo CSS3. Este tutorial lo guiará a través de cómo lo hice.

Como resulto, de hecho, es muy fácil, usando solamente HTML semántico y algunos trucos CSS3 y gracias a la magia de la propiedad border-width. Con la única salvedad: Como con todas las técnicas nuevas CSS3, ésta puede actuar un poco mal en algunos navegadores como IE (Internet Explorer…veremos eso al final del tutorial.

Así es como se hace:


Paso 01: Los Enlaces de la Navegación

Queremos crear la barra de enlaces de la navegación, así que vamos a comenzar con una sencilla lista sin ordenar [ul] con algunos enlaces [a] adentro. Esto es uno de los bloques construcción de marcado más simples, es muy bueno para crear listas de elementos para ser arreglados en una manera similar a como lo vamos hacer aquí:

El código:

Queremos que los enlaces floten horizontalmente a través de la página, así que añadiremos los siguientes estilos:

Primero, queremos eliminar los estilos de tabla de los elementos de la lista, y hacerlos flotar a la izquierda de los demás y añadir un poco de espacio entre ellos.

Luego, añadiremos un poco de sombra de texto, eliminaremos el subrayado de los enlaces y añadiremos el color de texto y el tamaño.

También me gustaría añadir un efecto de animación fino al evento on hover:

Para añadir las estrellas, he colocado una entidad HTML ✭ (que luce así ✭) dentro de cada enlace. Esto es meramente decorativo y no es necesario para la funcionalidad.

En este punto, ya tenemos una estupenda y útil sección de los enlaces de la navegación que podríamos añadir en una página. Sin embargo, vamos a crear una cinta para poner estos enlaces dentro.


Paso 02: La Cinta del Banner

La técnica border-width que vamos a usar requiere que agreguemos 4 elementos extras al marcado. A pesar de que no es ideal añadir elementos externos, a largo plazo es probable que todavía sea más eficiente que cargar gráficos extras, y mantendremos las cosas tan sencillas como sea posible.

Primero, crearemos un elemento contenedor alrededor de los enlaces. Este nos permitirá ajustar la anchura para mantener todos los elementos del banner juntos.

Añadiremos el siguiente estilo para ajustar la anchura y centrar el elemento contenedor:

Después, añadiremos el rectángulo que será la sección del cuerpo de la cinta:

Añadiremos los siguientes estilos para crear el fondo del cuerpo de la cinta. Estamos ajustando la propiedad z-index con un valor de 500 porque el rectángulo necesita estar apilado arriba de los triángulos que crearemos después. Estoy añadiendo ambos —moz-box-shadow y box-shadow— para que funcione tanto para Firefox y —webkit/IE9—, respectivamente.

Luego, añadiremos los triángulos a los bordes de la cinta:

Finalmente, añadiremos un poco de la magia de la propiedad border-width. La clave para hacer esto es hacer transparente la propiedad border-color para cada lado del elemento, excepto para el fondo (para los triángulos en la parte de arriba) y arriba (para los triángulos en la parte inferior). Luego ajustamos border-width con 50px. Esto crea un triángulo isósceles, que después ubicaremos detrás del cuerpo principal de la cinta:

Haremos lo mismo para el lado derecho:

¡Y listo, terminamos! Esto se representará perfectamente en los navegadores Firefox y Webkit. Internet Explorer es, de hecho, notablemente mal usando estas propiedades CSS3, así que no se reproducirá perfectamente bien ahí, pero haremos lo mejor hacerlo lo más parecido usando un par de hojas de estilo personalizadas.

Para IE8 e IE9, añadiremos algunas reglas de posicionamiento personalizado a través de la hoja de estilo "is.css".

Sólo para estar seguros que estamos en lo correcto (y desde que creemos en el progreso del mejoramiento), también añadiremos un arreglo para IE7, que puede ser colocado en la sección encabezado de su página o en un hoja de estilos para IE7 separada.  Mi elección para un arreglo es simplemente ocultar los triángulos en los navegadores cuya versión es menor a IE8. Aunque la propiedad border-width tiene soporte en IE7, sin embargo, el espaciado será un poco mal logrado. Así que depende de usted si desea gastar tiempo extra volviendo a colocar los elementos para la versión IE7.


Resumiéndo

Las imágenes de fondo están ahí solamente para entretenimiento, ya que usted puede añadir sus propias imágenes y construirlas alrededor de este documento… o solamente agarrar todo lo que está arriba de esto y soltarlo en su propio diseño. Pero, debido al interés de ser comprehensivo, aquí está el código CSS que está añadiendo en estás imágenes.

Créditos: Las imágenes provienen de iStockPhoto -no podemos distribuir la isla al fondo con el demo, pero usted puede agarrarla usted mismo desde aquí.


¡Eso es todo!

¡Chicos, espero que lo hayan disfrutado! Recuerden que este es un conjunto de técnicas bastante nuevas… así que si su objetivo es 100% estabilidad en todos los navegadores conocidos por ele hombre, hay formas más estables de lograr esto usando imágenes sencillas para el fondo. Deje sus comentarios y preguntas debajo ;

Si quiere continuar leyendo acerca de cómo crear una cinta o el efecto de doblado:

  • Crear una Efecto de Cinta 3D Enrollada (¡Más un PSD Gratis!).

    Pienso que podría ser divertido crear un tutorial sobre el popular efecto de cinta 3d enrollada que ha estado apareciendo tanto este año. Esta es una forma magnífica de añadir profundidad a sus diseños y es muy fácil de completar.

    Visite la Publicación

  • Consejo Rápido: CSS, Formas Practicas

    Recientemente, una técnica de diseño común es crear un efecto doblado donde éste aparece como si un encabezado está enrollándose detrás de su contenedor. Por lo general, esto se logra a través del uso de imágenes pequeñas, sin embargo, con CSS, podemos imitar esta técnica muy fácilmente. Le mostraré cómo en cuatro minutos.

    Visite la Publicación

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.