Código Aberto MZ

 O nosso site está incrível no computador. Está bonito, animado, interativo. Mas e se eu te dissesse que mais de metade dos teus visitantes provavelmente o verão num ecrã de telemóvel? Se o site não se adaptar, a experiência será péssima, com textos minúsculos e a necessidade de fazer zoom e arrastar a página para os lados. Hoje, vamos aprender a técnica essencial do desenvolvimento web moderno: o Design Responsivo . Vou mostrar-vos como usar as "Media Queries" do CSS para aplicar estilos diferentes dependendo do tamanho do ecrã, garantindo que o nosso site seja bonito e funcional em qualquer dispositivo, do telemóvel ao ecrã gigante. Parte 1: A Meta Tag Mais Importante de Todas ( viewport ) Antes de escrevermos uma única linha de CSS responsivo, temos que fazer uma coisa. Os navegadores de telemóvel, por padrão, fingem que são um ecrã de computador e depois diminuem o zoom da página. Temos que os impedir de fazer isso. Adicionem a seguinte linha de código dentro da tag <...

 Olá, equipa! Chegámos a uma das aulas mais divertidas e criativas de toda a nossa maratona. Se as Transições são sobre suavizar mudanças, as Animações são sobre criar movimento do zero! Querem fazer um título deslizar para a página? Um ícone pulsar suavemente? Uma notificação aparecer com elegância? Tudo isso é feito com Animações CSS , e a base de tudo é uma regra especial chamada @keyframes . Hoje, vamos aprender a criar as nossas próprias animações, fazendo elementos moverem-se, pulsarem e aparecerem com estilo na nossa página. A Dupla Dinâmica: @keyframes e a propriedade animation Criar uma animação em CSS é um processo de duas partes: Definir a Animação com @keyframes : Primeiro, criamos uma "receita" para a nossa animação. Damos-lhe um nome e definimos os "passos" ou "momentos-chave" (keyframes) do movimento. Podemos usar from (o estado inicial) e to (o estado final), ou usar percentagens (0%, 50%, 100%) para um controlo mais fino. Aplicar a Anim...

 Olá, equipa! Bem-vindos à aula onde vamos adicionar um toque de elegância e fluidez ao nosso site. A web moderna é fluida. Os elementos não aparecem e desaparecem; eles deslizam, desvanecem, mudam de cor suavemente. Essa elegância não é feita com JavaScript complicado. Na maioria das vezes, é uma única linha de CSS: a propriedade transition . Hoje, vamos aprender a animar as mudanças de estado dos nossos elementos (como quando passamos o rato por cima), para criar interfaces mais agradáveis e profissionais. O Que é uma Transição? Uma transição em CSS é uma instrução que damos ao navegador. Dizemos-lhe: "Quando uma propriedade de um elemento mudar (por exemplo, a cor de fundo), não a mudes instantaneamente. Leva X segundos para fazer essa mudança de forma suave." A propriedade transition é um atalho para quatro propriedades: transition-property : Qual propriedade queremos animar ( all , background-color , width , etc.). transition-duration : Quanto tempo a animação deve dura...

 Olá, equipa! Na aula passada, construímos a estrutura do nosso formulário de contato. Ele funciona, mas sejamos honestos: é feio. Ninguém se sente inspirado a preencher um formulário com a aparência dos anos 90. A boa notícia é que não precisa de ser assim. Hoje, vamos pegar nesse esqueleto HTML e vesti-lo com o poder do CSS. Vou mostrar-vos como estilizar cada parte do nosso formulário — os campos de texto, as etiquetas e os botões — para que ele fique limpo, moderno e convidativo. Parte 1: A Estrutura Base e o Espaçamento Primeiro, vamos dar ao nosso formulário um contentor e algum espaço para respirar. No nosso estilos.css , vamos adicionar o seguinte: CSS form { max-width : 600px ; /* O formulário não ficará demasiado largo em ecrãs grandes */ margin : 40px auto; /* Centra o formulário na página com margem em cima/baixo */ padding : 20px ; background-color : #ffffff ; border-radius : 8px ; box-shadow : 0 4px 8px rgba ( 0 , 0 , 0 , 0.1 ); } form ...

 Até agora, os nossos sites têm sido uma "rua de sentido único". Nós apresentamos informação, e o visitante consome. Mas a web é sobre diálogo, sobre interação. E a principal ferramenta para iniciar esse diálogo é o formulário HTML . Seja para uma página de contato, uma caixa de login, um campo de pesquisa ou uma compra online, os formulários estão em todo o lado. Hoje, vamos construir a fundação, aprendendo as tags e os atributos essenciais para criar um formulário de contato simples, mas funcional. Parte 1: A Estrutura Principal - <form> , <label> e <input> Tudo começa com a tag <form> , que serve como o contentor principal para todos os nossos campos. Dentro do formulário, os dois elementos mais importantes são: <input> : É o campo onde o utilizador insere os dados. Existem muitos tipos de input ! <label> : É a etiqueta de texto que descreve o que o input pede (Ex: "O seu Nome:"). É crucial para a acessibilidade. Vamos ao n...

 Olá, equipa! Bem-vindos de volta ao nosso ateliê de design digital. Já construímos a estrutura da nossa casa com HTML Grid e já organizámos os móveis com Flexbox. Agora, está na hora de escolher as cores das paredes, pendurar quadros e talvez até criar uma parede de destaque com um efeito especial. Hoje, vamos mergulhar a fundo no mundo das cores e fundos em CSS. Vou mostrar-vos as diferentes formas de usar cores, como colocar imagens de fundo e o truque para criar os populares efeitos de gradiente (degradê) que vemos em tantos sites modernos. Parte 1: As 3 Formas de Usar Cores em CSS Existem várias formas de dizer ao CSS que cor queremos, mas três são as mais importantes que precisas de conhecer. Nomes de Cores (Keywords): A forma mais simples. Podes simplesmente escrever o nome da cor em inglês. color: red; background-color: lightblue; É fácil, mas muito limitado. Existem apenas cerca de 140 nomes de cores padrão. HEX (Hexadecimal): Esta é a forma mais comum que vais encontr...