CSS Tricks: Den ultimata guiden för avancerade CSS-hack

Om du någonsin har funderat på att lära dig några avancerade CSS-tricks är den här guiden en bra start. Den täcker följande CSS-ämnen;

Vad är Animate.CSS [Tutorial]

Det här avsnittet förklarar hur man kommer igång med Animate.css bättre stöder webbutvecklare i att skapa kreativa och funktionsanimerade design genom enkel och effektiv programmering. För att uppgradera webbinnehåll och förbättra applikationsdesign är Komma igång med Animate.css [Tutorial] ett utmärkt sätt att skapa unikt innehåll. Utvecklare får en fördel jämfört med andra konkurrerande webbplatser med kreativa och olika funktioner, snabbare och bättre kvalitet på innehållet och bättre kompatibilitet mellan webbläsare när de delar webbplatsinnehåll i den digitala miljön. Animate.CSS-bibliotektillägget erbjuder verktyg, enkelhet och flexibilitet för alla webb- och tjänster för mobilapputveckling.

CSS-animering är en förlängning av Cascading Style Sheets (CSS) med olika animationsfunktioner. Modulen bäddar in ett bibliotek med design för webbplatser som erbjuder användarna bekvämlighet, kreativitet och professionella webbapplikationer. Webbutvecklare Komma igång med Animate.css [Tutorial] tillämpar animeringsdesigner, redigerar CSS-sekvenser och förbättrar webbdesign genom Cascading Style Sheet-tillägget. Tillägget förenklar utvecklars interaktion vid implementering av animationsdesigner med enkla konfigurationer till specifika HTML-element som kräver mindre bearbetning och minnesanvändning från Flash eller JavaScript.

fördelar

Utan tvekan får Animate.CSS popularitet från utvecklargemenskapen för enkelhet och kompatibilitet. Primärt har Animate.CSS enkla och redo att använda stilark-skript som kopieras och klistras in i utvecklarens webbplatsdokument för hög bekvämlighet för utvecklaren. Modulen är också konstruerad för att hindra användare från att nöja sig med generiska GIFS- eller Flash-bilder som begränsar utvecklarens kreativitet och kräver ytterligare steg som saktar ner genomförandetiden för projektutvecklingen. Dessutom finns det många korta animationsdesignstilskript för animeringsegenskaper när du kommer igång med Animate.css. Viktigt är att Cascading Styles Sheet (CSS) Animate.CSS-programmet innehåller avancerade nyckelframtillägg som bättre utrustar utvecklare med utvecklingsverktyg för designanpassning som behövs för kreativa och funktionella animerade mönster. Tillsammans med den lättanvända modulen visar sig Animate också kompatibel för ytterligare uppgraderingar eller förbättringar med Javascript.

Hur fungerar animationer i Animate.CSS

CSS animate är en unik biblioteksmodul byggd av en enkel och effektiv design. För att förklara innehåller Animate.CSS två huvudkomponenter för styling av webbplatser. Den första komponentstilen och lagrar information för CSS-animationer. Den andra komponenten använder dock "keyframes" för att signalera webbutvecklare om början och slutet på sekvenser för animationsdesign. Denna komponent använder också avancerade övergångspunkter för att möjliggöra bättre animeringskonfiguration.

Skapa en animering

CSS-animationer inkluderar primära och underegenskapliga komponenter. Vanligtvis kommer webbutvecklare att komma igång med Animate.css med Animate.CSS-stilspecifika skriptelement och inkluderar ytterligare designstilar för animeringsegenskaper. Mer specifikt fungerar egenskaper mellan olika stye-funktioner för att utrusta webbplatser med funktionella och enkla animationer. Animeringsegenskaper inkluderar stora kriterier för stilelement som animationsnamn, varaktighet, timing och förseningar. Andra former inkluderar animationsräkning, regi, fyllning och spel. Lyckligtvis möjliggör biblioteksmodulen lyhörd webbdesigners att tillämpa dessa egenskaper på webbplatsanimationer med enkla textsekvenser, snarare än att formatera och testa många koder med funktionell osäkerhet.

keyframes

Genom tillägget.CSS Animate arbetar användare med "keyframes" för att skapa animering med komponentelement. Till förmån för användarna konfigureras "keyframes" genom Cascading Style Sheets för att erbjuda användarna gradvis redigeringsfunktioner till CSS-stiluppsättningar samtidigt som webbutvecklare kan fokusera på viktiga animeringsfunktioner. För att utarbeta hjälper "keystones" användarna att utföra konfigurationer inom timing, varaktighet och detaljerade detaljeringselement inom en annan designsekvens.

Nyckelbilder At-rule

Dessutom kräver visningen av animationerna att användarna använder "keyframes at-rule" för att bättre ansluta till komponentelement. För mer specifika egenskapskonfigurationer korrigerar tillägget animeringsvärden mellan design "keyframes". För identifieringsändamål värderar webbutvecklare "keyframes at-rule" för att redigera flera namn inom sekvenser och lokalisera element som inte har värde för CSS-stiluppsättningen. Dessutom utökar “keyframes at-rule” redigeringsfunktionerna för webbutvecklare med användbara kodindikatorer för animationer för att bättre återge element under designstilar.

Annimate.CSS Transform

Lika viktigt, Cascading Style Sheets (CSS) Animate.CSS-funktioner erbjuder "transformerande" egenskaper för bättre redigering av element. Element som inte är kompatibla med CSS-mönster ändras med transformeringsverktyget. Fördelaktigt kommer utvecklare som använder transformeringsverktyg som att skala, rotera, skeva och översätta att konfigurera element för bättre design på webbapplikationer. Omvandla egenskaper, antingen 2d eller 3d, ger användarna ytterligare design kreativitet och funktionalitet när de skapar webbplatser.

Skala

Med skala anpassar användare av Animate.CSS designens dimensioner för att bättre passa webbinnehåll. Den specifika CSS-transformfunktionen korrigerar elementens bredd och höjder för att bättre skala innehåll i webbappar. Som standard börjar skalningsvärden med ett attribut på ett, vilket anpassar sig till ett värde som är större eller mindre än en form mer eller mindre skalbar för element. Enkelt uttryckt möjliggör attributen på CSS proportionerliga korrigeringar vid hantering av skalningskonfigurationer till element- och innehållsdesign.

skew

För att fortsätta består transformationsverktygen på Animate.CSS av en skev-funktion för webbutvecklare. Utformningen av elementegenskaper anpassas till en horisontell och vertikal axel på webbappar som kan vara sneda. Vanligtvis inkluderar skevfunktionerna “x” och “y” värden för att hjälpa utvecklare att snedvrida element på axeln.

översätta

En annan transformeringsfunktion är CSS translate. På samma sätt delar översättningsfunktionen också “x” och “y” värden för att hjälpa till med bättre designfunktionalitet för utvecklare. Till skillnad från CSS skew-funktionen tillåter översättningsverktyget användare att placera ett visst element inom både den horisontella och vertikala axeln.

Rotera

Dessutom använder utvecklare som kommer igång med Animate.css transformeringsverktyget också en roteringsfunktion för element. Med lätthet kan användare justera vinkeln på ett element i valfri riktning. Rotationsvärdena är positiva när innehållet roteras medurs och faller ner till negativa värden när ett element justeras moturs.

