Redimensionar elementos com css e douglas o robô javascript

Cada elemento em um documento HTML é um retângulo. Mesmo se um elemento parece um círculo (como os olhos de Douglas), é realmente tratado como um retângulo em torno do círculo. Porque tudo é um retângulo, você pode alterar o tamanho dos elementos com CSS ajustando sua largura e altura.

Para começar, abra o navegador web e log no dashboard pública. Em seguida, siga estes passos:

1. Encontre o violino chamado Capítulo 6: Estilo Robot - Iniciar e clique no título para abrir.

   Você também pode ir diretamente para o aplicativo Robot.

   Você verá uma tela com HTML no painel HTML e alguns CSS no painel CSS.

2. Clique Fork no menu superior para fazer uma cópia do violino em sua própria conta jsFiddle.

Ao medir a largura ea altura das coisas no mundo real, você usa unidades de medida tais como polegadas, centímetros ou metros. Quando você medir as coisas no mundo do CSS, você tem várias unidades de medida diferentes. Esses incluem px (pixels) e % (por cento):

• Píxeis: O pixel é o menor ponto que pode ser exibido no seu navegador web. Ao especificar larguras e alturas usando pixels, você diz ao navegador exatamente quantos pixels de largura e altura de um elemento deve ser. O problema com o uso de pixels para medições é que ele sempre mostra coisas do mesmo tamanho - mesmo se a janela do navegador do usuário é muito grande ou muito pequeno.

• Por cento: Ao especificar larguras e alturas com por cento, você está dizendo o navegador para fazer o elemento de uma determinada porcentagem do tamanho do pai do elemento.

Você especificou todas as medições de Douglas usando cento. Isso é benéfico, porque isso significa que, independentemente de se você está olhando para Douglas sobre um telefone móvel ou no Jumbotron em Times Square, o tamanho dele vai se adaptar para caber na tela. Para ver a magia de dimensionamento relativo em ação, arraste as bordas do painel em jsFiddle para fazer o painel Resultado maior ou menor. Observe como Douglas muda de tamanho junto com o tamanho da janela.

Você pode ter ouvido o termo design responsivo. design responsivo visa criar conteúdo web que é flexível e responde ao tamanho da tela do usuário. A maneira como você especificado o tamanho de Douglas é um exemplo de design responsivo.

Faça algumas mudanças em algumas das peças de Douglas:

1. Localizar a regra CSS para a classe olho.

2. Alterar a largura para 30% e a altura para 30%.

   Você vai notar que os olhos de Douglas ficam maiores. Mas eles também não centrado em seu rosto, como mostrado aqui!

   
   Os grandes olhos de Douglas estão fora do centro.

3. Localizar a regra CSS para a classe braço.

   .braço {background-color: # cacaca-position: absolute-top: 35% -width: 5% -Altura: 40% -}

   A regra .arm CSS controla a cor eo tamanho de ambos os braços.

   A regra .arm também controla a distância dos braços a partir do topo da janela.

4. Alterar a largura dos braços para 3% e, em seguida, clique em Executar para dar Douglas braços magros.

5. 
   
   
   

   Localizar a regra CSS para o braço esquerdo de Douglas.

6. Adicionar propriedades para alterar a largura seja maior do que a altura.

   Por exemplo:

   #leftarm {posição: absoluto-esquerda: 70% -width: 27% -Altura: 5% -}

   Clique em Executar para ver a mudança. Douglas agora está apontando para fora da tela, como você pode ver aqui.

   
   Douglas está apontando!

Na última etapa, você adicionou uma largura e altura para uma regra com um selector de ID, embora o elemento selecionado já tinha uma largura e altura aplicado usando um seletor de classe.

Mesmo que já havia uma largura e altura para o braço esquerdo, o braço assumiu a nova largura e altura da regra com o seletor de ID.

cascata compreensão

braço esquerdo de um robô só pode ser uma largura e altura. Então, o que acontece quando duas regras CSS diferentes tentar definir a largura e altura do braço separadamente? O que acontece é que o navegador detém uma competição entre as duas regras CSS.

O navegador olha para fatores como qual regra CSS foi definido passado e que é mais específica para determinar qual a largura e altura vai ser realmente utilizado.

Nesta competição em cascata, atributos ID conquistar atributos de classe, porque eles são únicos para um único elemento e, portanto, mais específico do que atributos de classe.

elementos de posicionamento com CSS

Além de dar-lhe a capacidade de mudar as cores e como elementos aparecem em um navegador, CSS também permite transformar onde na tela um elemento aparecerá. Alterar o local onde um elemento aparecerá é chamado posicionamento um elemento.

Video: Vídeo Aula - Criação de Galeria de Imagem HTML + CSS + javascript

Alterar a posição de alguns de peças de Douglas:

1. Localizar a regra CSS que controla o olho direito de Douglas.

   #righteye {position: absolute-left: 20% -top: 20% -}

   A primeira propriedade, posição, diz ao navegador como interpretar as propriedades local específico (tais como superior e esquerda). Quando você usa posicionamento absoluto, o elemento selecionado (o olho neste caso) pode ser posicionado em qualquer lugar na cabeça sem a sua necessidade de se preocupar se um outro elemento na cabeça vai empurrá-lo para fora do caminho. Se dois elementos posicionados absolutamente são posicionados no mesmo lugar, eles simplesmente se sobrepõem.

   O olho direito está definido para mostrar um aumento de 20% abaixo (da altura da cabeça) a partir do bordo superior do elemento de cabeça e 20% (da largura da cabeça) para a direita da margem esquerda da cabeça.

2. Mova o olho direito para a esquerda e para cima, alterando o valor de ambos para a esquerda e de cima para percentagens menores.

   Por exemplo:

   #righteye {position: absolute-left: 10% -top: 10% -}

   Clique em Executar para ver os resultados, como mostrado aqui.

   Video: Ocultando elementos com javascript

   
   Douglas elevando seu olho direito.

   Video: Desenvolvimento Responsivo com HTML5/CSS/javascript