36 CSS lapterv a rendezettebb és professzionálisabb megjelenésű webhelyért

A füles felület vagy egyszerűen csak a fül egy olyan grafikus vezérlőelem, amelyet arra használhatunk, hogy több panelt vagy dokumentumot tartalmazzon egyetlen ablakban a felhasználók számára. Emiatt tökéletes egyoldalas weboldalakhoz és alkalmazásokhoz. A felhasználóknak nem csak egy rendezett és szervezett felhasználói felületet biztosít, hanem a navigációs folyamatot is sokkal egyszerűbbé teszi. Ha tehát egy szövegtömeges webhely tulajdonosa vagy egyszerűen csak egy tartalommal teli weboldalé, akkor a CSS lapok a legegyszerűbb módja annak, hogy jobban vonzóvá tegye a felhasználóit.

Azt szem előtt tartva, ma összeállítottunk egy listát a lehető legjobb lehetőségekről a mai felhasználók számára. Kézzel válogatva és a stíluselemek és a legjobb tervezési trendek szerint felsorolva, reméljük, hogy ez a lista segít a tökéletes kezdésben. Az animáltól az egyszerűig, az összetettől a minimálisig mindenre találtunk lehetőségeket.

Táblás tartalomrészleg

A listánk élén ez az Allen Brady által készített prémiumszerű CSS-fülldesign áll. Egyszerű, elegáns és hatékony, ez a design kiválóan alkalmas bármilyen típusú weboldalhoz, legyen az szakmai vagy személyes. Különböző kreatív ikonokkal van kiegészítve, amelyeket úgy animáltak, hogy fülként működjenek. Ezek mindegyike rendelkezik egy-egy kijelölt területtel a tartalomnak és a médiafájlok helytartójával is. Egyszerű CSS használatával az alkotónak sikerült egy hatékony hover-effektust is beillesztenie. És a legjobb része itt az, hogy nem támaszkodik semmilyen JS-re, ami azt jelenti, hogy a teljes sablon meglehetősen könnyen érthető és lemásolható.

Info / Letöltés

Material Tabs & Pages

A tervezéssel kapcsolatos professzionálisabb megközelítést követve, ez a következő variáció minden apró részletet szem előtt tartva készült. Az előző változattól eltérően azonban ez a CSS és a HTML mellett a JS implementáción is gyökeret vert. Egy egyszerű CSS-füllel kezdődik, amely ikonokkal és szöveggel egyaránt ábrázolja az egyes választásokat. Ha bármelyikre kattintunk, a tartalom megjelenik a lap alatti anyagalapú kártya alatt. A még vonzóbb megjelenítés érdekében élénk színsémák használatát találja, amelyek mind a lapokkal együtt változnak. Az egyszerű CSS használatával különböző animációk és átmenetek valósulnak meg az egész oldalon. Mindezek teljesen reszponzívak, és az eszköz képernyőinek megfelelően is könnyedén alkalmazkodnak.

Info / Letöltés

CSS Tab Selection

Mappaszerű struktúrát ábrázolva, ez egy újabb egyszerű, minimális, tiszta CSS-tiszta tab-design, amit a következő sorban kínálunk Önnek. A csak CSS és HTML alapján az általános struktúra, valamint a megvalósított animációk, azt mondhatjuk, hogy elég könnyen érthető és lemásolható. A lapok úgy vannak kialakítva, hogy úgy nézzenek ki, mint a mappák lapjai, és mint minden mappánál, a kiválasztott lapnak megfelelően váltogatja a tartalmat. Az extra részletesség érdekében a lapon található numerikus ikonok fölött egy egyszerű lebegőeffektus is található. Úgy tűnik, hogy reszponzív is, ami azt jelenti, hogy a design automatikusan és könnyedén alkalmazkodik az összes eszközkerethez.

Info / Letöltés

Pure CSS Tabs