Matris

Slutligen inkluderar CSS-transformeringsfunktioner matrisfunktioner för element. Särskilt användbart för utvecklare, matrisverktyget sammanfogar 2d-konfigurationer till ett enda element för universella redigeringsapplikationer.

Bara-lägg-vatten CSS-animation

Animate.CSS-systemet hänvisar till "Just-Add-Water." Modulen klassificeras som en "cross-browser" animationskälla som indikerar dess användarvänlighet och enkel design för nya eller etablerade webbutvecklare.

Installation

Till att börja med kräver administratörer installation av programmet Just Add Water Cascading Style Sheets Animation. För det första sker installationen via NPM. För att definiera samarbetar Node Package Manager med JavaScript skript, som delar designen av Animate.CSS. Som standard fungerar programmeringsspråket med Node.JS som en stabil förutsättning för webbutveckling. Därefter använder användarna den här koden "$ Node Package Manager install animate.css – spara" för att installera programmet.

Alternativt följer sekvensen "$ garn lägg till animate.css." För att förklara ytterligare hjälper en garninstallation också administratörer med projektinstallationer. Vanligtvis associerar "Garn" installationer med beroenden som använder koder eller annan anständighet för installation. Till skillnad från installeringsmetoden Node Packaging Manager (npm), gäller "garn" -alternativet inte "–spara" eller "–sav-dev" när du lägger till nya program. På djupet kan ett beroende inte fungera om inte med stöd från ett annat mer framträdande program. Kombinationen av modulen och installationstillägg samarbetar med innovativa nya biblioteksmodeller.

Använda Animate.CSS [Tutorial]

På webbplatsen Animate.CSS är källor med öppen källkod tillgängliga för webbutvecklare. Användaren kan välja Ladda ner Animate.css för att komma åt olika Cascading Style Sheet animationstext. Listan innehåller ett brett utbud av designstilar och kan gälla direkt på användarwebbplatsen. Dessutom kan ladda ner kod är en annan metod för att komma igång med Animate.Css.

Komma igång med Animate.CSS på webbplatser

Att tillämpa CSS-formatmallar (Cascading Style Sheets) på utvecklarwebbplatsen är enkelt, snabbt och effektivt. Textimplementering kräver dock användarens uppmärksamhet på detaljer. Först måste Cascading Style Sheets (CSS) animeras. CSS-formatmall måste placeras korrekt i utvecklarens dokument ” . ” Därefter tillämpar administratören den "animerade" stilarklassen på ett element i webbapplikationsdokumentet. Det animerade skriptet följer också CSS-namn för att utföra specifika animeringsfunktioner för elementet. Alternativt kan användare byta till andra versioner, som CDNJS, som en annan värd för Annimate.CSS-elementkonfigurationer. Formatet visas nedan:

Animationer på Animate.CSS

Webbdesigners som kommer igång med Animate.css värderar enkel och kvalitetsanimering som skiljer innehåll i webbapplikationer. Animeringsformatarken på Animate.CSS innehåller ett överflöd av CSS-animeringsstilar (Cascading Style Sheet) som anpassar dokumentelement. Dessutom, för att skapa en animationsdesign till ett element måste utvecklaren mata in den "animerade" taggen. Klassen bäddas in i ett dokumentelement och kräver ytterligare instruktioner för att bättre definiera innehållsattribut. Vanligtvis förlitar sig utvecklare på ett aktivt element med en funktion inställd på "oändlig" för att möjliggöra flera cykler av animeringsdesigner på en webbplats. Även högt ansedda är varaktighetsbegränsningarna för animationer, tillsammans med förseningar och användaranimationsinteraktion tillgängliga i listan Animate.CSS-formatmallar.

Börja tidsanimeringar

För det mesta söker webbutvecklare som kommer igång med Annimate.CSS animeringsdesigner för att förbättra innehållet på webbplatser. Rimligt bör animationen ha förmågan att utföra som en metod för att locka webbplatsbesökare till viss information på webbplatser. Därför bör utvecklare förstå hur man konfigurerar element med avseende på animeringsfördröjningar, hastighet och timing.

Dröjsmål

För närvarande hjälper Animate.CSS utvecklare med fördröjningsfunktioner med ett visst formatmall. Till exempel kan ett formatmall med en fördröjningsfunktion se ut så här: “ Exempel . ” I det här scenariot inträffar en fördröjning på två sekunder för ett element som har en studsanimerad klass. Fördröjningsklasser identifieras som ”fördröjning” och kan ändra fördröjningsfunktioner från en till fem sekunder. Ytterligare fördröjningsperioder är acceptabla om användare lägger till Cascading Style Sheet (CSS) texter, särskilt koden.

Fart

Dessutom har elementdesigner på Annimate.CSS hastighetstidsvärden. Utvecklaren kan korrigera hastigheten på en animation med hjälp av ett specifikt formatmall för klassen. Till exempel kan en animeringssekvens se ut så här: “ Exempel . ” Dessutom gör utvecklaren det animerade elementet att studsa och skapar en hastighetsfunktion på "snabbare". Dessutom kan klassnamn hänvisa till som "långsam", "långsammare", "snabb" och "snabbare." Tillsammans med klassnamn adresserar hastighetstider som "2 sekunder", "3 sekunder", "800 millisekunder" och "500 millisekunder" hastigheten för elementfunktionen. Som standard är elementhastigheterna inställda på ett standardvärde på en sekund. Användare, med ytterligare tillägg, kan ändra tidpunkter genom manuell textredigering inom Cascading Style Sheets (CSS) Annimate.CSS-formatmallar.

Starta anpassade byggnader

Tidigare nämnts kan utvecklare manuellt justera Animate.CSS-formatmallarna för att utveckla nya animationer som är skilda från standardinställningarna. En annan källa, som ”gulp.js, ”Är Animate.CSS-kompatibelt och erbjuder enkla att konfigurera anpassade animationsbyggnader. Mer specifikt är webbläsarplattformen ett automatiseringsprogram för uppgiftsutveckling. För webbutvecklare och programmerare analyserar och organiserar Gulp-förlängningen en mängd rördrivna filer för att stödja plugin-program på användarservrar. I det här fallet interagerar Gulp med beroenden för att skapa anpassade animationsbyggnader och funktioner.

Som ett exempel kallar den inledande fasen utvecklare att mata in formatmallskriptet "$ cd path / to / animate.css /." Återigen adresserar administratören dokumentet med en "$ npm-installation". Därefter kommer webbutvecklare att gå med i byggnaderna i "NPX Gulp" -förpackningsprogrammet. Som ett plus är förpackningen inom Gulp justerbar för att inkludera animerade designstilar för att passa webbinnehållet. Användare skulle redigera detta paket med ett skript "animate-config.json" för att välja och välja lämpliga byggnader. Genom att välja byggalternativ med värdena "true" och "false" bestäm vilka builds som läggs till eller tas bort från NPX Gulp-listan.

Att skriva bra kod handlar om mer än bara att få de resultat du vill ha på en webbsida. Bra kod ska vara så effektiv och kortfattad som möjligt. Även om det ofta finns många sätt att uppnå samma resultat är den mest kortfattade och enkla metoden, med få undantag, det perfekta valet.

