Screencasts de vídeo 2025, Janeiro

A ilustração de Nick tinha três camadas diferentes para as cabeças. Eles são apenas variações ligeiramente diferentes. Poderíamos trocar as imagens com uma animação "

Enquanto eu estava trabalhando neste design, o jQuery 1.8 foi lançado. Este é apenas um vídeo rápido para confiar no fato de que esse tipo de coisa acontece conforme você desenvolve sites "

Temos o cabeçalho básico da galeria no lugar, mas estão faltando as pequenas pessoas azuis que Erica colocou na ilustração original. Tínhamos conversado sobre isso em "

Acabamos de colocar o cabeçalho personalizado para a Galeria, então, enquanto estamos em, vamos continuar adicionando outro cabeçalho personalizado. este foi feito por "

Existem sete áreas principais diferentes do site, além da página inicial. Então, contratei sete ilustradores diferentes para fazer designs. Este é o primeiro que somos "

Até agora, temos feito alterações no código localmente, sem usar qualquer tipo de controle de versão. Com a complexidade desse site aumentando, isso está se tornando "

Temos um bom começo no design responsivo. O menu nos tamanhos de tela menores se divide em uma grade 2x4. Ele se encaixa perfeitamente na tela, mas "

Adicionamos alguma capacidade de resposta à grade que configuramos para a Galeria. Nas telas mais largas, temos quatro colunas. Então começamos a adicionar "

No qual descobrimos os problemas que estávamos tendo para fazer o layout da coluna carregar bem. A correção foi remover o CSS que estava causando o "

Começamos a nos aprofundar no layout da área da Galeria, que é algo que está em minha mente desde o início deste processo de reformulação. Na maioria das vezes"

Temos o layout de grade para a Galeria em andamento. Infelizmente, o carregamento dele é um pouco abrupto e instável. Isso ocorre porque as colunas CSS3 são projetadas para "

Já gastamos um pouco de tempo esboçando páginas para que nossa navegação funcione (Vídeo # 030) e você possa clicar em todo o site, mas o que há nesses sub "

Há uma longa tradição de enquetes sobre CSS-Tricks. Eles são divertidos, reúnem bons dados importantes e aumentam a conexão das pessoas ao site. Noivado FTW! "

Paramos com um widget de enquete totalmente decente. A tipografia está limpa e tudo perfeitamente utilizável. No entanto, não foi exatamente atraente ou divertido. Nós"

O módulo superior da barra lateral principal do site pertence à Treehouse, como principal patrocinadora do CSS-Tricks. Com base em uma conversa que tive com Ryan Carson, "

O design de pesquisa funciona bem até chegarmos ao nosso intervalo de tamanho "bebê urso" (pequeno celular). Temos que fazer algo diferente lá. Nós arrumamos algum espaço "

Acho que pela primeira vez nesta série, vamos adicionar algumas coisas novas ao design diretamente, trabalhando no navegador (não começando no Photoshop "

Comprimir um navegador de desktop muito estreito pode dar a você uma vaga noção de como um design responsivo funciona, mas não é uma representação precisa de um "

O anúncio que temos no local é ótimo para telas grandes / desktop, mas começa a falhar rapidamente em telas menores. Já temos alguns pontos de interrupção "

Nós criamos a aparência de um botão em seu estado normal, mas um botão 3D como esse está implorando por um estado "pressionado". O que fazemos é adicionar uma cor mais escura a "

Começamos com a intenção de pular para o HTML e CSS do Top Treehouse Ad que acabamos de criar, mas é claro que perderemos os trilhos assim que começarmos "

Temos a marcação para o anúncio Treehouse no topo da página, mas temos alguns trabalhos de estilo a fazer. Começamos com o próprio gráfico da árvore. Estavam"

Deixamos uma grande quantidade de espaço aberto no cabeçalho. Desde o início, eu sabia que seria para o patrocinador principal do CSS-Tricks, Treehouse. Nisso"

Temos um pouco mais de trabalho a fazer para terminar a área de pesquisa. Ficamos desviados por apenas um segundo quando percebi que não adicionamos o tridimensional "

Nós continuamos de onde paramos no Vídeo # 034 e continuamos construindo a área de pesquisa. Desta vez, estamos nos concentrando no estado "aberto" da pesquisa, construção "

Fazemos uma pequena pausa no trabalho de pesquisa para resolver um pequeno problema incômodo. "FOUT" sendo "Flash of Unstyled Text". Este é o fenômeno em que @ font-face "

Agora que preparamos o Photoshop para o que esperamos realizar com a área de pesquisa, começamos a criá-la com HTML e CSS. Já temos nossa fonte de ícones "

Há muito conteúdo sobre CSS-Tricks. Essa é uma das coisas que torna o design um pouco desafiador. Embora possamos manter o design limpo, nós "

Começamos brincando com nosso módulo de postagem do blog, mexendo no espaçamento. Também adicionamos o pequeno quadrado colorido no canto superior esquerdo do módulo, "

Neste vídeo super rápido, adicionamos todo o CSS necessário para garantir que o item da página atual na navegação principal seja destacado quando a página for "