Which Of The Following Values Decreases The Brightness In The Filter Function Brightness?

background

Basic concepts

CSS filter Aspect applies graphic effects such as blur or color offset to elements to form filters, which are usually used to accommodate the rendering of images, backgrounds and borders. Its value can existfilterfunction<filter-function>Or utiliseurlAdded SVG filter.

            filter: <filter-function> [<filter-office>]* | none filter: url(file.svg#filter-element-id)

<filter-function> Can be used forfilter andbackdrop-filter Properties. Its information type is specified by i of the following filter functions. Each function requires a parameter. If the parameter is invalid, the filter will non take effect. The post-obit is an explanation of the pregnant of the filter role:

blur(): blurred image
brightness(): make the image brighter or dimmer
contrast(): increase or subtract the contrast of the image
drib-shadow(): apply projection behind paradigm
grayscale(): catechumen paradigm to grayscale
hue-rotate(): change the overall tone of the image
invert(): invert image color
opacity(): modify paradigm transparency
saturate(): supersaturated or desaturated input image
sepia(): turns the image to tan

Usage example

            /*Using SVG filter*/ filter: url("filters.svg#filter-id"); /*Using the filter function*/ filter: blur(5px); filter: effulgence(0.4); filter: contrast(200%); filter: drop-shadow(16px 16px 20px blue); filter: grayscale(50%); filter: hue-rotate(90deg); filter: invert(75%); filter: opacity(25%); filter: saturate(30%); filter: sepia(60%); /*Multiple filters*/ filter: contrast(175%) brightness(iii%); /*Practise not utilize filter*/ filter: none; /*Global variable*/ filter: inherit; filter: initial; filter: unset;

What are the magical uses of CSS filter

Application case

More than intelligent shadow effect

When calculation shadows to elements, we usually usebox-shadowProperties, byBox shadow (x showtime, y beginning, mistiness size, shadow size, color value, inset)It'southward piece of cake to add shadow effects to elements, butbox-shadowIn that location is as well a disadvantage, that is, when calculation shadow effects to transparent pictures, elements cannot be penetrated and tin only be added to the box model of transparent picture elements. At this time,filterAspectdrop-shadowMethod can solve this problem. The shadow added by information technology tin can penetrate the element rather than add information technology to the box model edge of the element.

drop-shadowIn addition to penetrating transparent elements, the added shadow has the same effect asbox-shadowIs the same. If the browser supports hardware acceleration, usefilterThe added shadow consequence is more realistic.

drop-shadowThe syntax is as follows (except that it does not back up settings)inset, others andbox-shadowAre identical):

            Filter: Drop Shadow (x offset, y offset, blur size, color value);

For example:

            filter: drop-shadow(1px 1px 15px rgba(0, 0, 0, .5));

The post-obit figure is used separatelybox-shadowandfilter: drop-shadowAdd shadow contrast to transparent elements:

What are the magical uses of CSS filter

            <img course="box-shadow" src="futurama.png" /> <img class="drop-shadow" src="futurama.png" />

            .box-shadow {   box-shadow: 1px 1px 15px rgba(0, 0, 0, .five); } .driblet-shadow {   filter: drop-shadow(1px 1px 15px rgba(0, 0, 0, .5)); }

Elements and spider web pages are grayed out

In the result of major disasters, accidents or other mourning days, the government websites of land-owned enterprises frequently have the demand for all pages to be grayed out. Or many spider web pages take a mousehoverA style effect that becomes colored when suspended on greyness elements. You can now usefilterAspectgrayscaleMethod, which can adapt the gray level of elements by setting page elementsfilter: grayscale(100%)The page elements can be grayed out. In the following instance,bodyUnder the characterizationh1andimgCharacterization, not addedfilterThe front of the style is shown below.

            <body>   <h1 class="title">FUTURAMA</h1>   <img class="img" width="500" src="./images/futurama.png" /> </body>

What are the magical uses of CSS filter

Now let's givetorsoElement to add a.grayGrade,<trunk class="grey">The whole web page can exist grayed out.

            .gray {   filter: grayscale(100%); }

What are the magical uses of CSS filter

