#tutorialcss

[nyxedbunny]

Cambiar color de una imagen con CSS — Minitutorial

¡Hola hola! Vengo con este tutorial porque en breves voy a subir una tablilla en la que os será super útil. Hay dos modos de hacer esto, pero yo explicaré solo uno ya que el otro es con JS y foroactivo no lo admite en sus posts. Yo lo uso para ornamentación y marcos, pero también sirve para iconos. Bien, comencemos:

Lo primero es colocar las imágenes, el color exacto lo cogen si la imagen en sí es negra.

Como veis, tanto el marco cómo la ornamentación es negra pero yo la quiero del mismo color que los bordes y el fondo de los textos destacados.

Para eso vamos a cambiar el matiz de los colores jugando con los filtros.

Normalmente usamos RGB para definir un color (#fffff o #00000) pero en este caso usaremos HSL y el filtro "sepia" e "invert".

La propiedad de CSS que usaremos será "filter" con las funciones brightness,  hue-rotate, saturate, sepia e invert.

Mi código RGB sería #a66c7b por lo que debería añadir al CSS: filter: invert(48%) sepia(26%) saturate(554%) hue-rotate(294deg) brightness(92%) contrast(86%).

Y así quedaría:

Útil ¿verdad? Así no hay que pasar por un programa de edición de imagen para cambiar la decoración de nuestras tablillas.

Pero ¿Cómo se las propiedades de mi color? Para eso abría que hacer una amplia explicación sobre la teoría del color pero con esta herramienta creada por Barrett Sonntag uncamente tendreís que poner vuestro color en RGB, pulsar "Compute Filters" y os generara la propiedad "filter" con sus respectivas funciones.

Espero que os haya ayudado y en breves subiré la tablilla usada para el ejemplo.

¡Saludos!

[ashwinihack]

CSS Tutorial: Math Function | web development #34 In this video, you will learn the CSS math function. CSS math function is a tool that helps you insert mathematical functions in your CSS. 1) calc() 2) min() 3)max() this video is part of the web development playlist https://www.youtube.com/playlist?list... Flask web development playlist:- https://www.youtube.com/watch?v=uqvwm... python playlist: https://www.youtube.com/watch?v=73ncl... #Htmllearn #webdevlopment #learnwebdevlopment ►telegram group:- https://t.me/codewithsheetal ►Website- https://www.codewithsheetal.com ►Facebook - https://www.facebook.com/codewithsheetal ►Instagram - https://www.instagram.com/codewithshe... ►Personal Instagram A/c - https://www.instagram.com/sheetallife/

[ashwinihack]

In this video, I will show you how to use the variable in CSS. I'll also cover what global and local variables are and how they can be helpful. this video is part of the web development playlist https://www.youtube.com/playlist?list... Flask web development playlist:- https://www.youtube.com/watch?v=uqvwm... python playlist: https://www.youtube.com/watch?v=73ncl... #Htmllearn #webdevlopment #learnwebdevlopment ►telegram group:- https://t.me/codewithsheetal ►Website- https://www.codewithsheetal.com ►Facebook - https://www.facebook.com/codewithsheetal ►Instagram - https://www.instagram.com/codewithshe... ►Personal Instagram A/c - https://www.instagram.com/sheetallife/

[ashwinihack]

CSS Tutorial: Navigation Bar | web development #30 Hi, in this video I'm going to show you how to create a navigation menu. It's very simple and quick. I hope you find it useful. this video is part of the web development playlist https://www.youtube.com/playlist?list... Flask web development playlist:- https://www.youtube.com/watch?v=uqvwm... python playlist: https://www.youtube.com/watch?v=73ncl... #Htmllearn #webdevlopment #learnwebdevlopment ►telegram group:- https://t.me/codewithsheetal ►Website- https://www.codewithsheetal.com ►Facebook - https://www.facebook.com/codewithsheetal ►Instagram - https://www.instagram.com/codewithshe... ►Personal Instagram A/c - https://www.instagram.com/sheetallife/

[ashwinihack]

CSS Tutorial: Opacity Property | web development #29 In this video, I will show you how to create an opacity effect in CSS. how we make any object transplant without affecting the inner contents. this video is part of the web development playlist https://www.youtube.com/playlist?list... Flask web development playlist:- https://www.youtube.com/watch?v=uqvwm... python playlist: https://www.youtube.com/watch?v=73ncl... #Htmllearn #webdevlopment #learnwebdevlopment ►telegram group:- https://t.me/codewithsheetal ►Website- https://www.codewithsheetal.com ►Facebook - https://www.facebook.com/codewithsheetal ►Instagram - https://www.instagram.com/codewithshe... ►Personal Instagram A/c - https://www.instagram.com/sheetallife/