Doido Dev

Técnicas para centralizar elementos com position:absolute Centralizar um elemento com posicionamento absoluto é uma demanda comum no desenvolvimento front-end. O método mais conhecido utiliza valores negativos de margem, mas exige o conhecimento prévio das dimensões do elemento: .caixa { width: 600px; height: 400px; position: absolu ...

O Fontsource é uma solução para auto-hospedar fontes de código aberto utilizando pacotes NPM empacotados. Cada fonte é disponibilizada como um módulo independente, facilitando a integração em projetos web. Estrutura do Repositório O repositório do Fontsource segue uma organização modular. A esrtutura principal inclui diretórios para pacotes de ...

Estrutura Básica de um Documento HTML Um documento HTML segue uma estruutra padrão que define a base da página web. Veja um exemplo revisado: <html lang="pt"> <head> <meta charset="UTF-8"> <title>Título do Site</title> </head> <body> <!-- Elementos visíveis aqui --&gt ...

Utilizando o conhecimento combinado das tecnologias web fundamentais, vamos criar um efeito de abas populares em portais de notícias: Conteúdo textual: Imóveis: 275mil para apartamento de 3 quartos perto do metrô 200mil para apartamento de 3 quartos no anel viário Primeiro edifício sem entrada em Pequim Promoção de 5000 Yuans em ...

Ao interagir com websties, é possível adicionar elementos visuais dinâmicos, como corações ou textos decorativos, que surgem durante o clique ou movimento do mouse. Este artigo apresenta exemplos práticos de como implementar esses efeitos usando JavaScript e CSS, mantendo a performence com requestAnimationFrame. Animação de Corações ao Clicar o ...

A sintaxe básica do HTML segue o padrão: <nome-da-tag atributo1="valor1" atributo2="valor2">conteúdo</nome-da-tag>. Arquivos CSS externos permitem reutilização de estilos; basta alterar o arquivo CSS para que todas as páginas vinculadas sejam atualizadas. Ao criar uma nova página, comece com a estrutura HTML míni ...

Quando um usuário clica com o botão direito em uma página web, o navegador dispara o evento contextmenu. Para impedir o menu padrão do sistema, podemos interceptar esse evento usando event.preventDefault(). Isso deve ser feito durante a fase de captura ou alvo do fluxo de eventos DOM para garantir eficácia. Técnica 1: Interceptação com JavaScri ...

Manipulação e Formatação de Texto Este módulo explora o controle e a formatação de elementos textuais em páginas web, focando na criação de estruturas semânticas e na apresentação de conteúdo. Veremos como definir títulos, parágrafos e listas, além de entender o papel das tabelas e formulários na interação com o usuário. Exemplo de Estrutuar HT ...

Box Model do CSS Os modelos de caixa principais são o modelo padrão (W3C) e o modelo de caixa peculiar (IE). O modelo padrão define a largura total de um elemento como a soma da largura do conteúdo, borda, padding e margem. O modelo de caixa peculiar considera a largura do conteúdo como incluindo a borda e o padding, resultando em uma largura t ...

A sintaxe fundamental do CSS segue o padrão: seletor { propriedade1: valor1; propriedade2: valor2; } Vamos detalhar os diversos tipos de seletores disponíveis: Seletores de Contexto: Permitem selecionar elementos com base em seus elementos ancestrais ou irmãos. Seletores de ID e Classe: Utilizam os atributos id e class para identificar elem ...