Aula 0

O que vamos aprender no Módulo 2?

fundamentos do design, psicologia das cores, tipografia, elementos css, modelo de caixas, wireframe, responsividade

• estudos de cores
• tipografia
• CSS id e class
• Modelo de caixas
• criar um site do zero

Aula 1

Psicologia das cores

cores são muito importantes, "manipulam" o nosso acessar; comprar; subconciente

azul tem uma taxa de 1-2% de rejeição

marrom pode ser usado para comida, só têm que saber usar

Aula 2

Representando cores com CSS3

representação por nomes

representação por códigos hexadecimais

decimais: 0 1 2 3 4 5 6 7 8 9

hexadecimais: 0 1 2 3 4 5 6 7 8 9 a b c d e f

o 0 (nada; 0) é o digito menos significativo e o f ("tudo"; 255) é o mais significativo

Exemplo: #0000ff -> 00(red), 00(green) & ff(blue)

representação por RGB

• red - rgb(255, 0, 0) = #ff0000
• green - rgb(0, 255, 0) = #00ff00
• blue - rgb(0, 0, 255) = #0000ff
• white - rgb(255, 255, 255) = #ffffff
• black - rgb(0, 0, 0) = #000000

representação por características da cor / HSLA

Hue / Saturation / Luminosity / Alpha

Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
Saturation is a percentage value. 0% means a shade of gray, and 100% is the full color.
Lightness is also a percentage value. 0% is black, and 100% is white.

• red - hsl(0, 100%, 50%)
• blue - hsl(240, 100%, 50%)
• green - hsl(120, 100%, 50%)
• white - hsl(0, 0%, 100%)
• black - hsl(0, 100%, 0%)

quando a transparência não está sendo usada, ela é "1" e não aparece no código,mas se for usada, vai aparecer como um número decimal(0,167); o "0" seria total transparência.

Exercício feito nessa aula

Aula 3

Harmonia de cores

O círculo cromático

Analisando atentamente o círculo cromático, percebemos as três cores primárias, que estão destacadas com o texto mais escuro: amarelo, vermelho e azul. Da junção das cores primárias, temos as três cores secundárias, que são o laranja (amarelo+vermelho), o violeta/roxo (azul+vermelho) e o verde (azul+amarelo). Da junção de uma cor primária com uma secundária, temos as seis cores terciárias:

• ‣Amarelo-esverdeado (amarelo+verde)
• ‣Amarelo-alaranjado (amarelo+laranja)
• ‣Vermelho-alaranjado (vermelho+laranja)
• ‣Vermelho-arroxeado (vermelho+roxo)
• ‣Azul-arroxeado (azul+roxo)
• ‣Azul-esverdeado (azul+verde)

ao dar um nome a uma cor terciária, primeiro por o nome da cor primária e depois a cor secundária.

ao fazer um site, paleta de cores deve girar em torno de 3 à 5; desconsiderar branco e preto; não esquecer da teoria das cores

se meu cliente tiver uma logo que é importante para o negócio, verificar a cor primária dessa logo; paleta.

Temperatura e Harmonia

Olhando o círculo cromático, também conseguimos classificar as cores por sua temperatura. Dá só uma olhada na imagem a seguir:

As cores quentes, criam uma sensação de calor e proximidade. Já as cores frias, estão associadas a sensações mais calmas, de frescor e tranquilidade. Além da classificação por temperatura, podemos classificar as cores por esquemas harmônicos.

Cores complementares

São aquelas que apresentam o maior contraste entre si. Elas estão localizadas do lado imediatamente oposto do círculo cromático.

Se pegarmos qualquer cor primária, a sua cor complementar é sempre uma cor secundária. De forma similar, qualquer cor terciária tem uma outra cor terciária como complementar. Quando juntamos duas cores complementares, sempre obtemos o cinza.

Cores análogas

Diferente das cores complementares, que estão do lado extremo oposto no círculo cromático, as cores análogas são aquelas que são imediatamente vizinhas entre si.

Por serem cores consecutivas, as cores análogas possuem umbaixo contraste entre elas, mas criam uma bela harmoniaquando combinadas em um mesmo design.

Cores análogas mais uma complementar

Dá pra notar que essa aqui é uma combinação dos dois tipos anteriores, não é?

Essa técnica quebra um pouco o ritmo semelhante das cores análogas, adicionando uma cor que cria um grande contraste com as três análogas.

