36 CSS-fane-designs til et mere organiseret og professionelt udseende website

En fane-interface eller blot en fane er et grafisk kontrolelement, som man kan bruge til at indeholde flere paneler eller dokumenter i et enkelt vindue, som brugerne kan få adgang til. På grund af dette er det perfekt til websider og applikationer med en enkelt side. Det giver ikke kun brugerne en pæn og organiseret brugergrænseflade, men gør også navigationsprocessen meget nemmere. Så hvis du ejer et teksttungt websted eller blot et indholdstungt websted, så er CSS-faner den nemmeste måde at appellere mere til dine brugere.

Med dette i tankerne har vi i dag lavet en liste over de bedst mulige muligheder for vores brugere i dag. Håndplukket og listet i henhold til stylingelementer og de bedste designtrends håber vi, at denne liste hjælper dig med at få den perfekte start. Fra animeret til simpelt, fra komplekst til minimalt, har vi inkluderet muligheder for det hele.

Tabbed Content Section

Toppen af vores liste er dette premium-lignende CSS-fane-design af Allen Brady. Enkelt, elegant og effektivt, dette design er fantastisk til alle typer hjemmesider, uanset om de er professionelle eller personlige. Det er komplet med forskellige kreative ikoner, der er animeret til at fungere som faner. Hver af disse har et udpeget område til indhold og også en pladsholder til mediefiler. Ved hjælp af simpel CSS har skaberen også formået at tilføje en effektiv hover-effekt også. Og det bedste her er, at den ikke er afhængig af JS, hvilket betyder, at den overordnede skabelon er ret nem at forstå og replikere.

Info / Download

Material Tabs & Pages

Følgende en mere professionel tilgang med designet, er denne næste variation skabt med alle de små detaljer i tankerne. I modsætning til den foregående mulighed har denne dog sine rødder på JS-implementeringen sammen med CSS og HTML. Den starter ud med en simpel CSS-fane med både ikoner og tekst til at skildre hvert valg. Når der klikkes på et af dem, vises indholdet under det materialebaserede kort under fanen. For en endnu mere engagerende appel vil du finde brugen af levende farveskemaer, der alle skifter med fanerne. Med brug af simpel CSS er der forskellige animationer og overgange implementeret overalt. Alle disse er fuldt responsive og tilpasser sig også efter enhedsskærmene med lethed.

Info / Download

CSS Tab Selection

Det er endnu et simpelt, minimalt rent CSS-fabdesign, som vi har det næste i rækken til dig, der viser en mappelignende struktur. Baseret på kun CSS og HTML for den overordnede struktur samt de implementerede animationer, kan vi sige, at det er ret nemt at forstå og replikere. Fanerne er designet til at ligne mappefaner, og ligesom med enhver mappe skifter den indholdet i overensstemmelse med den valgte fane. For den ekstra detaljering finder du også en simpel hover-effekt over de numeriske ikoner på fanen. Det ser også ud til at være responsivt, hvilket betyder, at designet automatisk tilpasser sig til alle enhedsrammer med lethed.

Info / Download

Pure CSS Tabs

Lad os starte med noget enkelt, elegant og rent. Denne Pure CSS-fane er visuelt tiltalende og fungerer perfekt til at vise flere indlæg eller indhold i en enkelt skærm. Beroligende lilla og hvide farveskemaer er ret tiltalende at se på. Og at bruge bare den enkle HTML- og CSS-struktur for at få resultatet er imponerende. Ligesom med de fleste af eksemplerne på fanebladet bruger dette også den horisontale visning, der viser muligheden for at skifte mellem. En simpel overgang af farveskyggen bruger radio-input. Det betyder, at for at fremhæve, hvilken sektion der er klikket på, bruges en mørkere nuance af lilla. Skaberen af dette design har holdt det simpelt, men under demoen kan du dog også finde et link til 3D-versionen, som også bruger JS.

Info / Download

Animerede CSS-faner

