Crear una ilustración plana con CSS

1. ¡Hola!: Hola. Yo soy Musharraf tenía rebelde hace y hoy te doy la bienvenida a mi clase. Vamos a estar creando ilustración aguda usando sólo CSS y HTML cinco. Esta es la ilustración que estaremos creando desde cero. Una linda mujer de dibujos animados. Como puedes ver, tiene un diseño plano. Lo miraba. No. Te voy a mostrar cómo hacer esto En menos de 15 minutos después de esta clase, habrás entendido que hay mucho más que puedes hacer con CSS una vez que hayas dominado sus fundamentos. Entonces, ¿a qué esperas? Basta con abrir la siguiente lección e incluso sumergirse justo en el código. 2. Crea la cara: Bienvenido de nuevo. Estaremos escribiendo toda nuestra cancha en bolígrafo de corte, así que solo usa tu navegador y ve a court pen dot io Puedes iniciar sesión si quieres, pero realmente no es necesario aquí. Presionó el botón de crear y seleccione nuevo bolígrafo. No vamos a estar escribiendo ningún JavaScript hoy, así que solo minimiza este panel. Lo primero que debes hacer es crear un elemento sordo para toda la ilustración. Ahora, puedes escribir todo este HTML de la manera antigua, pero te sugiero que uses Emmett Instant porque es más rápido. Entonces con Emmett, todo lo que necesitas hacer para crear un nuevo desarrollo que tenga un nombre de clase es dardo de usuario, seguido del nombre de la clase y luego presiona tab. A continuación, dentro de esto, vamos a crear una nueva paloma para el rostro. Por lo que de nuevo, presione punto seguido de cara y dab. Muy bien, ahora, dentro de lo festivo, vamos a crear nuevos desarrollos para el hielo. Entonces voy a llamarlos yo quiero y lo hago. Ahora. Tanto el hielo van a compartir muchas propiedades de temporadas. Entonces, sumémosles una clase común. Voy a llamarlo Yo Ok, ahora vamos a necesitar un Dhofar sabe. De igual manera, necesitaremos una masa para la montura. Está bien , ya basta. Es demo por ahora. Escribamos algo de CSS. Lo primero que voy a hacer es cambiar el color de fondo de toda la página a algo un poco más agradable. Por lo tanto, vamos a seleccionar el cuerpo de la página y utilizar la propiedad de fondo. Voy a ir con un débil color rosado sobre el hash. F F E A F tres es bueno para eso. Ahora empecemos a trabajar en la ilustración, así que selecciona la clase de persona. Primero debemos establecer su propiedad de posición. A afines. De esta forma, podremos posicionar todos los elementos dentro de ella con mayor facilidad. A continuación, voy a colocar la ilustración en algún lugar más cerca del centro de la pantalla. Entonces solo, digamos, 200 píxeles desde arriba y 200 píxeles desde la izquierda. Aquí eres libre de usar cualquier otro valor. Muy bien, pasemos a la cara. Digamos que la cara tiene más de 200 píxeles y la altura fuera de otros 100 píxeles que la convierte un cuadrado. Todavía no podemos ver la cara, así que dale un color de fondo apagado hash F F c ocho b tres. Este es un tono de piel que la mayoría de los artistas usaban en estos días. No queremos una cara cuadrada completa, así que vamos a redondear su fondo dos jardineros Para ello, utilizó la propiedad del radio de trueque y dejar las esquinas superior izquierda y superior derecha en cero píxeles . Pero cambia las esquinas inferior izquierda e inferior derecha a 50 píxeles. Como se puede ver, esto es mucho mejor. Vamos más al hielo ahora. En primer lugar, trabajemos en la clase común llamada. Le doy un color de fondo off hash. 880061 Este es un bonito color morado. Los ojos van a ser mucho más pequeños que la cara, así que dale avert off 12 pixels y el hide off 12 pixels nuevamente. Actualmente son cuadrados para hacerlos círculos perfectos, darles un radio de borde apagado 50% y por último, establecer la posición Atributo toe Absoluto porque queremos poder moverlos. De acuerdo, ahora vamos a trabajar en el primero. Todo lo que significa decir aquí se establece la propiedad superior en 45 píxeles y la propiedad izquierda en 25 píxeles. De igual manera, seleccione el segundo yo y dijo que detuvo la propiedad dedo del pie, 45 píxeles y la propiedad izquierda a alrededor de 63 píxeles. Siéntase libre de ser sólo estos valores. Aún así, tu ilustración luce correcta. De acuerdo, Ahora selecciona la clase norte. Esto va a ser, Ah, 10 rectángulo. Por lo que establece su bit 28 pixels y su altura 2 25 pixels. El color de la nariz puede ser ligeramente más rosado que el rostro. Entonces voy a darle un fondo fuera del hash FF 78 para volver a establecer la propiedad de posición toe absoluto. Y luego dijo a la izquierda para estos gastos y los 2 top 50 pixels, me gustaría de nuevo recordarles que estos valores no tienen que ser exactos. Podrás experimentar con ellos hasta que tu ilustración te parezca correcta. Ya está listo el Norte. Tiempo de trabajar en la boca. Démoslo sobre Toff. 20 pixels y una altura de 20 pixels. Esto va a ser un semicírculo, así que primero le demos un radio de trueque apagado 50%. Queremos que este círculo sea ligeramente tika, así que usa la propiedad de trueque para darle un borde sólido fuera de tres píxeles cuyo color es hash db cuatro e 61 Vale, ahora dijo su posición a absoluta y moverlo de tal manera que va parcialmente por debajo de la nariz. Un top off 60 pixels y el izquierdo 37 pixels es bueno. En este punto, queremos cortar aproximadamente el 70% superior del círculo. Para ello, utilice la propiedad de pieza de clip. Aquí, vamos a crear un polígono que cubra el 30% inferior del círculo. El primer punto del polígono será en X cero y ¿por qué el 70%? El siguiente punto será en X 100%. Y por qué un 70%. Entonces esto forma la parte superior de nuestro polígono. El siguiente punto, que es la esquina inferior derecha de nuestro polígono, estará en X 100%. ¿ Y por qué al 100%? El último punto, que es la esquina inferior izquierda del polígono, estará en X cero. Y por qué 100% y eso es todo. Están sonriendo. El rostro está completo. Acude a la siguiente lección. Ahora donde te muestro cómo dibujar el cabello y el Tarso de nuestra ilustración 3. Crea el cabello y el cuerpo: Bienvenidos de nuevo a la lección final de esta clase. Trabajemos en el cabello de esta mujer. Ahora vamos a trabajar en el cabello en tres secciones diferentes a secciones internas de cabello, que estarán en la cara, y una sección externa de cabello, que estará detrás de la cara. Por lo que dentro de la cara, Dev agrega un do para la primera sección interna de cabello. Todas las secciones del cabello van a tener mucho fuera de las propiedades comunes, así que digamos que la clase común para ellos está aquí. Siguiente Creador Paloma para la segunda sección interna del cabello, bien, ahora fuera de la cara para crear una nueva paloma para la sección exterior del cabello. Muy bien, vamos al panel CSS ahora vendiendo la clase de cabello y dale un fondo fuera hash F E cinco F 37 Este es un bonito color naranja que se verá bien con el color de la cara. Adicionalmente, dijo la posición Atributo toe absoluto. Ahora selecciona la primera sección interna de cabello. Este va a ser, ah, grande, círculo grande, perfecto. Entonces dijo que es vert y altura 200 pixeles y dale, ah, ah, radio de trueque apagado 50%. Eso es lindo. Ahora muévelo hacia la esquina superior derecha de la cara dándole un top off negativo 65 píxeles y el izquierdo 30 píxeles. Vamos más bajo la siguiente sección interna de cabello. Esto también se va a redondear, pero no sería un círculo exacto. Por lo tanto, dale una palabra de 70 píxeles y la altura fuera de 100 píxeles volvió a establecer las ideas de trueque al 50%. Deberían ir hacia la esquina superior izquierda de la cara, así que dale un top off negativo 50 píxeles y el izquierdo negativo 30 píxeles. Estos círculos no se ven exactamente como aquí actualmente, y eso se debe a que van fuera de lo festivo para asegurarse de que estén confinados a los bordes de lo festivo, vayan al CSS del cristal facial y agreguen una propiedad llamada Desbordamiento dijo su valor a oculto . Esto no funcionará a menos que también dijeras la propiedad de posición del rostro a absoluto. Y ahora esto se ve mucho mejor. De acuerdo, ahora podemos trabajar en la sección exterior del cabello, seleccionar la sección exterior del cabello. Esta va a ser una plaza cuyas esquinas son redondeadas. Es lo que puede ser 1 20 píxeles y alto puede ser otros 1 20 píxeles. Ahora esta masa debe estar detrás de la cara. Por lo tanto, debe cambiar su propiedad Zed Index y establecerla en algo negativo. Menos dos hará a continuación. Posicionémoslo correctamente. Por lo tanto, establece los dos primeros menos 30 píxeles y la izquierda a menos 10 píxeles. Por último, debemos asegurarnos de que las esquinas estén redondeadas mediante el uso de la propiedad del radio de trueque. Queremos que los dos primeros cardenales sean completamente redondos, así que usa un valor de 60 píxeles para ambos, que es la mitad del mismo del cuadrado. Queremos que las esquinas inferiores sean sólo ligeramente redondeadas, por lo que el valor de descuento alrededor de 10 píxeles. Para ellos, el cabello Onda está listo. Ahora vamos a crear el resto de esta ilustración. Entonces, en el aditivo de ventana HTML para el cuello. De igual manera, añadir una masa para el Tarso. De acuerdo, vuelta en la sección CSS, selecciona la siguiente clase. Este va a ser un rectángulo alto y redondeado. Así lo dijo es con 2 20 pixels y su altura a 50 pixels. El color del cuello debe ser ligeramente más oscuro, así que digamos que es hash F F 98 6 y ahora hacer que su posición sea absoluta, por lo que podemos verlo moviéndose hacia el centro de la cara y por debajo de ella. Al configurarlo se detuvo en 70 píxeles y se dejó en 40 píxeles. Esto tiene que ir detrás de la cara. Así dijo Centered en el siguiente dedo menos dos. Nuevamente, último, hacer que sus esquinas redondeen con las radios apagadas 10 píxeles mediante el uso de la propiedad del radio de trueque ,casi terminamos. , Todo lo que tenemos que hacer a continuación es aplicar estilos al Tarso de tan seleccionado y regalarlo abierto. 1 20 picks es y se esconden 1 30 pixels. Siguiente establece su dedo del pie de color, otro tono de rosa. Esta vez puede ser hash FC. Prever 60 nuevamente hacer que su posición sea absoluta y dijo que detuvo 200 pixels y dedo izquierdo menos 10 pixels. Deberían ir detrás del cuello. Tan centrado, sentado junto a menos tres, que es un valor que es menor que el dicho índice fuera del cuello y finalmente utilizó la propiedad del radio de borde para asegurarse de que los hombros estén totalmente redondeados. Arte, 60 píxeles y opcionalmente hacen que las esquinas inferiores ligeramente redondeadas estableciendo sus áreas en 10 píxeles, y eso es todo. curado ilustración está lista ahora sabes usar simples de CIA's los estilos para crear bellas ilustraciones planas. Si te gusta esta clase, por favor haz completar el proyecto de clase. Va a ser una buena práctica para ti. Gracias por ver a un maestro de hot disponible.