Kezdjük valami egyszerű, elegáns és tiszta dologgal. Ez a Pure CSS fül vizuálisan kellemes, és tökéletesen működik több bejegyzés vagy tartalom megjelenítésére egyetlen képernyőn. A nyugtató lila és fehér színsémák eléggé vonzó látványt nyújtanak. És csak az egyszerű HTML és CSS struktúra használata az eredmény eléréséhez lenyűgöző. A legtöbb füles példához hasonlóan ez is a vízszintes nézetet használja, bemutatva a váltás lehetőségét. A színárnyalat egyszerű átmenete a rádiós bemenetet használja. Ez azt jelenti, hogy annak kiemelésére, hogy melyik részre kattintottunk, a lila egy sötétebb árnyalatát használjuk. Ennek a dizájnnak a készítője egyszerűnek tartotta, azonban a demó alatt egy linket is talál a 3D-s verzióhoz, amely szintén JS-t használ.

Info / Letöltés

Animated CSS Tabs

A 3D hatásról és egy haladóbb lehetőség választásáról beszélve, ez az animált CSS lapok tökéletes példája. Bár finoman animált, ez biztosan lenyűgöző eredményt hoz. És a legjobb az egészben, hogy az összes kód CSS-en és HTML-en alapul. Ez biztosítja a könnyebb megvalósítást és a szerkezet megértését. A zöld és fehér a tengerészkék háttéren elképesztően jól működik. Ha az egyes fülek fölé mozgatjuk, az egy sima animációban kinyúlik, amelyre kattintva a színséma megváltozik, hogy a kiválasztást is kiemelje.

Info / Letöltés

Just Another CSS Tab

Ez egy kreatívabb megközelítése a CSS lapoknak, mivel animációval, effektekkel és szintén innovatív tervezési struktúrával rendelkezik. Míg a legtöbb fület egyszerű navigációs elemként tervezték, ez inkább egy egyedi és magával ragadó elem felé hajlik, amelyet a felhasználók élvezhetnek. A lapokon használt hagyományos betűtípusok vagy szövegek helyett a készítő ezeket lapos ikonokkal helyettesítette. Mindegyiket úgy is tervezték, hogy lenyűgöző lebegő- és kattintáshatást hajtson végre, amely a kiemelést a kiválasztott lapra helyezi át. Még a tartalmak is megjelennek a nagyítás és kicsinyítés effektus segítségével. Összességében elég érdekes, az alábbi linket követve hozzáférhet a teljes szerkezetükhöz.

Info / Letöltés

Responsive CSS Tabs & Accordions

Most csak azért, mert ez egy fül, nem feltétlenül kell vízszintesnek lennie. Ez a reszponzív CSS lapok és harmonika tökéletes példa erre. Elég sokoldalú ahhoz, hogy akár harmonikaként, akár lapként használd, a webhelyedre való implementálása is elég egyszerű. Az egyszerű kék és fehér struktúra letisztult és professzionális megjelenésű. Ha rákattintasz, a fül függőlegesen kitágul, hogy bemutassa a benne lévő tartalmat. Egy másik hozzáadott részlet a rádiógomb stílusú hatás, ami azt jelenti, hogy egyszerre csak az egyik fül nyitható meg. Minden szempontot elég minimálisan tartanak meg, ami azt is meghagyja a felhasználóknak, hogy ha úgy tetszik, hozzáadják a saját egyéni érintésüket.

Info / Letöltés

CSS Tabs by Timothy M.LeBlanc

A rádiógombokról és a hatásról szólva, ez a CSS tab design teljes egészében hasonló stíluson és mintán alapul. A hagyományos, szövegekkel vagy ikonokkal ábrázolt tabulátorokkal ellentétben itt ezt rádiógombok helyettesítik. Ha bármelyik fülre kattintunk, alatta egy párbeszédpanel jelenik meg, ahol a felhasználók megtekinthetik a tartalmát. A rádiógombokhoz hasonlóan egyszerre csak egy lapot lehet megnyitni, és az azonnal összecsukódik, amikor a következő lehetőségre kattintunk. A színsémák meglehetősen egyszerűek, lila és fehér színűek. Egy másik apró, extra kreativitásként hozzáadott részlet a gombok színátmenete, amikor egy adott fülre kattintunk.

Info / Letöltés

Egyszerű jQuery-CSS füles panel