Taler vi om 3D-effekten og en mere avanceret mulighed for at vælge, er denne animerede CSS-faner det perfekte eksempel. Selv om det er animeret på en subtil måde, giver det helt sikkert et imponerende resultat. Og det bedste er, at alle koderne er baseret på CSS og HTML. Dette sikrer en nemmere implementering og forståelse af strukturen. Grøn og hvid på en marineblå baggrund fungerer fantastisk. Når man holder musen hen over hver af fanerne, udvider den sig i en jævn animation, som når man klikker på den, ændrer farveskemaet for også at fremhæve valget.

Info / Download

Just Another CSS Tab

Dette er en mere kreativ tilgang til en CSS-fane, da den er komplet med animation, effekter og også innovativ designstruktur. Mens de fleste faner er designet som et simpelt navigationselement, hælder dette mere til et unikt og engagerende element, som dine brugere kan nyde. I stedet for de traditionelle skrifttyper eller tekster, der anvendes på fanerne, har skaberen erstattet dem med flade ikoner. Hver af dem er også designet til at udføre en fantastisk hover- og klik-effekt, der overgår til at fremhæve den valgte fane. Selv indholdet vises ind og ud af billedet ved hjælp af zoom ind og ud-effekten. Samlet set ganske interessant, få adgang til deres fulde struktur ved at følge linket nedenfor.

Info / Download

Responsive CSS Tabs & Accordions

Nu behøver det ikke nødvendigvis at være vandret, bare fordi det er en fane. Denne responsive CSS-faner og harmonika er det perfekte eksempel. Alsidig nok til at blive brugt som enten en harmonika eller en faneblad, og det er også ret nemt at implementere den på dit websted. Den enkle blå og hvide struktur er ren og ser professionel ud. Når der klikkes på fanen, udvides den vertikalt for at vise indholdet indeni. En anden detalje, der er tilføjet, er effekten i radio-button-stil, hvilket betyder, at kun én af fanerne kan åbnes ad gangen. Alle aspekter er holdt ret minimale, hvilket også giver brugerne mulighed for at tilføje deres eget tilpassede touch, hvis de foretrækker det.

Info / Download

CSS Tabs by Timothy M.LeBlanc

Talking about radio buttons and the effect, this CSS tab design is based entirely on a similar style and pattern. I modsætning til de traditionelle faner, der er repræsenteret af tekster eller ikoner, er det her erstattet af radioknapper. Når der klikkes på en af fanerne, vises en dialogboks nedenunder, hvor brugerne kan se indholdet. Ligesom med en radioknap kan der kun åbnes én fane ad gangen, og den klappes straks sammen, når der klikkes på den næste mulighed. Farveskemaerne er holdt ret enkle med lilla og hvidt. En anden lille detalje tilføjet for ekstra kreativitet er farveovergangen på knapperne, når der klikkes på en bestemt fane.

Info / Download

Enkle jQuery-CSS Tabbed Panel

Nu kommer vi tilbage til et mere praktisk og navigationsformålsbaseret design, dette simple jQuery CSS tabbed panel er et andet godt eksempel. Designet er ret ligetil og arbejder for at vise indholdet på en organiseret måde. Hver af fanerne er bestemt med fanebladet panel på toppen. Disse faner, når man holder musen hen over dem, ændrer farven fra hvid til blå, hvilket opnås med simpel CSS. Overgangen af indholdet inde i fanebladet bestemmes dog ved hjælp af JS. Dette sikrer en mere jævn og ren overgang ved ind- og udblænding af visningen. Indholdet inde i panelet er også ekstremt alsidigt og rummer placeringer til alt, herunder tekstindhold, billeder og endda links.

Info / Download

Pure CSS Tabs with indicator

Nu, som navnet antyder, er denne Pure CSS Tabs with indicator, baseret ud fra rent HTML og CSS. Den indeholder et materiale designbaseret kort, der fungerer som basis for fanen. Hver af fanerne er også repræsenteret med et kreativt ikon samt titlen. Enkel med designet, er animationerne stadig ret imponerende. Ved hjælp af simpel CSS er det lykkedes skaberen at få en jævn overgang af indholdet ved hvert klik. Når fanebladets titel er valgt, skifter den også farve og er understreget for at fremhæve valget. Hele kodestrukturen er åben for adgang, følg blot linket nedenfor for at se den.

Info / Download

CSS Tabs Revisited