Cores análogas relacionadas

Nesse tipo de harmonia, escolhemos duas cores análogas (consecutivas) e depois pulamos uma terceira cor (em qualquer direção) e escolhemos a quarta.

Com essa técnica, conseguimos um resultado parecido com o das cores análogas simples, mas com um pouco mais de contraste sem ter que escolher uma cor complementar.

Cores intercaladas

Um tipo menos usado de harmonia, já que às vezes não funciona tão bem assim. Vamos escolher a primeira cor e depois mais duas com intervalo constante entre elas.

Na imagem ao lado, criei um exemplo onde o intervalo é constante entre as cores selecionados.

Cores triádicas

Técnica bastante utilizada e que garante uma grande riqueza de cores, onde escolhemos três pontos equidistantes no círculo cromático.

Esse esquema gera sempre um triângulo equilátero e cria uma opção que sempre possui um ótimo contraste entre as cores.

Cores em quadrado

Bastante semelhante ao esquema triádico, mas permite selecionar quatro cores com um contraste razoável entre as cores escolhidas.

Esse esquema gera sempre um quadrado perfeito com os pontos selecionados.

Cores tetrádicas

Com essa técnica, vamos escolher dois pares de cores complementares, que não serão necessariamente análogas ou consecutivas. Isso vai nos garantir dois pares de cores, com bastante contraste entre si.

Monocromia

Uma harmonia bem diferente das anteriores, que usa apenas uma cor e varia apenas a sua saturação e o seu brilho. Essa combinação geralmente gera pouquíssimo contraste entre as cores escolhidas, mas acaba gerando um resultado visual bem agradável aos olhos, conhecido como “degradê”.

Aula 4

Paleta de cores

• RGB - para monitores (red, green & blue)
• CMYK - para impressoras (cyan, magenta, yellow, key[black])
• HSV - hue, saturation & value
• LAB (???)

no "extrair tema" ele extrai as cores da foto.

no "extrair degradê(gradiente)" ele extrai um gradiente apartir da foto

este site tem visualizador de página

este site é um gerador de paletas(tecla: espaço)

Aula 5

Como capturar cores da tela?

extensão do google: Color Picker - Eyedropper Tool

Aula 6

Como criar degradê no CSS?

dentro de <head>

           
            <style>
              body{
                   background-image: linear-gradient (to right, white, blue);
                  }
            </style>
          
          

to right, to left, to top, to bottom; também tem como por com graus específicos, tipo: 90deg, 60deg, ...)

pode por a porcentagem nas cores; white 25%, blue 25%, violet 25%, pink 25%.

background-attachment: fixed; - para que o degradê fique preso ao fundo da página.

Aula 7

