Offset CSS
Exemplo 01: deslocamento de deslocamento
Para usar a propriedade de deslocamento para fornecer espaço transparente entre a borda do elemento e seu esboço, devemos ter que criar uma seção "div" na página da web. Iniciamos este código com a tag html e terminamos com a tag de fechamento HTML. Dentro da etiqueta corporal, usamos a tag "Div" para criar uma seção na página da web html. Esta tag "Div" contém apenas um título ou sentença simples de três palavras e foi fechada com a quebra da linha adicionada pela tag da linha de interrupção "
”.
Dentro da tag "Head" deste código HTML, estamos titulando esta página da web para "desligar-se" e usar a tag "estilo" para estilizar a seção "Div" da nossa página HTML. Adicionamos margens de 10 pixels para a seção "Div", juntamente com a fronteira de 5 pixels Solid Crimson. A cor de fundo para esta seção "div" seria "aqua" e o contorno seria de cor violeta tracejada de 4 pixels. Também usamos a propriedade "esboço" para fornecer uma lacuna de 15 pixels entre a fronteira da seção "Div" e seu esboço. Vamos salvar este código e executá -lo com o menu "Executar" do Código do Visual Studio.
Após a execução bem -sucedida deste código no navegador Chrome, temos a saída abaixo da página HTML. Aqui está uma lacuna clara entre a fronteira carmesim de 5 pixels da tag Div e seu contorno de cor violeta de 4 pixels de 4 pixels. Você pode ver que o espaço não tem cor.
Exemplo 02: Posição de deslocamento
Aqui está o uso da propriedade de posição de deslocamento do CSS para especificar a posição inicial de qualquer elemento da página da web html. Vamos começar com o uso de tags de abertura e fechamento de HTML. Dentro desta tag, estamos usando o corpo e as tags de cabeça. A etiqueta corporal contém 2 títulos simples de tamanho 2 com títulos diferentes primeiro. Depois disso, duas tags "div" foram usadas. A tag "div" externa foi especificada com o id "a" enquanto sua tag "div" interna foi especificada com o id "b" para diferenciação em estilo.
As tags "div" e corporais estão fechadas aqui. Dentro da tag "Head", usamos a tag de título para tocar esta página da web html e a tag de estilo para adicionar algum estilo ao corpo da nossa página da web. Temos usado o "#a" para estilizar a tag "div" externa usando seu id "a". A posição de deslocamento para esta seção "div" foi especificada com o valor "parente". Sua largura e altura seriam especificadas como 200px com a borda de cor vermelha sólida de 5px em torno deste "div". A posição da etiqueta interna “div” foi definida como absoluta, relacionada ao elemento adjacente. A largura e a altura da seção interna “div” são definidas como 75Pixel com a fronteira carmesim de 5px Solid.
O espaço superior e esquerdo ou preenchimento foi definido em relação à seção externa para esta “div”: topo: 180px e esquerda: 7px. Nosso código agora está pronto para ser executado no navegador.
O uso do valor "relativo" para a propriedade de posição de deslocamento coloca a seção "Div" externa em relação aos outros elementos da nossa página HTML. Enquanto o uso do valor da posição "absoluto", juntamente com a definição do topo e o preenchimento esquerdo, está colocando a "div" interna no meio da seção externa "div".
Exemplo 03: Offset-Path e Offset-Anchor
Vamos tentar usar a propriedade Offset-ncor e Offset Path para criar animação na página da Web HTML. O mesmo título foi dado a esta página da web. Dentro da etiqueta corporal, usamos tags de três seções para criar seções diferentes na página da web seguidas pelas tags "div" para diferenciá-las. Todas as três tags “div” contêm um único texto dentro e foram especificadas com três classes diferentes: a, b e c. A parte principal deste código HTML é sua tag de estilo que contém muitas propriedades CSS para animar três tags. Todas as três tags "div" contêm a propriedade de deslocamento para se mover ao longo do caminho definido para ela, para que não seja tão linear. A largura e a altura dos três elementos div seriam 100 e 30 pixels, respectivamente. A animação foi definida para mover elementos de div, juntamente com a velocidade de 3000 milissegundos sem parar. Assim, o atributo infinito é usado. Aí vem o elemento de seção para estilo. Sua imagem de fundo seria um gradiente linear e seria 49 % transparente do topo, 50 % preto da esquerda, direita e média e 62 % transparente de baixo do fundo. Além disso, cada seção conteria borda sólida de 2 pixels e margens de 10 pixels de baixo.
A propriedade Offset-Anchor foi usada para especificar um ponto no elemento "Div" para viajar ao longo do caminho que foi definido pelo uso da propriedade "Offset-Path" no estilo principal de "div". Isso significa que o ponto de um elemento "div" estaria se movendo no caminho não linear específico em nossa tela da página da web. As diferentes cores de fundo para esses elementos “div”, cor de texto e alinhamento de texto para esses elementos foram definidos. Vamos salvar e executar este código para ver as alterações.
Todos os três elementos div se moverão ao longo do caminho não-linear não-fixo em três seções diferentes, como mostrado abaixo. Esses três elementos são rotulados como um, dois e três; movendo -se da esquerda para a direita da tela.
Atualizamos o código e usamos os diferentes valores para propriedades de deslocamento dentro do estilo deste código HTML. Este caminho faria nossos elementos div se moverem em um movimento em zig-zag. Além disso, atualizamos a altura e a largura dessas seções div para 40 pixels. A distância do movimento também é adicionada enquanto o resto é inalterado.
A saída deste código atualizado está nos mostrando três pequenos elementos de div com movimento em zigue-zague ao longo de cada uma de suas seções.
Conclusão
Este artigo é sobre o uso de diferentes propriedades de deslocamento para estilizar e animar os diferentes elementos de uma página da web html. Fornecemos exemplo usando a propriedade Offset-Outline para adicionar espaço entre a borda e o contorno de um elemento específico. Outro exemplo é usado para demonstrar o uso da propriedade de posição de deslocamento para posicionar o elemento específico em relação a outros elementos no corpo. Tentamos também animar e mover os elementos HTML na tela do navegador em algum caminho específico usando o Offset-âncor e as propriedades do caminho deslocado.