En mere mørkere version for dem af jer, der leder efter det, er dette fantastiske eksempel CSS Tabs Revisited af Eric Sadowski. Designet er ret imponerende, når man holder sig for øje, at det udelukkende er baseret på HTML og CSS. Skaberen starter med en almindelig baggrund, men har løftet den med alle de stilistiske detaljer. På en mørkere nuance af boksen er fanen repræsenteret med en båndlignende struktur på toppen af det hele. Hver af fanerne har også tekst og et kreativt ikon til at repræsentere hvert afsnit. Når der nu klikkes på indholdet indeni bruger glide op- og glide ned-effekt for at komme ind og ud af syne. Fanerne ændrer også deres farve fra grå til orange for at vise det valgte emne. Tilføj enhver type indhold, uanset om du ønsker at tilføje tekster, links og endda billeder, hvis du foretrækker det.

Info / Download

Simple CSS-faner med skygge

Et minimalistisk og materiale designbaseret CSS-fan-design er perfekt minimalt og alligevel fleksibelt. Designet på grund af enkelheden gør det til den ideelle base, som tilpasser sig til enhver type temaer eller hjemmesider. Tilføjelse af skygger for at skabe en næsten 3D-følelse til det, og det rene hvide farveskema tilføjer også til den papirlignende følelse. Indholdsområdet justerer også længden og bredden i overensstemmelse med det indhold, det indeholder indeni. En anden god ting ved dette design er, at det er fuldstændig responsivt og automatisk tilpasser sig til enhver designskærmstørrelse med lethed. Når man holder musen hen over en af fanerne, kommer teksterne også til syne og udfører en jævn fade-in-effekt. Da den er baseret udelukkende på CSS uden yderligere JS, er hele strukturen ret nem at implementere.

Info / Download

CSS Tabs Menu

Nu, for et mere professionelt og formålsfokuseret design, er denne CSS-fane komplet med alt, hvad du måtte have brug for. Fra fanens design til indholdsholderne til de glatte og rene animationer og overgange er der taget godt hånd om alt. Og selv om demoen kun er en dummy, er den klar til at gå live med blot et par tweaks her og der. Fanerne ved hjælp af CSS-effekter fremhæver det, når der svæves over og ændrer helt farveskemaer, når der klikkes på dem. Som du kan se her, er det muligt at tilføje stort set alt, uanset om du ønsker tekster, links, billeder og endda formularer og CTA-knapper. Slutresultatet er ret utroligt, og det bedste af det hele er, at det er baseret udelukkende på CSS og HTML.

Info / Download

Folder Tabs

En mere kreativ tilgang til et CSS-fane-design, denne stil er baseret på fil og mapper, der er stablet sammen. Skaberen, der bruger en almindelig sort baggrund, har fået de farverige filbaserede faner til at springe mere frem. Event konceptet med at afsløre indholdet inde i hver af fanerne er ret unikt. I modsætning til det traditionelle vertikale design, læner dette sig mere mod den horisontale visning. Når man klikker på en af fanerne, glider den enten til venstre eller højre for at afsløre indholdet indeni. Og hvis du er en af dem, der ønsker at tilføje et engagerende element på dit websted, som dine brugere kan nyde, så er dette det ideelle valg.

Info / Download

Pure CSS Tab Navigation

Nu er dette rene CSS tab-design af Izzy Skye en anden innovativ tilgang med et traditionelt design. Ved at gøre brug af den klassiske toggle-knap viser fanen indholdet indeni på den animerede boks nedenfor. Når der klikkes på en af fanerne, glider indholdet ved siden af footerteksten ind og ud af syne. Og det er ret imponerende, når man tænker på, at der anvendes overskydende JS-koder.

Indholdsboksen fungerer også som en pladsholder for billede eller titel og links. Når der holdes over den, afslører den den glatte overgang, mens den viser den animerede knap, der fører til den fulde visning af indholdet. Dette design er perfekt til at tilføje nemmere navigation for brugerne at bruge. Du kan også implementere dette på teksttunge websteder eller blogs for at kategorisere det. Farveskemaet med sort, pink og hvid er også ret fleksibelt og alsidigt.

Info / Download

Tabs Widget