Det finns två stora fördelar med att skriva bra, ren kod. För det första kan det dramatiskt förbättra webbplatsens hastighet och prestanda. Ju mindre din fil är (och ju färre externa förfrågningar du skickar) desto mindre tid tar det för din webbplats att laddas i webbläsaren. För det andra har det ovärderligt att skriva bra kod att göra det lättare att underhålla. Oavsett om du kodar ett projekt på egen hand eller med andra utvecklare som är inblandade, desto mager är din kod (helst med bra dokumentation), desto mindre blir det huvudvärk för alla som behöver besöka kodbasen.

Bästa metoder för att skriva bra kod är ofta tillämpliga på alla programmeringsspråk, även om detta inlägg specifikt kommer att skräddarsys för att förbättra CSS på din webbplats.

Ta bort onödiga HTTP-begäranden

Många gånger under utvecklingen av en webbplats kan det hända att du får flera externa filer och beroenden som är kopplade till från ditt HTML-dokument eller CSS-filer. Du kan prova flera olika teckensnitt eller CSS-ramar som finns på en extern CDN. Var och en av dessa beroenden representerar en HTTP-begäran som din webbplats gör varje gång den laddas i webbläsaren. Detta belastar platsens laddningstid mycket, och alla dessa förfrågningar läggs upp ganska snabbt.

Om du har lagt till en massa externa teckensnittsfiler till ditt projekt men för närvarande endast refererar till 1 eller 2 i din CSS-fil, gå igenom och ta bort något av dessa länkade beroenden från <head> i ditt HTML-dokument.

Använder du bara ett CSS-ramverk för bara några få kodrader? Överväg att kopiera och klistra in dessa rader till ditt huvud .css och ta bort länken till den ursprungliga CSS-ramkoden.

Förenkla och konsolidera CSS-regler

När du skriver CSS kan du sluta skriva upprepade gånger samma regler för olika element och väljare. I datorprogrammering gäller det ofta upprepade konceptet ”DRY” (Don't Repeat Yourself) även för CSS. När du befinner dig att skriva samma CSS-regler för olika väljare, hitta ett sätt att konsolidera dem.

Till exempel istället för att skriva:

p {font-size: 14px; marginal: 0 auto; display: inline-block; } H1 {marginal: 0 auto; } Img {display: inline-block; marginal: 0 auto; }

 

Överväg att skriva:

p, h1, bild {marginal: 0 auto; } P {font-size: 14px; } P, bild {display: inline-block; }

 

Eller ännu bättre:

/ * tillämpas på p-, h1- och img-element * / .def-margin {margin: 0 auto; } / * Tillämpas på p-element * / .def-fs {font-size: 14px; } / * Tillämpas på p- och img-element * / .d-ib {display: inline-block; }

 

Även om detta kanske inte verkar vara en stor skillnad (åtminstone när det gäller kodrader) har det totala antalet tecken minskat avsevärt, vilket kommer att påverka sidens laddningstider. Dessutom konsoliderar den element och väljare som använder samma stilar, vilket gör det tydligare att se vilka vanliga stilar som tillämpas på olika element.

 Minskar dina ID- och klassvärden

Det är ofta frestande att tilldela en aspekt av stilpresentationen som din klass eller ID-värden, men det här är långt ifrån perfekt. För ett felmeddelande kan det till exempel ofta verka vettigt att använda red som klass- eller ID-värde, så här:

Detta är ett felmeddelande

 

Men vad händer om du ändrar färg eller andra stilar i denna klass? Den här klassen kommer inte längre att ha en direkt relation till dess innehåll eller presentation och kommer sannolikt att orsaka förvirring. Ett bättre val i denna situation skulle vara att använda ett klassvärde som förklarar dess funktion snarare än dess stilistiska presentation:

Detta är ett felmeddelande

 

Det är alltid en bra idé att använda klass- och ID-värden som beskriver innehållet eller funktionen för det elementet, snarare än några stilistiska beskrivningar. Stil kan förändras många gånger under hela processen för att skapa en webbplats, men att använda deskriptorer för funktioner gör koden mycket mer läsbar och lätt att underhålla.

Minskar dina väljarval

Det finns ofta många olika sätt att välja ett element, men det finns ofta effektivare sätt än andra. Även om det är möjligt att hysa väljare inuti varandra för att komma till ett specifikt element, men om du befinner dig att behöva gå för många nivåer in, kan det vara bäst att ompröva om ett klass- eller ID-värde skulle fungera bättre.

Kontrollera om det finns uppsägningar

Under utformningen av din webbsida kan du prova en mängd olika färger, till exempel många nyanser av samma färg. Det är lätt att lämna dessa olika regeluppsättningar i din kod, utan att bestämma en definitiv enda färg. Ett bra verktyg att använda för att kontrollera om dessa typer av uppsägningar är cssstats.com.

Inte bara kommer detta att förenkla din kod, det kommer också att göra din överdesign mycket mer konsekvent, snarare än att ha 40 olika nyanser av en färg på webbplatsen.

Förminska dina CSS-filer

När dina CSS-filer är helt redo för produktion och distribution till en live-server är det en bra idé att minifiera dem för bästa prestanda. En minifier tar bort allt vitt utrymme från din källkod, vilket minskar filstorleken avsevärt. Eftersom källkoden inte är beroende av vitt utrymme för dess funktionalitet (endast dess läsbarhet), kommer detta inte att påverka din webbplats negativt.

Det finns många kostnadsfria verktyg för att minifiera CSS (och JS-filer). Ett alternativ är cssminifier.com 

Konsolidera dina CSS-filer

Som kort berördes i det senaste inlägget är det en bra idé att konsolidera dina resurser så mycket som möjligt. Även om det finns ett bra argument för att hålla CSS modulärt under utvecklingsstadiet (som att hålla layoutregler i en CSS-fil, färgalternativ i en annan etc.) - i slutändan vill du konsolidera alla dessa CSS-regler i en enda fil för bästa prestanda.

Native CSS3-animationer

Även om populära bibliotek gillar Animate.css gör det enkelt att lägga till CSS-animationer i ditt projekt, de består till stor del av vanliga rörelser som "studsa", "skaka" och andra lagerrörelser som kan kännas ganska inaktuella vid överanvändning. Genom att utnyttja de inbyggda animationsegenskaperna i CSS kan du skapa mycket mer komplexa och anpassade animationer långt bortom bara rörelse. CSS-animationer kan påverka elementets färg, storlek, position eller andra egenskaper som finns tillgängliga i CSS3-specifikationen. Det här inlägget ger en introduktion till att komma igång med de inbyggda CSS3-egenskaperna och några exempel på möjliga användningsområden för dem.

Lägga till animering till ett element

För att ge en HTML-elementanimering är de första två stegen att deklarera ett namn för animationen och en varaktighet. Detta görs med animation-name och animation-duration egenskaper:

#minAnimation {
    animationsnamn: färgbyte;
    animation-varaktighet: 5s;
}

 

animation-duration kan acceptera valfritt värde i sekunder eller millisekunder (deklareras med s or ms efter ett heltal).

Skapa animationen

När du har förklarat ett namn och varaktighet är det dags att bygga animationen. Detta görs med hjälp av @keyframes regel, följt av animationsnamnet:

@nyckelbilder färgbyte {
    
}

 

