36 CSS-välilehtimallia järjestäytyneemmän ja ammattimaisemman näköisen verkkosivuston luomiseksi

Välilehtipohjainen käyttöliittymä tai yksinkertaisesti välilehti on graafinen ohjauselementti, jota voidaan käyttää useiden paneelien tai asiakirjojen sisällyttämiseen yhteen ikkunaan, jotta käyttäjät voivat käyttää niitä. Tämän vuoksi se sopii erinomaisesti yksisivuisiin verkkosivuihin ja sovelluksiin. Se antaa käyttäjille paitsi siistin ja organisoidun käyttöliittymän myös tekee navigointiprosessista paljon helpompaa. Jos siis omistat tekstipainotteisen sivuston tai yksinkertaisesti sisällöltään runsaan verkkosivuston, CSS-välilehdet ovat helpoin tapa houkutella käyttäjiäsi enemmän.

Pitäen tämän mielessä, olemme tänään tehneet listan parhaista mahdollisista vaihtoehdoista käyttäjillemme tänään. Käsin poimittu ja listattu muotoiluelementtien ja parhaiden suunnittelutrendien mukaan, toivomme, että tämä luettelo auttaa sinua saamaan täydellisen alun. Animaatioista yksinkertaisiin, monimutkaisista minimaalisiin, olemme ottaneet mukaan vaihtoehtoja kaikkeen.

Tabbed Content Section

Listamme kärjessä on tämä Allen Bradyn tekemä premium-tasoinen CSS-välilehden muotoilu. Yksinkertainen, tyylikäs ja tehokas, tämä muotoilu sopii erinomaisesti kaikenlaisille verkkosivustoille, olivatpa ne sitten ammatillisia tai henkilökohtaisia. Se on varustettu erilaisilla luovilla kuvakkeilla, jotka on animoitu toimimaan välilehtinä. Jokaisessa niistä on nimetty alue sisällölle ja myös mediatiedostojen paikanvaraaja. Käyttämällä yksinkertaista CSS:ää luoja on myös onnistunut lisäämään tehokkaan hover-efektin. Ja parasta tässä on se, että se ei nojaa mihinkään JS:ään, mikä tarkoittaa, että yleinen malli on melko helppo ymmärtää ja kopioida.

Info / Lataa

Materiaali-välilehdet & Sivut

Seuraten ammattimaisempaa lähestymistapaa muotoilussa, tämä seuraava variaatio on luotu kaikki pienet yksityiskohdat mielessä pitäen. Toisin kuin edellisessä vaihtoehdossa, tässä sen juuret ovat kuitenkin JS-toteutuksessa CSS:n ja HTML:n ohella. Se alkaa yksinkertaisella CSS-välilehdellä, jossa on sekä kuvakkeita että tekstiä kuvaamaan kutakin valintaa. Kun napsautat mitä tahansa, sisältö näytetään välilehden alla olevan materiaalipohjaisen kortin alla. Vielä mukaansatempaavamman vetovoiman saat käyttämällä elinvoimaisia värimaailmoja, jotka kaikki muuttuvat välilehtien kanssa. Yksinkertaisen CSS:n avulla on toteutettu erilaisia animaatioita ja siirtymiä. Kaikki nämä ovat täysin responsiivisia ja mukautuvat myös laitteen näyttöjen mukaan helposti.

Info / Lataa

CSS-välilehden valinta

Kansiomaisen rakenteen kuvaava, tämä on jälleen yksi yksinkertainen, minimaalinen, puhdas CSS-välilehden muotoilu, joka meillä on seuraavaksi vuorossa. Perustuu pelkkään CSS:ään ja HTML:ään yleisen rakenteen sekä toteutettujen animaatioiden osalta, joten voimme sanoa, että se on melko helppo ymmärtää ja kopioida. Välilehdet on suunniteltu näyttämään kansiovälilehdiltä ja aivan kuten minkä tahansa kansion kohdalla, se vaihtaa sisältöä valitun välilehden mukaan. Lisäyksityiskohtia varten löydät myös välilehden numerokuvakkeiden yläpuolella yksinkertaisen hover-efektin. Se näyttää olevan myös responsiivinen, mikä tarkoittaa, että muotoilu mukautuu automaattisesti kaikkiin laitekehyksiin helposti.

Info / Lataa

Pure CSS -välilehdet

Aloitetaan jollakin yksinkertaisella, tyylikkäällä ja puhtaalla. Tämä Pure CSS -välilehti on visuaalisesti miellyttävä ja toimii täydellisesti useiden virkojen tai sisällön näyttämiseen yhdellä näytöllä. Rauhoittava violetti ja valkoinen värimaailma ovat melko houkuttelevia katsella. Ja pelkän yksinkertaisen HTML- ja CSS-rakenteen käyttäminen tuloksen aikaansaamiseksi on vaikuttavaa. Aivan kuten useimmat välilehtiesimerkit, tämäkin käyttää vaakasuuntaista näkymää, jonka välillä voi vaihtaa. Yksinkertainen värisävyjen siirtyminen käyttää radiosyöttöä. Tämä tarkoittaa, että sen korostamiseksi, mitä osiota napsautetaan, käytetään tummempaa violetin sävyä. Tämän mallin luoja on pitänyt sen yksinkertaisena, mutta demon alla on myös linkki 3D-versioon, joka myös käyttää JS:ää.

