Share
In deze tutorial zullen we kijken naar een opkomend CSS-speeltje dat de naam Backdrop Filter krijgt.
Het filtervoorstel op de achtergrond wordt sterk beïnvloed door de ontwerptaal van Apple, met name dat ijzige-transparante-blurry-achtergrond te zien in hun meest recente iOS- en macOS-interfaces. Je zult het gemerkt hebben in het Dock, het Contextueel Menu en het Berichtencentrum.
Backdrop-filter is momenteel gebakken onder CSS-filters niveau 2 en op het moment van schrijven werkt het alleen in Safari 9 met de -webkit- prefix, en zowel Chrome als Opera door de "Experimental Web Platform Features" onder de chrome: // flags menu.
Backdrop-filter is opgenomen als onderdeel van de CSS-filterspecificatie en dus op dezelfde manier als de filter eigenschap, het erft alle bekende filterfuncties zoals grijstinten (), blur (), en sepia(). Het enige verschil hier is dat het de elementen onder het geselecteerde element zal beïnvloeden.
Om het te gebruiken, hebben we minstens twee elementen nodig; het eerste element zal het doelwit zijn, terwijl het tweede element eronder zal liggen. Bijvoorbeeld:
Zet een achtergrond in het eerste element met een lage dekking, zodat we kunnen toevoegen Achtergrond-filter met een functie, bijvoorbeeld, grijstinten () om de achtergrond zwart en wit te maken.
.filter -webkit-backdrop-filter: vervagen (10px); / * Safari 9+ * / backdrop-filter: vervaging (10px); / * Chrome en Opera * / achtergrondkleur: rgba (255, 255, 255, 0.3);
Let op in de volgende demo dat afstammelingen van de .filter elementen (een knop in dit geval) blijven scherp ondanks de blur () functie toevoeging. Dit is een voordeel Achtergrond-filter heeft over de filter eigendom; waar alle nakomelingen zijn getroffen.
Notitie: afbeelding hier overgenomen uit tutorial. Hoe maak je een beetje roodkapje? Geïnspireerde sprookjesachtige illustratie in Paint Tool SAI.
Het combineren van twee filterfuncties in één enkele aangifte is ook acceptabel. Houd bijvoorbeeld onze blur (), maar het toevoegen van de grijstinten () functie om de achtergrond van kleur te verwijderen.
.filter -webkit-backdrop-filter: grijswaarden () vervagen (10px); / * Safari 9+ * / backdrop-filter: grijstinten () vervagen (10px); / * Chrome en Opera * / achtergrondkleur: rgba (255, 255, 255, 0.3);
Andere functies die u aan de mix kunt toevoegen, zijn onder meer:
Accentsconagua
helderheid(): acceptatie van een getal van 0 tot oneindig of percentage. Elk nummer hieronder 1, bv. 0.8, zal het element verdonkeren en een willekeurig aantal hierboven opgeven 1 zal het element verlichten.contrast(): accepteert een getal en percentage dat vergelijkbaar is met de helderheid() functie, behalve dat deze functie het elementcontrast definieert.omkeren(): deze functie genereert de tegenovergestelde of negatieve kleuren van de achtergrond. Op dezelfde manier accepteert de functie ook een getal en een percentage als de waarde.Als u het gewenste effect niet kunt vinden in deze standaardfuncties, kunt u altijd een geavanceerder filter toevoegen via SVG. Maak een SVG-filter met een unieke ID en sla het op in een .svg het dossier:
Raadpleeg het filter met de url () functie, zoals zo.
.filter -webkit-backdrop-filter: url (... /images/filter.svg#morph); / * Safari 9 * / backdrop-filter: url (... /images/filter.svg#morph); / * Chrome en Opera * /
Helaas is het toevoegen van filter met de url () functie lijkt niet te werken in een browser op het persent tijdstip. Maar eenmaal goed geïmplementeerd, zou het beeld er zo uit moeten zien.
Aangepast filter met SVG. Er zijn een aantal praktische implementaties op het web waar we achtergrondfilters op een zinvollere manier kunnen toepassen dan alleen een garnering. Een goed voorbeeld is medium, dat de post-beeldafdekking en afbeeldingen binnen de berichtinhoud vervaagt voordat de afbeelding volledig is geladen.
Onscherpe afbeelding op Medium.comEen ander voorbeeld uit de echte wereld is Facebook, dat afbeeldingen met volgroeide, ongepaste of verontrustende inhoud vervaagt, voordat gebruikers hebben ingestemd met het volledig bekijken van de afbeelding..
Facebook vervaagt een gewelddadige afbeelding volgens hun Facebook Community Standard-richtlijn.Door de jaren heen is CSS verbeterd met nieuwe specificaties die ontwerpers in staat stellen om meer aantrekkelijke interfaces op het web te bouwen. Transformaties, overgangen en animaties hebben allemaal hun steentje bijgedragen, en nu komen Backdrop-filters er ook voor.
Hoewel het misschien te vroeg is om backdrop-filter in productie te gebruiken, laten deze demo's zien dat we binnenkort filtereffecten op elementen kunnen toepassen op een meer vereenvoudigde manier en uiteindelijk minder afhankelijk zijn van zware JavaScript- of Canvas-bibliotheken. Tot die tijd, volg de Webkit Blog voor updates over deze en andere projecten.