Insidan av @keyframes regel kommer att vara en regel för varje "bildruta" i animationen, angiven med ett procentvärde från 0% till 100%. 0% är början på animationen, 100% är slutet, med alla möjliga procentvärden däremellan. Detta kan tänkas ungefär som en video eller en blädderbok, där varje sida i boken är en unik ram som när den kombineras skapar rörelse:

@nyckelbilder färgbyte {
    0% {
        bakgrundsfärg: svart;
    }  
    50% {
        bakgrundsfärg: grå;
    }
    100% {
        bakgrundsfärg: vit;
    }
}

 

I exemplet ovan är color-change animering kommer att ändra background-color av #myAnimation element från black at 0%, Till gray at 50% sedan äntligen till white at 100%.

Kraften med att använda anpassade animationer är dock att du kan ändra absolut alla CSS-egenskaper, med vilken nivå som helst av stegvisa förändringar i ramar. Ett bra exempel på detta är för :hover pseudoklasser. CSS :hover stater används ofta för att tillämpa en färg eller mindre stilistisk förändring när ett element hålls över musen, men animationer gör att dessa ändringar kan bli mycket mer detaljerade.

Knappen:hovring {
    animationsnamn: knapp-anim;
    animation-varaktighet: 5s;
    animations-fyll-läge: framåt;
}
@nyckelbilder knapp-anim {
    0% {
        bakgrundsfärg: blå;
    }
    50% {
        transformera: skala(2.1);
        bakgrundsfärg: dodgerblue;
    }
    75% {
        transformera: skala(2.5);
        bakgrundsfärg: vit;
    }
    100% {
        transformera: skala(1.5);
        bakgrundsfärg: blå;
    }
}

 

I exemplet ovan button-anim animeringseffekter någon button när den svävar över. Dess background-color ändras i fyra lika steg under en varaktighet av 5 sekunder, där storleken på själva elementet ändras i diskreta, unika steg också (original, till 2.1x, till 2.5x och sedan till 1.5x originalet).

En ytterligare fastighet som ingår i exemplet ovan är animation-fill-mode fast egendom. Den här egenskapen kan användas för att ange hur stilar ska tillämpas innan (och efter) animationens varaktighet har slutförts. Använder sig av animation-fill-mode: forwards indikerar att stilarna i den sista ramen för animationen (de i 100% regel) förblir tillämpad. Utan tillägg av animation-fill-mode egendom, stilar av button skulle återgå till sitt ursprungliga tillstånd efter att animeringen hade slutförts.

Slutsats

CSS-animationer kan vara mycket komplexa och detaljerade, med upp till 100 olika ramar som kan specificeras. Med tanke på att den här funktionen är tillgänglig i vanilj CSS, är de ett utmärkt sätt att lägga till visuellt intresse och komplexitet i ett webbprojekt, som stöds väl i alla moderna webbläsare.

Använda färgtoningar i CSS3

Sedan introduktionen av CSS3 har det varit möjligt att använda färggradienter som bakgrund, med 2 eller fler färger gradvis tona in i varandra. Tidigare behövde skapa gradienter göras med Photoshop eller annat bildredigering programvara. Om det används effektivt är detta ett utmärkt sätt att lägga till intresse och till och med textur till webbdesigner, utöver bara statiska bakgrundsfärger. Även om äldre versioner av Internet Explorer inte stöder den här funktionen, kan du säkert lägga till dem i ett projekt, eftersom alla moderna webbläsare stöder det. Det här inlägget kommer att ta en titt på hur du använder gradientbakgrunder och de tillgängliga anpassningsalternativen.

Grundläggande linjära övertoningar

För att ställa in bakgrunden för ett element (oavsett om det är body, en div, eller annat element), background egenskap används, vanligtvis med ett färgvärde:

kropp {bakgrund: #fffbed; }

 

För att använda en linjär lutning istället för en hel färg, inkludera minst två färger (med antingen hex-, rgb-, hsl- eller namngivna färgvärden), separerade med kommatecken, inuti linear-gradient() värde:

kropp {bakgrund: linjär gradient (#fffbed, # 45add3); }

Leverantörsprefix

Eftersom olika webbläsare hanterar linear-gradient värde annorlunda rekommenderas det starkt att använda leverantörsprefix tillsammans med det. Detta kommer att säkerställa att värdet förstås av Safari, Firefox, Chrome och Opera. För att använda leverantörsprefix, lägg bara till två ytterligare background regler med linear-gradient värde prefix med -webkit- och -moz-. De ska också visas före den vanliga regeln utan något leverantörsprefix:

kropp {bakgrund: -webkit-linjär-gradient (#fffbed, # 45add3); bakgrund: -moz-linjär-gradient (#fffbed, # 45add3); bakgrund: linjär-gradient (#fffbed, # 45add3); }

 

Det är lite extra att skriva, men det säkerställer att dina övertoningar stöds i alla större webbläsare.

Kontrollriktning

Som standard övergår övertoningar från topp till botten, med den första färgen inkluderad i linear-gradient värdet är toppfärgen.

Du kan dock ändra riktningen på lutningen genom att lägga till några riktningsnyckelord före färgerna (t.ex. to top, to bottom, to right, to left, to right top, Etc)

kropp {bakgrund: linjär gradient (till höger längst ner, #fffbed, # 45add3); }

 

När du ställer in riktningen till ett hörn kan antingen x- eller y-axeln anges först (dvs. to right bottom och to bottom right är samma).

Flera färger

Du kan använda mer än två färger i en lutning, helt enkelt genom att separera dem med kommatecken:

kropp {bakgrund: linjär gradient (#eaecee, # abebc6, # 45add3); }

or

body {bakgrund: linjär-gradient (#eaecee, # ebdef0, # f4f6f7, # abebc6, # 4eb39d, # 45add3); }

 

Färgstopp

Ibland vill du kontrollera var en viss färg börjar, så att vissa färger tar mer utrymme eller har ett större utrymme att övergå till. För att lägga till dessa "färgstopp", lägg bara till ett procentvärde efter en viss färg för att ange var den färgen ska börja:

kropp {bakgrund: linjär gradient (#eaecee, # abebc6 30%, # 45add3% 80); }

 

Det här är bra för att ha finare kontroll över dina övergångar och kan användas för intressanta effekter.

Radiella lutningar

En tillgänglig variation på linjära gradienter är radiella gradienter. Radiella lutningar kommer att övergå från elementets centrum och övergå utåt som en cirkel. De använder nästan exakt samma syntax som linjära gradienter, bara med radial-gradient värde istället:

body {background: radial-gradient (#eaecee, # 45add3); }

 

En översikt över CSS-positionering

En av de viktigaste egenskaperna i CSS att förstå är position fast egendom. Medan mycket kan göras för att layoutelement på en sida utan att uttryckligen ändra värdena för position egendom, de flesta avancerade layoutproblem kräver att du känner till de olika värdena som är tillgängliga för den här egenskapen. Detta blogginlägg tar en titt på de fyra huvudvärdena för position, och de fall där du kan använda var och en av dem.

Position Statisk

static är standardvärdet för position, vilket betyder att för alla element du inte uttryckligen anger något värde för position, det kommer att vara static som standard. Element med en position of static accepterar inte några förskjutningsegenskaper, till exempel margin or padding .

I exemplet nedan, var och en div kommer att staplas ovanpå varandra, eftersom var och en är ett element på blocknivå:

Enhet 1 Enhet 1 Enhet 2 Enhet 2

 

kropp {font-family: Helvetica; färg vit; } .container {bakgrundsfärg: #fffbed; } .enhet {bakgrundsfärg: # 337e7e; höjd: 80px; bredd: 80px; textjustera: centrum; linjehöjd: 80 pixlar; border: # 696969 2px solid; }

 

Position Relativ

Element med en position of relative är mycket lika värdet på static, men med en stor skillnad: de kan acceptera kompensationsegenskaper för top, right, bottomoch left.

När det gäller ett element med en position of relative, ställer dessa offsetegenskaper in avståndet från elementens normala läge. Med andra ord, om du skulle ställa in ett element med en position of relative att ha en top värde 10pxskulle elementet visas 10px lägre än där det normalt skulle visas om dess position były static.

Element med en position of relative stanna inom det normala "flödet" av element, förskjutningsegenskaperna helt enkelt förskjuter elementen från dess normala flöde:

Enhet 1 Enhet 1 Enhet 2 Enhet 2

 

kropp {font-family: Helvetica; färg vit; } .container {bakgrundsfärg: #fffbed; } .enhet {bakgrundsfärg: # 337e7e; höjd: 80px; bredd: 80px; textjustera: centrum; linjehöjd: 80 pixlar; border: # 696969 2px solid; position: relativ; } .unit-1 {top: 10px; } .unit-2 {höger: 30px; } .unit-3 {vänster: 20px; } .enhet-4 {botten: -30px; höger: 40px; }

 

Position absolut

Element med en position of absolute accepterar också boxoffsetegenskaper, även om de tas bort från det normala flödet av element. Använda egenskaper för boxoffset på en absolute positionerat element kommer att placera det elementet i direkt relation till dess överordnade element.

Tar exakt samma CSS som position: relative; exemplet ovan, men helt enkelt ändra position till absolute kommer att resultera i en helt annan positionering av de enskilda elementen:

Enhet 1 Enhet 1 Enhet 2 Enhet 2

 

kropp {font-family: Helvetica; färg vit; } .container {bakgrundsfärg: #fffbed; } .enhet {bakgrundsfärg: # 337e7e; höjd: 80px; bredd: 80px; textjustera: centrum; linjehöjd: 80 pixlar; border: # 696969 2px solid; position: absolut; } .unit-1 {top: 10px; } .unit-2 {höger: 30px; } .unit-3 {vänster: 20px; } .enhet-4 {botten: -30px; höger: 40px; }

 

Position fixad

Ett element med en position of fixed är mycket lik position: relative;, även om positionen är relativt webbläsarens visningsport, snarare än något överordnat element. Dessutom kommer elementet inte att rulla med sidan, förblir "fast" och alltid synligt, oavsett var användaren befinner sig på sidan. Detta används ofta för att ”fixa” sidhuvuden och sidfot på sidan för att alltid förbli synliga.

En översikt över CSS-väljare

I webbutveckling finns det ofta många sätt att uppnå samma resultat. En nyckel till att skriva bra kod (oavsett språk) använder den mest effektiva metoden som är möjlig, att skriva så lite kod som nödvändigt och hålla kodbasen till ett absolut minimum. Detta kommer att resultera i både snabbare sidladdningstider och tydlighet i källkoden för dig själv och andra utvecklare. När du skriver CSS är det viktigt att veta hur du väljer de element du vill rikta dig in och den bästa metoden för att göra det. Det här avsnittet tar en titt på några av de vanligaste CSS-väljarna och de bästa tillfällena att använda var och en av dem.

Skriv väljare

För varje HTML-element finns en motsvarande väljare för den elementtypen. Oavsett om det är en div, p, img eller något annat HTML-element, motsvarande CSS-väljare är exakt densamma minus vinkelparenteserna som används i taggen:

p {färg: svart; } div {display: inline: block; } bild {bredd: 200px; }

 

Typväljare är perfekta när du vill rikta dig varje förekomst av en given elementtyp och tillämpa samma stilar för dem alla.

Klassväljare

Klassväljare använder ett klassnamn associerat med specifika element. Denna väljare är perfekt när du vill tillämpa vissa stilar på en mängd olika element, oavsett elementtyp. Du kan till exempel ha en klass av .responsive tillämpas på a p, div och img element:

Denna punkt är lyhörd En lyhörd div

 

Följande CSS-kodblock kommer att rikta in sig på alla dessa element med samma klass:

. svarar {bredd: 80%; marginal: 0 auto; }

 

Klassväljare anges alltid i ett formatmall med en period (.) före klassnamnet.

ID-väljare

ID-väljare liknar klassväljare, även om de bara kan tillämpas på ett enda element i ett givet HTML-dokument. Detta är användbart när du endast vill rikta in dig på ett enda element:

Detta är ett stycke med unika stilar

#myParagraph {färg: grön: bredd: 200px; flyta till vänster; display: inline-block; }

 

ID-väljare anges alltid i ett formatmall med pund- eller hash-tecknet (#) före ID-namnet.

Universalväljare

Den universella väljaren riktar sig mot varje enskilt element i ett HTML-dokument. Detta används ofta för CSS-återställningar, som att ta bort standardmarginal, stoppning och andra stilar från alla element:

* {marginal: 0; stoppning: 0; }

 

Universalväljaren designeras med hjälp av asterisken (*).

:hover

En annan vanlig väljare (och en av de många CSS-“pseudoklasserna”) är :hover. Om du lägger till den här pseudoklassen i valfri väljare riktas elementets svävare. Detta innebär att dessa stilar kommer endast tillämpas när en användare svävar över det elementet med sin mus:

a: sväva {text-dekoration: understrykning; färg: lila; }

 

:hover används ofta för länkar eller något element som du vill markera när användaren svävar över den. Den här pseudoklassen fungerar bra för bärbara och stationära användare, men har ingen verklig användning för mobila enheter på grund av bristen på en muspekare.

Förstå specificitet i CSS

Under processen att skriva CSS-kod kommer du alltid att stöta på situationer där koden du precis skrev verkar ha absolut ingen effekt alls på sidan. Detta kan vara frustrerande, förvirrande och svårt att felsöka utan hjälp av något liknande Utvecklarverktyg för Chrome. Att ha en bättre förståelse för hur specificitet och kaskad i CSS fungerar kan dock gå långt för att mildra dessa problem helt och hållet. Det här avsnittet syftar till att peka på några av de viktigaste frågorna som vanligtvis dyker upp när du försöker bestämma vilken kod som blockerar vad du försöker göra.

Det är välkänt att CSS (som står för Cascading Style Sheets) fungerar uppifrån och ner. Detta innebär att, generellt sett, har kod som ligger längre ner i dokumentet företräde framför annan kod högre upp. Ett enkelt exempel på detta är att ha två deklarationer riktade mot samma element:

 

p {färg: blå; } p {färg: grön; }

 

Styckeelementens färg i detta exempel kommer alltid att vara grön eftersom den visas efter deklarationen som tilldelar styckena färgen blå.

Problemet är att väljare utöver bara elementväljare har varierande nivåer av specificitet, och att kombinera väljare kommer att öka deras specificitet och åsidosätta andra regler.

Element och pseudoelement

Element och pseudoelement har den lägsta specificiteten. Eftersom de riktar in sig alla förekomster av ett visst element, med hjälp av elementväljare bör endast användas när du verkligen vill att dessa stilar ska tillämpas på alla instanser av stycken, divs, rubriker, etc. Till exempel kommer följande kod att tillämpa en 1px heltäckande svart kant på alla styckeelement i dokumentet.

 

p {border: 1px fast svart; }

 

Klasser, attribut och pseudoklasser

Klasser, attribut och pseudoklasser har en högre specificitetsnivå och gäller endast element som är associerade med dem. De kan återanvändas, i den meningen att du kan låta klasser tillämpas på flera olika element när du vill att de ska dela samma stilar. Dessa stilar åsidosätter också stilar som strider mot de på elementnivå. I exemplet nedan kommer alla styckeelement att vara gröna, förutom alla med klassen alert, som kommer att vara röd:

 

p {färg: grön; } s.varning {färg: röd; }

 

IDs

ID har en av de högsta nivåerna av specificitet och kommer att åsidosätta nästan vad som helst. Till skillnad från klasser som kan återanvändas så många gånger du vill, ska ID endast tillämpas på a enda på sidan.

 

p # myParagraph {färg: svart; } s.varning {färg: röd; } p {färg: grön; }

 

Även om det finns ytterligare två deklarationer för stycken under p#myParagraph deklaration, ID för #myParagraph kommer alltid att vara svart.

Inline stilar

Inline-stilar har en ännu högre specificitet än ID. Även om det i allmänhet är mycket missnöjt att tillämpa alla stilar inline, eftersom det gör det svårt att hitta och hantera de stilar som tillämpas på element, finns det situationer där det kan motiveras.

Mitt röda stycke

 

Ovanstående inline-stil kommer alltid att vara röd, oavsett vilka stilar som används någon annanstans. *

!important

Den ena varningen till ovanstående, även inklusive inline-stilar, är användningen av !important. Närhelst !important läggs till i en CSS-regel kommer denna regel att ha företräde framför allt annat, oavsett vad:

 

p {färg: blå! viktigt; }

 

!important kan vara en livräddare när du inte kan räkna ut vad som blockerar din CSS, men det kan också lätt missbrukas och bara göra din kod mer röra. Som en allmän regel, använd !important bara när allt annat misslyckas.

Ett extremt praktiskt verktyg för bättre förståelse och kontroll av specificitet är Keegan Street's Specificity Calculator. När du är i tvivel kan det vara mycket användbart att kontrollera dina väljare här.

Använda WOW.js och Animate.css för Scroll-Triggered Animations

Animationer är ett utmärkt sätt att lägga till visuell spänning och rörelse på dina webbplatser och de populära animation.css biblioteket har tillhandahållit ett enkelt sätt att lägga till CSS-baserade animationer på vilken webbplats som helst. Vad händer om du bara vill utlösa dessa animationer när användaren har rullat till ett specifikt avsnitt på din webbplats?

Detta kan naturligtvis åstadkommas via jQuery, men att använda JavaScript-biblioteket för den funktionen enbart lägger till onödig bulk för en funktion som annars kan åstadkommas med ett enkelt skript. WOW.js löser detta problem och erbjuder ett lättanvänt bibliotek för att lägga till animationer som utlöses genom att rulla, utan jQuery krävs, på endast 3 kB.

Det här inlägget kommer att ge en guide om hur du använder WOW.js och animate.css för dina webbprojekt, inklusive olika alternativ för installation av det.Klicka att tweet

Om du är intresserad av att lära dig om olika animationer förutom rullningseffekter, gå till den sista delen av detta blogginlägg för en lista över andra CSS- och Javascript-animationsbibliotek.

Om animate.css

Att använda CSS-animationer är en enkel och enkel metod för att lägga till iögonfallande visuella effekter på vilken HTML-webbplats som helst. Ett av de mest populära biblioteken för CSS-animationer är animate.css. Även om biblioteket kan vara litet är det ett perfekt verktyg för nybörjare webbutvecklare som vill lägga till mer spunk på sin webbplats utan komplex användning av keyframing. Medan detta blogginlägg huvudsakligen kommer att diskutera hur man använder WOW.js, är animate.css-filen extremt mångsidig och kan också användas med andra filer.

Några av de många animationer som du kan lägga till element på din webbplats inkluderar:

• Statiska animationer: Dessa typer av animationer visas precis när du laddar och öppnar en webbsida. Med andra ord, ingen rullning (WOW.js) inblandad!
• Rulla animationer: Dessa typer av animationer visas när användaren rullar in i elementets vy på en webbsida. Det här är den typ av animering vi kommer att fokusera på med WOW.js. Denna animering kan också skapas med jQuery.
• Klicka på animationer: Med en kombination av jQuery och Javascript-programmering kan du skapa animationer på din webbplats som körs när användaren klickar på ett visst element.
• "Special" animationer: Dessa udda animationer kan användas på element när du verkligen vill fånga användarens uppmärksamhet direkt med en iögonfallande animation.

Om WOW.js

WOW.js är en Javascript-fil som, när den läggs till i ditt HTML-dokument, kan skapa övertygande och dynamiska effekter på en webbplats. Denna rullningseffekt är ett av de mest populära alternativen för webbdesigners, eftersom det brukade licensieras som öppen källkod under MIT. När du är på en webbplats som implementerar WOW.js visas de animerade elementen magiskt när du rullar ner på webbplatsen. För ett exempel på denna effekt, besök den officiella webbplatsen för WOW.js. Det är ett utmärkt designverktyg att använda med animate.css.

Jämfört med andra animationsalternativ med Javascript är WOW.js extremt populärt för sin enkla, bulkfria kod. Observera att du kan använda andra CSS-animationsbibliotek för att aktivera WOW.js; WOW.js behandlar bara animate.css som standardbibliotek. Detta inkluderar bibliotek som CSShake eller DynCSS. WOW.js är gratis att använda för projekt med öppen källkod, men kräver köp av en licens för alla kommersiella projekt.

Lägga till animate.css och WOW.js i ditt projekt

För att börja animera din webbplats är det första steget att lägga till animate.css och WOW.js i ditt HTML-dokument. Det finns några sätt att lägga till filerna i ditt HTML-projekt. Du kan ladda ner distributionen för animate.css och WOW.js från var och en av deras respektive officiella webbplatser, eller helt enkelt länka till de filer som finns tillgängliga från CDN. CDN är värd för en stor samling bibliotek för Javascript och CSS.

En stor fördel med att använda animate.css för din webbplats är att CSS-koden finns i bara en fil, vilket förenklar ditt projekt oerhört. När du har lagt till CSS-filen i ditt projekt är allt du behöver göra att länka den till din HTML i dokumentets huvud. Alternativt kan du helt enkelt länka CDN-filen till ditt HTML-dokument. Beroende på om du direkt lägger till animate.css-filen eller bara länkar till CDN-filen, kommer bara href att variera något:

Installera animate.css och WOW.js

Klicka på länkarna nedan för att se filerna animate.css och WOW.js på CDN:

• animate.css Icke-minifierad version: https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css
• animate.css Minifierad version: https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css
• WOW.js icke-minifierad version: https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js
• WOW.js Minifierad version: https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js

(Obs: "Minifierad" kod avser borttagning av vitt blanksteg och kortare tecken för att bevara funktionalitet men skapa mer kompakta filstorlekar. Detta kommer att göra koden svårare att läsa och redigera för dem som vill anpassa eller göra ändringar i koden.)

Använda npm för att installera animate.css och WOW.js

Alternativt kan du använda en pakethanterare som npm (Javascript-pakethanteraren) för att installera både animate.css och WOW.js genom att bara skriva några nyckelord i kommandoraden. Kör följande kommando från kommandoraden från roten till din projektkatalog:

npm installera wowjs

En fördel med att installera WOW.js via npm är att det automatiskt också installerar animate.css som ett beroende. På det här sättet behöver du inte bry dig om att följa instruktionerna för nedladdning av animate.css med ett av alternativen som diskuteras ovan. På samma sätt som att lägga till filen direkt eller använda CDN kommer animate.css att länkas i ditt dokument (href-sökvägen varierar beroende på filplatsen):

För skriptet kan du lägga till WOW.js till din webbplats genom att länka den längst ner i ditt HTML-dokument, strax under stängningstaggen. Detta måste följas av en tagg för att aktivera WOW.js, som visas nedan:

ny WOW (). init ();

Lägga till animationer i element

När båda filerna har lagts till i projektet är det dags att välja HTML-element som du vill animera när du rullar. Alla element med en klass av .wow förblir dolda tills användaren når det på sidan. Du kan tillämpa den här klassen på rubriker, text, bilder eller till och med en större del av din webbplats som finns i en märka.

Lägg till en klass av .wow till valfritt HTML-element som du vill animera med WOW.js, till exempel ett h1-element:

Välkommen till min webbplats!

Animate.css har 75 olika animeringsstilar att välja mellan, som alla kan demo på den officiella webbplatsen (se ovan). När du väl har valt en animering som du vill använda lägger du till dess namn som en CSS-klass på elementet för att animera, tillsammans med klassen "wow". Här är några exempel på animate.css och WOW.js i aktion på ditt HTML-dokument:

Välkommen till min webbplats!

H1-elementet försvinner nu till höger när användaren har bläddrat till det på sidan.

Klicka här

Innehållet i taggen kommer nu att skapa en pulserande effekt på webbplatsen när användaren har bläddrat till den på sidan.

Ändringar av WOW.js-animationer

Det finns små justeringar som kan göras i CSS-animationerna genom viss inline-redigering på ditt HTML-dokument. Du kan lägga till dessa fyra egenskaper efter klass = "wow" och till och med kombinera dem i valfri HTML-tagg. I grund och botten är dessa helt enkelt egenskaper ett bra och enkelt sätt för användare att lägga till mångsidighet i rullningsanimationerna. Nedan beskrivs de fyra egenskaper som du kan ändra när du animerar ett HTML-element med WOW.js:

• data-wow-delay = “_ s”: Vanligtvis visas elementet automatiskt när användaren rullar till sin plats. Med den här egenskapen kan du fördröja animeringen med _ sekunder.
• data-wow-duration = “_ s”: Du kan låta animeringen pågå _ sekunder, vilket är användbart för att påskynda eller sakta ner elementets utseende.
• data-wow-iteration = “_”: Med den här egenskapen kan du göra att animationen upprepas, eller upprepas, _ gånger innan den blir statisk på din sida.
• data-wow-offset = “_”: Den här egenskapen tillåter animeringen att starta _ pixlar från webbläsarens kant innan den animeras.

Alternativa animationsbibliotek till animate.css och WOW.js

Bounce.js

Bounce.js är ett lättanvänt verktyg för att skapa fantastiska CSS3- och Javascript-animationer för din webbplats på bara några minuter. Utvecklare kan experimentera med en lista över olika animationer på Bounce.js webbverktyg för att generera statiska nyckelbilder och till och med anpassa animationerna direkt i webbläsaren. När animeringen uppfyller dina standarder kan du exportera CSS-koden direkt från webbplatsen och klistra in den i ditt projekt. Sedan kan du använda animeringarna som du skapade i webbläsaren och direkt använda dem på element i ditt HTML-dokument. Webbverktyget genererar till och med en unik, förkortad URL som låter dig komma åt din animering i en ny webbläsare om du när som helst vill redigera den.

Om du vill lära dig mer om att skapa animationer med Javascript och installera Bounce.js-biblioteket i ditt projekt kan du följa instruktionerna för att installera Bounce.js-biblioteket på dess Github-webbplats.

Anime.js

Ett annat populärt animationsbibliotek är Anime.js, som använder CSS-egenskaper, Javascript-objekt, SVG och DOM-attribut för att skapa imponerande animationer. Julian Garniers samling innehåller dussintals sömlösa animationer som du direkt kan lägga till på din egen webbplats. Du kan visa olika animationer som skapats med Anime.js i Anime.js Codepen-samlingen. Till skillnad från WOW.js används inte detta animationsbibliotek nödvändigtvis för att animera HTML-element på en webbplats. Snarare används Anime.js för att skapa separata animerade "illustrationer" för din webbplats helt och hållet för att lägga till dess visuella tilltalande. Några av mina favoriter inkluderar Garniers linje ritning animation och lager-animationer demonstration. För att lägga till Anime.js-biblioteket i ditt projekt kan du installera via npm.

Visa anvisningarna och dokumentationen för att använda Anime.js på Github-webbplats.

Hover.css

Hover.css producerar iögonfallande effekter på din webbplats genom att helt enkelt hålla musen över animerade element. Du kan använda detta animationsbibliotek för att lägga till mer spunk till vanliga 2D-element som knappar, logotyper eller bilder. På Hover.css webbplats kan du bläddra och testa olika animationer som bakgrund, 2D, skugga och konturer genom att hålla muspekaren över varje knapp. De som planerar att använda en eller några Hover.css-animationer kan helt enkelt ladda ner filen och kopiera / klistra in den specifika animationen i sina egna formatmallar. Men om du planerar att använda många Hover.css-animationer kan du i princip följa samma procedur för att installera och länka Hover.css-formatmallen till ditt HTML-dokument. Du kommer att ha tillgång till alla Hover.css-effekter för att animera alla lämpliga HTML-element på din webbplats.

För att se de specifika instruktionerna och dokumentationen för installation och användning av Hover.css, gå till tjänstemannen Github-webbplats.

Typed.js

För att skapa den ikoniska skrivmaskinen eller skriveffekten är ett populärt alternativ för webbutvecklare att använda Typed.js. Många webbplatser använder detta animationsbibliotek för att skapa strängtypeffekter på sidor, inklusive den populära grupparbetsplattformen Slack. Installera bara Hover.css-biblioteket via npm eller länka CDN-filen till ditt HTML-dokument. Med i huvudsak en kan du animera en HTML-texttagg med skrivmaskineffekten. Med tillräcklig tweaking kan du skapa mer avancerade skriveffekter på din webbplats för en ännu mer fantastisk effekt. Till exempel kan du skapa effekten av att datorn pausar när den skriver eller effekten av att ta bort bokstäver i ett ord.

Den officiella Github-webbplats innehåller all källkod och detaljerad dokumentation om hur du kan anpassa skrivanimationen för att möta dina personliga preferenser.

CSShake

Som titeln antyder är detta CSS-bibliotek en samling animationer som alla "skakar" HTML-element på din webbplats. Denna knäppa animation är perfekt om du vill uppmärksamma en viss bild eller del av din webbplats. Det gör också elementen på din webbplats mer interaktiva, vilket alltid är ett plus för front-end-utveckling. Du kan experimentera med variationen av skakanimationer själv på CSShake-webbplatsen genom att hålla muspekaren över olika element på sidan. Källkoden på CSShake Github innehåller också detaljerad dokumentation som beskriver hur du skapar dina egna anpassade skakanimationer. Du måste förstå och lära dig att justera jQuery-egenskaperna genom att läsa dokumentationen.

När du är redo att installera CSShake i ditt eget projekt, följ instruktionerna för installationen på Github-webbplats.

Introduktion till CSS flexbox och avancerade CSS-väljare

CSS Flexbox (eller Flexible Box Layout) var ett sent tillskott till CSS3-specifikationen och syftade till att ta itu med många layoutproblem på en webbsida, särskilt när man arbetar med flera enhetsstorlekar och lyhörd webbdesign. Medan den senaste CSS grid egenskaper kan skapa komplexa rutnätbaserade layouter, flexbox är ofta ett bättre val för att lägga ut små grupper av komponenter i en större layout, vanligtvis med mycket mindre kod än vid användning grid. Det här inlägget ger en kort introduktion till att använda flexbox-egenskaperna för vanliga layoutproblem.

display: flex

Det första steget för att skapa en flexbox är att använda en display: flex egendom till ett överordnat element som fungerar som en behållare för alla flexartiklar i den.

Medan de flesta layouter kräver användning av ytterligare egenskaper. En enkel layout med två kolumner kan skapas med enbart den här egenskapen.

Vi kan till exempel ta en container med 2 div element staplade ovanpå varandra och förvandla den till en 2-kolumnlayout med tillägg av display: flex fast egendom:

Original kod:

html

    
    
</div>

 

CSS:

#behållare {
    höjd: 600px;
    bredd: 800px;
}
# kolumn1 {
    bakgrundsfärg: blå;
    höjd: 300px;
    bredd: 400px;
}
# kolumn2 {
    bakgrundsfärg: grön;
    bredd: 400px;
    höjd: 300px;
}

 

CSS med flexbox:

#behållare {
    höjd: 600px;
    bredd: 800px;
    display: flex;
}
# kolumn1 {
    bakgrundsfärg: blå;
    höjd: 300px;
    bredd: 400px;
}
# kolumn2 {
    bakgrundsfärg: grön;
    bredd: 400px;
    höjd: 300px;
}

 

flex-direction

Vi kan lägga till ytterligare kontroll över flödet av element i vår flexcontainer via flex-direction fast egendom. Som standard kommer alla element i en flexcontainer att flöda i en row från vänster till höger, även om vi också kan ställa in den här egenskapen till att ha värdena på column, row-reverse or column-reverse.

Justera avstånd och inriktning med justify-content

Ofta kommer det att finnas mer utrymme i en container än vad elementen i den tar upp, så det är troligt att du vill motivera avståndet mellan elementen på ett visst sätt. Som standard kommer alla element i en flexbehållare att anpassas till början av behållaren (kallas flex-start) men det finns en mängd andra alternativ. Observera att den faktiska positionen kommer att variera beroende på inställningen för flex-direction: om riktningen är inställd som row sedan flex-start kommer att indikera hela vägen till vänster om behållaren, medan en riktning på column skulle indikera toppen av behållaren för flex-start.

Återgå till vårt ursprungliga kodexempel, vi ökar width av vår container lite för att bättre visa olika justify-content inställningar.

justify-content: center placerar alla element direkt i mitten av kolumnen:

    
    
</div>

 

#behållare {
    höjd: 600px;
    bredd: 1000px;
    display: flex;
    justify-content: center;
}
# kolumn1 {
    bakgrundsfärg: blå;
    höjd: 300px;
    bredd: 400px;
}
# kolumn2 {
    bakgrundsfärg: grön;
    bredd: 400px;
    höjd: 300px;
}

 

justify-content: flex-end är motsatsen till justify-content: flex-start, placera elementen i slutet av behållaren:

justify-content: space-between kommer att placera alla element i vardera änden av behållaren, vilket lämnar utrymmet kvar i mitten av behållaren, liksom runt eventuella ytterligare element inuti (i fall av en behållare med 3 eller fler element):

justify-content: space-around är precis som spae-between, även om det finns ytterligare utrymme i slutet av behållaren:

Det finns dock många andra mer avancerade väljare, i syfte att rikta in sig på element med en större specificitet. Att vara bekant med rätt väljare för jobbet är en av de viktigaste aspekterna av att lära sig CSS. Detta inlägg kommer att belysa några av de mest användbara avancerade väljare för inriktningselement.

Barnväljare

Barnväljare används för att rikta in sig på element som är kapslade i varandra. Det finns två olika typer av barnväljare, efterkommande och direkta barnväljare.

Efterkommande väljare

Efterkommande väljare används för att rikta in sig på ett visst element (eller grupp av element), oavsett var de är kapslade i sitt överordnade element. Till exempel:

.container s

 

skulle rikta in sig på båda instanser av p element i följande HTML:

Detta är ett stycke Detta är ett annat stycke kapslat längre ner.

 

Direktväljare för barn

Om du bara vill rikta in dig på element som befinner sig i nästa nivå ner från det överordnade elementet är det direkt underordnad väljaren som ska användas.

.container> s

 

skulle bara välja den första p element i följande HTML:

Detta är ett stycke, riktat av direktbarnsväljaren Detta är ett annat stycke, som inte riktas av direktbarnsväljaren

 

Syskonväljare

Allmänna syskonväljare

Allmänna syskonväljare väljer valfritt element på samma kapslade nivå som visas efter det första syskonet. Till exempel:

h1 ~ div

 

kommer att rikta de 2 noterade div element som visas efter h1, men inte den före den, eller något som kan vara kapslat på ytterligare nivåer:

En paragraf Titeln Denna div kommer att riktas in Ytterligare ett stycke Denna div kommer också att riktas in

 

Intilliggande syskonväljare

Den intilliggande syskonväljaren används för att rikta in element som visas direkt efter ett visst element. Till exempel:

h1 + s

 

kommer bara att rikta in sig på p element direkt efter h1:

... ... Denna punkt kommer att riktas in ... ...

 

Pseudoklasser

I det tidigare inlägget av CSS-väljare berörde vi pseudoklasser via :hover väljare. Det finns dock många andra pseudoklasser, till exempel :link, :visited, :active och mycket mer.

Att utforma en a länk som inte har besöks ännu, använd :link väljare:

a: länk {färg: grön; }

 

Att stryga en a länk som har besöks, använd :visited väljare:

a: besökt {färg: blå; }

 

Du har nu möjlighet :active väljaren kan användas närhelst en användare engagerar sig med ett element, som att klicka på det:

.click-me: aktiv {gränsradie: 50%; }

 

:focus används när ett element har "fokus", till exempel ett formulärelement när användaren har angett det via ett mus- eller tangentbordsklick:

a: fokus {höjd: 120%; }

Slutsats

Hittar du något användbart CSS-trick i det här inlägget? Dela dina kommentarer nedan.