Info / Lataa

Animoidut CSS-välilehdet

Kun puhutaan 3D-efektistä ja edistyneemmän vaihtoehdon valitsemisesta, tämä animoitu CSS-välilehti on täydellinen esimerkki. Vaikka animaatio on hienovarainen, tämä tekee varmasti vaikuttavan lopputuloksen. Ja mikä parasta, kaikki koodit perustuvat CSS:ään ja HTML:ään. Tämä takaa helpomman toteutuksen ja rakenteen ymmärtämisen. Vihreä ja valkoinen laivastonsinisellä taustalla toimii hämmästyttävän hyvin. Kun viet hiiren hiirellä kunkin välilehden päälle, se laajenee sulavana animaationa, jota napsauttamalla värimaailma muuttuu korostamaan myös valintaa.

Info / Lataa

Just Another CSS Tab

Tämä on luovempi lähestymistapa CSS-välilehteen, sillä siinä on animaatio, efektejä ja myös innovatiivinen suunnittelurakenne. Vaikka useimmat välilehdet on suunniteltu yksinkertaiseksi navigointielementiksi, tämä kallistuu enemmän kohti ainutlaatuista ja kiehtovaa elementtiä, josta käyttäjät voivat nauttia. Välilehdissä käytettävien perinteisten fonttien tai tekstien sijaan tekijä on korvannut ne litteillä kuvakkeilla. Jokainen niistä on myös suunniteltu toteuttamaan upea hover- ja klikkaustehoste, joka siirtää korostuksen valittuun välilehteen. Jopa sisältö ilmestyy näkyviin ja poistuu näkyvistä zoomaustehosteen avulla. Kaiken kaikkiaan varsin mielenkiintoinen, pääset käsiksi niiden koko rakenteeseen alla olevan linkin takaa.

Info / Lataa

Responsiiviset CSS-välilehdet & Accordions

Nyt vain siksi, että kyseessä on välilehti, ei välttämättä tarvitse olla vaakasuora. Tämä responsiivinen CSS-välilehti ja harmonikka on täydellinen esimerkki. Tarpeeksi monipuolinen, jotta sitä voidaan käyttää joko harmonikkana tai välilehtinä, ja sen toteuttaminen sivustollesi on myös melko helppoa. Yksinkertainen sinivalkoinen rakenne on siisti ja ammattimaisen näköinen. Kun välilehteä napsautetaan, se laajenee pystysuoraan ja esittelee sen sisällä olevan sisällön. Toinen lisätty yksityiskohta on radiopainikkeen tyylinen vaikutus, joka tarkoittaa, että vain yksi välilehti voidaan avata kerrallaan. Kaikki näkökohdat on pidetty melko vähäisinä, mikä jättää käyttäjille myös mahdollisuuden lisätä oman mukautetun kosketuksensa, jos he haluavat.

Info / Lataa

CSS Tabs by Timothy M.LeBlanc

Radiopainikkeista ja efektistä puhuttaessa tämä CSS-välilehtisuunnittelu perustuu täysin samanlaiseen tyyliin ja malliin. Toisin kuin perinteiset tekstien tai kuvakkeiden edustamat välilehdet, tässä se on korvattu radiopainikkeilla. Kun napsautat mitä tahansa välilehteä, alapuolelle ilmestyy valintaikkuna, jossa käyttäjät voivat tarkastella sen sisältöä. Aivan kuten valintapainikkeiden kohdalla, vain yksi välilehti voidaan avata kerralla, ja se sulkeutuu välittömästi, kun seuraavaa vaihtoehtoa napsautetaan. Värimaailma on pidetty melko yksinkertaisena violetilla ja valkoisella. Toinen pieni yksityiskohta, joka on lisätty luovuuden lisäämiseksi, on painikkeiden värin siirtyminen, kun tiettyä välilehteä napsautetaan.

Info / Lataa

Yksinkertainen jQuery-CSS-välilehtipaneeli

