Color difference effect for Cagro Collective website (CSS mix blend mode).
HTML-код
- Опубликовано: 5 сен 2024
- Here I'll show you how to create this cool difference effect on your Cargo website. I'll show you how to apply it to a fixed element and how to make this element to be a link. It might be used for your menu, the logo, or any other element you want.
If you find it useful, don't forget to subscribe to my cannel, or follow my Instagram to get more tips about website builders.
/ xiu_web
Очень хорошие цвета и подборка!
Hi, thanks for the great lecture. In addition, I have a very curious question. How can I modify the existing layout to arrange the work so irregularly?
No, here I used a ready template. You also can use this "free gallery" option. The images in the gallery will be arranged randomly.
Thank you so much for this tutorial! For some reason, as I try to align the text in the center (text-align:center) in HTML, it will not go to the center. When I add movement right or left, it avoids the center, staying to the right or left, respectively. How would I resolve this issue?
I've made another video about this effect ruclips.net/video/GHQhqF8czKg/видео.html maybe you can try it and the issue will be resolved
Hey ! Great Tutorial, I was wondering i you figured out a way to attribute this line of code to a specific page only (the home page in my case) ?
Keep up the good work !
Regards
It is possible, but in each case it would depend on how this page was built. Let's say, if the whole content is placed in one page, it is possible to add the same code beneath the existing one directly to this page.
Hey! thanks for this tutorial. I was wondering on how to change che font for the difference layer, could you help me?
Thanks a lot! I was wondering, how to make a rule to make it appear on the desktop but not on the responsive versions?
Not sure what you meant by responsive version, but I have a video about mobile adjustments here. You need @media rule, I guess
Thanks a lot. Is there any way I can apply this effect to a mobile menu only? I tried to hide this element for desktop by using html (Show the element on screens less than 768 pixels wide (typical mobile devices)). But it messed up my website.
Thanks so much for this tutorial! It's super helpful. I have one question though: I want to apply mix-blend-mode on a sticky footer, that was pre-installed on a cargo template. No matter what I do, it doesnt change the color. Is it that it doesn't recognise the backgound? You have any idea how to fix this?
You can show me the website and I'll try to find the right selector :) send me a link here of via inst (xiu_web)
Hello ! Have you find the solution ? Thank you !
Super Turtorial! It works great, but how can i make it go away on other Pages?
Thank you! I'm not sure how to manage it on Cargo, but I have an assumption: try to create a new pinned page with this property (like to place the html part directly to the page). It might not work correctly, but unfortunately I don't know any better solution.
Hey ! Awesome tutorial, i was trying to do it but it don't work for me. I think i made a mistake somewhere but can't find where. I dont't have any error but it doesn't work also. If you have another video or someone you know that showing this. Thanks !
There might be many reasons. First, check your syntax, secondary, make sure you followed all the steps. Also try changing the color of your text to white, and if you linked this text to something, see other comments, I explained this case there
Thanks a lot for the tutorials and your replies!! Is there a way to turn the text into b/w depending on the brightness of the background? Also how to do it through CSS using H1 or H2 tags?
Read about "mix-blend-mode" and "filter" css attributes, I think you will find the black&white you want there (so if you change mix-blend-mode:difference; to something else, you will get the new result).
using h1, h2, bodycopy or small doesn’t change anything. Replace the tag as you want :)
Just were I was looking for but I can't seem to find out how to add this effect to my navigation on the top of my website 'Home > About > Contact'. Any tips?
the general principle should be the same. I would try to find this element via inspect, applying mix-blend-mode and z-index properties. When you find the right one (so you see that it works as you want), I would copy its selector and then add it to the CSS editor (with mix-blend-mode and z-index)/ I hope it will help
@@xiuweb thanks for your quick reply! Will dive into this!
This is amazing, can i apply on a image? I want to apply on my logo :)
I think it's possible to apply this effect for an SVG logo, but I'm not sure how it would go on Cargo. Let me know if you try :)
@@xiuweb thank you!!!
hi! were you able to apply it on an SVG Logo? I'm trying to do the same. If you were able to apply it, could you tell me how you did it? Because I was only able to apply it on a font. thanks :)