¿Cuáles son algunos consejos de diseño CSS para sitios web?

CSS es casi seguramente uno de los mejores desarrollos en diseño web desde que se adoptaron los primeros navegadores web gráficos a gran escala. Donde las tablas crearon páginas torpes y de carga lenta, CSS creó páginas web mucho más optimizadas y utilizables. Además, CSS ha permitido a los diseñadores lograr varios estilos diferentes que solían ser posibles solo con imágenes.

Una de las mejores partes de CSS es que es tan simple una vez que conoce los conceptos básicos. Donde las tablas solían crear código increíblemente complejo y a veces imposible de descifrar, CSS mantiene las cosas limpias y simples. Agregue algunos comentarios para mantener todo organizado y se convierte en un sueño absoluto para trabajar.

1. Seguridad y rendimiento

Si bien CSS a menudo se considera un mero lenguaje de estilo, hay formas en que puede usarlo para agregar seguridad a su sitio. También hay formas de optimizar su CSS para mejorar los tiempos de carga de la página. Ambos se discuten a continuación.

HAGA QUE SUS PÁGINAS SE CARGEN MÁS RÁPIDO COMBINANDO Y COMPRIMIENDO ARCHIVOS JAVASCRIPT Y CSS

Este tutorial le muestra cómo crear un script PHP para comprimir y combinar múltiples archivos CSS y / o JavaScript con gzip cuando un navegador los solicita. Acelera los tiempos de carga de la página al tiempo que permite editar los archivos CSS o JavaScript individuales sin tener que combinar y volver a comprimir todo cada vez.

Las pruebas informales mostraron que un grupo de archivos JavaScript se redujo de 168 Kb (y 1905 ms para transferir) a 37 Kb (y 400 ms). No había datos disponibles para el efecto que tenía en los archivos CSS, pero supongo que probablemente sea bastante similar.

2. Diseño de página

Para esto se construyó CSS. Las opciones son casi infinitas, especialmente cuando CSS3 se convierte en el nuevo estándar.

ALINEAR IMÁGENES EN LÍNEA CON LA PROPIEDAD DE ALINEACIÓN VERTICAL

La alineación vertical predeterminada para las imágenes en línea en el texto a veces no se ve tan bien. Este tutorial le muestra cómo alinear mejor las imágenes en línea con el tipo de su sitio. Repasa los diferentes tipos de alineación vertical y lo que significan en relación con el tipo.

3. Personalizaciones de menú y navegación

Los estilos de menú y navegación realmente pueden diferenciar su sitio si se hace bien. Solo recuerde, los menús deben permanecer utilizables y funcionales sin importar cómo se vean.

¡SUPERE ESE MENÚ!

¿Alguna vez has querido crear elementos de menú que se superponen? Este tutorial relativamente simple le muestra cómo hacerlo utilizando clases únicas para sus elementos de menú. También le indica cómo reordenar los elementos de navegación utilizando el índice z. Es un efecto agradable que no es difícil de lograr.

4. tipografía

Aquí hay algunos tutoriales y trucos para crear estilos tipográficos avanzados usando CSS. Hay de todo, desde funciones de ajuste de línea hasta suavizado falso para agregar gradientes y sombras.

TEXTO DE ENVOLTURA DENTRO DE PRE TAGS

Este tutorial muestra cómo ajustar el texto dentro de las etiquetas pre html. Es útil para mostrar código en su sitio, especialmente cuando las líneas de código son bastante largas y terminan rompiendo el diseño de su sitio (especialmente en IE). Es relativamente simple y se presentan algunas opciones diferentes.

5. Otras técnicas, consejos y trucos geniales

A continuación hay una tonelada de otras técnicas y trucos que puedes usar para que tu CSS se destaque.

CUBO 3D UTILIZANDO TRANSFORMACIONES CSS

Este tutorial muestra cómo construir un cubo 3D con texto u otro contenido en cada lado del cubo. Lo hace completamente con CSS; no hay lienzo, SVG, imágenes o JavaScript. Incluso hay instrucciones para crear múltiples cubos sombreados en una sola página. El único inconveniente real es que solo es compatible con los navegadores WebKit y Gecko recientes.

Desarrollo webDiseñoHojas de estilo en cascadaweb