Nyt palataan takaisin käytännöllisempään ja navigointitarkoitukseen perustuvaan suunnitteluun, tämä yksinkertainen jQuery-CSS-välilehtipaneeli on toinen hyvä esimerkki. Suunnittelu on melko suoraviivaista ja toimii sisällön näyttämiseksi järjestäytyneesti. Jokainen välilehti määräytyy yläosassa olevan välilehtipaneelin avulla. Nämä välilehdet, kun niiden päälle vietäessä vaihtuu väri valkoisesta siniseksi, joka saavutetaan yksinkertaisella CSS:llä. Välilehtipaneelin sisällä olevan sisällön siirtyminen määritetään kuitenkin JS:n avulla. Tämä takaa tasaisemman ja siistimmän siirtymisen, kun sisältöä häivytetään näkyviin ja pois näkyvistä. Paneelin sisällä oleva sisältö on myös erittäin monipuolinen ja siinä on sijoituspaikkoja kaikille, mukaan lukien tekstisisältö, kuvat ja jopa linkit.

Info / Lataa

Puhtaat CSS-välilehdet indikaattorilla

Nyt kuten nimestä voisi päätellä tämä Pure CSS Tabs with indicator, perustuu puhtaasti HTML:ään ja CSS:ään. Se sisältää materiaalisuunnitteluun perustuvan kortin, joka toimii välilehden pohjana. Jokainen välilehti on myös edustettuna luovalla kuvakkeella sekä otsikolla. Yksinkertainen muotoilu, animaatiot ovat silti varsin vaikuttavia. Käyttämällä yksinkertaista CSS:ää luoja on onnistunut saamaan sisällön sujuvan siirtymisen jokaisella napsautuksella. Kun välilehden otsikko valitaan, myös sen väri muuttuu ja se on alleviivattu valinnan korostamiseksi. Kaikki koodausrakenne on vapaasti käytettävissä, seuraa vain alla olevaa linkkiä nähdäksesi.

Info / Download

CSS Tabs Revisited

Tummempi versio niille, jotka sitä etsivät, tämä upea esimerkki on Eric Sadowskin CSS Tabs Revisited. Suunnittelu on aika vaikuttava, kun pitää mielessä, että se perustuu puhtaasti HTML:ään ja CSS:ään. Alkaen tavallisesta taustasta, luoja on kohottanut sitä kaikilla tyylittelyillä. Tummemmalla laatikon sävyllä välilehti on edustettuna nauhamainen rakenne kaiken yläpuolella. Jokaisessa välilehdessä on myös tekstiä ja luova kuvake, joka edustaa kutakin osiota. Nyt kun sisältöä napsautetaan, sen sisällä oleva sisältö käyttää slide up- ja slide down -efektiä päästäkseen näkyviin ja pois näkyvistä. Välilehdet vaihtavat myös väriään harmaasta oranssiksi valitun kohteen näyttämiseksi. Voit lisätä minkä tahansa tyyppistä sisältöä, halusitpa sitten lisätä tekstejä, linkkejä ja halutessasi jopa kuvia.

Info / Lataa

Yksinkertaiset CSS-välilehdet varjolla

Minimaalinen ja materiaalisuunnitteluun perustuva CSS-välilehtisuunnittelu on täydellisen minimaalinen, mutta joustava. Suunnittelu yksinkertaisuuden vuoksi tekee ihanteellisen pohjan, joka mukautuu kaikenlaisiin teemoihin tai verkkosivustoihin. Lisäämällä varjoja, jotka luovat lähes 3D-tunnelman, puhdas valkoinen värimaailma lisää myös paperimaista tunnetta. Sisältöalue säätää myös pituutta ja leveyttä sisältämänsä sisällön mukaan. Toinen hieno asia tässä suunnittelussa on se, että se on täysin responsiivinen ja mukautuu automaattisesti jokaiseen suunnittelun näytön kokoon helposti. Kun viet hiiren hiirellä minkä tahansa välilehden päälle, myös tekstit tulevat näkyviin toteuttamalla tasaisen häivytyksen. Koska se perustuu puhtaasti CSS:ään ilman ylimääräistä JS:ää, koko rakenne on melko helppo toteuttaa.

Info / Lataa

CSS-välilehdet-valikko

Nyt ammattimaisempaan ja tarkoitukseen kohdennettuun suunnitteluun tämä CSS-välilehti sisältää kaiken, mitä saatat tarvita. Välilehden muotoilusta sisällön haltijoihin ja sulaviin ja siisteihin animaatioihin ja siirtymiin, kaikesta on huolehdittu hyvin. Ja vaikka demo on pelkkä nukke, se on valmis live-käyttöön vain muutamalla hienosäädöllä täällä ja siellä. CSS-efektejä käyttävät välilehdet korostavat sitä, kun viet sen päälle ja vaihtavat täysin värimaailmaa, kun sitä napsautetaan. Kuten voit nähdä täällä, lisäämällä melko paljon mitä tahansa on mahdollista, haluatko tekstejä, linkkejä, kuvia ja jopa lomakkeita ja CTA-painikkeita. Lopputulos on melko uskomaton, ja parasta kaikessa on se, että se perustuu täysin CSS:ään ja HTML:ään.

Info / Lataa

Kansiovälilehdet

