I am attempting to recreate the color curves filter from Photoshop using an HTML video tag.
https://i.stack.imgur.com/erB1C.png
The solution closest to what I need so far is how to simulate Photoshop's RGB levels with CSS and SVG Filters, but it doesn't fully meet my requirements.
I am open to any method involving CSS, SVG Filters, or even a third-party library!
Implementing color curves using feComponentTransfer / table is a great way to achieve the desired effect. This filter provides a starting point for creating the curve combo, with the first feComponentTransfer handling the color curves (values were eyeballed and may need fine-tuning) and the second dealing with white-point adjustment.
The order of operations should be correct, although it's worth noting that due to my limited Photoshop expertise, you might need to prioritize the white point adjustment.
<filter id="color-curve" color-interpolation-filters="sRGB">
<feComponentTransfer>
<feFuncR type="table" tableValues="0.0 0.22 0.4 0.6 0.4 0.8 0.86 0.92 0.96 0.98 1.0"/>
<feFuncG type="table" tableValues="0.0 0.0 0.05 0.1 0.22 0.4 0.6 0.83 0.92 0.97 1.0"/>
<feFuncB type="table" tableValues="0.1 0.8"/>
</feComponentTransfer>
<feComponentTransfer>
<feFuncR type="table" tableValues="0.1 1"/>
<feFuncG type="table" tableValues="0.1 1"/>
<feFuncB type="table" tableValues="0.1 1"/>
</feComponentTransfer>
</filter>
I recently authored the documentation on feComponentTransfer for webplatform, which can be found at:
This resource provides a comprehensive guide on how this filter primitive operates, so make sure to carefully review it before proceeding.
I'm currently in the process of setting up multiple drop down menus within a navigation element. The issue I'm facing is that when a user hovers over the menu items, the displayed elements appear below the first item instead of the selected one. ...
Hello, I'm facing an issue with hiding the radio button and replacing it with an image. I was successful in doing this for one set of radio buttons, but the second set in another row is not working properly. Additionally, when a radio button from the ...
As I embark on building a large application utilizing React, I find myself navigating the new territory of React philosophy coming from a background of Css+Js+jQuery methods. One key requirement for my project is a reliable UI framework that aligns with Go ...
I'm stumped on this one... Maybe there's something simple I'm overlooking, but I'm hoping for some help from you guys. When viewed on mobile devices, the entire HTML element takes up around 80% of the screen width. Oddly enough, resiz ...
My goal is to extract the zip code from a form, create a URL based on that zip code, make an API call using that URL, and then display the JSON data on the screen. I have successfully generated the URL and retrieved the necessary data. However, I am strug ...
I'm working on creating a layout in HTML/CSS/Bootstrap with an image and text below it. The challenge is to ensure that the text always starts at the left border of the image, regardless of its length. Here's what I need the layout to look like: ...
I have successfully created a Chat Room using PHP, but I am facing an issue where only the messages are being displayed without the corresponding usernames. Separate databases for usernames and messages have been set up, yet the usernames are not appearing ...
I have implemented a navbar using the code below, which aligns well from the right side. However, the menu items are sorted in ltr order and I need them to be in rtl order, so that "Dropdown 1" starts from the right side of the page. Currently, it appears ...
I am currently exploring the use of Component Based Architecture (CBA) within Angular. Here is the situation I am dealing with: I have implemented three components each with unique selectors. Now, in a 4th component, I am attempting to import these compon ...
Recently, I found out that my html/php website is susceptible to XSS attacks. Is there a method to clean my data other than having to manually include `htmlspecialchars` for every variable sent to the webpage (there's a chance of missing some and stil ...
I have an HTML table with rowspans in it: table tr, td { border: 1px solid black; } tr:nth-child(1) { background-color: red; } tr:nth-child(2) { background-color: blue; } <table> <tr> <td rowspan=2>Section 1</td> ...
I'm encountering a strange issue with my table alignment on Internet Explorer. The table is offset to the right in IE, but perfectly centered in other browsers like Edge, Firefox, and mobile browsers. I am using Bootstrap for my design, but haven&apos ...
Is there a user-friendly method to create a flow or swimline diagram without relying on scripting or tables? Specifically, I'm looking for a way to display different hosts sending packets (with hosts along the X axis, time along the Y axis, and arrows ...
Utilizing Flexbox to arrange different content in a panel, there is an issue with the positioning of icons within each panel. The fourth icon wraps around and aligns with the first one at the top of its container, instead of lining up with the third icon a ...
<FormControl> <Select labelId="unique-label" id="unique-id" value={1} className={styles.uniqueCustomSelectRoot} IconComponent={() => <MyUniqueIcon />} sx={{ " ...
My attempt at creating a basic animation is not producing the desired smoothness. .animate { animation: motion 1.5s steps(27) forwards; } @keyframes motion { 100% { background-position: -5778px; } } <div class="animate ...
This is a sample Here is a component with a list of items: class HomeComponent { text = 'foo'; testObject = {fieldFirst:'foo'}; itemList = [ '1', '2', '3', & ...
Seeking assistance with a jQuery issue that I am struggling to resolve due to my limited experience. Despite attempting to search for solutions online, I have been unable to find an alternative function or determine if I am implementing the current one inc ...
As a beginner, I am attempting to create a custom jQuery plugin for which I have a simple HTML form: <form id="registerForm" action = "somepage" method="post" class="mb-sm"> <div class="form-group"> <div class="col-md-12"> ...
My goal is to ensure my website appears consistent on all screen sizes by default, while still allowing users to zoom in and out freely. However, I've encountered challenges with using percentages or vh/vw units, as they don't scale elements prop ...