En anden på vores liste over CSS faner er dette rene og professionelt udseende design fra Sitepoint. Mens skønheden her er fokuseret på enkelhed, er animationerne og overgangene virkelig gode. En simpel hvid baggrund med den marineblå fanebladsektion fungerer fantastisk sammen. Det starter ud som en simpel navigationsfaneblad, som når der klikkes på afslører indholdet indeni. Skaberne har også tilføjet den radioknapslignende effekt, som sikrer, at kun én af fanerne kan åbnes ad gangen. Den valgte fane er også fremhævet med en farveovergang til en lysere nuance. En anden ekstra detalje her er også den responsivitet, som den har. Automatisk tilpasning til enhver enheds skærmstørrelse påvirker dette på ingen måde dit websteds responsivitet.

Info / Download

CSS Tab by Chen Hui Jing

Dette Pure CSS Tab design af Chen Hui Jing er responsivt, rent med udseendet og temmelig innovativt. De fanesektioner, der bruges her, gør brug af kreative ikoner i stedet for tekster til at starte med. Mens det i dette tilfælde er frugter, kan du stort set erstatte det med alt, hvad du kan lide. Toppen af fanerne er også differentieret ved hjælp af forskellige farveskemaer. Men det er stort set alle de farver, du får. Fordi alle de andre sektioner er monokrome og skildrer mere af et professionelt og pænt udseende. Ved hjælp af simpel CSS udfører fanerne også en hover-effekt, der overgår farveskemaet til en mørkere farve.

Dette design er praktisk og formålsfokuseret, hvilket efterlader tonsvis af område til at tilføje indhold. På grund af den enkle struktur og den rene kodning kan du også få det samme resultat på dit websted med minimal indsats. Du skal blot følge linket nedenfor for at få fuld adgang.

Info / Download

Tab Interface with 3D Cube

Hvis materialedesigns og 2D bare ikke er noget for dig, så er dette 3D-design helt sikkert lige noget for dig. Dette design af Vavik er et mere komplekst og avanceret design til en CSS-fane. Men vær forvisset om, at hele strukturen er baseret udelukkende på CSS og HTML. Fanerne er repræsenteret af forskellige terninger eller firkanter, der differentieres med farveskemaer og tekster. Men twistet her er, at i stedet for simple overgange og effekter, har designeren lagt det på et niveau med et 3D-flip! En fuld visning af indholdet indeni vises i højre side på en større firkant. Så når brugerne klikker på en bestemt fane, laver den viste firkant et helt flip bagud eller forfra for at vise indholdet. Det er ret utroligt, at noget som en fane også kan animeres på denne måde, ikke sandt?

Info / Download

Clickable CSS Tabs

Dette er et simpelt CSS-baseret fanedesign af Ondřej Bárta med en mere monokrom sort og hvid følelse. Den overordnede stil og farveskemaerne giver et ret almindeligt, men alligevel attraktivt slutresultat. Fanerne fungerer på samme måde som enhver traditionel fane ville fungere. Ved at klikke på et afslører man indholdet indeni. Som en subtil detalje har skaberen tilføjet CSS hover-effekten. Når man holder musen over hver af fanerne, bliver skyggen en smule mørkere, og der vises en pil. Hvis du vælger fanen, skifter den også farven til hvid helt og holdent for at matche detaljeafsnittet. Det er nemt at opnå, implementere og forstå, og du kan også se det komplette kodestykke via linket nedenfor.

Info / Download

Materialize CSS Tab Menu

Med inspiration fra det klassiske Google Material design, er dette et slutresultat af Alex. Selv om det er enkelt at se på, er det detaljerne her, som vi er helt vilde med. Fanerne på fuld visning ser mest professionelle ud af alle de muligheder, vi har listet ud i dag. Komplet vil alt indholdet indeni også giver et tiltalende udseende. Blå farvede faner sammen med hover- og klik-effekten er ekstra engagerende. Når der svæves over, fremhæves fanerne med farveovergangen samt den understregning, der glider under teksterne, når der klikkes på dem. Dette eksempel er dog en kombination af både CSS samt JS.

Info / Download

Receptkort med CSS-faner