Luovempi lähestymistapa CSS-välilehtien suunnitteluun, tämä tyyli perustuu yhteen pinottuihin tiedostoihin ja kansioihin. Luoja on käyttänyt pelkkää mustaa taustaa, mikä on saanut värikkäät tiedostopohjaiset välilehdet erottumaan paremmin. Event konsepti sisällön paljastamisesta kunkin välilehden sisällä on melko ainutlaatuinen. Toisin kuin perinteinen pystysuora muotoilu, tämä nojaa enemmän vaakasuoraan näkymään. Kun napsautat mitä tahansa välilehteä, se liukuu joko vasemmalle tai oikealle paljastaen sisällön sisältä. Ja jos olet sellainen, joka haluaa lisätä sivustoosi mukaansatempaavan elementin, josta käyttäjät voivat nauttia, tämä on ihanteellinen valinta.

Info / Lataa

Puhdas CSS-välilehden navigointi

Nyt tämä Izzy Skyen tekemä puhdas CSS-välilehtisuunnittelu on jälleen yksi innovatiivinen lähestymistapa perinteiseen suunnitteluun. Hyödyntämällä klassista vaihtopainiketta välilehti näyttää sen sisällä olevan sisällön alla olevassa animoidussa laatikossa. Kun napsautat jompaa kumpaa välilehteä, sisältö alatekstin vieressä liukuu sisään ja ulos näkyvistä. Ja se on melko vaikuttava pitäen mielessä mo ylimääräisiä JS-koodeja käytetään.

Sisältölaatikko toimii myös kuvan tai otsikon ja linkkien sijoituspaikkana. Kun viet sen päälle, se paljastaa tasaisen siirtymisen samalla kun näytetään animoitu painike, joka johtaa sisällön koko näkymään. Tämä muotoilu on täydellinen lisäämään helpompaa navigointia käyttäjien käyttöön. Voit myös toteuttaa tämän tekstipainotteisissa sivustoissa tai blogeissa kategorisoimiseksi. Värimaailma mustan, vaaleanpunaisen ja valkoisen kanssa on myös melko joustava ja monipuolinen.

Info / Lataa

Tabs Widget

Toinen CSS-välilehtien listallamme on tämä siisti ja ammattimaisen näköinen suunnittelu, jonka on tehnyt Sitepoint. Vaikka kauneus keskittyy tässä yksinkertaisuuteen, animaatiot ja siirtymät ovat todella hienoja. Yksinkertainen valkoinen tausta ja laivastonsininen välilehtiosa toimivat hämmästyttävän hyvin yhteen. Se alkaa yksinkertaisella navigointivälilehdellä, jota napsauttamalla paljastuu sen sisällä oleva sisältö. Tekijät ovat myös lisänneet radiopainikkeen kaltaisen efektin, joka varmistaa, että vain yksi välilehti voidaan avata kerrallaan. Valittua välilehteä korostetaan myös värin siirtymisellä vaaleampaan sävyyn. Toinen ylimääräinen yksityiskohta tässä on myös sen reagoivuus. Se mukautuu automaattisesti mihin tahansa laitteen näytön kokoon, eikä tämä vaikuta millään tavalla sivustosi responsiivisuuteen.

Info / Lataa

CSS Tab by Chen Hui Jing

Tämä Chen Hui Jingin tekemä puhdas CSS-välilehden muotoilu on responsiivinen, ulkoasultaan siisti ja melko innovatiivinen. Tässä käytetyt välilehtiosiot hyödyntävät aluksi luovia kuvakkeita tekstien sijaan. Vaikka tässä tapauksessa se on hedelmiä, voit melko paljon korvata sen millä tahansa haluamallasi. Välilehtien yläosa on myös eriytetty käyttämällä eri värimaailmaa. Mutta siinä on aika lailla kaikki värit, joita saat. Koska kaikki muut osiot ovat yksivärisiä ja kuvaavat enemmän ammattimaista ja siistiä ulkoasua. Käyttämällä yksinkertaista CSS:ää välilehdet suorittavat myös hover-efektin, joka siirtää värimaailman tummempaan väriin.

Tämä muotoilu on käytännöllinen ja tarkoitukseen keskittynyt, jättäen tonneittain aluetta sisällön lisäämiseksi. Yksinkertaisen rakenteen ja puhtaan koodauksen ansiosta sinäkin voit saada saman tuloksen sivustollesi pienellä vaivalla. Seuraa vain alla olevaa linkkiä saadaksesi täyden käyttöoikeuden.

Info / Lataa

Tab-käyttöliittymä 3D-kuutiolla

