Criar uma ilustração plana com CSS

1. Boas-vindas: Olá. Eu sou Musharraf tinha rebelde atrás e eu dou-lhe as boas-vindas à minha aula hoje. Vamos criar ilustração aguda usando apenas CSS e HTML cinco. Esta é a ilustração que vamos criar do zero. Uma mulher bonita de desenho animado. Como você pode ver, tem um design plano. Olhou para ele. - Não. Eu vou mostrar a vocês como fazer isso Em menos de 15 minutos após essa aula, vocês entenderão que há muito mais que você pode fazer com CSS depois dominar seu básico. Então, o que você está esperando? Basta abrir a próxima lição e até mergulhar diretamente no código. 2. Crie a cara: Bem-vinda de volta. Nós estaremos escrevendo todo o nosso tribunal em caneta tribunal, então basta usar seu navegador e ir para tribunal caneta dot io Você pode entrar se quiser, mas não é realmente necessário aqui. Pressionado o botão de criação e selecione a nova caneta. Nós não vamos escrever qualquer JavaScript hoje, então basta minimizar este painel. A primeira coisa que você precisa fazer é criar um elemento surdo para toda a ilustração. Agora, você pode digitar todo esse HTML do jeito antigo, mas eu sugiro que você use Emmett Instant porque é mais rápido. Então, com Emmett, tudo que você precisa fazer para criar um novo desenvolvimento que tem um nome de classe é dardo do usuário, seguido pelo nome da classe e, em seguida, pressione tab. Em seguida, dentro disso, vamos criar uma nova pomba para o rosto. Então, novamente, pressione ponto seguido de rosto e dab. Muito bem, agora, dentro do festivo, vamos criar novos desenvolvimentos para o gelo. Então eu vou chamá-los que eu quero e eu faço. Agora. Ambos o gelo vão compartilhar um monte de propriedades estações. Então vamos adicionar uma classe comum a eles. Vou chamar-lhe “Tudo bem, agora vamos precisar de um Dhofar sabe”. Da mesma forma, precisaremos de uma massa para a montagem. Ok, isso é o suficiente. É uma demonstração, por enquanto. Vamos escrever um pouco de CSS. A primeira coisa que eu vou fazer é mudar a cor de fundo de toda a página para algo um pouco mais agradável. Então, vamos selecionar o corpo da página e usar a propriedade de fundo. Vou usar uma cor rosada fraca em haxixe. F E A F 3 é bom para isso. Agora vamos começar a trabalhar na ilustração, então selecione a classe pessoa. Devemos primeiro definir sua propriedade position. Aos parentes. Desta forma, poderemos posicionar todos os elementos dentro dele com mais facilidade. Em seguida, vou colocar a ilustração em algum lugar mais perto do centro da tela. Então, digamos , 200 pixels do topo e 200 pixels da esquerda. Você é livre para usar quaisquer outros valores aqui. Tudo bem, vamos passar para a cara. Digamos que o rosto tem mais de 200 pixels e a altura de outros 100 pixels que o torna um quadrado. Ainda não conseguimos ver o rosto, então dê-lhe uma cor de fundo do hash F C oito b três. Este é um tom de pele que a maioria dos artistas usou nos dias de hoje. Nós não queremos uma face quadrada completa, então vamos arredondar seus dois jardineiros inferiores Para fazer isso, usou a propriedade de raio de troca e deixar os cantos superior esquerdo e superior direito em zero pixels . Mas altere os cantos inferior esquerdo e inferior direito para 50 pixels. Como você pode ver, isso é muito melhor. Vamos mais para o gelo agora. Primeiro, vamos trabalhar na classe comum chamada. Eu dou-lhe uma cor de fundo de haxixe. 880061 Esta é uma cor roxa agradável. Os olhos serão muito menores do que o rosto, então dê-lhes evitar 12 pixels e o esconder-se 12 pixels novamente. Eles são atualmente quadrados para torná-los círculos perfeitos, dar-lhes um raio de borda fora de 50% e, por fim, definir a posição Atributo toe Absoluto porque queremos ser capazes de movê-los ao redor. Ok, agora vamos trabalhar no primeiro. Eu tudo o que significa dizer aqui é definir a propriedade superior para 45 pixels e a propriedade esquerda para 25 pixels. Da mesma forma, selecione o segundo I e disse que parou propriedade toe, 45 pixels e a propriedade esquerda para cerca de 63 pixels. Sinta-se livre para ser apenas esses valores. Ainda assim, sua ilustração parece correta. Certo, agora selecione a classe norte. Isto vai ser, Ah, 10 retângulo. Então defina seu bit 28 pixels e sua altura 2 25 pixels. A cor do nariz pode ser ligeiramente mais rosa do que o rosto. Então eu vou dar-lhe um fundo off hash FF 78 para definir novamente a propriedade position toe absoluto. E, em seguida, disse a esquerda para estas despesas e o topo 2 50 pixels, Gostaria novamente de lembrá-lo esses valores não tem que ser exato. Você pode experimentar com eles até que sua ilustração pareça correta para você. O Norte está pronto. Hora de trabalhar na boca. Vamos dar sobre Toff. 20 pixels e uma altura de 20 pixels. Isto vai ser um semi-círculo, então vamos primeiro dar-lhe um raio de troca de 50%. Queremos que este círculo seja ligeiramente tika, então use a propriedade permuta para dar-lhe uma borda sólida fora de três pixels cuja cor é hash db quatro e 61 Ok, agora disse que sua posição para absoluto e movê-lo de tal forma que ele vai parcialmente abaixo do Nariz. Um top off 60 pixels e o esquerdo off 37 pixels é bom. Neste ponto, queremos cortar aproximadamente os 70% superiores do círculo. Para fazer isso, use a propriedade clip part. Aqui, vamos criar um polígono que cobre os 30% inferiores do círculo. O primeiro ponto do polígono será em X zero e por que 70%? O próximo ponto será em X 100%. E por que 70%. Então isto forma o topo do nosso polígono. O próximo ponto, que é o canto inferior direito do nosso polígono, será em X 100%. E por que 100%? O último ponto, que é o canto inferior esquerdo do polígono, estará em X zero. E por que 100% e é isso. Estão sorrindo. O rosto está completo. Vá para a próxima lição. Agora, onde eu mostro como tirar o cabelo e o Tarso da nossa ilustração 3. Crie o cabelo e corpo: Bem-vindos de volta à lição final desta aula. Vamos trabalhar no cabelo desta mulher. Agora vamos trabalhar no cabelo em três seções diferentes para seções de cabelo internas, que estarão no rosto, e uma seção de cabelo exterior, que estará atrás do rosto. Então, dentro do rosto, Dev adicionar um fazer para a primeira seção de cabelo interior. Todas as seções de cabelo vão ter muitas propriedades comuns, então vamos dizer que a classe comum para eles está aqui. Próximo Creator Dove para a segunda seção de cabelo interior, ok, agora fora do rosto para criar uma nova pomba para a seção de cabelo exterior. Tudo bem, vamos para o painel CSS agora vendendo a classe de cabelo e dar-lhe um fundo fora de hash F E cinco F 37 Esta é uma cor laranja agradável que ficará bem com a cor do rosto. Além disso, disse que a posição Atributo toe absoluto. Agora selecione a primeira seção interna do cabelo. Este vai ser, ah, grande, círculo perfeito. Assim disse que é vert e altura 200 pixels e dar-lhe, ah, raio de troca de 50%. Isso é legal. Agora mova-o para o canto superior direito da face, dando-lhe um top off negativo 65 pixels e o esquerdo fora 30 pixels. Vamos mais sob a próxima seção de cabelo interno. Isso também vai ser arredondado, mas não seria um círculo exato. Então dê uma palavra de 70 pixels e a altura de 100 pixels novamente defina as ideias de troca para 50%. Eles devem ir para o canto superior esquerdo da face, então dê um top off negativo 50 pixels e o esquerdo negativo 30 pixels. Estes círculos não são exatamente como aqui atualmente, e isso é porque eles estão indo para fora do festivo para se certificar de que eles estão confinados às fronteiras do festivo, ir para o CSS do vidro facial e adicionar uma propriedade chamada Overflow disse que seu valor para oculto . Isso não vai funcionar a menos que você também disse que a propriedade posição do rosto para absoluto. E agora isso parece muito melhor. Ok, agora podemos trabalhar na parte externa do cabelo, selecionar a parte externa do cabelo. Este vai ser um quadrado cujos cantos são arredondados. É o que pode ter 120 pixels e alto pode ter mais 120 pixels. Agora esta massa deve estar atrás do rosto. Portanto, você deve alterar sua propriedade Zed Index e defini-la para algo negativo. Menos dois será o próximo. Vamos posicioná-lo corretamente. Então defina os dois superiores menos 30 pixels e a esquerda para menos 10 pixels. Finalmente, devemos ter certeza de que os cantos são arredondados usando a propriedade de raio de troca. Queremos que os dois principais cardeais sejam completamente redondos, então use um valor de 60 pixels para ambos, que é metade do quadrado. Queremos que os cantos inferiores sejam apenas ligeiramente arredondados, para que o valor desligue cerca de 10 pixels. Para eles, cabelo Onda está pronto. Agora vamos criar o resto desta ilustração. Então, na janela HTML aditivo para o pescoço. Da mesma forma, adicione uma massa para o Tarso. Ok, volta na seção CSS, selecione a próxima classe. Este vai ser um retângulo alto e arredondado. Assim disse que é com 2 20 pixels e sua altura para 50 pixels. A cor do pescoço deve ser um pouco mais escura, então vamos dizer que é hash F 98 6 e agora tornar sua posição absoluta, que possamos vê-lo se movendo em direção ao centro do rosto e abaixo dele. Ao definir ele parou para 70 pixels e deixou para 40 pixels. Isso tem que ir atrás do rosto. Então o Centrado disse no próximo dedo menos dois. Novamente, por fim, faça seus cantos arredondados com os rádios fora de 10 pixels usando a propriedade de raio de troca , estamos quase terminando. Tudo o que precisamos fazer em seguida é aplicar estilos para o Tarso de tão selecionado e dar-lhe overt off. 1 20 seleções é e ocultar 1 30 pixels. Em seguida, defina sua cor do dedo do pé, outra sombra de rosa. Desta vez, pode ser hash FC. Prever 60 novamente tornar a sua posição absoluta e disse que parou 200 pixels e dedo do pé esquerdo menos 10 pixels. Eles devem ir atrás do pescoço. Tão centrado, sentado ao lado de menos três, que é um valor que é menor do que o referido índice fora do pescoço e finalmente usou a propriedade raio da borda para se certificar de que os ombros estão totalmente arredondados. Arte, 60 pixels e opcionalmente fazer os cantos inferiores ligeiramente arredondados, definindo suas áreas para 10 pixels, e é isso. Are curado ilustração está pronto agora você sabe como usar os estilos simples da CIA para criar belas ilustrações planas. Se você gosta desta classe, por favor complete o projeto da classe. Vai ser um bom treino para ti. Obrigado por assistir a um mestre de quente disponível.