Criando um exemplo real

          
           <main> </main>
           
           style.css
           
           @charset "UTF-8";
           
           *{
             font-family: Arial, Helvetica, sans-serif;
            }
            
           body{
                background-image: linear-gradient (to bottom, #e9c46a, #f4a261);
               }
               
           main{
                background-color: white;
                border-radius: 10px;
                box-shadow: 5px 5px 15px rbga (134, 90, 54, 0.63);
                width: 600px;
                padding: 10px;
                margin: auto;
               }
               
           h1{
              color: #e76f51;
              text-align: center;
              text-shadow: 1px 1px 2px rgba (119, 57, 41, 0.906);
             }
             
           h2{
              color: #264653;
             }
             
           p{
             text-align: justify;
            }
            
          
          

Aula 1

Primeiros passos em Tipografia

Johannes Gutenberg, Pai da imprensa(1450); prensa mecânica de tipos móveis

tipos móveis; pecinhas(letras) de metal ou madeira or argila

os chineses foram os primeiros a criarem o conceito de prensa com tipos móveis, mas Gutenberg acabou ficando reconhecido antes

arrumar pecinhas num lugar lá, sujar de tinta, por no papel, fechar a tampa, prensar, dava "2" folhas; 📖

Tipoggrafia - estudo de como escrever algo no papel

Tipo - týpos - por algo no papel

Grafia - graphía - escrita

cores, tal qual tipografia, transmitem emocões

Importante: Design - cores boas, images boas & tipografias boas

Fonte, letra e família

Glifos, letras, caracteres

São os signos alfabéticos projetados para reprodução mecânica.

Família tipográfica

É o conjunto de glifos que possuem as mesmas características anatômicas, independente das suas variações.

Vou exemplificar esse conceito com o exemplo a seguir: a família tipográfica Open Sans possui várias configurações de peso (de 300 a 800). Mesmo parecendo representações bem diferentes, todos eles fazem parte da mesma família tipográfica.

Fontes

As fontes são conjuntos de glifos que formam uma família tipográfica. O termo fonte também é aplicável ao arquivo digital que armazena todos os formatos de glifos que compõem uma determinada família tipográfica.

As fontes falam?

No capítulo anterior nós falamos sobre a importância de escolher uma boa paleta de cores para o nosso projeto. Também precisamos saber escolher as famílias tipográficas que utilizaremos em um site. As fontes também podem passar emoções.

Vamos a um exemplo?

Imagine que eu tenha que representar a palavra “amor” através de uma determinada tipografia. Qual das opções abaixo você escolheria?

Com toda certeza, a maioria das pessoas escolheria a segunda opção. Sabe o por quê? A palavra “amor” tem mais a ver com uma representação mais suave e fluida, não algo mais robusto e forte. E mesmo sem te dizer isso, provavelmente a escolha do tipo fez isso por mim.

O problema é que a escolha não é tão simples assim. Na representação acima, com uma palavra curta e isolada, conseguimos ler facilmente a palavra “amor” em qualquer uma das opções de fontes escolhidas. Chamamos isso de legibilidade. Mas basta colocarmos uma frase maior para as coisas ficarem um pouco confusas.

No exemplo anterior, mesmo que todas as palavras tenham uma legibilidade razoável (até dá pra entender), a leiturabilidade não é tão boa assim. Essa segunda característica diz respeito à fluidez que conseguimos ter na leitura.

Sendo assim, escolher um bom tipo é essencial para cada caso. Não povoar nosso site com tipos diferentes também é uma ótima ideia. No máximo dois ou três tipos já estaria ótimo.

Vamos conhecer agora algumas características anatômicas dos tipos para nos ajudar a escolher boas fontes para nosso site.

Aula 2

Anatomia do tipo

Vamos analisar cada uma das partes de um tipo. Volte sempre para essa página ao ler a descrição de cada elemento:

• A - Altura das maiúsculas: Altura que as letras maiúsculas vão ocupar. Geralmente um pouco menor que a soma da ascendente com a mediana (< B + D)
• B - Ascendente: Parte das letras maiúsculas que se ergue acima da linha mediana
• C - Descendente: Parte das letras minúsculas que passa por baixo da linha de base.
• D - Altura-X: Também chamada de mediana, define o tamanho das letras minúsculas. Tem esse nome, pois se baseia no tamanho da letra x minúscula.
• E - Corpo: É a soma de quatro medidas: ascendente + altura-x + descendente + espaço de reserva. É o tamanho total da letra. É o valor que escolhemos ao configurar o tamanho da fonte em um texto.
• 1 - Arco: presente em letras minúsculas. Uma linha curva que nasce em na haste principal.
• 2 - Barriga: curva em uma letra maiúscula ou minúscula, fechada, ligada à haste vertical em dois pontos.
• 3 - Braço: traço horizontal ou inclinado, ligado à haste vertical principal de uma letra maiúscula ou minúscula.
• 4 - Cauda: apêndice do corpo de algumas letras (g, j, J, K, Q, R), que fica abaixo da linha base.
• 5 - Enlace: a forma como uma haste, linha ou filete se liga a um arremate, a uma serifa ou a um terminal. Pode ser angular ou curvilíneo.
• 6 - Espinha: curva e contracurva estrutural da letra S.
• 7 - Esporão: uma projeção que encontramos nas letras b e G.
• 8 - Filete: haste horizontal ou inclinada, fechada nas duas extremidades, por duas hastes ou por uma curva.
• 9 - Haste: traço principal de uma letra, geralmente vertical.
• 10 - Olho: espaço em branco, fechado, dentro de uma letra.
• 11 - Orelha: apêndice presente na letra g, que pode ser em gota, botão, bandeira ou gancho.
• 12 - Pé: terminal ou serifa horizontal que arremata uma perna na parte de baixo.
• 13 - Perna: haste vertical ou inclinada com um extremidade livre (ou com um pé) e outra extremidade ligada ao corpo da letra.
• 14 - Serifa: também chamada de apoio ou patilha. Pequenas retas que ornamentam as hastes de alguns tipos.
• 15 - Terminal: forma que arremata a extremidade de uma linha curva de uma letra.
• 16 - Vértice: também chamada de ápice. Formada pela convergência de duas hastes que se encontram. Pode ser pontiagudo, oblíquo, plano ou redondo.

quando for por uma fonte nas CSS temos que sabor o tamanho(altura) do corpo

A - E - items métricos

1 - 16 - items anatômicos

a serifa ajuda a guiar a leitura

glifo é cada letra/caractere de uma fonte e os glifos juntos formam a fonte

cada glifo pode ter uma variante, mas nem todas tem todas essas variantes:

light, normal, semibold, bold, extra bold

Categorias de fontes

Aula 3

Famílias de fonte com CSS

          
           <style>
                body{
                     font-family: Arial, Helvetica, sans-serif;
                    }
          
          

é uma boa ideia por umas três fontes pq se o dispositivo não reconhecer um, provavelmente vai reconhecer o outro; safe combinations

font-family: sans-serif; - comando genérico; todos os dispositivos vão ler

font-family: serif; - mesmo coisa de cima, mas com serifa; possibilidade de algum dispositivo não conseguir ler

font-family: monospace; - mesmo coisa de cima, mas com serifa; possibilidade de algum dispositivo não conseguir ler

sempre por um desses comandos genéricos depois da fonte que você quer usar

Aula 4

Tamanho de fonte e suas medidas

para especificar tamanho de fonte, existe várias medidas como:
• cm - centímetros
• in - polegadas
• pt - pontos
• pc - paicas
• px - pixels
• etc

para tamanhos de fonte a serem exibidos na tela, o W3S recomenda o uso do px ou do em

a medida em é uma das que gera mais dúvida nos alunos. Ela é uma medida referencial em relação ao tamnaho original da fonte. O tamanho padrão de uma fonte é geralmemte 16px, isso equivale a 1em.

a partir daí, podemos configurar o tamanho de um título, por exemplo, como sendo 2 vezes maior que a fonte padrão usando o valor 2em para a propriedade.

          
           h1{
              font-family: 'Franklim Gothic Medium', 'Arial Narrow', Arial, sans-serif;
              font-size: 2em;
             }
             
           h2{
              font-family: 'Times New Roman', Times, serif;
              font-size: 1.5em;
             }
          
          

Outros estilos

existem outras formatações muito usadas em CSS, que são as propriedades font-style para aplicar o itálico e font-weight para aplicar o negrito, sem contudo, existir os fatos semânticas discutido no capítulo 8

O padrão para essas duas propriedades é o valor normal, mas podemos aplicar o valor itálico ao font-style usando italic (mais compatível) ou oblique (menos compatível). Já o negrito, pode ser aplicado por nomes como lighter, bold e bolder ou pelo peso numérico, como indicado na imagem.

Medidas Absolutas

• cm - nem todos os navegadores conseguem mostrar
• mm(milímetros) - também tem a questão de ter um tamanho diferente
• in(inch)
• pt - medidadas usadas em impressão e não para telas(tipografia)
• px - mais usada - certas telas tem os pixels arranjadas de maneiras diferentes então não tem como depender 100% dessa medida.
• pc - tipografia também

Medidas Relativas

• em - mais usado - relativo ao tamanho da letra "M" maiúsculo - medida em relação ao tamanho da fonte
• ex - em relação a letra "x"
• rem - tipo "em", mas relativo ao root; fonte configuração no body
• vw - viewport width - (contente="width= device-width, inicial-scale=1.0")
• vh - viewport height
• % - porcentagem

o W3 recomenda usar somente as medidas px & em no font-size.

6px é a norma mesmo se não especificar o font-size

editores de texto são em pt porque a ideia é de que vai ser impresso o documento

geralmente 16px=1em

1em = tamanho normal da fonte
2 em = o dobro do normal

é melhor usar em porque ele é relativo a porcetagens e é bem melhor para mostar em tela diversas, desde tvs à smartwatches

Aula 5

Peso, estilo & shorthand font

font-weight:___;

• lighter
• normal
• bold
• bolder

100 á 900; 400 sendo normal

font-style:___; - italic

font-decoration:___; - underline(sublinhado)

Exemplo:

          
           h1{
              font-family: 'Work Sans', sans-serif;
              font-weight: bolder;
              font-size: 3em;
              font-style: italic;
             }
          
          

shorthand font
font-style -> font-variant -> font-weight -> font-size/line-height -> font-family;

Exemplo:

          
           h1{
              font: italic bolder 3em 'Work Sans', sans-serif;
             }
             
           h2{
              font: bold 2em 'Work Sans';
             }
          
          

Aula 6

Usando Google Fonts

fonts.google.com

@import - regra

body - seletor

o que fica entre {} - declaração

font-family: 'Work Sans', Ariel, Vendana, sans-serif;

Geralmente só usar 3 - 4 famílias de fontes:
• uma para grandes títulos
• uma para parágrafos
• e uma para destaques

Aula 7

Usando fontes externas baixadas

DaFont.com - baixar a fonte que quiser(verificar se tem acentuações) - retirar do .zip e da pasta - e por numa pasta chamada "fonts"(fazer a pasta) no arquivo que é o site

          
           @font-face{
                 font-family: 'Lovely Valentine Script';
                 src: url('fonts/Lovely Valentine Script.ttf') format('truetype'), url('fonts/Lovely 
                 Valentine Script.otf') format('opentype');
                  font-weight: normal;
                  font-style: normal;
          
          

Tipos de format()
• opentype (otf)
• truetype (ttf)
• embedded-opentype
• truetype-aat (Apple Advanced Typografy)
• svg

Aula 8

Capturando as fontes usadas em um site

• chrome web store
• Fonts Ninja - fonts textuais (não pega em inglês); não precisa fazer a assinatura

Como descobrir uma fonte que está sendo usada em outro site?

No capítulo anterior, te ensinei a usar a extensão Colorzilla para pegar uma cor que estava sendo usada em outro site. Agora vou te ensinar a usar a extensão Fonts Ninja do Google Chrome para capturar a fonte usada em componentes de texto.

Acesse novamente o site do Chrome Web Store e procure pela extensão Fonts Ninja (ensinei como fazer isso no capítulo anterior). Uma vez instalada e ativa, a extensão ficará ao lado da barra de endereços, assim como o Colorzilla.

Abra um site qualquer, selecione o trecho de texto que quer identificar (recomendo selecionar poucas palavras) e clique sobre o botão do Fonts Ninja (veja na imagem a seguir).

Além de mostrar qual foi a família tipográfica utilizada no texto selecionado, a extensão vai te indicar o tamanho e peso da fonte, o espaçamento vertical e horizontal e a cor aplicada a ele. Para isso, basta mover o mouse sobre o texto e um balão aparecerá com todas essas informações.

Aula 9

Detectando fontes dentro de imagens

• What Font Is - mais funcional e inteligente; tem que descobrir fonte por fonte; tem que otimizar a foto dentro do site para ter um sucesso maior
• Font Squirrel - tem identifier, mas não é tão bom quanto o 1º
• Mt Fonts - tem identifier, mas não é tão bom quanto o 1º

Aula 10

Alinhamento de textos com CSS

• left;
• right;
• center;
• justify;

Se você quiser por uma intrusão no começo de um parágrafo como se fosse uma redação, é só fazer: text-intent:nºpx;

Aula 1

Usando o id com CSS

࠰Seletores personalizados

<h1 id="principal">

           
            h1#principal{
                         text-aligh: center;
                        }
           
           

só vai afetar os h1s que tiverem esse id, mas se tiver só #principal, todos as tags que tiverem o id "principal" vão ser afetadas

• em HTML é id = em CSS é #
• em HTML é class = em CSS é . (ponto final)

Aula 2

As diferenças entre id e class

28 de Julho de 2025

Exemplo: (cor diferente para cada class)

           
            <h2 class="basico"> = .basico{
                                          color: #____;
                                            }
                                            
            <h2 class="intermediario"> = .intermediario{
                                          color: #____;
                                            }
                                            
            <h2 class="avancado"> = .avancado{
                                          color: #____;
                                            }
           
           

id - só podemos usar um id para um único elemento; um por documento/html; tecnicamente funciona, mas não é pra usar

class - porém, podemos atribuir um mesmo class para vários elementos que possuam essa mesma característica

Exemplo: <h2 class="avançado destaque">

Outro exemplo: <h1 id="principal" class="avançado destaque">Criando sites HTML e CSS</h1>

<span></span> - A tag <span> em HTML é um elemento de linha genérico usado para agrupar conteúdo, geralmente para estilização ou manipulação com CSS ou JavaScript. Ela não possui significado semântico próprio, ao contrário de outras tags como <p> (parágrafo) ou <h1> (título); é tipo um marca texto.

Aula 3

Pseudo-classes em CSS

relacionado ao estado de um elemento

• pseudo-class -> :
• class -> .
• id -> #

:hover -> when hovering over something, it will change

          
                <style>
                   div > p{
                           display:none;
                   }
              
> - child
              
o <p> dentro do div não vai aparecer
              
                   div:hover > p{
                            display:block;
                            color: white;
                            background-color:red;
                            width: 300px;
                            }
              
ao passar por cima do div, o <p> escondido vai aparecer nessas configurações
              
                   div:hover{
                        color:red;
                        }
              
passou em cima do div, que nesse caso é um texto, ele vai ficar vermelho
                </style>
                </head>
                 <body>
                  <h1>Exemplo de hover</h1>
                   <passe o mouse sobre o texto abaixo</p>
                   <div>
                       Passa o mouse aqui
                       <p>TEXTO ESCONDIDO!</p>
                   </div>
                   <p>Fim do exemplo</p>
                 </body>
                </html> 
          
          

Aula 4

Pseudo-elementos em CSS

29 de Julho de 2025

• # = id
• . = class
• : = pseudo-class
• :: = pseudo-element
• > = children

:visited, :active -> pseudo-classes

          
            body{
             font-family: Arial, Helvetica, sans-serif;
            }
            
            a{
             color: red;
             text-decpration: none;
             font-weight: bold;
            }
            
            a:visited{   -> quando o site já foi visitado
             color: darkred;
            }

            a:hover{
             color:black;
             text-decoration: underline;
            }

            a:active{   -> quando clica no link
             color: yellow;
           }
           
           
Os pseudo-elementos interferem com os perifericos do conteúdo; funcionam com id e class. Exemplo:
           
            a::after{
             content: ' [link] ';
             text-decoration: none;
             font-weight: normal;
             color:darkgray;
            }
            
            
            <li><a href="https://youtube.com/cursoemvideo" target="_blank" 
            class="especial">Canal do YouTube</a></li>
            
            .especial{
             background-color: darkgray;
             color:white;
            }
        
            .especial::before{
             content: ' ☢ ';
             color:yellow;
            }

            .especial::after{
             content: ' ☠ ';
             color: black;
            }
          
          

/*algo que você quer escrito no código, mas não na página*/

Aula 1

Modelo de Caixas: primeiros passos

6 de Agosto de 2025

O que é uma caixa?

De forma simples e objetiva, baseado em um conceito chamado “box model”, a grande maioria dos elementos HTML que temos no nosso site são como caixas. Elas são containers que armazenam conteúdos ou até mesmo outras caixas.

Anatomia de uma caixa

Vamos analisar como uma caixa vai ser apresentada por todos os navegadores. Olhe atentamente o diagrama a seguir, que é exatamente o já citado modelo de caixa:

Tudo começa a partir do conteúdo (content), que representamos acima com o bla bla bla… Por padrão, toda caixa é composta apenas pelo conteúdo e não possui padding, nem border, nem outline e nem margin. Uma exceção curiosa é o elemento <body> que já vem com uma margin de 8px.

Todo conteúdo possui uma largura (width) e uma altura (height) e a esse conjunto de propriedades, damos o nome de box-size (tamanho da caixa). O tamanho da caixa não inclui as medidas de padding, border, outline e margin.

Depois do conteúdo e de seu tamanho, vamos nos focar na borda que fica em volta dele. Ela pode ter uma espessura, uma cor e um formato.

Entre a borda e o conteúdo - da borda para dentro - temos o preenchimento (padding) e da borda para fora, temos a margem (margin).

Entre a margem e a borda, podemos determinar o contorno (outline) que é muito pouco utilizado, mas existe. Ele é um traçado visual que podemos criar fora da borda e o cálculo da sua espessura faz parte da margem estabelecida.

NOVIDADE DAS CSS3: Existe a nova propriedade box-sizing onde podemos definir que as dimensões height e width não são medidas apenas a partir do conteúdo (content-box) e sim pela borda (border-box).

Tipos de Caixa

Dependendo do comportamento da caixa, podemos classificar um elemento em uma de duas categorias:

Caixa do tipo block-level

Um elemento dito block-level sempre vai se iniciar em uma nova linha e vai ocupar a largura total do elemento onde ele está contido. Se não estiver contido em nenhuma outra caixa, ele vai ocupar 100% da largura do <body>.

O elemento block-level mais conhecido é o <div> e suas variações semânticas modernas da HTML5, como <main>, <section>, <aside>, etc.

Na lista a seguir, coloquei alguns elementos HTML que são block-level:

Caixa do tipo inline-level

Um elemento do tipo inline-level não vai começar em uma nova linha, e sim no ponto exato onde foram definidos. E a largura dele vai ocupar apenas o tamanho relativo ao seu conteúdo.

Abaixo, listei alguns elementos inline-level usados pela HTML:

Aula 2

Modelo de Caixas na prática (pt.1)

mouse -> botão direito -> Developer Tools -> Inspect

para desgrudar o Inspect do navegador: 3 pontinhos lá em cima -> docksize -> unlock into separate window

e se quiser deixar ele grande: ctrl +

User Agent é o navegador

border-style:
• solid;
• dashed;
• dotted;
• double;
• groove;

quando fazer o padding, fazer nesta ordem:
• top
• right
• bottom
• left

Aula 3

Modelo de Caixas na prática (pt.2)

7 de Agosto de 2025

Margens no automático

Um recurso que também vai ser muito usado em nossos exercícios é a centralização de blocos. Para que isso seja feito, devemos pedir que o navegador calcule automaticamente as margens da esquerda e da direita para que o bloco seja colocado no meio do navegador, independente do tamanho da janela.

Para centralizar uma caixa, use a seguinte declaração no seu seletor:

Dá pra simplificar?

As configurações de borda e contorno também possuem shorthands para simplificar o código anterior. A ordem para as duas configurações é sempre a mesma para as duas shorthands: largura (-width), estilo (-style) e cor (-color).

Preenchimento e margem personalizados

Todo elemento de caixa possui quatro valores para padding e quatro para margin, sempre nessa mesma ordem: superior (-top), direita (-right), inferior (-bottom), esquerda (-left). Quando colocamos um único valor de dimensão para o preenchimento ou margem, esse mesmo valor é aplicado simetricamente a todas as direções, mas também podemos fazer códigos como:

Também existe a opção de indicar cada shorthand das propriedades de preenchimento e borda usando apenas duas medidas:

Essa simplificação só é possível quando as medidas -top e -bottom forem iguais entre si e o mesmo também ocorrer entre as medidas -right e -left.

Se eu quiser fazer um elemento virar outro: block-level p/ inline-level -> display: inline;

inline-level p/ block-level -> display: block;

Aula 4

Grouping Tags em HTML5

Grouping Tags e Semantic Tags

A linguagem HTML padrão tinha apenas duas tags de agrupamento genérico: a <div> e a <span>. A diferença básica entre elas é que a primeira é um elemento agrupador do tipo block-level e o segundo é inline-level. No mais, eles agem exatamente da mesma maneira, servindo para juntar vários outros elementos HTML.

Com o surgimento da HTML5, surgiram as tags semânticas de agrupamento. Isso não significa que as <div> e <span> (agora chamadas de não-semânticas) deixaram de existir ou ficaram obsoletas, mas seu uso agora faz menos sentido, pois temos tags para dividir as partes do nosso documento HTML.

Vamos compreender a partir de agora os principais agregadores semânticos da HTML5.

Header

Cria áreas relativas a cabeçalhos. Pode ser o cabeçalho principal de um site ou até mesmo o cabeçalho de uma seção ou artigo. Normalmente inclui títulos <h1> - <h6> e subtítulos. Podem também conter menus de navegação.

Nav

Define uma área que possui os links de navegação pela estrutura de páginas que vão compor o website. Um <nav> pode estar dentro de um <header>.

Main

É um agrupador usado para delimitar o conteúdo principal do nosso site. Normalmente concentra as seções, artigos e conteúdos periféricos.

Section

Cria seções para sua página. Ela pode conter o conteúdo diretamente no seu corpo ou dividir os conteúdos em artigos com conteúdos específicos. Segundo a documentação oficial da W3C, “uma seção é um agrupamento temático de conteúdos, tipicamente com um cabeçalho”.

Article

Um artigo é um elemento que vai conter um conteúdo que pode ser lido de forma independente e dizem respeito a um mesmo assunto. Podemos usar um <article> para delimitar um post de blog ou fórum, uma notícia, etc.

Aside

Delimita um conteúdo periférico e complementar ao conteúdo principal de um artigo ou seção. Normalmente um conteúdo <aside> está posicionado ao lado de um determinado texto ou até mesmo no meio dele, exatamente como fizemos no bloco de texto apresentado anteriormente, falando sobre “MÚLTIPLOS NÍVEIS”.

MÚLTIPLOS NÍVEIS: A sua criatividade e planejamento vai definir a estrutura do seu site. Sendo assim, é possível ter um ou mais <article> dentro de uma <section> ou até mesmo criar <section> dentro de um <article>. Não existem limitações quanto a isso.

Footer

Cria um rodapé para o site inteiro, seção ou artigo. É um conteúdo que não faz parte diretamente do conteúdo nem é um conteúdo periférico (o que caracterizaria um <aside>), mas possui informações sobre autoria do conteúdo, links adicionais, mapa do site, documentos relacionados.

A seguir, vou criar uma proposta de estrutura para um projeto de site. Não tome ela como a única possibilidade de criar o posicionamento de elementos de agrupamento semântico.

Analise o diagrama do lado esquerdo e o código do lado direito da imagem acima. Veja a hierarquia entre os elementos e quais deles estão dentro um do outro.

Aula 5

Sombra nas Caixas

box-shadow: (se não escrever nada no início, vai ser outset(sombra pra fora), se por inset(sombra pra dentro) vai ficar com cara de afundado)) 2px(eixo x) 2px(eixo y) 2px(blur) 1px(spread) black;

As sombras são muito úteis para dar volume, para dar a sensação de que as caixas estão ali realmente. Para exemplificar, vamos criar o seguinte código base:

Olhando para o corpo da página, temos apenas um <article> (linha 22) com um breve conteúdo. A configuração de estilo (linha 7 em diante) faz com que esse artigo seja configurado como uma pequena caixa centralizada. O resultado visual está apresentado a seguir:

Para criar uma sombra nessa caixa, vamos adicionar uma declaração especial na linha 17, substituindo o comentário que deixei lá.

1. Deslocamento horizontal (h-offset): quanto a sombra vai andar para o lado direito (valores negativos causam deslocamento para a esquerda)
2. Deslocamento vertical (v-offset): quanto a sombra vai andar para baixo (valores negativos causam deslocamento para cima)
3. Embaçamento (blur): quanto a sombra vai se espalhar pelo fundo
4. Cor (color): cor da sombra. É possível usar transparência.

MUITO CUIDADO! Não exagere no uso de sombras, pois elas podem tornar o seu efeito visual muito pesado. Evite também usar sombras coloridas. Olhe ao seu redor e perceba que as sombras são sempre pretas. Use cores rgba() para obter uma transparência que cause efeitos mais suaves.

Aula 6

Caixas com vértices arredondadas

border-radius: 20px(topo esquerdo) 20px(todo direita) 20px(baixo direita) 20px(baixo esquerda)

Vértices arredondados

Podemos arredondar os vértices usando uma declaração simples usando a propriedade border-radius. Adicione o seguinte comando ao seletor do artigo do exemplo que estamos criando:

Na declaração acima, todos os vértices foram levemente arredondados (10px) de forma simétrica. Se for necessário, podemos indicar quatro medidas diferentes, uma para cada vértice. Olhe atentamente para o resultado abaixo e perceba que cada ponta está diferente.

Assim como fizemos com as margens, também é possível indicar apenas dois valores, o que vai agir em vértices intercalados, partindo do canto superior esquerdo.

Exercício da aula

Aula 7

Bordas decoradas

GIMP
• width: 80px
• height: 80px
• ▷Advanced Options
• x resolution: 70
• y resolution: 70
• Fill with: Transparency

reassisitir na parte do GIMP

            
              
Modo completo
              border-image-source: url('borda.png');
              border-image-slice: 27;
              border-image-repeat: repeat(também tem o stretch;);
              
              
Shorthand
              border-image: url('borda.png') 27 repeat;
            
          

mesmo com o border-image, não pode tirar o border normal, se não para funcionar, mas pode por transparente: border: 12px solid transparent;

Aula 8

Desafio do Módulo 2

O capítulo 17 vai ser ele ensinando passo a passo como fazer esse desafio