Most visszatérve a praktikusabb és navigációs célú tervezéshez, ez az egyszerű jQuery-CSS füles panel egy újabb remek példa. A dizájn elég egyszerű, a tartalom szervezett módon történő megjelenítésén dolgozik. Minden egyes lapot a tetején lévő füles panel határozza meg. Ezek a fülek, amikor a lebegtetés fölé változik a szín fehérről kékre, amit egyszerű CSS segítségével értek el. A füles panelen belüli tartalom átmenetét azonban JS segítségével határozzuk meg. Ez biztosítja a simább és tisztább átmenetet a be- és kitakaráskor. A panel belsejében lévő tartalom is rendkívül sokoldalú, és minden elhelyezhető, beleértve a szöveges tartalmat, a képeket és még a linkeket is.

Info / Letöltés

Pure CSS Tabs with indicator

Most ahogy a neve is sugallja ez a Pure CSS Tabs with indicator, tisztán HTML és CSS alapú. Tartalmaz egy material design alapú kártyát, amely a lap alapjaként működik. Minden egyes lapot egy kreatív ikon is képvisel, valamint a cím. Egyszerű a design, az animációk még mindig elég lenyűgözőek. Egyszerű CSS használatával az alkotónak sikerült elérnie a tartalom zökkenőmentes átmenetét minden egyes kattintással. Kiválasztáskor a fül címe is megváltoztatja a színét, és aláhúzva kiemeli a kiválasztást. A teljes kódolási struktúra szabadon hozzáférhető, csak kövesse az alábbi linket a megtekintéshez.

Info / Letöltés

CSS Tabs Revisited

Egy sötétebb verzió azoknak, akik keresik, ez a lenyűgöző példa az Eric Sadowski által készített CSS Tabs Revisited. A dizájn elég lenyűgöző, ha szem előtt tartjuk, hogy pusztán HTML és CSS alapú. Egy sima háttérrel indulva az alkotó minden stilizálással feldobta azt. Egy sötétebb árnyalatú dobozon a fül egy szalagszerű struktúrával jelenik meg az egész tetején. Minden egyes fülhöz szöveg és egy kreatív ikon is tartozik, amely az egyes szakaszokat képviseli. Most, amikor rákattintunk a benne lévő tartalom csúszás felfelé és csúszás lefelé hatást használ, hogy ki- és bejusson a képbe. A fülek színe is szürkéről narancssárgára változik a kiválasztott elem megjelenítéséhez. Adjon hozzá bármilyen típusú tartalmat, akár szövegeket, linkeket, akár képeket, ha úgy tetszik.

Info / Letöltés

Simple CSS Tabs with Shadow

A minimal és material design alapú CSS tab design tökéletesen minimális, mégis rugalmas. A design az egyszerűség miatt ideális alapot képez, amely bármilyen típusú témához vagy weboldalhoz igazodik. Az árnyékok hozzáadása szinte 3D-s érzetet kelt, a tiszta fehér színséma szintén hozzájárul a papírszerűséghez. A tartalmi terület hossza és szélessége is a benne lévő tartalomnak megfelelően állítható. Egy másik nagyszerű dolog ezzel a dizájnnal kapcsolatban, hogy teljesen reszponzív, és automatikusan alkalmazkodik minden tervezési képernyőmérethez könnyedén. Bármelyik fül fölé lebegtetve a szövegek is láthatóvá válnak egy sima beolvadási hatást végrehajtva. Mivel tisztán CSS alapú, minden további JS nélkül, az egész struktúra elég könnyen megvalósítható.

Info / Letöltés

CSS Tabs Menu

Most, egy professzionálisabb és célzottabb designhoz ez a CSS tabulátor mindent tartalmaz, amire szükséged lehet. A lapkialakítástól kezdve a tartalomtartókon át a sima és tiszta animációkig és átmenetekig mindenről jól gondoskodtunk. És bár a demó csak egy bábu, készen áll arra, hogy itt-ott néhány finomítással élesben is elinduljon. A CSS-effektusokat használó lapok kiemelik, amikor a lap fölé kerül, és teljesen megváltoztatják a színsémákat, amikor rákattintanak. Ahogy itt láthatja, nagyjából bármi hozzáadása lehetséges, akár szövegeket, linkeket, képeket, sőt űrlapokat és CTA gombokat is szeretne. A végeredmény elég hihetetlen, és a legjobb az egészben az, hogy teljes egészében CSS és HTML alapú.

Info / Letöltés

Mappa lapok

