10 Los sitios con gran ejemplo diseños css
Una de las mejores maneras de aprender cómo utilizar CSS para realizar varias tareas es la de ver cómo otras personas son la configuración de sus sitios. La siguiente lista presenta varios diseños que se pueden utilizar para crear su propio sitio. También se analiza el tipo de diseño y las características especiales de cada sitio que debe tener en cuenta.
Imagen Astronómica del Día: La Foto Astronómica del Día (APOD) es un excelente ejemplo de un diseño fluido. Intenta cambiar el tamaño de la página y se sorprenderá de cómo responde el contenido de la página. (El gráfico en el centro no funciona bien en un teléfono celular, pero el texto ciertamente lo hace.) Presenta una buena combinación de estilos de fuente y muestra cómo utilizar enlaces bien para mejorar el contenido.
EE.UU. Hoy en día: Este es un buen ejemplo de un diseño de adaptación de dos o tres columnas. Observe que cuando se cambia el tamaño de la página, la tercera columna de la derecha tiende a desaparecer cuando la página se vuelve demasiado pequeña. Note las flechas a cada lado de la presentación. Usted las puede utilizar para moverse entre las secciones de periódicos, lo cual es un excelente uso de este efecto especial.
Yahoo! Maps: sitios de mapas pueden ser muy difíciles de utilizar porque se basan en una interfaz compleja o la información no está en una forma que sea fácil para los usuarios a la entrada. Yahoo! Maps evita este problema proporcionando tres campos simples. La mayor parte de la interfaz es en realidad dedicado a mostrar el mapa. El sistema de control para el mapa es fácil de entender y no requiere ningún texto. Este es un gran ejemplo de una aplicación orientada a gráficos. Este es también uno de los pocos ejemplos de un diseño de respuesta que encontrará implementado correctamente.
Thesaurus.com: Este sitio fijo con diseño proporciona un buen ejemplo de cómo utilizar las pestañas de una manera única. En realidad, hay varios sitios asociados a este sitio único. Al hacer clic en una de las pestañas en la parte superior, que se transportarán a otros sitios tales como Dictionary.com y Dictionary.com Traductor. Observe el uso de un diseño complejo para este sitio. El diseño de tres columnas se divide en subsecciones, según sea necesario para transmitir información adicional.
ir Convertir: Este es un buen ejemplo de un diseño elástico de tres columnas. La aplicación no es perfecta, pero note como el contenido consume toda la página, no importa lo grande que usted lo hace. También puede hacer que la página relativamente pequeño antes de ver cualquier signo de una barra de desplazamiento, porque el contenido se reduce para ajustarse al espacio disponible. Esta página también cuenta con un sistema de dos menú (de la izquierda se utiliza para acceder a las funciones de conversión y uno a la derecha para acceder a las características del sitio).
Video: Diseñando una web responsive desde 0 (sin plugins ni framewoks), HTML y CSS - 1ra parte
JC Penney: Muchos sitios de ventas proporcionan capas de contenido. En este caso, se ve un título de proveedor en la parte superior, un buen menú interactivo siguiente, las últimas ventas siguiente, la ruta del sitio actual, y finalmente la información de ventas de dos columnas. Esta es una presentación de ancho fijo, por lo que no se adapta bien cuando el tamaño de los cambios del navegador. La atención se centra en la presentación de las imágenes en la página de la mejor manera posible.
Petter Hesselberg.com: A diferencia de la mayoría de los sitios de hoy, éste utiliza la colocación absoluta eficacia (que también rompe las reglas mediante el uso de tablas para mantener el contenido - el sitio sería mejor si se utiliza exclusivamente CSS). Presentación de los datos tabulares puede ser difícil. Este sitio muestra una forma efectiva para mostrar datos tabulares que no está demasiado ocupado o difíciles de ver. No siempre es necesario el uso de las fronteras al mostrar datos tabulares - a veces coloración sutil es todo lo que realmente necesita.
Video: Diseñando una página web con HTML, CSS y javascript - Primera parte
Sourceforge: En algunos casos, es necesario crear una configuración de distribución de información en algún otro formato, como archivos .zip. Este es un ejemplo de una estrategia de distribución de la información que utiliza técnicas de HTML5 y características tales como listas no ordenadas para los menús. El diseño de ancho fijo no cambia de tamaño muy bien, pero el sitio en sí es bastante flexible. Observe cómo este sitio utiliza efectivamente un diseño de dos columnas con encabezado y pie de página.
GetHuman: Las bases de datos se buscan con más frecuencia que están cambiados. Cuando la base de datos es grande, tratando de encontrar una pieza específica de información se vuelve muy difícil y frustrante. Este sitio ancho fijo demuestra una técnica de búsqueda en el directorio telefónico que se podría aplicar a otros tipos de sitios que tienden a depender de sólo una o dos teclas para mostrar una variedad de información. Note el uso de efectos especiales para mostrar la línea seleccionada. El sitio también presenta un aspecto de tabla sin usar tablas (ver el código fuente para ver por sí mismo).
Pensamientos de Juan y Discusiones azar: Este sitio le presenta un ejemplo perfecto de la disposición de dos columnas se utiliza en un entorno de blog. Se ve cómo las entradas en la columna de la barra lateral de la izquierda hacen posible el acceso a las entradas de contenido en el panel derecho con mayor facilidad. Además, este sitio le ayudará a entender los pros y los contras de la disposición de ancho fijo clásico.