Låt oss gå till den andra delen av vår artikel om hur man hanterar Paint API för att runda komplexa kanter
ekerkontroll
I alla exempel vi har sett betraktar vi alltid en radie som tillämpas på alla hörn av varje form. Det skulle vara trevligt om vi kunde styra radievärdet för varje hörn individuellt, på samma sätt som border-radius-egenskapen tar upp till fyra värden. Så låt oss utöka variabeln –path för att överväga fler parametrar.
Egentligen kan vår bana uttryckas som en värdelista [x y]. Vi kommer att göra en värdelista [x y r] där vi kommer att ange ett tredje värde för radien. Detta värde krävs inte; om den utelämnas återgår den till huvudradien.
.box { display: inline-block; höjd: 200px; bredd: 200px; –sökväg: 50% 0 10px,100% 100% 5px,0 100%; –radie: 20px; -webkit-mask: färg (rundad-form); }
Ovan har vi ett värde på 10px för det första hörnet, 5px för det andra, och eftersom vi inte angav något värde för det tredje hörnet, ärver det 20px som definieras av variabeln –radius.
Här är vår JavaScript för värdena:
var Radius = []; // … var p = poäng[i].trim().split(/(?!(.*)s(?![^(]*?))/g); om (sid[2]) Radius.push(parseInt(s[2])); annars Radius.push(r);
Detta definierar en array som lagrar radien för varje hörn. Så efter att ha dividerat värdet på varje punkt testar vi om vi har ett tredje värde (s[2]). Om det är definierat använder vi det; om inte använder vi standardradien. Senare använder vi Radius[i] istället för r.
Detta lilla tillägg är en trevlig funktion när vi vill inaktivera radien för ett specifikt hörn av formen. Faktum är att vi ska titta på några olika exempel nedan.
Fler exempel
Jag visar dig några demos med detta trick. Jag rekommenderar att du ställer in radievärdet till 0 för att bättre se formen och förstå hur banan skapas. Kom ihåg att variabeln –path beter sig på samma sätt som sökvägen som vi definierar inuti clip-path: polygon() .
Exempel 1: CSS-formulär
Många galna former kan skapas med denna teknik. Nedan är några av dem gjorda utan extra föremål, pseudoföremål eller hackkoder.
Se Pen CSS Shapes av Temani Afif (@t_afif) på CodePen.
Exempel 2: Pratbubbla
I den föregående artikeln lade vi till en ram till ett pratbubblaelement. Nu kan vi förbättra det och runda hörnen med denna nya metod.
Se penntexten och pratbubblan av Temani Afif (@t_afif) på CodePen.
Om du jämför det här exemplet med den ursprungliga implementeringen kommer du att märka att det är exakt samma kod. Jag har precis gjort två eller tre ändringar i CSS för att använda den nya Worklet.
Exempel 3: Ramar
Nedan finns några bra ramar för ditt innehåll. Ingen mer huvudvärk när vi behöver gradientgränser!
Se Pen Frames av Temani Afif (@t_afif) på CodePen.
Lek bara med variabeln –path för att skapa din egen responsiva ram med vilken färg du vill.
Exempel 4: Sektionsavdelare
SVG behövs inte längre för att skapa de där vågiga sektionsavdelare som är så populära idag.
Se Pen CSS-avdelaren av Temani Afif (@t_afif) på CodePen.
Observera att CSS är lätt och relativt enkel. Jag har bara uppdaterat rutten för att generera nya instanser av splittern.
Exempel 7: Formmodellering
Genom att leka med stora radievärden kan vi skapa coola övergångar mellan olika former, speciellt mellan en cirkel och en vanlig polygon.
Se Pennformsformningen av Temani Afif (@t_afif) på CodePen.
Lägger vi till lite animation på kanterna får vi former som “andas”.
Se Penna Andningsformerna av Temani Afif (@t_afif) på CodePen.
Slutsatser
Jag hoppas att du har njutit av “hemligheterna” med CSS Paint API. Under hela den här serien har vi applicerat paint() på ett gäng verkliga exempel där API:t tillåter oss att manipulera element på ett sätt som vi aldrig har kunnat göra med CSS – eller utan att tillgripa hack eller magiska siffror. . Jag tror uppriktigt att CSS Paint API gör det enkelt att lösa till synes komplicerade problem och det kommer att vara en funktion som vi kommer att använda om och om igen.
Naturligtvis, när de andra webbläsarna kommer ikapp det…
relaterade inlägg
Komma igång med Bootstrap-Vue steg för steg
Idag kommer vi att visa dig hur du använder BootstrapVue, beskriva installationsprocessen och demonstrera grundläggande funktionalitet. Projektet är baserat på det mest populära CSS-ramverket i världen – Bootstrap, för att…
Bootstrap 5 beta2. Vad erbjuder den?
När Bootstrap 4 släpptes för tre år sedan kommer vi i den här artikeln att presentera vad som är nytt i världens mest populära ramverk för…
Skapa en enkel CSS-snurrlastare
I dagens artikel kommer vi att visa hur man animerar en grundläggande laddare som snurrar när någon fördefinierad åtgärd är definierad, som att ladda en bild. Det kan användas på en webbplats…
Hur man använder Parallax.Js-effekten på din webbplats
Idag ska vi skriva om parallaxeffekten, liknande parallaxrullning, och hur man implementerar den för att förbättra din målsida. I webdev säger de mobil först…
Ihållande mörkt läge med CSS och JS
Vi skrev nyligen om hur man gör ett bytbart alternativt tema eller färgläge, en mycket användbar och populär funktion för webbplatser. Dagens artikel kommer att handla om…
Hur man använder maskering i CSS
När du klipper ett element med hjälp av egenskapen clip-path blir det klippta området osynligt. Om du istället vill göra en del av bilden ogenomskinlig eller applicera något annat…
Vad är skillnaden mellan Flexbox och Grid?
Låt oss gå direkt till saken och försöka besvara denna fråga med enkla förklaringar. Det finns många likheter mellan Flexbox och Grid, till att börja med att de används för layout…
Projekt
Vi använder våra egna och tredje parts cookies för att förbättra våra tjänster, sammanställa statistisk information och analysera dina surfvanor. Detta gör att vi kan anpassa innehållet vi erbjuder och visa dig reklam relaterade till dina preferenser. Genom att klicka på “Acceptera alla” accepterar du lagringen av cookies på din enhet för att förbättra navigeringen på webbplatsen, analysera trafik och hjälpa till med våra marknadsföringsaktiviteter. Du kan också välja ‘Endast systemcookies’ för att endast acceptera de cookies som behövs för att webbplatsen ska fungera, eller så kan du välja de cookies du vill aktivera genom att klicka på ‘Inställningar’
Godkänn alla systemcookies endast inställningar
Alltid aktiv
Strikt nödvändiga cookies
Dessa cookies är nödvändiga för att webbplatsen ska fungera och kan inte inaktiveras i våra system. De ställs vanligtvis bara in som svar på dina handlingar när du begär tjänster, som att ställa in dina integritetsinställningar, logga in eller fylla i formulär. Du kan ställa in din webbläsare för att blockera eller varna dig för dessa cookies, men vissa delar av webbplatsen kommer inte att fungera. Dessa cookies lagrar ingen personligt identifierbar information.