Egy kreatívabb megközelítés a CSS laptervezés felé, ez a stílus az egymásra rakott fájlokon és mappákon alapul. Az alkotó sima fekete hátteret használva jobban kiemelte a színes fájl alapú lapokat. Esetleg az a koncepció, hogy feltárja a tartalmat az egyes fülek belsejében, eléggé egyedi. A hagyományos függőleges kialakítással ellentétben ez inkább a vízszintes nézet felé hajlik. Ha bármelyik fülre kattintunk, az balra vagy jobbra csúszik, hogy feltárja a benne lévő tartalmat. És ha te is olyan vagy, aki a webhelyedre szeretne egy magával ragadó elemet illeszteni, hogy a felhasználók élvezhessék, akkor ez az ideális választás.

Info / Letöltés

Tiszta CSS füles navigáció

Most ez az Izzy Skye által készített tiszta CSS füles design egy másik innovatív megközelítés a hagyományos dizájnnal. A klasszikus kapcsológombot kihasználva a fül a benne lévő tartalmat az alatta lévő animált dobozon jeleníti meg. Ha bármelyik fülre kattintunk, a tartalom a lábléc szövege mellett csúszik ki és be. És ez elég lenyűgöző, szem előtt tartva mo felesleges JS kódokat használnak.

A contentbox kép vagy cím és linkek helytartójaként is funkcionál. Ha ráhúzza a mutatót, akkor feltárja a sima átmenetet, miközben megjeleníti az animált gombot, amely a tartalom teljes nézetéhez vezet. Ez a design tökéletesen alkalmas arra, hogy könnyebb navigációt adjon a felhasználók számára. Ezt szöveges oldalakon vagy blogokon is megvalósíthatja a kategorizáláshoz. A fekete, rózsaszín és fehér színséma is elég rugalmas és sokoldalú.

Info / Letöltés

Tabs Widget

Egy másik a CSS lapok listáján ez a letisztult és professzionális megjelenésű design a Sitepoint-tól. Bár a szépség itt az egyszerűségre összpontosít, az animációk és az átmenetek igazán nagyszerűek. Az egyszerű fehér háttér a tengerészkék fülszekcióval együtt elképesztően jól működik. Egyszerű navigációs fülként indul, amelyre kattintva feltárul a benne lévő tartalom. Az alkotók hozzáadták a rádiógomb-szerű hatást is, amely biztosítja, hogy egyszerre csak egy lapot lehet megnyitni. A kiválasztott lapot a colro világosabb árnyalatra való áttéréssel is kiemeli. Egy másik további részlet itt is a reszponzivitás jellemzői. Automatikusan alkalmazkodik bármilyen eszköz képernyőméretéhez, ez semmilyen módon nem befolyásolja a webhelyed reszponzivitását.

Info / Letöltés

CSS Tab by Chen Hui Jing

Ez a Chen Hui Jing által készített Pure CSS Tab design reszponzív, letisztult megjelenésű és meglehetősen innovatív. Az itt használt fülszekciók kezdetben kreatív ikonokat használnak a szövegek helyett. Bár ebben az esetben gyümölcsökről van szó, nagyjából bármivel helyettesítheti, amit szeretne. A lapok teteje is megkülönböztethető különböző színsémák használatával. De nagyjából ennyi az összes szín, amit kap. Mivel az összes többi rész egyszínű, és inkább professzionális és takaros megjelenést ábrázol. Egyszerű CSS használatával a fülek egy hover-effektust is végrehajtanak, amely a színsémát sötétebb színre váltja.

Ez a design praktikus és célorientált, rengeteg területet hagy a tartalom hozzáadásához. Az egyszerű szerkezet és a tiszta kódolás miatt Ön is elérheti ugyanezt az eredményt a saját webhelyén, minimális erőfeszítéssel. Egyszerűen csak kövesd az alábbi linket a teljes hozzáféréshez.

Info / Letöltés

Tab Interface with 3D Cube