For compatibilityIE8And other depression version browsers, we can add browser prefix andsvgFilter.😤

            .gray {   -webkit-filter: grayscale(1);   -webkit-filter: grayscale(100%);   -moz-filter: grayscale(100%);   -ms-filter: grayscale(100%);   -o-filter: grayscale(100%);   filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");   filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=one);   filter: grayscale(100%); }

When making an emergency ash disposal web page, it is often necessary to remove this role after going online for a period of time. We tin also add the following similar methods when going online for the first time to control the automated online and offline time of ash disposal result, and then that it can be removed automatically at the scheduled time without going through two structure processes.🤣

            (function setGray() {   var endTime = Date.parse("April 06 2077 00:00:01");   var timestamp = Appointment.parse(new Appointment());   if (timestamp <= endTime) {     document.querySelector('html').classList.add together('grayness');   } })();

Element emphasis and highlight

brightnessMethod to achieve the effect of element highlighting, which can be practical to menu bar and flick listinghoverOutcome to emphasize the content currently suspended or selected by the mouse. The following is a list of buttons added to the menu barbrightnessandsaturateIi methods to highlight elements past changing effulgence and saturation.

What are the magical uses of CSS filter

            <div class="container">   <a class="push button">🍋</a>   <a grade="button">🍎</a>   <a class="button">🍐</a>   <a class="push button dark">🥑</a>   <a class="button dark">🍄</a>   <a form="button nighttime">🌽</a>   <a class="button disabled">🍒</a>   <a course="push button disabled">🍅</a>   <a course="button disabled">🥔</a> </div>

            .container {   margin: 40px; } .push button {   padding: 0.5em 0.5em;   background: #E0E0E0;   edge-radius: 3px; } .button.dark {   background: #333; } .button:hover:not(.disabled) {   cursor: pointer;   border-radius: 3px;   filter: brightness(110%) saturate(140%); } .button.disabled {   filter: grayscale(100%); }

Ground glass effect

Ground glass（Frosted drinking glass）Consequence, every bit the name suggests, is similar to the effect of translucent ground glassiOSSystemWindows 10Such systemUIThe apply of ground drinking glass effect can raise the visual feel. stayCSS uncover secretsAnd other works also have systematic explanations. Hither are my views on their corresponding applyfilter: blurandbackdrop-filter: mistinessTwo methods to achieve this effect are summarized.

At that place are two classes with the aforementioned class nameglassYepdivElement, which are added to two classes respectivelydrinking glass-by-filterandglass-by-backdrop-filterTo distinguish between the two methods.

            <div class="drinking glass glass-by-filter"></div> <div class="glass glass-past-properties-filter"></div>

General style: set the size, fillet and other basic styles of footing glass elements:

            .glass {   height: 300px;   width: 300px;   border: 1px groove #EFEFEF;   border-radius: 12px;   background: rgba(242, 242, 242, 0.5);   box-shadow: 0 0.3px 0.7px rgba(0, 0, 0, 0.126),     0 0.9px 1.7px rgba(0, 0, 0, 0.179), 0 1.8px 3.5px rgba(0, 0, 0, 0.224),     0 3.7px 7.3px rgba(0, 0, 0, 0.277), 0 10px 20px rgba(0, 0, 0, 0.4); }

filter: mistinessMethod to add a::earlierPseudo class settingsmistinessThe method is to identify it on the bottom layer of glass and realize the effect.

            .glass-by-filter {   z-index: one;   box-sizing: border-box;   position: relative; } .glass-past-filter::earlier {   content: "";   position: accented;   acme: 0; correct: 0; lesser: 0; left: 0;   z-index: -1;   background: inherit;   filter: blur(10px); }

backdrop-filter: mistinessAdd directly on elementblurMethods the basis glass result was achieved.

            .glass-by-properties-filter {   backdrop-filter: blur(10px); }

The implementation effect is shown in the figure below (left:filter, correct:properties-filter）：

What are the magical uses of CSS filter

Reading: extended frosted drinking glass edge event:https://css-tricks.com/blurre…

Art photo! You can even implement a simple version`insatagram`

Retro, printmaking, oil painting, comics, liquefaction, one-time photos, sexual indifference, Morandi, cyberpunk, Wanda illusion way tin all be realized!

Past combiningfilterAll methods can lucifer any event you lot want. Here is a simple examplefilterMethod regulator, which can conform the value of each method and display the filter effect of the flick in existent fourth dimension. Equally shown in the effigy below.

What are the magical uses of CSS filter

The main code of the page is as follows: control area#imageEditorIt'due south aformForm. Each line of the form controls the value of a filter method and the brandish area#imageContainerContains aimgElement, generatedfilterThe filter acts on this element.

            <form id="imageEditor">   <p>     <label for="gs">Grayscale</label>     <input id="gs" proper name="gs" type="range" min="0" max="100" value="0">   </p>   <p>     <label for="blur">Blur</label>     <input id="blur" name="mistiness" type="range" min="0" max="10" value="0">   </p>   <p>     <characterization for="br">Exposure</label>     <input id="br" proper noun="br" type="range" min="0" max="200" value="100">   </p>   <p>     <label for="ct">Contrast</label>     <input id="ct" name="ct" type="range" min="0" max="200" value="100">   </p>   <p>     <label for="huer">Hue Rotate</label>     <input id="huer" name="huer" blazon="range" min="0" max="360" value="0">   </p>   <p>     <label for="opacity">Opacity</label>     <input id="opacity" name="opacity" type="range" min="0" max="100" value="100">   </p>   <p>     <label for="invert">Invert</characterization>     <input id="invert" name="invert" type="range" min="0" max="100" value="0">   </p>   <p>     <label for="saturate">Saturate</characterization>     <input id="saturate" name="saturate" type="range" min="0" max="500" value="100">   </p>   <p>     <label for="sepia">Sepia</label>     <input id="sepia" proper name="sepia" type="range" min="0" max="100" value="0">   </p>   <input type="reset" form="imageEditor" id="reset" value="Reset" /> </form> <div id="imageContainer" form="eye">   <img src="futurama.png"> </div>

            function editImage() {   var gs = $("#gs").val();                // grayscale   var blur = $("#blur").val();            // blur   var br = $("#br").val();                // brightness   var ct = $("#ct").val();                // contrast   var huer = $("#huer").val();            // hue-rotate   var opacity = $("#opacity").val();      // opacity   var invert = $("#capsize").val();        // capsize   var saturate = $("#saturate").val();    // saturate   var sepia = $("#sepia").val();          // sepia   $("#imageContainer img").css(     "filter", 'grayscale(' + gs+     '%) blur(' + blur +     'px) effulgence(' + br +     '%) contrast(' + ct +     '%) hue-rotate(' + huer +     'deg) opacity(' + opacity +     '%) invert(' + capsize +     '%) saturate(' + saturate +     '%) sepia(' + sepia + '%)'   );   $("#imageContainer img").css(     "-webkit-filter", 'grayscale(' + gs+     '%) blur(' + blur +     'px) brightness(' + br +     '%) contrast(' + ct +     '%) hue-rotate(' + huer +     'deg) opacity(' + opacity +     '%) invert(' + capsize +     '%) saturate(' + saturate +     '%) sepia(' + sepia + '%)'   ); } //When the input value changes, the filter is practical immediately $("input[type=range]").change(editImage).mousemove(editImage);

Now merely the real-time preview of the filter is realized, and the subsequent functions to be realized include supporting complexsvgFilter template, export and download, etc. subsequently completing these steps, you don't take to download other photos to add together filters in the futureAPP😅Yes. Example total version code:https://codepen.io/dragonir/p…

Save space and improve web page loading speed

Practice has proved that the volume of the same moving picture after reducing brightness, contrast and hue saturation can reduce a large office of the volume space compared with the original picture2MAfterward the left and correct pictures are weakened and saved, they can be compressed to1Mabout. In the spider web page, we can useweakenAnd and then throughCSS filterRestore information technology. In this way, we can compress the resource volume, amend the web page loading speed and meliorate the user experience.

Yous tin can read the following tutorials for specific operations:

Contrast switching technology: UsingCSS filterImprove image performancehttps://css-tricks.com/contra…

compatibility

fromcaniuseAs can be seen from the query results,css filterProperties are well supported in modern browsers, exceptIEExcept for browsers, well-nigh other browsers tin can exist used normally. If necessary, the browser kernel prefix can be added. Still, the official website also has the following three issue tips. I believe these problems will exist gradually repaired with the subsequent upgrade of the browser:

In Safari browser, if the child element has animation effect, it volition not be applied with filter.
There is currently no browser back updrib-shadowFilterspread-radiusmethod.
stayBorderIf the element or kid chemical element is set in the browserNegative Z-index, the filter cannot be applied.

What are the magical uses of CSS filter

summary

This commodity simply lists several usesCSS filterCommonly used page furnishings, in factfilterEach of the congenital-in methods tin can have unlimited possible extended applications, such asinvertReverse colors can also be practical tohoverEffect, accommodate the web pagesepiaBrownish value tin achieve eye protection effect, etc. As long equally you utilize your imagination and creativity,filterTin can exist well applied in practice.

The following examples are adept applications. If you lot are interested, you lot tin expand your reading and learning:

Ground drinking glass effecthttps://codepen.io/KazuyoshiG…
Cleaved glass effecthttps://codepen.io/bajjy/pen/…
Hover event using filterhttps://codepen.io/nxworld/de…
Reverse color buttonhttps://codepen.io/monkey-com…
Onetime photoshttps://codepen.io/dudleystor…
Advanced filter editor:https://codepen.io/stoumann/p…

Finally, adhere a filter editor called out in a higher placeRetro Morandi color coldness oil painting resultFilter image（ Wow, that'southward too wow,CSSJujueziyyds🤣）

What are the magical uses of CSS filter

Article accost:https://segmentfault.com/a/xi…Author: dragonir