Jos materiaalimallit ja 2D eivät vain sovi sinulle, niin tämä 3D-muotoilu on varmasti juuri sinun makuusi. Vavikin suunnittelema muotoilu on monimutkaisempi ja edistyneempi CSS-välilehden muotoilu. Mutta voit olla varma, että koko rakenne perustuu täysin CSS:ään ja HTML:ään. Välilehtiä edustavat erilaiset kuutiot tai neliöt, jotka eroavat toisistaan värimaailman ja tekstien avulla. Kieroutena tässä on kuitenkin se, että yksinkertaisten siirtymien ja efektien sijaan suunnittelija tasoitti sen 3D-flipillä! Sisäpuolella olevan sisällön koko näkymä näkyy oikealla puolella suuremmassa neliössä. Kun käyttäjät siis napsauttavat jotain tiettyä välilehteä, näytetty neliö kääntyy kokonaan taakse- tai eteenpäin sisällön näyttämiseksi. Aika hämmästyttävää, että jotain sellaista kuin välilehti voidaan myös animoida tällä tavalla, eikö?

Info / Lataa

Clickable CSS Tabs

Tämä on yksinkertainen CSS-pohjainen välilehtisuunnittelu, jonka on suunnitellut Ondřej Bárta ja jossa on yksivärisempi mustavalkoinen tunnelma. Yleinen tyyli ja värimaailma tekevät lopputuloksesta melko yksinkertaisen mutta houkuttelevan. Välilehdet toimivat aivan kuten perinteisetkin välilehdet. Napsauttamalla yhtä välilehteä saat näkyviin sen sisällä olevan sisällön. Hienovaraiseksi yksityiskohdaksi tekijä on lisännyt CSS:n hover-efektin. Kun hiiren kursori viedään kunkin välilehden päälle, sävy muuttuu tummemmaksi ja näkyviin tulee nuoli. Jos valitset välilehden, se myös vaihtaa värin kokonaan valkoiseksi, jotta se vastaa yksityiskohtaista osiota. Helppo saavuttaa, toteuttaa ja ymmärtää, voit myös katsoa täydellisen koodinpätkän alla olevan linkin kautta.

Info / Lataa

Materialize CSS-välilehtivalikko

Lopputulos on saanut inspiraationsa Googlen klassisesta Material-designista, Alex. Nyt vaikka yksinkertainen katsoa, se on yksityiskohtia täällä, että me ehdottomasti rakastamme. Täysnäkymän välilehdet näyttävät ammattimaisimmilta kaikista tänään listaamistamme vaihtoehdoista. Täydellinen kaikki sisältö sisällä tekee myös houkuttelevan ulkoasun. Siniset värilliset välilehdet sekä hover- ja click-efekti ovat erityisen houkuttelevia. Kun viet sen yli, välilehdet korostuvat värimuutoksella sekä alleviivauksella, joka liukuu tekstien alle, kun niitä napsautetaan. Tämä esimerkki on kuitenkin sekä CSS:n että JS:n yhdistelmä.

Info / Lataa

Reseptikortti CSS-välilehdillä

Jos omistat ruokablogin tai resepteihin liittyviä verkkosivuja, tämä muotoilu on suunniteltu erityisesti kyseiselle markkinaraolle. Täydellinen käytettäväksi välilehtimuotoiseen sisältöön erityisesti ruokareseptien kanssa, voit jopa käyttää tätä mihin tahansa haluamaasi tarkoitukseen. Koko rakenne on niin sanotusti varsin monipuolinen. On jopa kaksi erilaista variaatiota, jotka luoja on keksinyt. Ensimmäisessä esimerkissä hyödynnetään painikkeen laajennusvaikutusta, kun sitä klikkaamalla säädetään paljastettuun sisältöön. Toisessa vaihtoehdossa esitellään erilainen siirtymä, jossa välilehdet pysyvät staattisina, kun taas sisältö vaihtuu jokaisella napsautuksella.

Jokainen näistä kuitenkin toteuttaa erinomaisen värinsiirtymän hover-efektin mukaan. Vihreän ja valkoisen värimaailma tekee myös koko muotoilusta ponnahtavamman.

Info / Download

Tabby Tabs

Tässä CSS-välilehtiesimerkissä käytetään animaatioita ja efektejä, jotta saadaan aikaan tämä upea lopputulos, joka on elokuvamaisempi ja teatraalisempi. Tavallisella harmaalla taustalla oleva violetti välilehtiosio on melkoisen houkutteleva silmille. Aivan kuten perinteiset välilehdet, tämäkin paljastaa sisällön, kun sitä napsautetaan. Huomion keskipisteenä tässä on kuitenkin sisällön siirtyminen, kun vaihdetaan välilehdeltä toiselle. CSS:ää käytetään jousto- ja ylivuotovaikutuksen aikaansaamiseksi, kun kukin sisältö paljastuu. Responsiivinen ja erinomainen minkä tahansa tyyppiselle sisällölle, voit helposti lisätä kuvia, tekstimuotoisia yksityiskohtia ja muuta haluamaasi.

Info / Lataa

CSS3 Tabs by Sorax