Ha az anyagi design és a 2D egyszerűen nem jön be neked, akkor ez a 3D-s design biztosan pont neked való. Ez a Vavik által készített design egy összetettebb és fejlettebb design egy CSS laphoz. De biztos lehetsz benne, hogy az egész szerkezet teljes egészében CSS-en és HTML-en alapul. A lapokat különböző kockák vagy négyzetek képviselik, amelyeket a színsémák és a szövegek különböztetnek meg. A csavar itt azonban az, hogy az egyszerű átmenetek és effektek helyett a tervező egy 3D-s szaltóval tette szintre! A benne lévő tartalom teljes nézete a jobb oldalon egy nagyobb négyzetben jelenik meg. Így amikor a felhasználók rákattintanak egy adott fülre, a megjelenített négyzet egy teljes hátra- vagy előrefordítást végez, hogy megjelenítse a tartalmat. Elég elképesztő, hogy egy olyan dolog, mint egy fül, ilyen módon is animálható, nem igaz?

Info / Letöltés

Clickable CSS Tabs

Egy inkább monokróm fekete-fehér hangulatú, egyszerű CSS alapú füldizájn Ondřej Bárta munkája. Az általános stílus és a színsémák eléggé egyszerű, mégis vonzó végeredményt eredményeznek. A fülek ugyanúgy működnek, mint bármelyik hagyományos fülek. Az egyikre kattintva megjelenik a benne lévő tartalom. A finom részletek érdekében az alkotó CSS hover-effektust adott hozzá. Az egyes fülek fölé lebegtetve az árnyék egy árnyalattal sötétebbé válik, és megjelenik egy nyíl. Ha kiválasztod a lapot, a szín is teljesen fehérre változik, hogy megfeleljen a részleteket tartalmazó résznek. Egyszerű elérni, megvalósítani és megérteni, az alábbi linken keresztül a teljes kódrészletet is megtekintheted.

Info / Letöltés

Materialize CSS Tab Menu

A klasszikus Google Material designból merítve ihletet, ez a végeredmény Alex. Most bár egyszerű ránézésre, itt a részletek azok, amiket abszolút szeretünk. A teljes nézetben lévő fülek a legprofesszionálisabbnak tűnnek a ma felsorolt lehetőségek közül. Teljes lesz az összes tartalom belül is teszi a vonzó megjelenést. A kék színű fülek a hover és a kattintás hatása mellett extra magával ragadó. Amikor a lebegtetésre kerül, a fülek kiemelkednek a színátmenettel, valamint az aláhúzással, amely a szövegek alá csúszik, amikor rákattintanak. Ez a példa azonban mind a CSS, mind a JS kombinációja.

Info / Letöltés

Receptkártya CSS lapokkal

Ha önnek ételblogja vagy receptekkel kapcsolatos weboldala van, akkor ezt a dizájnt kifejezetten erre a résre tervezték. Tökéletesen használható füles tartalmakhoz, különösen az ételreceptekhez, de akár bármire is használhatod. Az egész szerkezet úgymond elég sokoldalú. Még két különböző variáció is van, amit a készítő kitalált. Az első példa kihasználja a gomb bővítési hatását, amikor a gombra kattintva a feltárt tartalomhoz igazodik. A második lehetőség egy másik átmenetet mutat be, ahol a fülek statikusak maradnak, míg a tartalom minden egyes kattintással változik.

Mindegyik azonban egy kiváló színátmenet hover-effektet hajt végre, hogy együtt menjen. A zöld és fehér színsémák is jobban feldobják az egész dizájnt.

Info / Letöltés

Tabby Tabs

A moziszerűbb és színpadiasabb érzéshez ez a CSS-fülkepélda animációt és effekteket használ a lenyűgöző eredmény eléréséhez. A sima szürke háttérrel a lila füles rész eléggé vonzó a szemnek. És akárcsak a hagyományos fülek, ez is úgy működik, hogy a tartalom láthatóvá válik, ha rákattintunk. A középpontban azonban itt a tartalom átmenete áll, amikor egyikről a másikra váltunk. CSS-t használunk a flex és overflow hatás eléréséhez, amikor az egyes tartalmak feltárulnak. A reszponzív és bármilyen típusú tartalomhoz nagyszerű, könnyen hozzáadhatsz képeket, szöveges részleteket és egyebeket tetszésed szerint.

Info / Letöltés

CSS3 Tabs by Sorax

Mintás háttérrel és az egyes lapok tartalmának megnyerő módon történő feltárásával a példa alkotója mesés végeredményt ért el. A letisztult és professzionális megjelenés megőrzése érdekében kék és fehér színsémát használ. A fülek és a szövegek meglehetősen egyszerűek, de a felemelő tényező itt a fülekre és a szövegekre gyakorolt hatások. A CSS3 animációk segítségével a tartalomdoboz szinte valósághű mozgásban jelenik meg, amikor bármelyik fülre kattintunk. Egy másik apró részlet a színátmenet a feketéről kékre, amikor a kurzorral fölé kerül.

