5 astuces CSS que tout développeur Web devrait connaître en 2022

chicos, es David de mdbbostrap.com y en este video les mostraré 5 trucos de CSS que todo desarrollador web debería saber empecemos el número 1 son los modos de fusión CSS, es posible que vea una página como esta que usa estos interesantes efectos de color mezcle con la imagen, así que le mostraré cómo puede lograrlo fácilmente usando CSS Usaré esta foto que usaremos como imagen de fondo para nuestra página. así que agreguemos algunos estilos Agregaré nuestros estilos al cuerpo para establecer imagen de fondo a la dirección URL Foto y ahora veamos como se ve esto así que tenemos nuestra imagen de fondo, ahora vamos a agregarle un poco de color de fondo voy a usar uno verde bien, ahora, si revisamos nuestra página, no sucede nada porque la imagen anula nuestro color, pero veamos qué sucederá si agregamos un modo de fusión uh, puedes usar diferentes modos y estás familiarizado con programas como photoshop y capas que Puede que ya sepa lo que esto significa eh bueno, si no, te mostraré rápidamente y, obviamente, puedes leer más sobre lo que realmente están haciendo los diferentes modos de fusión, pero tengamos mira el modo de mezcla oscuro ahora como puedes ver esto combina nuestro color de fondo con nuestra imagen y mediante el uso de diferentes modos de fusión podemos lograr diferentes efectos para que puedas usar oscuro y más claro, puedes usar la diferencia que es un poco loco, pero personalmente me gusta mucho una pantalla y ahora cambiando el color de fondo nuestro color de fondo podemos conseguir diferentes efectos mienten el que hemos visto en el ejemplo anterior el número 2 está recortando si te preguntas cómo esta página como raya crea estas diagonales aquí déjame mostrarte cómo puedes lograrlo fácilmente usando CSS, así que lo que vamos a hacer vamos a agregar un nuevo div con identificación background o en realidad bg o en realidad podríamos usar una clase que realmente no importa y solo por el bien de este tutorial ya no necesitamos este cuerpo así que hagamos, hagamos, agreguemos un nuevo selector aquí y lo que íbamos a hacer iba a establecer una altura y un ancho altura y un ancho al 100% para cumplir con todo el espacio ahora voy a agregar un poco de color de fondo a eso digamos algo como dos 2 4 8 algo azulado y ahora voy a usar la ruta del clip ahora una de las formas más fáciles de usar una ruta del clip para generar el CSS de la ruta del clip es usar uno de los generadores para que pueda usar puede buscar un clip similar generadores de CSS o simplemente vaya directamente a uno de esos y voy a decir uh puedes puedes usar diferentes formas como puedes ver aquí cierto, hay muchos de ellos disponibles y voy a usar, digamos, pentágono y voy a configurarlo en algo como esto y vamos a darle un poco curva aquí y esto generará un CSS para nosotros, así que lo que voy a hacer, voy a copiar este y pegarlo en nuestro CSS lo que también voy a hacer es establecer esta posición um a absoluto y establezca ese índice en -1, así que esperamos que este sea nuestro fondo y veamos cuál es el resultado y así es como se ve el resultado, así que obviamente puedes usar puedes usar más complejo formas como las que has visto aquí, así que haríamos algo así fácilmente algo como esto o lo que sea, vamos a crear algunas formas locas y copiemos esta y reemplacemos y listo otro elemento imprescindible para el desarrollador web es la animación CSS nos permite crear y animar casi cualquier propiedad que usemos en CSS, así que echemos un vistazo a este ejemplo. Voy a crear un div y vamos a crear una animación colorida, así que lo que voy a hacer es definir fotogramas clave um, los fotogramas clave nos permiten definir diferentes pasos para nuestra animación, así que definamos algunos pasos aquí para nuestro cambio de color, así que comenzaré con cero y hagámoslo. es como el fondo um, comencemos con violeta, está bien, ahora déjame copiar y pegar este um como eso y cambie algunos valores aquí, digamos que esto tendrá un 14 por ciento, bueno, hagámoslo como 15 ahora cambiemos de color bien y ahora vamos a copiar y pegar este por el bien de compatibilidad con diferentes navegadores con todos los navegadores, así que vamos a decir agregar webkit fotogramas clave está bien, ahora solo definimos fotogramas clave, así que agreguemos algo de estilo a nuestro div así que vamos a darle un poco de altura digamos 400 píxeles de ancho 400 píxeles bordean un negro sólido y la animación parpadea así es como lo llamamos tiempo tiempo de animación y vamos a definir para reproducirlo infinitamente ahora otra vez webkit la animación parpadea 10 segundos infinitos y vamos a ver el resultado oops así es como puede ver que podemos animar fácilmente casi cualquier propiedad o comenzando con la forma del color podemos mover um podemos mover objetos de un lugar a otro así que este es un conocimiento muy, muy importante, actualmente solíamos usar JavaScript para eso, pero ahora la mayor parte de la animación realmente ocurre en CSS puro, que es solo una forma más conveniente de hacerlo el siguiente no es realmente un truco, pero el conocimiento de que puede usar diferentes fuentes en su sitio web si navega a fonts.google.com, encontrará casi 1000 diferentes fuentes disponibles para que las use de forma gratuita, por lo que si navega allí, puede buscar diferentes fuentes diferentes, um, y si eliges una, verás una vista previa de la fuente, cómo se ve usando un peso diferente y un estilo diferente como la cursiva, por ejemplo, aquí tenemos una cursiva ligera 300 y mientras que aquí tenemos una negrita, entonces solo elija la fuente que le guste, digamos que voy a usar esta, voy a elegir el estilo que me gusta, en realidad puede usar un estilo o puede seleccionar varios estilos y agregarlos y luego podemos usar esta opción de inserción que le dará el código que debe usar en su página, así que voy a use este enlace, así que vayamos a nuestro documento, lo pegaré y agreguemos un párrafo y genere algo de texto ahora el segundo paso para copiar una familia de fuentes, así que vayamos a nuestro estilo y peguemos en nuestro cuerpo y veamos cómo se ve, voila, nuestra fuente ha cambiado otra opción muy interesante para usar en CSS son los degradados, por lo que puede generar diferentes tipos de degradados usando solo un CSS, así que echemos un vistazo al ejemplo ya sabes que puedes establecer un color de fondo para tu elementos como este rgb y luego algo de color, digamos 70 entre verde y azul Me gusta este, pero también podemos agregar un degradado para poder usar diferentes tipos de degradados. Voy a usar uno radial. y vamos a definir esto, queremos formar un círculo y luego proporcionaremos dos colores, por lo que uno será el mismo que usamos aquí y luego cambio de color y luego segundo color en realidad, deberíamos agregar algo de opacidad aquí a cero o, de hecho, dejarlo por un momento y luego algo más azulado y luego este 100% y veamos cómo funciona realmente y este es nuestro gradiente, por lo que hay muchas propiedades que puede cambiar aquí, pero no se preocupe, no tiene que recordarlas todas. lo que puede hacer, puede usar uno de los generadores de gradiente CSS como ese y simplemente al usar estos selectores de color puede generar cualquier gradiente que desee, también puede cambie este cambio de color para que al usar este selector de rango también pueda generar un degradado lineal como este déjame, oh, pensé que se restablecería a los valores predeterminados, pero aquí puedes definir el ángulo, así que si vamos a usar algo como esto o que podemos eliminar la cantidad de colores para que podamos tener más, puede usar formas predefinidas, así que sí, solo juegue con eso y vea cómo creativo que puedes ser con solo unos pocos clics así que vamos a comprobar esto sí, creo que se ve genial así que estos son 5 trucos CSS que todo desarrollador web debería saber, déjame saber en los comentarios si ya los conoces todos o no y que mas pondrías en esta lista y si disfrutaste este video no olvides darle me gusta y si no quieres perderte más videos como este en el futuro no olvides suscribirte y activar las notificaciones gracias y nos vemos en el proximo video