La paginación del sitio web es un aspecto crucial para cualquier diseño con contenido repetido. Los blogs a menudo son una consideración, pero también los listados de cartera o los enlaces de noticias / noticias relacionadas o cualquier otro tipo de archivo. Organizar una publicación de blog en muchas páginas ayuda a reducir el tiempo de lectura, especialmente con artículos particularmente profundos.
En este tutorial quiero demostrar una colección de técnicas CSS para diseñar paginación. Una vez que combina estos diseños con sistemas de contenido como WordPress, puede ver cómo funcionan realmente las interfaces en acción. Para tener una idea del producto final, vea mi demostración de muestra en vivo a continuación.
Demo en vivo - Descargar código fuente
Empezando
Este tutorial no requerirá ningún código JavaScript, por lo que no hay dependencias de archivos en absoluto. Me gustaría comenzar por delinear el diseño de página simple. Cada enlace paginado va a una página HTML diferente con una lista de 5 en total.
Notará rápidamente la línea comentada que muestra un botón anterior para moverse entre páginas. Solo he mostrado este enlace dentro de los otros diseños porque en la primera página no tenemos forma de volver a la página anterior. También el primer elemento de la lista .soltero no tiene enlace de anclaje, solo muestra el número de página actual y el número total de páginas.
El ejemplo anterior se copia de index-2.html que muestra la segunda página. Encontrará que cada página numérica individual no tiene un ancla que retroceda sobre sí misma. En su lugar, aplicamos una clase de .corriente en el elemento de la lista para una apariencia diferente.
Estilos de página generales
He dividido la hoja de estilo en segmentos junto con los restablecimientos de página típicos. Esto hace que sea más fácil copiar y pegar el estilo exacto de los enlaces de paginación con los que desea trabajar.
Nada muy diferente aquí en comparación con mis otros tutoriales. Usando el exterior .paginar clase en la lista desordenada significa que esto se aplicará a cada UL en todas las páginas. Aumenta el tamaño de fuente genérico al tiempo que garantiza que la lista abarcará un ancho completo del contenedor principal.
Directamente debajo de este código encontrará los otros 5 bloques para cada una de las secciones de paginación. Este es un ejemplo de mi primera idea de diseño. El contenedor .paginate.pag1 no tiene estilos predeterminados, pero si desea aplicar algo directamente a esta lista desordenada, puede hacerlo apuntando a estilos de paginación individuales.
Los enlaces utilizan un fondo de color plano junto con algunas sombras de cuadro que se actualizan cuando se hace clic. Es un diseño simple que puede encajar realmente en cualquier diseño de sitio web, siempre que actualice un poco la combinación de colores.
Otros estilos de paginación
Al observar mi segundo diseño, es posible que observe que se creó alrededor del PSD de paginación mínima lanzado en Pixels Daily. Le di a las sombras más longitud y mantuve los tamaños de letra más pequeños. Pero es una plantilla fantástica que puedes comenzar a personalizar muy rápidamente.
Otro lanzamiento genial de Pixels Daily llamado Slick Pagination Links incluye una copia de PSD y CSS. Mi tercera demostración se basa en este diseño, pero yo mismo escribí todo el código CSS.Intenté hacer coincidir colores similares en el degradado, pero usé un borde más grueso alrededor de cada enlace.
Probablemente se verá mejor en un fondo más claro o envuelto en un contenedor UL liviano. Pero actualizar los gradientes de borde y fondo no llevaría mucho trabajo con un diseñador de esquemas de color. Los estados activo y flotante simplemente actualizan el fondo y me he mantenido alejado de cambiar las sombras de la caja.
Todos estos diseños podrían ampliarse para incluir diferentes tipos de fuentes, iconos, relleno y otras características de CSS. Todo mi código está escrito en el mínimo común denominador, de modo que, con suerte, estos estilos pueden funcionar bien con cualquier página web.
Enlaces de navegación redondeados
Mis dos últimas páginas usan el mismo tipo de diseño, pero simplemente invierten el esquema de color de claro a oscuro. Solo estoy mostrando los códigos CSS más oscuros porque tienen más cambios. Todas las propiedades de visualización deben coincidir perfectamente con los colores.
Este diseño en particular se basa en una PSD premium llamada Flat Pagination Interface, también de Pixels Daily. Al mirar la captura de pantalla, verá que tiene una lista más pequeña y utiliza puntos suspensivos para variar entre páginas. Esto es común cuando tiene más de 10 páginas en la lista y no quiere mostrarlas todas a la vez.
Anteriormente mencioné que podemos apuntar a la lista externa desordenada usando su nombre de clase como .paginate.pag5. Ayuda a los enlaces de demostración, pero probablemente no será útil en un sitio web en vivo a menos que planee utilizar diferentes estilos de paginación.
Cada uno de estos dos estilos finales incluye transiciones CSS3 para los estados de desplazamiento. Es una buena característica adicional que puede elegir mantener, pero no siempre se ve bien en todos los casos.Tanto la combinación de colores claros como los oscuros incluyen puntos destacados en verde para coincidir con el diseño de la página. Si le gusta este diseño, juegue con los colores y vea si la interfaz clara u oscura se ve mejor para su proyecto.
Demo en vivo - Descargar código fuente
Clausura
Muchas de estas técnicas se pueden adaptar con sus propios estilos para crear una paginación única del sitio web. No es un aspecto crucial para todos los sitios web, pero de inmediato se vuelve importante si se trata de una cantidad sustancial de contenido.
Siéntase libre de descargar una copia de mi código fuente y usar estos estilos CSS para cualquier paginación del sitio web. Además, si tiene preguntas o sugerencias relacionadas, puede compartirlas con nosotros en el área de discusión a continuación.