Transcription
1. Bienvenue: Bonjour. Je suis Musharraf avait rebelle il y a et je vous souhaite la bienvenue dans ma classe aujourd'hui. Nous allons créer une illustration aiguë en utilisant seulement CSS et HTML 5. C' est l'illustration que nous allons créer à partir de zéro. Une mignonne femme de dessin animé. Comme vous pouvez le voir, il a un design plat. Il l'a regardé. Non. Je vais vous montrer comment faire cela Dans moins de 15 minutes après ce cours, vous aurez compris qu'il y a tellement plus que vous pouvez faire avec CSS une fois que vous avez maîtrisé ses bases. Alors qu'attendez-vous ? Il suffit d'ouvrir la leçon suivante et même de plonger directement dans le code.
2. Créer le visage: Bienvenue de retour. Nous allons écrire toute notre cour sur le stylo de la cour, donc il suffit d'utiliser votre navigateur et aller à la cour stylo dot io Vous pouvez vous connecter si vous voulez, mais ce n'est pas vraiment nécessaire ici. le bouton Créer et sélectionnez un nouveau stylet. Nous n'écrirons pas de JavaScript aujourd'hui, alors minimisez simplement ce panneau. La première chose que vous devez faire est de créer un élément sourd pour toute l'illustration. Maintenant, vous pouvez taper tout ce HTML à l'ancienne, mais je suggère que vous utilisiez Emmett Instant parce que c'est plus rapide. Donc, avec Emmett, tout ce que vous devez faire pour créer un nouveau développement qui a un nom de classe est dart utilisateur, suivi du nom de la classe, puis appuyez sur la touche onglet. Ensuite, à l'intérieur de cela, créons une nouvelle colombe pour le visage. Encore une fois, appuyez sur point suivi de face et de tampons. Bon,
maintenant, maintenant, à l'intérieur de la fête, nous allons créer de nouveaux développements pour la glace. Donc je vais les appeler je veux et je le fais. Maintenant. Les deux glaces vont partager beaucoup de propriétés de saison. Alors ajoutons une classe commune à eux. Je vais l'appeler d'accord, maintenant on aura besoin d'un Dhofar sait. De même, nous aurons besoin d'une pâte pour la monture. Ok, ça suffit. C' est une démo pour l'instant. Écrivons un peu de CSS. La première chose que je vais faire est de changer la couleur de fond de la page entière pour quelque chose d'un peu plus agréable. Nous allons donc sélectionner le corps de la page et utiliser la propriété d'arrière-plan. Je vais aller avec une faible couleur rosâtre sur le hachage. F F E A F 3 est bon pour cela. Commençons maintenant à travailler sur l'illustration, alors sélectionnez la classe de personne. Nous devons d'abord définir sa propriété de position. À lié. De cette façon, nous serons en mesure de positionner tous les éléments à l'intérieur plus facilement. Ensuite, je vais placer l'illustration quelque part plus près du centre de l'écran. Donc juste, disons, 200 pixels du haut et 200 pixels de la gauche. Vous êtes libre d'utiliser d'autres valeurs ici. D' accord, passons au visage. Disons que le visage a plus de 200 pixels et la hauteur de 100 pixels supplémentaires qui en fait un carré. Nous ne pouvons toujours pas voir le visage, alors donnez-lui une couleur de fond hors hachage F F c huit b trois. C' est un teint de peau que la plupart des artistes ont utilisé ces jours-ci. Nous ne voulons pas une face carrée complète, alors nous allons arrondir ses deux jardiniers inférieurs Pour ce faire, utilisé la propriété de rayon de troc et laisser les coins supérieur gauche et supérieur droit à zéro pixels . Mais changez les coins inférieur gauche et inférieur droit à 50 pixels. Comme vous pouvez le voir, c'est beaucoup mieux. Allons plus sur la glace maintenant. Tout d'
abord, travaillons sur la classe commune appelée. Je lui donne une couleur de fond hors hachage. 880061 Ceci est une belle couleur pourpre. Les yeux vont être beaucoup plus petits que le visage, alors donnez-leur éviter 12 pixels et la masquer 12 pixels à nouveau. Ils sont actuellement carrés pour faire des cercles parfaits, leur
donner un rayon de bordure de 50% et enfin, définir la position Attribut toe Absolute parce que nous voulons être en mesure de les déplacer. Ok,
maintenant, allons travailler sur le premier. Je veux dire ici est de définir la propriété supérieure à 45 pixels et la propriété left à 25 pixels. De même, sélectionnez le second I et dit qu'il a arrêté la propriété toe, 45 pixels et la propriété gauche à environ 63 pixels. N' hésitez pas à ne sont que ces valeurs. Pourtant, votre illustration semble correcte. OK,
maintenant, sélectionnez la classe nord. Ça va être, Ah, 10 rectangle. Donc, définissez son bit 28 pixels et sa hauteur 2 25 pixels. La couleur du nez peut être légèrement plus rose que le visage. Donc, je vais lui donner un arrière-plan hors hachage FF 78 pour définir à nouveau la propriété de position toe absolu. Et puis dit la gauche pour ces dépenses et le top 2 50 pixels, je voudrais encore vous rappeler ces valeurs ne doivent pas être exactes. Vous pouvez expérimenter avec eux jusqu'à ce que votre illustration vous semble correcte. Le Nord est maintenant prêt. Il est temps de travailler sur la bouche. Donnons-le sur Toff. 20 pixels et une hauteur de 20 pixels. Ce sera un demi-cercle, alors donnons-lui d'abord un rayon de troc de 50%. Nous voulons que ce cercle soit légèrement tika, donc utilisez la propriété troc pour lui donner une bordure solide de trois pixels dont la couleur est hachage db quatre e 61 Okay, maintenant dit sa position à absolu et le déplacer de telle sorte qu'il va partiellement au-dessous de la nez. Un haut de 60 pixels et le gauche de 37 pixels est bon. À ce stade, nous voulons couper à peu près le haut 70% du cercle. Pour ce faire, utilisez la propriété de pièce de clip. Ici, nous allons créer un polygone qui couvre les 30% inférieurs du cercle. Le premier point du polygone sera à X zéro et pourquoi 70% ? Le prochain point sera à X 100%. Et pourquoi un 70%. Donc, cela forme la face supérieure de notre polygone. Le point suivant, qui est le coin inférieur droit de notre polygone, sera à X 100%. Et pourquoi 100% ? Le dernier point, qui est le coin inférieur gauche du polygone, sera à X zéro. Et pourquoi 100% et c'est tout. Ils sourient. Le visage est complet. Passez à la leçon suivante. Maintenant, où je vous montre comment dessiner les cheveux et le Tarso de notre illustration
3. Créer les cheveux et le corps: Bienvenue à la dernière leçon de ce cours. Travaillons sur les cheveux de cette femme. Maintenant, nous allons travailler sur les cheveux en trois sections différentes à des sections de cheveux internes, qui seront sur le visage, et une section de cheveux externe, qui sera derrière le visage. Donc, à l'intérieur du visage, Dev ajouter un do pour la première section de cheveux interne. Toutes les sections de cheveux vont avoir beaucoup de propriétés communes, alors disons que la classe commune pour eux est ici. Suivant Creator Dove pour la deuxième section de cheveux intérieure, ok, maintenant à l'extérieur du visage pour créer une nouvelle colombe pour la section externe des cheveux. Bon, allons au panneau CSS vendant maintenant la classe de cheveux et lui donner un arrière-plan hors hachage F E cinq F 37 Ceci est une belle couleur orange qui aura l'air bien avec la couleur du visage. En outre, ledit la position Attribut toe absolu. Maintenant, sélectionnez la première section de cheveux interne. Ça va être, ah, grand, cercle
parfait. Donc dit qu'il est vert et hauteur 200 pixels et lui donner, ah, rayon de
troc de 50%. C' est sympa. Maintenant, déplacez-le vers le coin supérieur droit de la face en lui donnant un négatif de 65 pixels et la gauche de 30 pixels. Laissez-nous plus sous la prochaine section de cheveux intérieurs. Cela va aussi être arrondi, mais ce ne serait pas un cercle exact. Alors donnez-lui un mot de 70 pixels et la hauteur de 100 pixels à nouveau régler les idées de troc à 50%. Ils devraient aller vers le coin supérieur gauche de la face, alors donnez-lui un négatif de 50 pixels et le négatif de gauche de 30 pixels. Ces cercles ne ressemblent pas exactement ici actuellement, et c'est parce qu'ils vont à l'extérieur de la fête pour s'assurer qu'ils sont confinés aux frontières de la fête, aller au CSS du verre de visage et ajouter une propriété appelée Overflow a dit sa valeur à caché . Cela ne fonctionnera pas à moins que vous ayez également dit la propriété de position du visage à absolu. Et maintenant, cela semble beaucoup mieux. Ok, on peut maintenant travailler sur la section externe des cheveux, sélectionner la section externe des cheveux. Ce sera un carré dont les coins sont arrondis. C' est ce qui peut être 1 20 pixels et haut il peut être encore 1 20 pixels. Maintenant, cette pâte doit être derrière le visage. Par conséquent, vous devez modifier sa propriété Index Zed et la définir sur quelque chose de négatif. Moins deux fera ensuite. Positionnons correctement. Donc, définissez les deux premiers moins 30 pixels et la gauche à moins 10 pixels. Enfin, nous devons nous assurer que les coins sont arrondis en utilisant la propriété rayon de troc. Nous voulons que les deux premiers cardinaux soient complètement arrondis, alors utilisez une valeur de 60 pixels pour les deux, ce qui représente la moitié du carré. Nous voulons que les coins inférieurs soient légèrement arrondis, sorte que vous la valeur sur environ 10 pixels. Pour eux, les cheveux
Onda sont prêts. Maintenant, nous allons créer le reste de cette illustration. Donc, dans l'additif de fenêtre HTML pour le cou. De même, ajoutez une pâte pour le Tarso. Ok
, dans la section CSS, sélectionnez la classe suivante. Ce sera un grand rectangle
arrondi. Donc dit qu'il est avec 2 20 pixels et sa hauteur à 50 pixels. La couleur du cou doit être légèrement plus foncée, alors disons que c'est le hachage F 98 6 et maintenant rendre sa position absolue, sorte que nous pouvons le voir se déplacer vers le centre du visage et en dessous. En le définissant arrêté à 70 pixels et laissé à 40 pixels. Ça doit aller derrière le visage. Donc centré a dit dans le prochain orteil moins deux. Encore une fois, enfin, faire ses coins arrondis avec les radios de 10 pixels en utilisant la propriété rayon de troc , nous avons presque fini. Tout ce que nous devons faire ensuite est d'appliquer des styles au Tarso de si sélectionné et de le donner clairement off. 1 20 picks est et masquer 1 30 pixels. Ensuite, définissez son orteil de couleur, une autre nuance de rose. Cette fois, il peut être Hash FC. Prévoir 60 nouveau rendre sa position absolue et a dit qu'il a arrêté 200 pixels et orteil gauche moins 10 pixels. Ils devraient aller derrière le cou. Si centré, assis à côté de moins trois, ce qui est une valeur qui est inférieure à ledit index du cou et a finalement utilisé la propriété de
rayon de bordure pour s'assurer que les épaules sont complètement arrondies. Art, 60 pixels et éventuellement rendre les coins inférieurs légèrement arrondis en réglant leurs zones 10 pixels, et c'est tout. Sont guéries illustration est prêt, vous savez maintenant comment utiliser les styles simples de la CIA pour créer belles illustrations
plates. Si vous aimez cette classe, veuillez compléter le projet de la classe. Ça va être une bonne pratique pour toi. Merci d'avoir regardé un maître de hot disponible.
Ashraff Hathibelagal, App Developer