Käyttämällä kuviollista taustaa ja kiehtovaa tapaa paljastaa sisältö kullakin välilehdellä tämän esimerkin luoja on päätynyt upeaan lopputulokseen. Puhtaan ja ammattimaisen ulkoasun säilyttämiseksi siinä on käytetty sinivalkoista värimaailmaa. Välilehdet ja tekstit ovat melko yksinkertaisia, mutta kohottava tekijä tässä on välilehtilaatikon ja tekstien tehosteet. CSS3-animaatioiden avulla sisältölaatikko näyttää lähes realistista liikettä, kun napsautat mitä tahansa välilehteä. Toinen pieni yksityiskohta on värin siirtyminen mustasta siniseksi, kun kursori viedään sen päälle.

Info / Lataa

Pure CSS3 Tabbed Content

Jälleen kerran pystysuuntaista muotoilurakennetta hyödyntäen Colin Hallin minimalistinen ja yksivärinen muotoilu. Välilehdet näkyvät vaakasuorassa kuin sivuston sivupalkki. Kun sitä napsauttaa, se paljastaa sisällön sisältä oikealla katetulla suurella alueella. Väripaletti tekee tästä puhtaan ja ammattimaisen muotoilun. Jotta asiat olisivat mielenkiintoisempia, suunnittelija on käyttänyt luovia kuvakkeita tavallisten tekstien sijaan Suunnittelu on myös responsiivinen, mikä tarkoittaa, että se mukautuu helposti jokaisen laitteen näytön kokoon. Värien siirtyminen tässä mustasta valkoiseen ja valkoisesta mustaan hoverissa tuo myös lisää luovuutta.

Info / Lataa

jQuery and CSS Tabbed file folder

Olemme maininneet samanlaisen muotoilun edellä, mutta tämä kansiopohjainen CSS-välilehti-muotoilu on pelkistetympi ja yksinkertaisempi versio. Ian Glauden suunnittelema muotoilu, jonka värien käyttö ja varjojen leikki tekevät siitä realistisen kuvauksen. Se toimii aivan kuten mikä tahansa välilehti, joka paljastaa sisällön, kun sitä napsautetaan. Luova kosketus tässä on kuitenkin pehmeä varjon leikki ja 3D-pop-upin kaltainen efekti. Kun pidetään mielessä, että tämä muotoilu perustuu myös JS:ään, tämä saattaa olla huomattavasti vaikeampi toteuttaa kuin tässä luetellut. Pääset kuitenkin käsiksi kaikkiin niiden rakenteisiin saadaksesi paremman ymmärryksen. Seuraa vain alla olevaa linkkiä.

Info / Lataa

Tabs

Viimeisenä, mutta ei vähäisimpänä, tämä on toinen sinivalkoisen värinen CSS-välilehden muotoilu. Tämä puhtaasti CSS:ään ja HTML:ään perustuva muotoilu on myös täysin responsiivinen. Näytön koosta riippuen se muuntaa välilehdet joko vaaka- tai pystysuoraan näkymään. Kunkin välilehden läpinäkymättömyydellä leikittelevä hover-efekti on myös varsin upea. Toinen mukaansatempaava animaatio on käytetty sisältöosassa, joka supistuu ja laajenee, kun vaihdetaan yhdestä toiseen. Vaaleansininen ja valkoinen toimivat myös loistavasti yhdessä antaen sille rauhallisemman ja puhtaamman ilmeen. Ja koska se perustuu CSS:ään ja HTML:ään, tämän suunnittelun toteuttaminen sivustollesi on myös helpompaa.

Info / Lataa

UI/UX Esimerkki: Tab Switch Animation

Tämä on periaatteessa css-välilehden muotoilu, joka on varmasti ainutlaatuinen ja out of the box. Luova ja mukaansatempaava, tämä nimenomainen esimerkki hyödyntää vaihtokytkimiin perustuvaa suunnittelua. Se luottaa HTML-, CSS- sekä JS-koodirakenteeseen saadakseen sujuvan käyttöliittymän. Vaikka demo esittelee vain 2 välilehteä, joiden sisällä on vaihtoehtoja, rakenne on tarpeeksi joustava, jotta voit lisätä lisää. Tämä välilehti, joka liukuu näkyviin, vasemmalle ja oikealle kytkimen mukaan, on loistava tapa lisätä animoitu elementti sivustollesi. Melko suoraviivainen muotoilu, jonka avulla pääset alkuun, ja voit kopioida koko rakenteen sivustollesi helposti. Seuraa alla olevaa linkkiä nähdäksesi tarkemmin käytetyt koodirivit ja saadaksesi paremman käsityksen siitä, miten lopputulos syntyi.

Info / Lataa

CSS-välilehdet