Info / Letöltés

Pure CSS3 Tabbed Content

Még egyszer, a függőleges tervezési struktúrát kihasználva, ez egy minimalista és monokróm design Colin Halltól. A fülek vízszintesen jelennek meg, mint egy oldalsáv egy webhelyen. Ha rákattintunk, akkor a jobb oldalon lefedett nagy területen feltárul a benne lévő tartalom. A színpaletta az, ami ezt egy letisztult és professzionális dizájnhoz teszi. Hogy a dolgok még érdekesebbek legyenek, a tervező kreatív ikonokat használt egyszerű szövegek helyett A design ráadásul reszponzív, ami azt jelenti, hogy minden eszköz képernyőméretéhez könnyedén alkalmazkodik. A színátmenet itt a feketéről fehérre és a fehérről feketére a lebegtetéskor szintén extra kreativitást ad.

Info / Letöltés

jQuery és CSS Tabbed fájlmappa

Fentebb már említettünk egy hasonló designt, de ez a mappa alapú CSS füles design egy egyszerűbb és egyszerűbb változat. Ian Glaude tervezése, a színhasználat és az árnyékjáték teszi valósághűvé az ábrázolást. Ugyanúgy működik, mint ahogyan bármelyik fül feltárná a tartalmat, ha rákattintanak. A kreatív húzás itt azonban a sima árnyékjáték és a 3D-s felugró ablakszerű hatás. Ha szem előtt tartjuk, hogy ez a design a JS-re is támaszkodik, akkor ez jelentősen nehezebben megvalósítható az itt felsoroltakhoz képest. Azonban hozzáférhetsz az összes szerkezetükhöz, hogy jobban megértsd. Csak kövesse a lenti linket.

Info / Letöltés

Tabs

Végül, de nem utolsósorban, ez egy másik a kék és fehér színű CSS tab designban. Tisztán CSS és HTML alapú, ez a design is teljesen reszponzív. A képernyőmérettől függően vízszintes vagy függőleges nézetűre alakítja át a lapokat. Az egyes fülek átlátszatlanságával játszva a lebegőhatás is egészen lenyűgöző. Egy másik magával ragadó animációt használnak a tartalmi részen, amely összehúzódik és kitágul, amikor az egyikről a másikra vált. A halványkék és a fehér is remekül működik együtt, nyugodtabb és tisztább hatást keltve. És mivel CSS-en és HTML-en alapul, ennek a dizájnnak a megvalósítása a webhelyeden is egyszerűbb.

Info / Letöltés

UI/UX példa: Tab Switch Animation

Ez alapvetően egy css tab design, amely minden bizonnyal egyedi és nem mindennapi. Kreatív és magával ragadó, ez a konkrét példa a kapcsolóalapú kialakítást használja. A HTML, a CSS, valamint a JS kódszerkezetre támaszkodik a zökkenőmentesen működő felület érdekében. Bár a demó csak 2 lapot mutat be a benne lévő opciókkal, a struktúra elég rugalmas ahhoz, hogy többet is hozzáadhasson. A kapcsolónak megfelelően balra és jobbra csúsztatva a nézetbe, ez a fül fantasztikus módja annak, hogy animált elemet adjon hozzá az oldalához. Egy eléggé egyszerű dizájn, hogy elkezdhesse, könnyedén lemásolhatja az egész struktúrát a webhelyére. Kövesse az alábbi linket, hogy közelebbről megnézze a felhasznált kódsorokat, és jobban megértse, hogyan jött létre a végeredmény.

Info / Letöltés

CSS lapok

Ha valami kifinomultabbat és nem mindennapi dolgot keres, akkor ez a függőleges CSS laptervezés pont önnek való. A CSS, HTML, valamint JS használatával létrehozott kódszerkezet, ez az egész dizájn egyedi, összességében vizuálisan kellemes. A hagyományos függőleges dizájn helyett vízszintes tabulátorral rendelkezik, ahol az összes tabulátort ikonok képviselik. A benne lévő tartalom úgy van kialakítva, hogy a kártya alapú kialakításon jelenjen meg, és minden egyes lapra kattintva a lapok megjelenítésében és megjelenítésében elhalványul. Egy másik apró részlet az egyes lapok ikonjainak színátmeneti hatása, amikor az ikonok fölé tartunk.

