Todas las propiedades más nuevas que surgen de las especificaciones de CSS3 han sido de gran ayuda para construir diseños de IU más avanzados. Las páginas web han estado viendo una revisión dramática en los métodos utilizados para construir estilos de diseño típicos. En particular, la tipografía y los botones / elementos de formulario están viendo el cambio de imagen más grande, y con más desarrolladores que lanzan proyectos de código abierto, parece que no hay un final a la vista.
Para este tutorial, quiero demostrar cómo podemos crear algunos encabezados de muestra en una página web básica. Estoy utilizando principalmente efectos CSS3 en la barra de navegación superior, junto con la tipografía en la página. Todas estas técnicas deberían trasladarse a los navegadores web más nuevos que cumplen con los estándares. Además, hay tantas técnicas de diseño diferentes que puede duplicar y aplicar a cualquier proyecto. ¡Asegúrese de ver mi demostración en vivo para tener una idea de lo que estamos tratando de construir!
Demo en vivo - Descargar código fuente
Empezando
Primero estoy creando una página web index.html simple utilizando el doctype HTML5. Solo necesitamos un par de recursos para el estilo, a saber, una hoja de estilo única. estilos.css junto con algunas fuentes web de Google. Mucha gente asume que estos recursos reducirán la velocidad de carga de su página, y mientras solicitamos algunos documentos a través de HTTP, no debería tomar más de un par de cientos de milisegundos en una buena conexión.
Ahora el encabezado de la página y el contenido del cuerpo se dividen utilizando un sistema de clase contenedor. La barra de navegación debe abarcar el 100% del ancho de la página, sin embargo, el contenido interno es máximo en 1050px. Esto mantendrá todo nuestro contenido centrado en la página, sin importar cuán grande sea la resolución del monitor. Mantenemos el encabezado dentro de un HTML5. nav Elemento para más estilos semánticos.
Vale la pena señalar cómo el texto del encabezado aparece primero en el código HTML, a pesar de que está flotando en el lado derecho de la navegación. Aunque podríamos formatear esto para que parezca que el encabezado viene después la navegación, para los rastreadores de motores de búsqueda, necesitamos asegurarnos de que el título de la página aparezca primero, por lo que ocupa un lugar más alto en la página. Además, a medida que la ventana se hace más pequeña, los estilos de respuesta hacen que los enlaces de navegación caigan por debajo del encabezado, por lo que, en última instancia, el encabezado debe aparecer primero en la jerarquía.
Los enlaces de elementos de la lista interna están separados por texto usando la em etiqueta. Estos subtítulos más pequeños son buenos efectos agregados en una navegación si hay suficiente espacio. Puede dar a los visitantes un sentido adicional de lo que hay en cada página sin parecer demasiado conflictivo.
Contenido interno del cuerpo
No he incluido mucho contenido nuevo dentro del cuerpo ya que nos estamos enfocando en la tipografía. Pero hay 3 estilos de encabezado únicos que empujan desde h1-h3 según la clasificación por importancia. Algunos diseñadores pueden optar por incluir también h4 e incluso h5 si es necesario. La tipografía de copia de seguridad se trata de trabajar para lograr una ubicación muy unida del contenido en la página. Se trata de planificar sus palabras escritas y ajustar otros medios en este contexto (imágenes, videos, etc.).
Creo que uno de los efectos más geniales que puedes incluir es un diseño de citas de extracción o de bloque. Tenga en cuenta que estas son dos ideas muy diferentes y tienen propósitos muy diferentes. En nuestro ejemplo de demostración, estoy usando los estilos CSS-Tricks pull-quote para demostrar cómo podemos duplicar el contenido de las áreas de la página. Se ven excelentes en publicaciones de blog o artículos en línea donde desea enfatizar ciertas frases u oraciones.
Blockquotes es otro mecanismo de diseño interesante que puede verse bien en casi cualquier página. Estos no se relacionan con el contenido dentro de la publicación, pero suelen estar citando a alguien más. Las citas pueden provenir de clientes anteriores, colegas o, en realidad, de cualquier persona para ser honestos. Codrops publicó recientemente un artículo sobre la creación de citas en bloque modernas que cubre una serie de grandes ideas para diseñadores web.
Maniobrar con CSS3
El formato HTML es muy estándar y típico de lo que cabría esperar en cualquier página web. Las áreas de interés más complejas residen en la hoja de estilo CSS donde podemos aplicar efectos de transición y toneladas de otras excelentes propiedades CSS3. Deberíamos empezar por echar un vistazo a la estructura de la página del documento.
los .envoltura La clase se debe suministrar en cualquier contenedor dentro de otro contenedor. Así, por ejemplo, nuestra barra de navegación se extiende por todo el ancho de la página, pero todo el contenido dentro está contenido dentro de un div envoltorio. El exterior #topnav el contenedor utiliza un montón de propiedades CSS3 junto con el selector de color rgba (). Esto es específico para los desarrolladores web interesados en utilizar la transparencia alfa dentro de los tonos de color.
Podemos ver este efecto no solo en el fondo, sino también en la sombra del cuadro. Este efecto funciona bien cuando se utiliza una navegación estática fija que se desplaza por la página y sigue al visitante.
El encabezado de la página utiliza una serie de propiedades animadas mientras se desplaza sobre el enlace de anclaje. Esto también se aplica a los muchos elementos de navegación que también utilizan transparencia alfa. Algunos navegadores antiguos no admiten los estilos típicos de prefijo de proveedor, pero hay soluciones para todos los navegadores.
El estilo del encabezado se ajusta tan bien porque podemos arreglar la barra de navegación a una altura determinada y luego usar la altura de la línea Propiedad para colocar texto centrado verticalmente. Entonces, en este escenario, incluso cuando cambiamos el tamaño de la ventana del navegador, el logotipo de nuestra página siempre flotará a lo largo del centro. Luego, una vez que la navegación desciende, redimensionamos la altura de la línea para que todo se ajuste en consecuencia. Los efectos de animación CSS3 solo ofrecen una experiencia de usuario más agradable para el usuario.
Tendencias de respuesta
Gran parte del contenido del cuerpo ya es capaz de manejar contenido que responde a dispositivos móviles. En los últimos años, se han escrito muchos artículos sobre diseño web sensible. Copiar su tipografía para plataformas de escritorio y móviles es posiblemente una de las mejores ideas que puede seguir. Esto permite que cualquiera pueda acceder a su información desde cualquier dispositivo con acceso a Internet.
Observe cómo he incluido los efectos de transición tanto en los elementos de lista como en los enlaces de anclaje. También estamos seleccionando todas las propiedades que deberían animarse con el tiempo, lo que realmente no es necesario, pero se ve fantástico. Cuando la navegación cae debajo del encabezado, todos los márgenes y el espacio entre líneas se reajustarán utilizando transiciones animadas. Por supuesto, solo los visitantes que utilizan navegadores web modernos que admiten transiciones CSS3 verán estos efectos. Pero vale la pena mantenerlo con respecto a una experiencia de usuario exitosa.
De hecho, he configurado dos consultas de medios diferentes para cuando la pantalla llegue a 2 áreas diferentes. Primero, cuando caemos un poco por debajo de 800 px, los enlaces de navegación eliminan algunos de sus márgenes. Esto hace que los enlaces se acerquen más, ahorrando espacio y evitando que se caigan demasiado rápido. Luego, después de que vayamos por debajo de 700px, el navegador cambiará debajo del encabezado y lo ajustaremos para los nuevos valores de altura de línea.
Este diseño sensible se puede manejar de muchas maneras. Puede elegir simplemente ocultar los enlaces de navegación y mantenerlos vinculados a un enlace de alternar para usuarios móviles. Creo que este método es mejor para mantener todos los estilos tipográficos en un punto sin sacrificar la facilidad de uso. Toda el área del encabezado está madura para tipografías únicas y ciertamente será un punto de atención para los usuarios.
Demo en vivo - Descargar código fuente
Pensamientos finales
Espero que este tutorial pueda proporcionar una visión más profunda del diseño de páginas web con CSS3. La tipografía sigue siendo la faceta # 1 más importante para cualquier diseño. Internet permite que las personas envíen información digital a todo el mundo en muy poco tiempo. Los diseñadores web están haciendo el trabajo de mensajeros y mensajeros con una estética más agradable.
Si te gusta la página de demostración, puedes descargar una copia de mi código fuente también. Puede utilizar este código sin licencia como dominio público. Siéntase libre de editar y copiar estos estilos para cualquier proyecto, comercial o de otro tipo. Agregar más recursos en línea puede proporcionar un paso más para que los diseñadores más nuevos se muden al campo. Además, si tiene alguna pregunta o comentario, por favor, comparta con nosotros en el área de discusión posterior.