Screencasts de video 2025, Enero
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 "
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 "
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 "
Acabamos de instalar el encabezado personalizado para la Galería, así que mientras estamos en, sigamos agregando otro encabezado personalizado. este fue hecho por "
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 "
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 "
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 "
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 "
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 "
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"
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 "
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?
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! "
Lo dejamos con un widget de encuesta totalmente decente. La tipografía es limpia y todo perfectamente utilizable. Sin embargo, no fue exactamente convincente ni divertido. Nosotros"
El módulo superior en la barra lateral principal del sitio pertenece a Treehouse, como patrocinador principal de CSS-Tricks. Según una conversación que tuve con Ryan Carson, "
El diseño de búsqueda funciona bien hasta que llegamos al tamaño de nuestro "bebé oso" (móvil pequeño). Tenemos que hacer algo diferente allí. Hacemos algo de espacio "
Creo que por primera vez en esta serie, vamos a agregar algunas cosas nuevas al diseño directamente trabajando en el navegador (no comenzando en Photoshop "
Apretar muy poco un navegador de escritorio puede darle una vaga idea de cómo funciona un diseño receptivo, pero no es una representación precisa de un "
El anuncio que tenemos es excelente para pantallas grandes / de escritorio, pero comienza a fallar rápidamente en pantallas más pequeñas. Ya tenemos algunos puntos de interrupción "
Hemos creado la apariencia de un botón en su estado normal, pero un botón 3D como ese pide un estado "presionado". Lo que hacemos es agregar un color más oscuro a "
Comenzamos con la intención de saltar a HTML y CSS con el anuncio Top Treehouse que acabamos de diseñar, pero, por supuesto, nos descarrilamos tan pronto como comenzamos "
Tenemos el marcado para el anuncio de Treehouse en la parte superior de la página, pero tenemos algunos trabajos de estilo por hacer. Comenzamos con el gráfico del árbol en sí. Fueron"
Hemos dejado una gran cantidad de espacio abierto en el encabezado. Desde el principio, supe que esto sería para el patrocinador principal de CSS-Tricks, Treehouse. En esto"
Tenemos un poco más de trabajo por hacer para terminar el área de búsqueda. Nos desviamos por un segundo cuando noto que no agregamos el tridimensional "
Continuamos donde lo dejamos en el Video # 034 y continuamos construyendo el área de búsqueda. Esta vez nos centraremos en el estado "abierto" de la búsqueda, construyendo "
Tomamos un pequeño descanso del trabajo en la búsqueda para resolver un pequeño problema. "FOUT" es "Destello de texto sin estilo". Este es un fenómeno donde @ font-face "
Ahora que hemos editado con Photoshop lo que esperamos lograr con el área de búsqueda, nos dispusimos a construirlo con HTML y CSS. Ya tenemos nuestra fuente de iconos "
Hay mucho contenido sobre CSS-Tricks. Esa es una de las cosas que hace que su diseño sea un poco desafiante. Si bien podemos mantenernos limpios con el diseño, "
Comenzamos jugando con nuestro módulo de publicación de blog, jugueteando con el espaciado. También agregamos el pequeño cuadrado de color en la parte superior izquierda del módulo "
En este video súper rápido, agregamos todo el CSS necesario para asegurarnos de que el elemento de la página actual en la navegación principal se resalte cuando esa página es "