Hvis du ejer en madblog eller opskriftsrelaterede websteder, så er dette design designet specielt til den niche. Perfekt til at blive brugt til indhold med faneblade, især med madopskrifter, du kan endda bruge dette til alt, hvad du vil. Hele strukturen er ret alsidig så at sige. Der er endda to forskellige variationer, som skaberen er kommet op med. Det første eksempel gør brug af knappens ekspansionseffekt, når der klikkes på justering af det afslørede indhold. Den anden mulighed fremviser en anden overgang, hvor fanerne forbliver statiske, mens indholdet ændres ved hvert klik.

Hver af disse udfører dog en fremragende farveovergang hover-effekt til at gå sammen. Farveskemaerne med grøn og hvid får også hele designet til at poppe mere op.

Info / Download

Tabby Tabs

Nu, for en mere filmisk og teatralsk følelse, gør dette CSS-faneeksempel brug af animation og effekter for at få dette fantastiske resultat. Med en almindelig grå baggrund er den lilla fanebladsektion temmelig tiltalende for øjnene. Og ligesom alle traditionelle faner fungerer dette også til at afsløre indholdet, når der klikkes på det. Det centrale punkt her er dog overgangen af indholdet, når man skifter fra det ene til det andet. CSS er brugt til at opnå flex- og overløbseffekten, når indholdet afsløres. Responsivt og fantastisk til indhold af enhver type, kan du nemt tilføje billeder, tekstdetaljer og mere efter dine præferencer.

Info / Download

CSS3 Tabs by Sorax

Med en mønstret baggrund og en engagerende måde at afsløre indholdet på hver fane på, er skaberen af dette eksempel endt med et fabelagtigt slutresultat. For at holde det rene og professionelle udseende gør det brug af blå og hvidt farveskema. Fanerne og teksterne er ret enkle, men den opløftende faktor her er effekterne på faneboksen og teksterne. Ved hjælp af CSS3-animationer vises indholdsboksen i en næsten realistisk bevægelse, når der klikkes på en af fanerne. En anden lille detalje er farveovergangen fra sort til blå, når man holder musen over den med cursoren.

Info / Download

Pure CSS3 Tabbed Content

Så er der igen brug for den vertikale designstruktur, og dette er et minimalt og monokromt design af Colin Hall. Fanerne vises horisontalt som en sidebar på et websted. Når der klikkes på den, afsløres indholdet indeni på det store område, der er dækket til højre. Farvepaletten er det, der gør dette til et rent og professionelt design. For at gøre tingene mere interessante har designeren brugt kreative ikoner i stedet for almindelige tekster Designet er også responsivt, hvilket betyder, at det tilpasser sig alle enheders skærmstørrelser med lethed. Farveovergangen her fra sort til hvid og fra hvid til sort ved hover tilføjer også det ekstra kreative touch.

Info / Download

jQuery og CSS Tabbed filmappe

Vi har nævnt et lignende design ovenfor, men dette mappebaserede CSS-fane-design er en mere almindelig og enklere version. Et design af Ian Glaude, brugen af farven og skyggespillet gør det til en realistisk skildring. Det fungerer ligesom hvordan enhver fane ville afsløre indholdet, når der klikkes på den. Det kreative touch her er dog det glatte skyggespil og den 3D pop-up-lignende effekt. Når man husker på, at dette design også er baseret på JS, kan det være betydeligt sværere at opnå sammenlignet med dem, der er anført her. Du får dog adgang til hele deres struktur for at få en bedre forståelse. Følg blot linket nedenfor.

Info / Download

Tabs

Sidst, men ikke mindst, er dette endnu et i det blå og hvidt farvede CSS-fane-design. Dette design er baseret udelukkende på CSS og HTML og er også fuldstændig responsivt. Afhængigt af skærmstørrelsen transformeres det til enten en vandret eller lodret visning af fanerne. Ved at lege med opaciteten af hver fane er hover-effekten også ret fantastisk. En anden indtagende animation bruges på indholdsdelen, som trækker sig sammen og udvider sig, når man skifter fra det ene til det andet. Den lyseblå og hvide farve fungerer også godt sammen, hvilket giver et mere roligt og rent præg. Og fordi det er baseret på CSS og HTML, er det også lettere at implementere dette design på dit websted.

Info / Download

UI/UX Eksempel: Tab Switch Animation