A gradiens háttér olyan, amely biztosan szemet gyönyörködtető, és az általános kialakítás célja, hogy elég sokoldalú legyen ahhoz, hogy bármilyen weboldalhoz illeszkedjen. Egy animált call-to-action gomb is van, amelyet kihasználhat. Alapvetően átalakítja a színét és a pozícióját a lebegtetéskor, hogy még vonzóbbá tegye a fellebbezést. A Julie Park által készített CSS laptervezés mindenképpen megérdemli, hogy megemlítsük a listánkon.

Info / Letöltés

CSS Tab Bars

Mivel egyre több webhely függ a menük és lapok kreatív megjelenítési módjaitól, ez az egy biztosan kiemelkedik a többi közül. Az iktatómappához hasonló kialakítással minden ebben a konkrét példában nagyszerű részletességgel van kódolva. Az alkotó egy egyszerű koncepciót vett, és nagy erőfeszítéssel hajtotta végre. Egyetlen kártyaként indul, amelyen a lap száma és a benne lévő tartalom szerepel. A bal alsó sarokban van egy gomb, amely lehetővé teszi a következő lap megjelenítését.

Mindegyik lap követi a következőt, miközben az utolsó lapig átfedésben van a megjelenővel. ugyanez a hatás érvényesül, ha az előző lapokra kattintasz. A tartalom kattintásra csúszik be és ki a megjelenítésből. Elég egyszerű a kinézet alapján, a kódok talán egy kicsit kifinomultabbak. Tehát miért nem követi az alábbi linket, hogy jobban és közelebbről megnézze a kódszerkezetet és az élő előnézetet?

Info / Letöltés

Elasztikus lapok

Ha te vagy az, aki a kreatív animációk és effektek segítségével a designt egyszerűnek, mégis magával ragadónak szereti tartani, akkor ez az elasztikus lap neked való. Az alkotó Nenad Kaevik egy egyszerű menü dizájnját használta fel, és az egészet csak néhány kreatív animáció megvalósításával emelte fel. Minimális fejléc menüvel rendelkezik, amelyben a cím és az ikon képviseli az egyes lapokat. A kiválasztás kiemelésre kerül, ha rákattintunk, és megjelenik egy színátmenet, beleértve az ikont és a szöveget is.

A kiválasztástól függően a kiválasztó animálva csúszik balra és jobbra a helyére, miközben egy rugalmasabbnak tűnő mozgást ábrázol. Az egész szerkezetet is úgy tervezték, hogy reszponzív legyen, és könnyedén, rendkívül könnyen alkalmazkodjon az összes eszköz képernyőjéhez. Minden elem nagymértékben testreszabható, ami azt jelenti, hogy könnyen személyre szabhatja a színeket, a betűtípusokat és még a használt ikonokat is, hogy pontosan azt kapja, amit szeretne.

Info / Letöltés

Pure CSS Tabs With A Hint Of JS

Ez egy elég egyszerű design, amely a CSS tab design megfelelő definíciója. Olyan felülettel rendelkezik, amely eléggé célorientált, és mindent lefed, amit egy tab-dizájntól elvárunk. Egyszerű elrendezéssel rendelkezik, a tartalom a funkcionális fülmenü alatt jelenik meg. A színpaletta is eléggé szemet gyönyörködtető. Ha rákattint egy adott fülre, a benne lévő tartalmak CSS és JS kódok segítségével be- és kikapcsolódnak a megjelenítésből. Ez a sablon testreszabható, ami azt jelenti, hogy minden elemet megváltoztathat a saját preferenciájának megfelelően. Összességében egy elég jól megkülönböztethető és egyszerű módja a fülek vagy menük hozzáadásának a webhelyéhez, az alábbi link teljes hozzáférést biztosít a kódszerkezetekhez és az élő előnézetekhez.

Info / Letöltés

Scroll For Tabs

