Miles de consejos CSS, PHP, scripts. tutoriales y consejos útiles de vídeo

Popular para el mes

# 047: Construyendo el Módulo de Encuestas, Parte 1 - Trucos CSS

# 047: Construyendo el Módulo de Encuestas, Parte 1 - Trucos CSS

Existe una larga tradición de encuestas sobre CSS-Tricks. Son divertidos, recopilan buenos datos importantes y aumentan la conexión de las personas con el sitio. ¡Compromiso FTW! "

# 049: Eliminación de encabezados y secciones - Trucos CSS

# 049: Eliminación de encabezados y secciones - Trucos CSS

Ya hemos pasado un poco de tiempo eliminando páginas para que funcione nuestra navegación (video n. ° 030) y puedas hacer clic en el sitio, pero ¿qué hay en esos sub?

# 051: Galería de carga suave, parte 1 - Trucos CSS

# 051: Galería de carga suave, parte 1 - Trucos CSS

Tenemos el diseño de cuadrícula para la Galería en marcha. Desafortunadamente, la carga es un poco abrupta y torpe. Esto se debe a que las columnas CSS3 están diseñadas para "

# 050: Construyendo la cuadrícula de la galería - Trucos CSS

# 050: Construyendo la cuadrícula de la galería - Trucos CSS

Comenzamos a profundizar en el diseño del área de la Galería, que es algo que ha estado en mi mente desde el comienzo de este proceso de rediseño. Principalmente"

# 052: Galería de carga suave, parte 2 - Trucos CSS

# 052: Galería de carga suave, parte 2 - Trucos CSS

En el que descubrimos los problemas que teníamos para que el diseño de la columna se cargara correctamente. La solución fue eliminar el CSS que estaba creando el "

# 053: Columnas receptivas para la galería - Trucos CSS

# 053: Columnas receptivas para la galería - Trucos CSS

Agregamos cierta capacidad de respuesta a la cuadrícula que hemos configurado para la Galería. En las pantallas más amplias, lo tenemos configurado en cuatro columnas. Luego comenzamos a agregar "

# 054: Navegación móvil Tap-to-Show - Trucos CSS

# 054: Navegación móvil Tap-to-Show - Trucos CSS

Tenemos un buen comienzo en el diseño receptivo. El menú en los tamaños de pantalla más pequeños se divide en una cuadrícula de 2x4. Encaja muy bien en la pantalla, pero "

# 055: Llevando una maqueta estática al control de versiones - Trucos CSS

# 055: Llevando una maqueta estática al control de versiones - Trucos CSS

Hasta ahora, hemos realizado cambios de código localmente sin utilizar ningún tipo de control de versiones. Con la complejidad de este sitio en aumento, se está convirtiendo en "

# 057: Encabezado personalizado para la galería, parte 1 - Trucos CSS

# 057: Encabezado personalizado para la galería, parte 1 - Trucos CSS

Hay siete áreas principales diferentes del sitio más allá de la página de inicio. Entonces, contraté a siete ilustradores diferentes para hacer diseños. Este es el primero que somos "

# 059: Encabezado personalizado para los foros, parte 1 - Trucos CSS

# 059: Encabezado personalizado para los foros, parte 1 - Trucos CSS

Acabamos de instalar el encabezado personalizado para la Galería, así que mientras estamos en, sigamos agregando otro encabezado personalizado. este fue hecho por "

# 058: Encabezado personalizado para The Gallery, Parte 2 (con Reverso Media Queries) - Trucos CSS

# 058: Encabezado personalizado para The Gallery, Parte 2 (con Reverso Media Queries) - Trucos CSS

Tenemos el encabezado básico de la galería en su lugar, pero faltan las personitas azules que Erica puso en la ilustración original. Lo habíamos hablado en "

# 056: Actualización de versiones de jQuery Mid-Stream - Trucos CSS

# 056: Actualización de versiones de jQuery Mid-Stream - Trucos CSS

Mientras trabajaba en este diseño, se lanzó jQuery 1.8. Este es solo un video rápido para confiar en el hecho de que este tipo de cosas suceden a medida que desarrolla sitios "

# 060: Encabezado personalizado para los foros, parte 2 (consultas rápidas de medios) - Trucos CSS

# 060: Encabezado personalizado para los foros, parte 2 (consultas rápidas de medios) - Trucos CSS

La ilustración de Nick tenía tres capas diferentes para las cabezas. Son variaciones ligeramente diferentes. Podríamos intercambiar las imágenes con una animación "

# 062: Una mirada a la configuración actual de BuySellAds - Trucos CSS

# 062: Una mirada a la configuración actual de BuySellAds - Trucos CSS

Como saben, algunos de los anuncios de CSS-Tricks son "autogestionados", como el patrocinador principal de Treehouse. Lo asumí porque es solo un sencillo "

# 063: Mocking up BuySellAds Zones - Trucos CSS

# 063: Mocking up BuySellAds Zones - Trucos CSS

Ahora que sabemos exactamente con qué zonas estamos trabajando, volvemos a Photoshop y nos burlamos de cómo queremos que se vean estas zonas publicitarias. Tenemos un precedente de "

# 061: Encabezado personalizado para los foros, Parte 3 - Trucos CSS

# 061: Encabezado personalizado para los foros, Parte 3 - Trucos CSS

¡Lo único que falta ahora en el encabezado de los foros de aduanas es la parte que realmente dice "Foros"! Nick ilustró una mano sosteniendo un cartel que significaba "

# 064: Implementación de zonas BuySellAds - Trucos CSS

# 064: Implementación de zonas BuySellAds - Trucos CSS

Tenemos una maqueta de cómo queremos que se vean nuestras zonas BuySellAds, así que empecemos a construirlo de verdad. El sitio web BuySellAds proporciona el código que necesitamos "

# 065: Adición de anuncio de barra lateral BuySellAds - Trucos CSS

# 065: Adición de anuncio de barra lateral BuySellAds - Trucos CSS

Tenemos otra zona BSA para integrarnos al sitio. Este debería ser un poco más fácil porque ya tenemos JavaScript en su lugar y es simplemente "

# 070: HTML en el pie de página - Trucos CSS

# 070: HTML en el pie de página - Trucos CSS

Con nuestro diseño para el pie de página listo para usar en Photoshop, podemos comenzar a construirlo en nuestra maqueta de HTML y CSS estático. El primer paso es dar "

# 066: Photoshopping del pie de página, parte 1 - Trucos CSS

# 066: Photoshopping del pie de página, parte 1 - Trucos CSS

¡Nos embarcamos en el gran viaje que es el pie de página! CSS-Tricks siempre ha tenido un gran pie de página elegante y este diseño no será una excepción. No es puramente "