Dette er dybest set et css-fane-design, der helt sikkert er unikt og ud over det sædvanlige. Kreativt og engagerende, dette særlige eksempel gør brug af toggle-baseret design. Det er afhængig af HTML, CSS samt JS kodestruktur for at få en glat kørende grænseflade. Mens demoen kun viser 2 af fanerne med muligheder indeni, er strukturen fleksibel nok til, at du kan tilføje flere. Denne fane glider ind i visningen, til venstre og til højre i henhold til kontakten og er en fantastisk måde at tilføje et animeret element på dit websted. Det er et ret ligetil design at komme i gang med, og du kan nemt kopiere hele strukturen på dit websted. Følg linket nedenfor for at få et nærmere kig på de anvendte kodelinjer og få en bedre forståelse af, hvordan slutresultatet blev til.

Info / Download

CSS Tabs

Hvis du leder efter noget mere sofistikeret og ud over det sædvanlige, så er dette vertikale CSS-fane-design lige noget for dig. Oprettet med kodestrukturen ved hjælp af CSS, HTML såvel som JS, er hele dette design unikt samlet set visuelt tiltalende. Det har en horisontal fane i stedet for det traditionelle vertikale design med alle fanerne repræsenteret af ikoner. Indholdet indeni er designet til at blive vist på det kortbaserede design, og hver enkelt fader ind og ud af displayet, når der klikkes på fanerne. En anden lille detalje er farveovergangseffekten på ikonerne for hver fane, når man holder musen hen over dem.

Gradientbaggrunden er en, der helt sikkert er iøjnefaldende, og det overordnede design er rettet mod at være alsidig nok til at matche alle websteder. En animeret call-to-action-knap er også der, som du kan gøre brug af. Den forvandler grundlæggende sin farve og position ved hover for en mere engagerende appel. Dette CSS-fane-design, der er skabt af Julie Park, fortjener helt sikkert en omtale på vores liste.

Info / Download

CSS Tab Bars

Med flere og flere websteder, der er afhængige af kreative måder at repræsentere dine menuer og faner på, er dette en, der helt sikkert skiller sig ud. Med et design, der ligner en arkiveringsmappe, er alt ved dette særlige eksempel kodet med stor detaljerigdom. Skaberen har taget et simpelt koncept og udført det med stor indsats. Det starter ud som et enkelt kort med nummeret på fanen og indholdet indeni. Der er en knap nederst til venstre, der gør det muligt at vise den næste af fanen.

Hver af fanerne følger den næste, mens de overlapper den, der vises indtil den sidste fane.Den samme effekt gælder, når du klikker på de foregående faner. Indholdet glider ind og ud af visningen ved klik. Ret simpelt af det at se, koderne kan være lidt sofistikerede. Så hvorfor ikke følge linket nede nedenfor for at få et bedre og nærmere kig på kodestrukturen og et live preview?

Info / Download

Elastiske faner

Hvis du er en, der foretrækker at holde designet simpelt, men alligevel engagerende ved hjælp af de kreative animationer og effekter, så er denne elastiske fane en for dig. Skaberen Nenad Kaevik har gjort brug af et simpelt menu-design og løftet det som helhed med blot et par kreative implementeringer af animationer. Den har en minimal headermenu med titlen og ikonet til at repræsentere hver fane. Valget er fremhævet, når der klikkes på det og viser en farveovergang, herunder ikonet og teksten.

Afhængigt af valget er vælgeren animeret til at glide til venstre og højre i position, mens den skildrer en mere elastisk lignende bevægelse. Hele strukturen er også designet til at være responsiv og tilpasser sig ubesværet til alle enhedsskærme med ekstrem lethed. Hvert element kan i høj grad tilpasses, hvilket betyder, at du nemt kan tilpasse farverne og skrifttyperne og endda de anvendte ikoner for at få præcis det, du ønsker.

Info / Download

Rene CSS-faner med et strejf af JS

Dette er et ret ligetil design, der er den rette definition af CSS-fane-design. Det har en grænseflade, der er temmelig formålsorienteret og dækker alt, hvad man forventer af et fanedesign. Det har et simplistisk layout med indholdet vist under den funktionelle fanebladmenu. Farvepaletten er også ret iøjnefaldende. Når man klikker på en bestemt fane, fader indholdet indeni ind og ud af displayet ved hjælp af CSS- og JS-koder. Denne skabelon kan tilpasses, hvilket betyder, at alle elementer kan ændres i henhold til deres præferencer. Samlet set er det en ret tydelig og enkel måde at tilføje faner eller menuer på dit websted, linket nedenfor giver fuld adgang til kodestrukturerne og live previews.