Jos etsit jotakin hienostuneempaa ja out of the box -mallia, tämä pystysuora CSS-välilehtisuunnittelu on juuri sinua varten. Luotu koodirakenteella käyttäen CSS:ää, HTML:ää sekä JS:ää, tämä koko muotoilu on ainutlaatuinen kaiken kaikkiaan visuaalisesti miellyttävä. Siinä on vaakasuora välilehti perinteisen pystysuuntaisen muotoilun sijaan, jossa kaikki välilehdet on esitetty kuvakkeilla. Sisällön sisällä oleva sisältö on suunniteltu näytettäväksi korttipohjaisessa suunnittelussa ja kukin häivyttää näytön sisään ja ulos, kun välilehtiä napsautetaan. Toinen pieni yksityiskohta on kunkin välilehden kuvakkeiden värinsiirtovaikutus, kun sen päälle osoitetaan hiirellä.

Taustan kaltevuus on sellainen, joka on varmasti silmäänpistävä, ja kokonaissuunnittelun tarkoituksena on olla tarpeeksi monipuolinen, jotta se sopii kaikkiin verkkosivustoihin. Mukana on myös animoitu call-to-action-painike, jota voit hyödyntää. Se periaatteessa muuttaa väriään ja sijaintiaan hoverissa, jotta se olisi houkuttelevampi. Julie Parkin luoma CSS-välilehden muotoilu ansaitsee ehdottomasti maininnan listallamme.

Info / Lataa

CSS-välilehtipalkit

Kun yhä useammat verkkosivustot ovat riippuvaisia luovista tavoista esittää valikot ja välilehdet, tämä on yksi niistä, joka varmasti erottuu edukseen. Sen muotoilu muistuttaa arkistokansiota, ja kaikki tässä esimerkissä on koodattu erittäin yksityiskohtaisesti. Luoja on ottanut yksinkertaisen konseptin ja toteuttanut sen suurella vaivalla. Se alkaa yksittäisenä korttina, jonka sisällä on välilehden numero ja sisältö. Vasemmassa alareunassa on painike, jonka avulla seuraava välilehti tulee näkyviin.

Jokainen välilehti seuraa seuraavaa ja samalla päällekkäin viimeiseen välilehteen asti näytettävän välilehden kanssa.Sama vaikutus pätee, kun napsautat edellisiä välilehtiä. Sisältö liukuu näyttöön ja pois näyttöön napsautettaessa. Aika yksinkertainen ulkoasultaan, koodit saattavat olla hieman hienostuneita. Joten miksi et seuraisi alla olevaa linkkiä saadaksesi paremman ja tarkemman kuvan koodirakenteesta ja live-esikatselusta?

Info / Lataa

Elastic Tabs

Jos olet sellainen, joka pitää suunnittelun mieluummin yksinkertaisena mutta houkuttelevana käyttäen luovia animaatioita ja efektejä, niin tämä elastinen välilehti on yksi sinulle. Luoja Nenad Kaevik on käyttänyt yksinkertaista valikkosuunnittelua ja kohottanut sitä kokonaisuutena vain muutamalla luovalla animaatioiden toteutuksella. Siinä on minimaalinen otsikkovalikko, jonka otsikko ja kuvake edustavat kutakin välilehteä. Valinta korostuu, kun sitä napsautetaan, ja näyttää värisiirtymän, joka sisältää kuvakkeen ja tekstin.

Valinnasta riippuen valitsija animoidaan liukumaan vasemmalle ja oikealle paikalleen kuvaten samalla elastisempaa liikettä. Koko rakenne on myös suunniteltu reagoivaksi ja mukautuu vaivattomasti kaikkiin laitteen näyttöihin äärimmäisen helposti. Jokainen elementti on erittäin hyvin muokattavissa, mikä tarkoittaa, että voit helposti muokata värejä ja fontteja ja jopa käytettyjä kuvakkeita saadaksesi juuri sen, mitä haluat.

Info / Lataa

Puhtaat CSS-välilehdet, joissa on ripaus JS:ää

Tämä on melko suoraviivainen muotoilu, joka on CSS-välilehtisuunnittelun oikea määritelmä. Siinä on käyttöliittymä, joka on melko tarkoituksenmukainen ja kattaa kaiken, mitä välilehtisuunnittelulta odotetaan. Siinä on pelkistetty ulkoasu, jossa sisältö näkyy toimivan välilehtivalikon alla. Myös väripaletti on melko silmäänpistävä. Kun napsautat jotain tiettyä välilehteä, sen sisällä oleva sisältö häivytetään ja häivytetään CSS- ja JS-koodien avulla. Tämä malli on muokattavissa, mikä tarkoittaa, että kaikkia elementtejä voidaan muuttaa mieltymysten mukaan. Kaiken kaikkiaan melko selkeä ja yksinkertainen tapa lisätä välilehtiä tai valikoita sivustoosi, alla oleva linkki tarjoaa täyden pääsyn koodirakenteisiin ja live-esikatseluun.

Info / Lataa

Scroll For Tabs

