CSS avanzado: formato de gráficos vectoriales escalables

(música optimista) Bienvenido de nuevo a las puntuaciones de KnowledgeCity en hojas de estilo en cascada. Soy Cliff Brozo en tu instructor y la lección de hoy, veremos cómo formatear gráficos vectoriales escalables. Echemos un vistazo a lo que vamos a hacer. Lo primero que vamos a explorar es lo que sucede cuando CSS lucha contra sí mismo. Veremos cómo nuestro CSS Formatea diferentes objetos y se combate. porque los nombres terminan siendo los mismos. Entonces echaremos un vistazo a y explorar gráficos vectoriales escalables. Exploraremos qué es el cuadro de vista y cómo eso nos permite mirar esta imagen que estamos creando. Miraremos no solo un círculo pero algunos polígonos y rectángulos y caminos y luego insertaremos nuestro CSS directamente en un archivo de gráficos vectoriales escalables. Cuando creamos el círculo giratorio de KnowledgeCity, creamos una imagen gráfica vectorial escalable, y lo formateamos estableciendo nuestro tamaño de fuente y familia, el peso, convirtiendo el texto en mayúsculas, poner un poco de espacio entre letras para mantener las letras un poco más separadas de lo normal y llenando esas letras de un color. Todo eso está en el archivo SVG. El archivo CSS funciona de la misma manera y lo que estábamos haciendo era intentar lograr el mismo tipo de formato en un objeto diferente. Con lo que terminamos fue cuando uno cambiaba, el otro cambiaba también. Entonces necesitábamos poner el CSS en el lado izquierdo de la pantalla, directamente en el archivo SVG. Y eso lo mantuvo separado de lo que estaba en el archivo CSS. Una de las cosas que vamos a hacer es algo que puede resultar divertido. Primero, tenemos que entender abajo en la esquina inferior izquierda de la pantalla, que los gráficos vectoriales nos van a dar una imagen clara y nítida, no importa qué tan grande la hagamos. A diferencia de los gráficos de trama, los otros tipos de archivos que se distorsionará a medida que los hagamos más grandes. Gráficas vectoriales escalables permite tres tipos de objetos gráficos, formas como caminos y contornos, y serán líneas rectas y curvas algunas imágenes de mapa de bits y texto. Ahora, afortunadamente, todos los principales navegadores web tienen soporte de gráficos vectoriales escalables. Así que estamos en buena forma aquí. Lo que he decidido hacer para divertirme Se producen tres señales viales comunes. Una señal de alto, una señal de sentido único y una señal de salida de la carretera. Vamos a ver. La señal de pare aquí es realmente un polígono y el polígono tiene varios puntos y los puntos se definen como una ubicación de partida, qué tan lejos y qué tan abajo. Y luego, desde ese punto, nos movemos alrededor de la señal de pare. Entonces, por ejemplo, 55 está 50 píxeles por encima de la izquierda y cinco píxeles hacia abajo desde la parte superior. Desde ese punto, pasamos a 100, 5 eso es 100 píxeles por encima y cinco por debajo de la parte superior. Luego pasamos a 125 arriba y 30 desde arriba, 125 más, 80 desde arriba, 100 más y 105 desde arriba, 50 más y 105 desde arriba, 25 más y 80 desde arriba, 25 más y 30 desde arriba y eso completará nuestro polígono. Entonces, si tengo un objeto de ocho lados, lo que voy a hacer es sacar los puntos para los ocho signos. Ahora, la razón por la que hay dos polígonos aquí es porque uno de ellos se va a poner rojo y el otro va a ser blanco. El rojo es el primero que he declarado como poliA y otra vez en mi CSS he definido polyA para tener un relleno de rojo. El polígono B es el borde blanco que va dentro del polígono rojo y que tiene un trazo de blanco y un relleno de rojo. Y el trazo es la línea real. Entonces, cuando estoy dibujando esto, notarás que la parte inicial el 50, 5 es realmente 52, 10. Entonces este punto aquí está un poquito más hacia la izquierda y cinco píxeles hacia abajo. Y cada número acaba un poquito y un poquito más abajo. Echemos un vistazo a algunos otros signos. Los signos unidireccionales son una combinación de rectángulos y polígonos. La parte negra de la señal de sentido único le di un borde curvo y esos son rectángulos. El factor rx aquí es similar al radio del borde. Entonces 25 píxeles es el radio de mi borde por eso obtengo una esquina redondeada. Pero dibujar mi flecha blanca es realmente un polígono. En este caso, el polígono C es mi flecha blanca, que está lleno de blanco y el polígono C está aquí en la línea siete y empiezo con 175 sobre 25 abajo todo el camino hasta 305 sobre 25 hacia abajo. 305 arriba y cinco abajo. Así que trazo una línea desde el final aquí hasta arriba luego una línea inclinada a 360 y 45. Otra línea inclinada 305, 85 luego vuelve a subir 305, 70 volviendo a 175 y 70. Y así es como dibujas un polígono. El texto encaja en el lugar adecuado, Lleno el texto de blanco pero le di una ubicación de coordenadas de 38 y 70 que es donde va a empezar y le doy un tamaño de fuente de 36. Lo más divertido fue crear una señalización vial. Ahora voy a dejar esto solo por un segundo y pedirte que pienses cuál es el real y cuál es el que se creó con CSS y SVG. Bueno, se ven iguales. Seguro que se ven iguales. Uno es un poco más claro que el otro y si adivinaste que el letrero original de Morristown Mahwah que está en 287 en Nueva Jersey, es el de la izquierda, tenías razón. El de la derecha es el que se creó con CSS. Ahora, quizás con un poco más de cuidado y la fuente adecuada Hubiera podido duplicarlo exactamente pero no tengo la fuente de la carretera que utiliza el sistema de carreteras interestatales de los Estados Unidos, así que trato de acercar la fuente lo más posible. Si miras con atención, verás que el haw en Morristown es ligeramente diferente al haw en mi versión. La carretera interestatal 287 habría sido un muy, muy difícil gráficos vectoriales escalables para crear porque tendría una forma extraña. No es un rectángulo, no es un círculo. Y hubiera tenido que crear un camino o una elipse que dibuja este símbolo para mí. Afortunadamente, está disponible en la web como un archivo SVG completo. y todo lo que necesitaban era importarlo a mi documento.