Загрузка видео...

Не удалось загрузить видео

На главную

While contrast-color() only returns black or white, there are workarounds! If you register a new custom property, you can use style queries for full color palette customization (but make sure to test the contrast yourself!) Another technique is using the contrast-color() value inside of color-mix() to provide a tint...

12,244 просмотров • 4 месяцев назад •via X (Twitter)

Комментарии: 0

Нет доступных комментариев

Здесь появятся комментарии из оригинального поста

Похожие видео

Eric Rohmer on the use of Colour in "La Collectionneuse" (1967) and "Claire's Knee" (1970): "I didn't use color as a dramatic element, as some filmmakers have done. For me it's something inherent in the film as a whole. I think that in 'La Collectionneuse' (1967) color above all heightens the sense of reality and increases the immediacy of the settings. In this film color acts in an indirect way; it's not direct and there aren't any color effects, as there are for example in Bergman's most recent film, his second one in color, where the color is very deliberately worked out and he gets his effects mainly by the way he uses red. I've never tried for dramatic effects of this kind, but. for example, the sense of time-evening, morning, and so on-can be rendered in a much more precise way through color. Color can also give a stronger sense of warmth, of heat, for when the film is in black-and-white you get less of a feeling of the different moments of the day, and there is less of what you might call a tactile impression about it. In 'Claire's Knee' (1970), I think it works in the same way: the presence of the lake and the mountains is stronger in color than in black-and-white. It's a film I couldn't imagine in black-and-white. The color green seems to me essential in that film, I couldn't imagine it without the green in it. And the blue too-the cold color as a whole. This film mould have no value for me in black-and-white. It's a very difficult thing to explain. It's more a feeling I have that can't be reasoned out logically." (Eric Rohmer's interview with Graham Petrie, Film Quarterly, 1971)

DepressedBergman

61,555 просмотров • 1 год назад

Listen to every word “To every white liberal out in the streets claiming to fight white supremacy and stand up for black and Hispanic people, go home. Everything you're doing is making life harder for the people you claim to support. Look around you. How many black and Hispanic people are actually standing beside you right now? Because I promise you this, if black people feel the need to fight for something, we know how to do that. — We fought not to be oppressed anymore. And what you do, stupefies people into thinking we still are. And Hispanics, they don't need you either. 50% of Latinos voted for Trump. Why? Because they and their families came here legally, did things the right way, and are tired of watching legal immigrants get rewarded while they follow the rules. A lot of them live on the border and see what happens when there's an unhealthy influx of illegal immigrants in this country. They want deportations, too. Your white privilege isn't helping anyone because it doesn't even exist. And believing that people of color can't stand up for themselves without your privilege leading the way is one of the most racist ideas there is. Google the white savior complex. White guilt has been imposed on you so deeply to the point that you feel like it's your duty to hold up posters and vandalize things with your delusions, leading people to think I support it because of my skin color. Get it? Stop. Go home and get a job”

Wall Street Apes

426,097 просмотров • 5 месяцев назад

CSS Trick 🤙 You can create these tab bar controls by using :has() to count the number of tabs ⭐️ .tabs:has(input:nth-of-type(3)){--count: 3;} .tabs:has(:checked:nth-of-type(3)){--active: 200%;} .tabs::after{ translate:var(--active) 0;} Let's break it down in this ! 📼 Couple of CSS :has() tricks here combined with custom properties 😎 First things first, lay out the tabs using display: grid. This gives you a way to create equal-width tabs 🙏 .tabs { display: grid; grid-auto-flow: column; } Then you use :has() to count the number of tabs and store that in a custom property 🤓 .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(input:nth-of-type(4)) { --count: 4; } Using the cascade, the last valid :has() gives you the number of tabs 🫶 Using the tab count, you can size the tab indicator. For the tab indicator, use the tabs pseudoelement: .tabs::after { content: ""; position: absolute; height: 100%; width: calc(100% / var(--count)); } See how you can use --count to determine its size 📏 Next, use :has() to determine which tab is active or :checked with input [type=radio] .tabs:has(:checked:nth-of-type(2)) { --active: 1; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } You can use a zero-indexed translation here. If the second input is :checked, set --active: 1, then translate the pseudoelement on the tabs to that position 👉 .tabs::after { translate: calc(var(--active, 0) * 100%) 0; } Or you could set active to the translation: .tabs:has(:checked:nth-of-type(2)) { --active: 100%; } Setting the custom property allows you to use the index elsewhere if you need it 🤙 The final piece is using mix-blend-mode 👀 The tabs have a black background-color, the pseudoelement is white, and the label text is white. When you use mix-blend-mode: difference on the pseudoelement it will give this effect that the text transitions from white to black sliding across 😎 .tabs::after { color: hsl(0 0% 100%); mix-blend-mode: difference; } You can totally mix up the colors here though and go with a different effect. The mechanics of how you can use CSS :has() is the main point here 🙏 As always, any questions, suggestions, etc. let me know CodePen.IO link below! 👇 (There's even a Tailwind CSS play for this one too 👀)

jhey ʕ•ᴥ•ʔ

70,730 просмотров • 2 лет назад