Info / Download

Scroll For Tabs

En anden, der inkorporerer JS, CSS og HTML-koder for at få dette fremragende resultat, er Scroll for tabs af Praveen Kumar Gorakala. Responsiv, attraktiv og levende med farvepaletten, er dette sikkert designet med det visuelle aspekt som det primære fokus. Det omfatter en simpel indstilling med et kortbaseret design med fanerne placeret over som headermenu. Med en fast længde af menulinjen glider titlerne også ind og ud af visningen på scroll. Selv indholdet ændrer sig, når der scrolles videre. Fanerne udfører også en hover-effekt, der gør den endnu mere tiltalende. En anden god detalje er, at indholdsboksen også justerer sin størrelse i overensstemmelse med indholdet, der udvider og trækker sig sammen i overensstemmelse hermed. Hele strukturen er responsiv og tilpasser sig fuldt ud til enhver enheds skærmstørrelse med lethed.

Info / Download

CSS-faner

Den sidste, vi har til dig, er en anden fantastisk måde at integrere CSS-faner på dit websted. Det fungerer grundlæggende som en toggle switch til at skifte mellem indholdet fra en fane til den næste ved hjælp af enkle, men attraktive animationer. Her viser demoen to faner med forskelligt indhold, som glider ind på enhedsskærmen til venstre og højre for at afslutte eller komme ind i displayet. Fanerne som helhed følger en ret minimal stil. Og den fremviser valget med en simpel animeret understregning under titlen. Det gode er naturligvis, at hele strukturen kun benytter sig af CSS- og HTML-koder, hvilket ikke er så kompliceret og sofistikeret, som det kan se ud til. Bare gå videre og følg linket nedenfor for at få et fuldt overblik over alle de anvendte elementer og for at få et eksempel på demoen.

Info / Download

Modern CSS Tab Design

Nu er dette et mere tilpasset og let at arbejde med design af CSS faner af Carlos Valereano. Det har tre forskellige designs, der adskiller sig med fanernes form og farver. Enkelt og ligetil, det er et brugervenligt lærred, som du kan bruge til at komme i gang. Det har en simpel hover- og klik-effekt, der også viser valget af fanerne. Her finder du også flerfarvet og farvet version af fanerne.

For variationer kan du vælge mellem en række muligheder, der er tilgængelige der. Tilpas det, som du foretrækker, og tilføj det ekstra strejf af kreativitet med lethed. Find de dybdegående detaljer om alle de kodestrukturer, der er vist ovenfor, gennem linket nedenfor.

Info / Download

CSS Tabs For NDC

Dette er et mere klassisk design af CSS-faner, der er designet som en simpel fil som format. Designet med en professionel følelse af styling, det har også en fantastisk responsivitet. Fanerne kan ret nemt tilpasses og kan nemt vise en række tekstindhold med lethed. Når der klikkes på en af fanerne, glider den ned for at vise indholdet og bruger glatte overgange, når der skiftes fra den ene til den anden. Det er ret grundlæggende med designet, men hele strukturen er ren og ser avanceret ud. Der er implementeret masser af HTML-, CSS- og JS-elementer for at sikre et velfungerende resultat.

Info / Download

Basiske faner

Sidst slutter vi vores liste over de bedste CSS-faner med dette grundlæggende fanedesign, der udelukkende er baseret på HTML og CSS. Simpelt med strukturen viser det 3 faner, der er repræsenteret af tagget på toppen af tabellen. Når der klikkes på et af disse, fremhæver det valget med en simpel hover- og klik-effekt. Begge har glidende farveændringer, og indholdet glider ind i billedet, når der klikkes på det. Enkel nok med formålene, er det også let at tilpasse og tilføje dit eget brugerdefinerede touch. Få den fulde kode-snippet med linket nedenfor og få en ehad start på nogen af dine fremtidige web-design projekter.

Info / Download