¿Hay una tendencia general hacia listas más pequeñas? en diseños de página de inicio. Específicamente, las nuevas empresas de tecnología y las páginas de destino utilizan este efecto para promover características en sus productos. Pero es un pequeño estilo de diseño de diseño para cualquier propósito, y el uso de iconos en su diseño se separará de los diseños de plantillas normales para una visualización de lista intrigante.
En este tutorial, quiero demostrar cómo podemos usar las fuentes web personalizadas de CSS3 como un icono dentro del HTML. Crearemos un sitio web de inicio muy básico utilizando el enfoque de lista de dos columnas. Todo el CSS es muy sencillo, aunque es posible que tenga que hacer un poco de investigación sobre algunas de las propiedades. Este efecto es nativo de todos los navegadores compatibles con los estándares y se reproduce perfectamente en OS X o Windows.
Demo en vivo - Descargar código fuente
Descarga de fuentes
Siempre recomiendo a los diseñadores que consulten el conjunto de fuentes Entypo, que es de código abierto y se puede descargar de forma gratuita. El paquete contiene fuentes de los 4 tipos de archivos principales, y también tiene versiones de escritorio para instalar en Mac o PC. También tiene un paquete de iconos separado para los botones de redes sociales. Solo necesitamos la familia de fuentes web de Entypo copiada en un nuevo directorio llamado fuentes. Aquí está la lista de archivos que he incluido:
- entypo.eot
- entypo.svg
- entypo.ttf
- entypo.woff
Demostraré cómo incluir esto con CSS un poco más tarde. Solo asegúrese de que todo esté organizado correctamente y listo para incluir en la página. También mi demo tiene una pequeña carpeta de imágenes para los efectos de BG, pero no son pertinentes para el diseño completo. Simplemente descargue una copia de mi demostración si desea que todos los recursos estén juntos.
Primero debemos ver cómo está estructurada la página y el plan para alinear todo perfectamente.
Planificando el HTML
No necesitamos cubrir todo el HTML de la página, sino solo los bits importantes. Primero está mi sección de encabezado, que contiene un enlace al archivo CSS relativo, además de algunas fuentes web únicas de Google. Tenga en cuenta que nuestro CSS3 local @Perfil delantero La declaración no afectará en absoluto a estas fuentes de terceros.
No hay mucho fuera de lo común aquí, por lo que podemos pasar directamente a la sección del cuerpo. Estoy usando un div envoltorio externo con un interno #contenido envase. Esto alberga la sección de página interna completa junto con los elementos de la lista de 2 columnas. Todo el objeto está realmente dentro de una lista desordenada usando la ID #caracteristicas.
He añadido un .clearfix clase en el elemento UL exterior para que el contenedor empuje hacia abajo el resto del contenido de la página. Dado que todos los elementos de la lista interna están flotando, necesitamos algún método para mantener el modelo de caja bajo control. Del mismo modo cada elemento de la lista .característica contiene un lapso y un título más pequeño.
El intervalo utiliza nuestros iconos de pictogramas para mostrar un diseño específico justo al lado del texto. Tenemos la capacidad de agregar más clases para que un elemento de la lista pueda abarcar la totalidad de la página. Los elementos de características son solo el objeto contenedor más básico donde tenemos 2 listados por fila. También notará que el intervalo de iconos tiene una clase para la familia de fuentes especial y una clase para el tipo de icono que estamos mostrando.
Esta clase secundaria es útil si el icono se coloca en una ubicación extraña. Si algo es demasiado grande o demasiado pequeño, o está colocado en una posición incómoda, esta clase directa es más fácil de manipular. Y también hace que el desplazamiento a través del código HTML sea un proceso simple. El bit final de códigos está dentro de mi estilos.css Archivo y ciertamente no es demasiado complicado.
Estilos de columnas con CSS
El primer bit interesante que notará está en la parte superior de mi archivo. Aquí estamos usando una nueva declaración de fuente de CSS3 para configurar las fuentes de iconos. Al usar un solo nombre de familia, podemos importar los 4 tipos de archivos al mismo tiempo.
El adicional peso de fuente y Estilo de fuente Las propiedades no son necesarias, pero definitivamente vale la pena mantenerlas. No se pierde nada con especificar que nuestra nueva fuente no está en negrita ni en cursiva de forma predeterminada. También es una gran plantilla que vale la pena guardar si planea usar muchas fuentes web CSS3.
Este es otro fragmento de código interesante que no mostré en el HTML. Básicamente, configuro un párrafo del texto de introducción que se divide en dos columnas utilizando las propiedades más nuevas de CSS3 y los prefijos de proveedores relacionados. Tenga en cuenta que esto no tiene nada que ver con la lista de iconos, pero es otro método para generar contenido en columnas en sus páginas.
Ahora tengo todos los códigos designados para el listado del pictograma principal.Dentro de mi clase de pictogramas, estamos usando el nuevo conjunto familiar 'EntypoRegular' a un tamaño predeterminado de 8em. Originalmente, los íconos son muy pequeños, por lo que debemos asegurarnos de que sean lo suficientemente grandes para colocarlos justo al lado de un bloque de texto de subtítulo.
Cada una de las .característica los artículos están limitados a un ancho de 420 px junto con algún relleno interno. Los espacios entre cada columna proporcionan un ancho total del 100% a la lista desordenada. Y dentro de los elementos de la lista tenemos los pictogramas flotando a la izquierda con una posición relativa. Es posible que se sorprenda de lo fácil que es mantener cada ícono en el lugar correcto con algunas adiciones menores.
El bloque final de código es una colección de todas las diferentes clases de iconos juntas. He dimensionado individualmente cada uno en 12em porque algunos iconos parecen más grandes o más pequeños que otros. Con este sistema, puede identificar cada conjunto individual de iconos para cambiar su apariencia. Y como están posicionados en relación con el contenedor, también puede usar las propiedades izquierda / derecha / arriba / abajo para una alineación fácil.
Demo en vivo - Descargar código fuente
Pensamientos finales
Aunque este no es un tutorial particularmente difícil, las diversas etapas para construir una lista de columnas pueden llevar mucho tiempo. Debe determinar la fuente de icono perfecta y planificar su texto escrito para que se ajuste a la perfección.
Esta demostración debe proporcionar un buen punto de partida para comenzar a rodar. Pase un poco de tiempo pensando en sus propias ideas y en cómo puede aplicar este diseño en diseños similares. Además, si tiene algún comentario o pregunta, no dude en compartir en el área de discusión de comentarios a continuación.