Invoering
Werken met getalenteerde ontwerpers is zo plezier als webontwikkelaar.Ze komen niet alleen met prachtige lay -outs voor pagina's en vereenvoudigen complexe concepten in gemakkelijk te begrijpen visuals, maar vaak bieden ze me de mogelijkheid om een nieuwe webontwikkelingstechniek te leren om hun visies tot leven te brengen.
Ik heb onlangs zo'n kans gehad tijdens het bouwen van een nieuwe over ons pagina voor de marketingsite van mijn bedrijf.In het mockup had de pagina een groot citaat van onze oprichter en de aanhalingstekens rond de tekst waren gestileerde SVG -afbeeldingen.Toen de ontwerper me de SVG's gaf, kwamen ze echter in een standaard zwarte kleur die niet overeenkwam met de blauwe kleur in het ontwerp.
Voordat ik mijn ontwerper vroeg om nieuwe SVG's te herscheppen om de kleur in het ontwerp te matchen (of te proberen de kleur van de SVG zelf te wijzigen), heb ik een beetje online gegraven en vond ik een nuttige CSS -techniek:filter.Metfilter, Ik was in staat om de kleur van de SVG zelf te veranderen - en deze te veranderen in elke tint die ik wenste - geen last van mijn ontwerper vereist.
In dit bericht zullen we CSS verkennenfilteren kijk hoe het kan worden gebruikt om SVG -beeldkleuren te wijzigen om kleuren in mockups te matchen.
Ik zal zelfs een handige website delen die zal genererenfilterCombinaties om CSS -hexkleuren exact te repliceren.
Hieronder vindt u een video die laat zien hoe het CSS -filter de kleur van aanhalingstekens beïnvloedt SVGS - Merk op hoe ze veranderen van zwart naar lichtblauw.
CSS -filter
Voordat ik de oplossing deel, laten we CSS nader bekijkenfilter- Het was geen techniek die ik hiervoor kende.
Volgens de MDN -documenten overCSSfilter, het wordt gebruikt om grafische effecten zoals vervaging of kleurverschuiving op een element toe te passen.Sommige standaard CSS -functies omvatten:
vervagen- Maak de afbeelding fuzzier of scherper.contrast- Pas het contrast van de kleuren van een afbeelding aan.grijswaarden- Converteer een afbeelding naar grijswaarden.druppel- Pas een vervaagde, offsetversie van de afbeelding toe, getekend in een specifieke kleur en onder de afbeelding samengesteld.
Naast deze standaardfuncties kan een SVG ook worden verwezen met een URL naar een SVG -filterelement - in wezen een aangepast filter.
Dit artikel gaat niet goed in op hoe het filterfuncties werken omdat ze vrij complex zijn.Als je een volledig overzicht wilt van wat ze zijn en hoe ze werken, raad ik aan om deMozilla -documentatievoor meer informatie.
Wat de documenten nu niet benadrukken, is dat meerdere van deze functies kunnen worden gecombineerdsamenIn een enkele functie met groot effect - zoals bijvoorbeeld, het veranderen van de kleur van een SVG, wat we vervolgens gaan dekken.
Filters in actie
Ok, laat me je laten zien hoe we deze filterfuncties in je eigen code kunnen gebruiken.Het eerste wat je nodig hebt, zijn enkele HTML -elementen om deze CSS toe te passen.
Stel de HTML, SVGS en de IMG-Quote-klasse in
De site waaraan ik werkte, werd toevallig gemaaktHugo, een populaire, open source, statische sitegenerator geschreven in Go.Hoewel het in Go is geschreven, vertrouwt het opSjablonenOm de meerderheid van de HTML van de site weer te geven, dus de onderstaande voorbeeldcode moet u relatief bekend uitzien als u HTML kent.
Een opmerking over sjablonen:
Als je ooit de JSX -componenten van React hebt gebruikt, node.js met pug of stuur, of Jekyll - Hugo's sjablonen zijn vergelijkbaar: HTML -elementen met GO -variabelen en functies die zijn besprenkeld met
{{}}om de juiste informatie weer te geven waar de sjabloon is geïnjecteerd.
Hier is de onderstaande code voor het gedeelte Citaat.Voor de doeleinden en duidelijkheid van dit bericht heb ik de GO -variabelen vervangen die in de sjabloon zijn geïnjecteerd door de gegenereerde HTML.
QUOTE-TEMPLATE.HTML
<<sectie klas="citaat-sectie"> <<divisie klas="container"> <<divisie klas="rij"> <<divisie klas="Col-12"> <<rechts klas="Tekst-centrum Quote-tekst"> <<IMG klas="Quote-IMG" SRC="/images/about/quote-left-olid.svg" alt="Decoratief linker citaat mark" />Complexiteit doodt.Het zuigt het leven uit ontwikkelaars.<<divisie />Het maakt producten moeilijk te plannen, bouwen, testen, leveren en ondersteunen.<<IMG klas="Quote-IMG" SRC="/images/about/quote-right-olid.svg" alt="Decoratief juiste citaat marker" /> /rechts> <<divisie klas="tekstcentrum"> <<hlum klas="Tekst-center Quote-source">Ray Ozzie<<span klas="citaat-source-rol">Oprichter en CEO, Blues Wireless/span> /hlum> /divisie> /divisie> /divisie> /divisie> /sectie>Hoewel dit codegedeelte relatief klein is, verdient het nog steeds discussie.Naast de HTML -elementen zijn er nogal wat CSS -klassen aanwezig, waarvan vele hoffelijk zijnBootstrap, een van de originele open source CSS -frameworks voor responsieve webontwikkeling.
Onder de aangepaste klassen zoals Deze klassen zijn echter naast het punt, degene waarop u zich voor dit bericht wilt concentreren, is de Dit Zoals ik hierboven al zei, waren de SVG's die mijn ontwerper me gaf, standaard zwart, maar in het ontwerp Mockup waren de citaten een lichtere tint blauw: hex -kleur Toen ik op zoek ging naar een oplossing om de kleur van deze SVG's te veranderen, kwam ik tegenDit antwoord op StackOverflow. Hoewel er suggesties waren in de antwoordthread die neerkwamen op het rechtstreeks wijzigen van de broncode van de SVG (niet iets dat ik graag wilde doen), maar gelukkig hoefde ik dat niet te doen. De oplossing waar ik op landde, illustreerde niet alleen hoe CSS Dus in mijn eigen SCSS -bestand dat is toegevoegd om de HTML van de Over US Page te stylen, voegt u de volgende klasse toe en de code gekopieerd van de CSS -filtercode -generator. Notr:Hoewel dit bestand in de voorbeeldcode SCSS is in plaats van pure CSS, zou het voor dit bericht geen verschil moeten maken.Het zou een directe 1: 1 -vergelijking moeten zijn. Een zorgvuldige combinatie van meerdere filterfuncties zoals Om de afbeeldingscitaten de juiste grootte en plaatsing te maken ten opzichte van de tekst, naast het wijzigen van hun kleur, moest ik ook de hoogte van de SVG's instellen op En nu zijn de SVG's de juiste kleur die overeenkomt met het mockup zonder de vereiste designerinterventie - en kunnen in de toekomst gemakkelijk worden gewijzigd.Hoe handig is dat? Geweldige ontwerpen hebben de kracht om de aandacht van mensen te trekken en hen te helpen de voordelen van een bepaald product of bedrijf te begrijpen - en vaak helpen ze de ontwikkelaars die deze ontwerpen tot leven brengen, onderweg een nieuw ding of twee leren. Terwijl ik een nieuwe pagina aan het bouwen was voor de website van mijn bedrijf met een groot citaat van onze oprichter van het bedrijf, werd ik geconfronteerd met precies zo'n scenario waarin de gestileerde citatenpunten mij werden gegeven als zwarte SVG -afbeeldingen, maar ze werden in het ontwerp getoondals blauw. Voordat ik mijn ontwerper vroeg om de tijd te nemen om ze opnieuw te creëren in de juiste kleur om bij het ontwerp te passen, heb ik wat voorlopige googlen gedaan en vond ik een veel flexibeler, codedriven oplossing die goed gebruik maakte van CSS En niet alleen bestond het antwoord, maar iemand had ook eenCodepenDat kan overeenkomen met elke hex -kleur!Precies wat ik nodig had, en daar voor iemand om van te profiteren.De community voor webontwikkeling kan zo ontzettend genereus zijn. Kom een paar weken terug - ik zal meer schrijven over JavaScript, React, IoT of iets anders met betrekking tot webontwikkeling. Bedankt voor het lezen.Ik hoop dat deze coole truc om SVG's van de ene kleur naar de andere te converteren met CSS's Wil je eerst op de hoogte worden gebracht wanneer ik nieuwe inhoud publiceer?Abonneer u op mijn nieuwsbrief.citaat-sectieEnQuote-IMG, die ik gebruikte voor aangepaste styling, er zijn er eencontainer,,rij,,Col-12, Entekstcentrum.Alle laatste voorbeelden zijn bootstrap -klassen en dienen om dingen te doen zoals de citaattekst hebben die de hele breedte van de pagina in beslag neemt:Col-12, of centreer de tekst in detekstcentrum.Quote-IMGklasse bij de tweeQuote-IMGklasse is hoe we de CSS gaan bevestigenfilterFuncties naar beide aanhalingstekens Mark SVG's en zorgen ervoor dat ze allebei de juiste kleur zijn die overeenkomt met het ontwerp.Voeg het CSS-filter toe aan Quote-IMG
# 94BBD0.filterkan worden gebruikt om de kleur van de SVG te wijzigen, deze is ook gekoppeld aan eennuttige codepen, waardoor ik de hexkleur kon invoeren die ik wilde (# 94BBD0), en het spuugde de exacte CSS -filtercombinatie uit om deze te maken (plus een nauwkeurigheidslezing van hoe dicht bij perfect de CSS -filtercode was om de originele hexkleur te matchen).En het enige dat ik moest doen was de code kopiëren die werd geproduceerd om te gebruiken in mijn eigen CSS -bestand.Wat een geweldige Timesaver!Over.scss .quote-img{ hoogte:26px; filter: omkeren((84%)) sepia((9%)) verzadigen((1100%)) tinten((165deg)) helderheid((88%)) contrast((83%)); bodem:16px; }omkeren,,sepiaen anderen, en voila - de exacte blauwschaduw die overeenkomt met de hexcode.26pxen geef ze een bodemmarge van16pxOm ze omhoog te duwen om eruit te zien alsof ze de tekst omringen in plaats van gecentreerde inline met de tekst te zitten.Conclusie
filter.filterKomt goed van pas voor jou zoals het voor mij deed.Het is een geweldig gevoel als ontwikkelaar om de kracht te hebben om dit soort wijzigingen door code aan te brengen.Referenties en verdere middelen