A másik, amely JS, CSS és HTML kódokat foglal magába a kiemelkedő eredmény eléréséhez, a Scroll for tabs by Praveen Kumar Gorakala. Responsive, vonzó és élénk a színpaletta, ez biztos, hogy úgy tervezték, hogy a vizuális szempont az elsődleges szempont. Tartalmaz egy egyszerű beállítást egy kártya alapú kialakítással, amely felett a lapok a fejléc menüjeként vannak elhelyezve. A menüsor rögzített hosszával a címek is csúsznak a görgetéskor. Még a tartalom is változik görgetéskor. A fülek egy hover-effektust is végrehajtanak, ami még vonzóbbá teszi. Egy másik nagyszerű részlet, hogy a tartalomdoboz mérete is a tartalom bővülésének és zsugorodásának megfelelően igazodik. Az egész struktúra reszponzív és teljes mértékben alkalmazkodik minden eszköz képernyőméretéhez könnyedén.

Info / Letöltés

CSS Tabs

Az utolsó, amit neked tartogatunk, egy másik fantasztikus módja a CSS tabulátorok integrálásának az oldaladra. Alapvetően úgy működik, mint egy átkapcsoló, amely egyszerű, de vonzó animációk segítségével váltogatja a tartalmakat egyik fülről a másikra. Itt a demó két különböző tartalmú lapot mutat be, amelyek a készülék képernyőjén balra és jobbra csúsznak a kilépéshez vagy a megjelenítéshez. A lapok egésze meglehetősen minimalista stílust követ. A kiválasztást pedig egy egyszerű animált aláhúzással mutatja be a cím alatt. A jó dolog természetesen az, hogy az egész szerkezet csak CSS és HTML kódokat használ, ami nem olyan bonyolult és kifinomult, mint amilyennek látszik. Csak menjen előre, és kövesse az alábbi linket, hogy teljes képet kapjon az összes felhasznált elemről, és megtekinthesse a demót.

Info / Letöltés

Modern CSS Tab Design

Most, ez egy sokkal testreszabottabb és könnyen kezelhető CSS tabs design Carlos Valereano által. Három különböző dizájnt tartalmaz, amelyek a fülek alakjával és színeivel különböznek. Egyszerű és egyszerű, felhasználóbarát vászon, amelyet használhatsz a kezdéshez. Egyszerű lebegő- és kattintáshatással rendelkezik, amely bemutatja a lapok kiválasztását is. Itt a fülek többszínű és színes változatát is megtalálja.

A variációkhoz az ott elérhető lehetőségek közül választhat. Testreszabhatja, ahogyan csak szeretné, és könnyedén hozzáadhatja a kreativitás egy kis pluszt. A fent bemutatott összes kódszerkezet mélyreható részleteit az alábbi linken keresztül találja meg.

Info / Letöltés

CSS Tabs For NDC

Ez egy klasszikusabb kialakítású CSS fül, amelyet egyszerű fájlszerű formátumban terveztek. Professzionális stílusérzékkel tervezték, és elképesztő reszponzivitással is rendelkezik. A lapok meglehetősen könnyen testreszabhatók, és könnyedén megjeleníthetnek egy sor szöveges tartalmat. Ha bármelyik fülre kattint, az lefelé csúszik a tartalom megjelenítéséhez, és sima átmeneteket használ, amikor egyikről a másikra vált. A dizájn eléggé alapvető, azonban az egész struktúra tiszta és fejlettnek tűnik. Rengeteg HTML, CSS és JS elemet implementáltak a zökkenőmentes működés érdekében.

Info / Letöltés

Basic Tabs

Végül a legjobb CSS lapok listáját ezzel a pusztán HTML-en és CSS-en alapuló alapvető laptervezéssel zárjuk. Egyszerű felépítésével 3 lapot mutat be, amelyeket a táblázat tetején lévő tag képvisel. Ha ezek bármelyikére kattintunk, a kiválasztást egyszerű lebegtetés és kattintás effektussal emeli ki. Mindkettő sima színváltoztatással rendelkezik, és kattintáskor csúsztatja a tartalmat. Elég egyszerű a célokkal, de könnyen testreszabható és hozzáadható a saját egyéni érintése. Szerezd meg a teljes kódrészletet az alábbi linken, és kezdj hozzá bármelyik jövőbeli webdesign projektedhez.

Info / Letöltés