Toinen JS-, CSS- ja HTML-koodeja sisältävä malli, jolla saadaan tämä erinomainen tulos, on Praveen Kumar Gorakalan Scroll for tabs. Responsiivinen, houkutteleva ja elinvoimainen väripaletti, tämä varma on suunniteltu visuaalinen näkökohta ensisijaisena painopisteenä. Se sisältää yksinkertaisen asetuksen, jossa on korttipohjainen muotoilu, jossa välilehdet on sijoitettu yläpuolelle otsikkovalikkona. Kun valikkopalkin pituus on kiinteä, otsikot myös liukuvat näkyviin ja pois näkyvistä vierityksen aikana. Jopa sisältö muuttuu selattaessa. Välilehdet suorittavat myös hover-efektin, joka tekee siitä entistäkin houkuttelevamman. Toinen hieno yksityiskohta on se, että myös sisältölaatikko mukauttaa kokoaan sisällön laajenemisen ja supistumisen mukaan. Koko rakenne on responsiivinen ja mukautuu täysin jokaisen laitteen näytön kokoon helposti.

Info / Lataa

CSS-välilehdet

Viimeisenä meillä on sinulle toinen mahtava tapa integroida CSS-välilehtiä sivustoosi. Se toimii periaatteessa vaihtokytkimenä, jolla voit vaihtaa sisältöä välilehdeltä toiselle käyttämällä yksinkertaisia mutta houkuttelevia animaatioita. Täällä demo esittelee kaksi välilehteä, joissa on erilainen sisältö, joka liukuu laitteen näyttöön vasemmalle ja oikealle poistua tai tulla näyttöön. Välilehdet kokonaisuutena noudattavat melko minimaalista tyyliä. Ja se esittelee valinnan yksinkertaisella animoidulla alleviivauksella otsikon alla. Hyvä asia on tietenkin se, että koko rakenne käyttää vain CSS- ja HTML-koodeja, mikä ei ole niin monimutkaista ja hienostunutta kuin miltä se saattaa näyttää. Mene vain eteenpäin ja seuraa alla olevaa linkkiä saadaksesi täyden näkymän kaikista käytetyistä elementeistä ja esikatsellaksesi demoa.

Info / Lataa

Moderni CSS-välilehtien suunnittelu

Nyt tässä on Carlos Valereanon tekemä mukautetumpi ja helppokäyttöisempi CSS-välilehtien suunnittelu. Siinä on kolme erilaista mallia, jotka eroavat toisistaan välilehtien muodon ja värien suhteen. Yksinkertainen ja suoraviivainen, se on käyttäjäystävällinen kangas, jonka avulla voit päästä alkuun. Siinä on yksinkertainen hover- ja click-efekti, joka esittelee myös välilehtien valinnan. Täältä löydät myös monivärisiä ja värillisiä versioita välilehdistä.

Variaatioita voit valita siellä olevista vaihtoehdoista. Mukauta sitä miten haluat ja lisää ylimääräinen ripaus luovuutta helposti. Löydät syvälliset yksityiskohdat kaikista edellä esitellyistä koodirakenteista alla olevan linkin kautta.

Info / Lataa

CSS-välilehdet NDC:lle

Tämä on klassisempi CSS-välilehtien muotoilu, joka on muotoiltu yksinkertaiseksi tiedoston kaltaiseksi. Se on suunniteltu ammattimaisella tyylitajulla, ja siinä on myös hämmästyttävä reagointikyky. Välilehdet ovat melko helposti muokattavissa ja ne voivat näyttää erilaisia tekstisisältöjä helposti. Kun napsautat mitä tahansa välilehteä, se liukuu alaspäin näyttämään sisällön ja käyttää sujuvia siirtymiä siirryttäessä yhdestä toiseen. Se on melko yksinkertainen muotoilu, mutta koko rakenne on puhdas ja näyttää kehittyneeltä. Runsaasti HTML-, CSS- ja JS-elementtejä on toteutettu sujuvan lopputuloksen varmistamiseksi.

Info / Lataa

Basic Tabs

Viimeiseksi lopetamme parhaiden CSS-välilehtien luettelon tähän perusvälilehden suunnitteluun, joka perustuu puhtaasti HTML:ään ja CSS:ään. Yksinkertaisella rakenteella se esittelee 3 välilehteä, joita edustaa taulukon päällä oleva tagi. Kun napsautat mitä tahansa näistä, se korostaa valintaa yksinkertaisella hover- ja click-efektillä. Molemmissa on tasainen värinmuutos, ja se liu’uttaa sisällön näkyviin, kun sitä napsautetaan. Tarpeeksi yksinkertainen tarkoituksiin, se on myös helppo mukauttaa ja lisätä oman mukautetun kosketuksen. Hanki täysi koodinpätkä alla olevasta linkistä ja aloita minkä tahansa tulevan web-suunnitteluprojektin tekeminen.

Info / Lataa