Cómo configurar CSS en el encabezado. Encabezado de página
Creo que muchos de ustedes ya habrán notado que la tendencia ahora incluye cada vez más elementos de diseño adhesivos que permanecen visibles mientras el usuario se desplaza por la página. En mi opinión, esto es muy conveniente, especialmente si se trata de navegación en el sitio. Este es exactamente el ejemplo que haremos hoy. Aprenderemos cómo hacer un encabezado de sitio web animado usando JQuery y CSS3 con animación.
Como es habitual, esto se hace en un mínimo de líneas de código y es muy sencillo, y al mismo tiempo muy eficaz. Bueno, ahora comencemos con la lección.
Pero primero, me gustaría agradecer enormemente a http://www.webdesignerdepot.com y ahora comencemos.
en HTMLEl código HTML es muy, muy simple, solo necesitamos configurar las etiquetas y luego escribir el contenido del sitio entre ellas:
Encabezado del sitio adjunto 
Dado que este es el ejemplo más simple, aquí simplemente agregamos texto entre las etiquetas h1, pero también puede usar imágenes allí o, por ejemplo, navegación del sitio.
código jQueryCSS es la mejor manera de implementar animaciones y transiciones en la actualidad. Por lo tanto, usaremos un mínimo de scripts y solo para definir la activación de la animación al desplazarnos por la página.
Cuando el valor de la posición de desplazamiento de la página es mayor que 1, significa que el usuario se ha desplazado por la página y necesita agregar una clase "fija" a la etiqueta del encabezado del sitio. Así es como se activa y repara el encabezado del sitio.
Y aquí está el código en sí:
$(ventana).scroll(function() ( if ($(this).scrollTop() > 1)( $("header").addClass("sticky"); ) else( $("header").removeClass ("pegajoso");
Es importante señalar que usarlo en este ejemplo no es una muy buena idea, ya que si el uso de scripts está deshabilitado en el navegador, entonces el encabezado del sitio simplemente se arreglará y listo.
CSSEl código CSS constará de 2 partes. El primer código será responsable del encabezado estándar del sitio, que se encuentra en la posición predeterminada. El segundo código será responsable de mostrar el encabezado cuando el usuario se desplace por la página. Veamos cómo se ve el código predeterminado:
Encabezado (posición: fija; ancho: 100%; alineación de texto: centro; tamaño de fuente: 72 px; altura de línea: 108 px; altura: 108 px; fondo: #335C7D; color: #fff; familia de fuente: "PT Sans ", sans-serif; )
Ahora la parte interesante: cuando el usuario se desplaza hacia abajo en la página, se aplicará la clase .sticky, a la que podemos darle una visualización completamente diferente que solo CSS es capaz de hacer. También estableceremos una posición fija para que el encabezado de nuestro sitio esté siempre visible.
Usando estas reglas CSS a continuación, queremos reducir el área del encabezado al desplazarnos, cambiar el color y, por supuesto, hacer la fuente más pequeña. Aquí está el código en sí:
Header.sticky (tamaño de fuente: 24px; altura de línea: 48px; altura: 48px; fondo: #efc47D; alineación de texto: izquierda; relleno-izquierda: 20px;)
Este es el ejemplo más sencillo con el que debes entender la esencia del trabajo. Todo depende del diseño de tu sitio.
Bueno, ahora agreguemos algo de animación a nuestra transición usando . Aquí está el código:
Transición: todos los 0,4 segundos son fáciles;
Ι ConclusiónEspero que este método resuelva muchas preguntas sobre la implementación de una navegación cómoda y sencilla en el sitio. Además, esta implementación es muy sencilla y comprensible.
La principal dificultad con un diseño fluido es garantizar una visualización correcta en diferentes resoluciones, de mayor a menor. Dado que limitamos el ancho del contenido a 760 píxeles, la imagen del encabezado debe colocarse de manera que la parte más importante de la imagen encaje en este tamaño. En la figura. 6.3 muestra cómo hacer esto. La parte central con un ancho de 760 px está resaltada en color oscuro; la letra A indica los fragmentos restantes de igual ancho.
Arroz. 6.3. Ancho de la gorra
La adición real de una imagen en el encabezado se realiza a través de una imagen de fondo, que debe estar alineada con el centro del elemento.
Encabezado ( display: block; /* Para navegadores antiguos */ altura: 405px; /* Altura del encabezado */ fondo: url(images/header-bg.png) parte inferior central sin repetición; )
Idealmente, la imagen debería tener un ancho grande de 2000 píxeles, luego, en casi cualquier resolución de monitor, la imagen mostrará la parte central, cortando todo lo que no cabe en la ventana. Pero el problema es que inicialmente la imagen no es tan amplia y no querrás dibujar rayas negras que se estiren sin cesar a los lados. Una solución es permitir la repetición de fondo horizontal. Aquellos con una resolución de 1280 píxeles de ancho o menos verán una sola imagen, mientras que los propietarios de monitores panorámicos podrán admirar varios animales y la puesta de sol al mismo tiempo. Aquí es importante editar el dibujo para que encaje horizontalmente consigo mismo sin juntas (Fig. 6.4). El degradado está oculto para mayor claridad.
Arroz. 6.4. Alinear la imagen horizontalmente
En esta figura, la articulación está indicada por una flecha y un espacio para que se pueda ver la articulación. Si edita correctamente las partes derecha e izquierda de la imagen de fondo, se repetirá horizontalmente sin juntas visibles, como un patrón continuo. Todo lo que queda es corregir ligeramente el estilo reemplazando el valor no-repeat (sin repetición) con repetir-x (repetir horizontalmente).
Encabezado (pantalla: bloque; altura: 405 px; fondo: url(images/header-bg.png) repetir-x centro inferior;)
Arroz. 6.5. Imagen de fondo para el encabezado.
En formato PNG-24, un archivo con un tamaño de fondo de 1325x405 píxeles ocupa aproximadamente 32 KB, y en PNG-8 con una paleta de 256 colores, donde la calidad del degradado es ligeramente peor, aproximadamente 15 KB. Puede dividir el fondo en dos componentes: un degradado y una imagen y guardar cada imagen en su propio formato, lo que debería conducir a un aumento en la calidad de la visualización del degradado. Sin embargo, 32 KB para una imagen tan grande no es mucho y algunos considerarán una optimización adicional para "ahorrar en coincidencias". Sin embargo, algunas personas pueden encontrar útil este enfoque alternativo para crear un encabezado de sitio web y puedes omitirlo si lo deseas.
Optimización del encabezadoDado que el degradado en el encabezado se repite horizontalmente, se puede recortar del diseño y establecer como imagen de fondo. En la figura. La Figura 6.6 muestra un gradiente de 405 píxeles de alto preparado para este propósito. El formato PNG-24 no distorsiona la imagen y comprime bien los degradados (el volumen final es de 402 bytes), por lo que en este caso definitivamente deberías usarlo. Se agrega un marco alrededor de la imagen para mayor claridad.
Arroz. 6.6. Dibujo degradado (header-gradient.png)
Un cuadro con siluetas de animales está realizado sobre un fondo transparente y de 198 píxeles de alto, no tiene sentido hacerlo en toda la altura del encabezado, ya que solo ocupa una parte; Un fragmento de la imagen se muestra en la Fig. 6.7. El tablero de ajedrez significa transparencia.
Arroz. 6.7. Imagen de fondo con transparencia (header-animal.png)
Dado que esta imagen se guarda en formato PNG-8, que tiene solo un nivel de transparencia, a diferencia de los 256 niveles del formato PNG-24, es importante garantizar una superposición correcta sobre el fondo degradado. Para hacer esto, al guardar en Photoshop, debe especificar el color de los bordes (mate) cerca de la parte media del degradado, donde se superpone la silueta. Este es aproximadamente el color #9de1f0. En este caso, no habrá contornos sucios alrededor de árboles y animales, y la imagen, cuando se superponga al degradado, se percibirá como un todo.
Se preparan dos imágenes para el fondo del encabezado, escribimos el código HTML.
Y el estilo para el elemento y la capa header-bg.
Encabezado (fondo: #00b0d8 url(images/header-gradient.png) repetir-x;) .header-bg (fondo: url(images/header-animal.png) repetir-x centro abajo; altura: 405px;)
Como resultado, el tamaño del archivo resultó ser de 12,5 KB, que es incluso menor de lo esperado.
Nombre del sitioEl título está escrito en una nube con bordes difuminados, lo que debería dificultar la aplicación del degradado. Hay dos formas de sortearlos.
Obviamente, el segundo método tiene una serie de desventajas: la imagen no se puede mover ni siquiera un par de píxeles, está ligada al gradiente y, si se cambia su gradiente, será necesario cambiar la imagen. Entonces guardamos el encabezado en formato PNG-24. El código HTML seguirá siendo el mismo, pero los estilos se ampliarán.
Encabezado (fondo: #00b0d8 url(images/header-gradient.png) repetir-x; ) .header-bg (fondo: url(images/header-animal.png) repetir-x centro inferior; altura: 405px; /* Altura del encabezado */ text-align: center; /* Alineación central */ ) .header-bg img ( posición: relativa; /* Posicionamiento relativo */ top: 40px; /* Mover la imagen hacia abajo */ )
La alineación central se realiza a través de la propiedad de alineación de texto agregada al elemento principal de la etiqueta. y desplace hacia abajo a través de la propiedad superior. Para que esta propiedad funcione, debe establecer el posicionamiento relativo de la imagen utilizando la propiedad de posición con el valor relativo.
En la página principal del sitio, la imagen con el título se muestra como de costumbre; en otras páginas sirve como enlace a la página principal. Para hacer esto, simplemente cambie ligeramente el código:
El valor /y del atributo href apunta a la página de inicio y solo funciona en el servidor web, no localmente.
El código final para el encabezado se muestra en el ejemplo 6.14.
Ejemplo 6.14. encabezado del sitio
HTML5 CSS 2.1 IE Cr Op Sa Fx
¿Cómo atrapar un león en el desierto?
Del autor: bienvenido a nuestro blog sobre creación de sitios web. Cualquier sitio tiene algo que normalmente lo hace memorable y se destaca del resto. Normalmente este es el encabezado del sitio. CSS te permite hacerlo de la manera que quieras.
Encabezado del sitio web: cómo esEs sorprendente cuánto puede depender hoy en día simplemente del diseño de un recurso web. Pero, ¿qué es lo que distingue especialmente a un recurso web de otros? Como regla general, este es el encabezado del sitio con un logotipo corporativo y un diseño único. Por lo general, así es como la gente recuerda algún tipo de proyecto de Internet. Esto queda muy bien grabado en la memoria de la gente.
Por ejemplo, si ve una letra "B" blanca sobre un fondo azul, probablemente concluya inmediatamente que se trata de un icono de la red social VKontakte. Y todo el mundo asocia inmediatamente la imagen de una paloma mensajera con Twitter. Todo esto fue posible porque estos sitios tenían esas imágenes en los encabezados y la gente las recordaba muy bien.
Bien, eso fue un poco de reflexión, ahora vayamos directamente a la parte técnica.
¿Cómo se puede diseñar el encabezado de un sitio web en CSS?En general, los sombreros son diferentes. Según su ancho, se pueden dividir en dos grupos: los alineados al centro y los que abarcan todo el ancho de la página web.
Anteriormente, el encabezado se hacía de la misma manera que cualquier otro bloque: a una etiqueta div normal se le asignaba el identificador requerido, después de lo cual se ingresaba todo el contenido necesario y luego se formateaba todo. Hoy en día ya es costumbre escribir de otra forma. Especialmente para crear un encabezado de sitio en HTML5, apareció una etiqueta emparejada: encabezado. Se recomienda su uso, permite a los navegadores comprender qué es esta parte de la plantilla y qué hace. Por cierto, si quieres aprender los conceptos básicos de HTML5, tienes una ruta directa al nuestro, donde podrás ver lecciones sobre esta tecnología.
Por lo tanto, para crear un encabezado simple, simplemente escriba el siguiente código en html:
< header > < / header > |
Por supuesto, todavía no aparecerá nada en la página; aún tenemos que agregarle contenido y diseñarla. Pero hagamos, por ejemplo, un bloque que ocupe todo el ancho de la pantalla y también lo decoremos un poco.
encabezado (ancho: 100%; fondo: #D8E3AB; alto: 70px;)
encabezamiento( ancho: 100%; fondo: #D8E3AB; altura: 70 píxeles; |
En general, si todo se hace correctamente, entonces al bloque se le debe dar algún tipo de clase o incluso un identificador (ya que este es un elemento importante de la página web), pero por ahora simplemente nos referiremos al elemento por etiqueta.
La propiedad width: 100% hace que nuestro bloque se extienda a todo el ancho, independientemente del tamaño de la pantalla. Sin embargo, si las dimensiones necesitan ser limitadas de alguna manera, use la propiedad adicional de ancho máximo, donde el tamaño absoluto está escrito en píxeles, al alcanzar el cual el contenedor ya no se expandirá.
Ahora solo tenemos frente a nosotros una franja pintada del color seleccionado. Por lo general, la altura no se especifica; se determina automáticamente en función de los elementos que estarán en el encabezado.
< div id = "wrap" > < header > < / header > < / div > |
De esta manera, nuestra parte superior del sitio estará ubicada exactamente en el centro. Sólo queda llenarlo.
Arroz. 1. Por ahora, este es sólo un contenedor que contendrá todo el contenido.
¿Qué suele contener un sombrero?Por lo general, allí se insertan un logotipo, un nombre y una descripción del sitio. También puede haber alguna información de contacto, navegación de la página o incluso publicidad.
El logotipo suele insertarse como imagen de fondo. Pongamos, por ejemplo, esto:
Para hacer esto, simplemente agregue algunas reglas en segundo plano:
fondo: #D8E3AB url(logo.png) sin repetición 5% 50%;
fondo: #D8E3AB url(logo.png) sin repetición 5% 50%; |
Es decir, además del color sólido, también le damos una imagen de fondo (en nuestro caso, logo.png) y primero la coloco en la misma carpeta que el archivo de estilos. Prohibimos la repetición del logotipo y determinamos su posición en el bloque: lo desplazamos ligeramente hacia la izquierda y verticalmente en el centro.
Agreguemos algo de contenido al encabezado. Por ejemplo, encabezado y menú.
Nombre del sitio
< div class = "title" >Nombre del sitio< / div > < ul class = "menu" > < li > < a href = "#" >Contactos< / a > < / li > < li > < a href = "#" >Sobre nosotros< / a > < / li > < li > < a href = "#" >Servicios< / a > < / li > < / ul > |
Ahora formalicemos todo esto.
Título (tamaño de fuente: 36 px; relleno superior: 10 px; alineación de texto: centro;) .menu (estilo de lista: ninguno; posición: absoluta; superior: 10 px; derecha: 100 px;)
Título ( tamaño de fuente: 36px; relleno-superior: 10px; alineación de texto: centro; |
En el último artículo, hicimos un esqueleto de nuestra plantilla HTML, que está lista para ser completada y diseñada. Hoy te diré cómo hacer bellamente el encabezado de un sitio web (parte superior) y un menú simple. Hoy también haremos algunos cambios en los estilos de otros bloques.
Entonces, ¿qué tenemos ahora? Ahora tenemos estos estilos:
HTML, cuerpo (altura: 100%; color: #000; fondo: #FFFFFF; ajuste de palabras: palabra de corte; tamaño de fuente: 12px; familia de fuentes: Verdana, Arial, Sans-Serif; ) #wrapper (altura :auto!importante; altura:100%; altura mínima:100%; ) #encabezado (altura:100px; ) #contenedor (ancho mínimo:800px; ) #centro (margen:0px 200px 0px 200px; ) #izquierda ( float:izquierda; ancho:200px; ) #right ( float:derecha; ancho:200px; ) #pie de página (alto:100px; margen superior:-100px; ) .clear ( clear:ambos; ) #espacio (alto:100px ; )
Y aquí está el código de la plantilla en sí:
nombre del sitio
En primer lugar, hagamos algunos cambios en el estilo del bloque contenedor:
#wrapper (altura:auto!importante; altura:100%; altura mínima:100%; ancho: 1024px; margen: 0 automático; alineación de texto: izquierda;)
Establecí un ancho fijo: el ancho del bloque, 1024 píxeles de tamaño, alineé el bloque en el centro y el texto en él a la izquierda usando text-align: left. Podemos alinear el bloque al centro usando el estilo de margen, configurando los márgenes superior e inferior en 0 y el ancho en automático. Desafortunadamente, esto no siempre funciona en Internet Explorer 6, por lo que en el cuerpo agregué text-align: center; y es por eso que tuve que alinear el texto en el bloque de ajuste y el pie de página a la izquierda. También especifiqué margen:0 en el cuerpo, estableciendo así los márgenes desde los bordes en 0 píxeles. Como resultado, Body terminó con los siguientes estilos:
HTML, cuerpo (altura: 100%; color: #000; fondo: #FFFFFF; ajuste de palabras: palabra de corte; tamaño de fuente: 12px; familia de fuentes: Verdana, Arial, Sans-Serif; margen: 0; texto -alinear: centro)
También hice cambios en el sótano:
#pie de página (ancho: 1024 px; margen: 0 automático; alineación de texto: izquierda; altura: 100 px; margen superior: -100 px; fondo: #4a90d9;)
Todo aquí es similar al bloque contenedor: establezca el ancho en 1024 px, alinee el bloque en el centro y alinee el texto a la izquierda. También agregué margin-top al contenedor: margin-top: 20px; y eliminamos el ancho mínimo, ya que tenemos un ancho envolvente fijo.
Bueno, hemos preparado la plantilla, es hora de pasar al encabezado del sitio. Los estilos serán así:
#encabezado (altura: 140 px; fondo: #fff; relleno superior: 40 px;)
La altura del bloque es de 140 píxeles, el fondo es blanco y el margen desde el borde superior es de 40 píxeles. Esos son todos los cambios en los estilos de encabezado.
¿Qué? ¿Esto es todo? ¿Y hay un artículo completo que lleva este nombre?
Por supuesto que no. El encabezado del sitio constará de otros elementos: un logotipo y un menú, que se diseñarán por separado.
Escribamos la siguiente línea en el código HTML de la plantilla dentro del bloque de encabezado:
Esto es esencialmente un enlace a la página principal sin texto, pero se le asigna una clase = "logotipo". Ahora necesitas diseñarlo en estilos CSS.
Logotipo ( pantalla:bloque; alto: 104px; ancho: 390px; fondo: url("image/logo.png") sin repetición; )
Hice el bloque de elementos, le di ancho y alto, y también hice una imagen de logotipo como fondo, que puse en el directorio de imágenes. Todas las imágenes de plantilla se ubicarán en este directorio. El tamaño de la imagen es 388*100 píxeles, entonces, ¿por qué el tamaño del bloque es ligeramente diferente? Hice la altura de 104 píxeles para que hubiera un espacio de la imagen del logotipo en la parte inferior entre el menú futuro y el logotipo, y tomé el ancho dos píxeles más por si acaso, ya que un par de veces me encontré con que Mozilla determinó incorrectamente el tamaño de la imagen y la recorté un poco. Eso es todo, hemos terminado con el logo. Menú en
El elemento del sitio que veremos hoy es uno de los más importantes y notables de la página. A veces no lo hacen demasiado grande. Puede ser estático o dinámico. Todo depende de los deseos y fantasías del diseñador y propietario del sitio. Quizás ya hayas adivinado de qué hablaremos; así es, del encabezado del sitio. Hoy veremos cuatro formas no estándar de diseñar esta parte del sitio. Gracias a estos métodos, su sitio definitivamente se destacará de los demás.
Puedes ver cuatro ejemplos en el siguiente enlace:
Descargar¿Cómo usarlo? — Encabezados animados para la parte siteHTMLEn el código de la página, todo lo que necesitas insertar es:
| 1 2 3 |
En un bloque con id y clase encabezado grande hay una etiqueta en la que se desarrolla toda la animación. Y el bloque sólo contiene una imagen de fondo.
parte de javascriptLuego, al final de la página, debe conectar las bibliotecas necesarias. Están ubicados en la carpeta js (en el archivo fuente, enlace al principio del artículo).
Por ejemplo, en el ejemplo número 1, debe incluir las siguientes bibliotecas:
A continuación he tomado capturas de pantalla de cada uno de los efectos.
