Tolóajtó css
A CSS ritkán tárgyalt előnyei között szerepel a háttérfelvételek átfedése annak érdekében, hogy különböző hatásokat érjenek el. A CSS2 szabványnak megfelelően minden egyes háttérképhez külön HTML elem szükséges. A legtöbb esetben a közös interfészkomponenseket leíró tipikus kód több HTML elemet is kínál.
Az egyik ilyen eset a könyvjelzők alapján történő navigáció. Itt az ideje, hogy visszanyerje a könyvjelzők fölötti irányítást, amelynek népszerűsége a navigáció fő eszközeként folyamatosan növekszik. És most a CSS széleskörű támogatásának köszönhetően javíthatunk a könyvjelzők minőségéről és megjelenéséről oldalainkon. Valószínűleg már tudatában van annak, hogy a CSS használható egy egyszerű, számozatlan lista "megszelídítésére". Talán még olyan listákat is láthattál a könyvjelzők formájában, amelyek valami ilyesmit látnak:
És mi lenne, ha a kódot pontosan az előző példából vehetnénk át, és a könyvjelzőket ilyen módon fordíthatnánk:
Az egyszerű CSS segítségével ez lehetséges.
Mi az innováció?
Sok a CSS-ütközött kedvenceim (könyvjelzők alapuló CSS) szenvednek a monotónia a design: a színes téglalapok, esetleg a stroke, az aktuális lapon nincs stroke, a színváltozás a hover állapotban. Ez az, amit a CSS kínál nekünk? Néhány négyszög egyszínű színnel töltve?
Mielőtt a CSS széles körben elterjedt volna, számos új ötlet jelent meg a navigációs tervezésben: bizarr formák, ügyes színátmenetek, interfészek utánzása a valós világból. Az ilyen kialakítás azonban nagymértékben a raszterizált szöveg és a többször egymásba ágyazott táblák komplex tervein alapult. A szöveg szerkesztése vagy a könyvjelzők elhelyezési sorrendjének megváltoztatása nehéz feladat volt. A szöveg méretezése lehetetlen volt, vagy komoly problémákat okozott az oldal összetételében.
A sima szövegű navigáció egyszerűen szerkeszthető és gyorsabb, mint a raszter alapú navigáció. Ezenkívül bár minden egyes képhez hozzáadhatjuk az alt attribútumot, a sima szöveg még szélesebb körben elérhető, mivel skálázható. Ezért nem meglepő, hogy az egyszerű szöveges navigáció visszatért a webes tervezésbe. Azonban a CSS-könyvjelzők megjelenése még mindig egy lépés volt hátra a tervezésben, és egyáltalán nem egyáltalán, hogy mi lehet a tervezési portfólióban. Az új technológiáknak (például a CSS-nek) lehetővé kell tenniük, hogy valami jobbat és ugyanolyan minőségi dizájnt hozzanak létre, amely raszteres képek alapján táblákat és könyvjelzőket adott.
A "csúszó ajtók"
Gyönyörű, igazán rugalmas interfész elemeket hozhatunk létre, amelyek a szöveg méretétől függően két különböző háttérkép segítségével bővülnek és szűkítenek. Az egyik a könyvjelző bal oldalán, a másik a jobb oldalon. Képzeld el ezt a pár képet - Tolóajtó, amely egy ajtót fed le. Ezek az ajtók tovább mozognak és átfedik egymást, ha az ajtó keskeny, és fordítva, elmozdulni és kevésbé átfedésben van, ha nagyobb területet kell bezárnia. Ez látható a képen:
E modell szerint egy kép átfedi a másikat. Ha feltételezzük, hogy a széleken Képeink van valami egyedi, mint például a lekerekített sarok könyvjelzőket, nem szeretnénk, hogy egy kép teljesen elhomályosítja a többi mögött található. Ennek elkerülése érdekében az elülső (esetünkben a bal oldali) képet a lehető legszűkebbre tesszük. Ugyanakkor a képnek elég szélesnek kell lennie, hogy megőrizze látszólagos egyediségét. Esetünkben a lekerekített sarkok egyedülállóak, így az elülső kép a szélessége lesz a kép e lekerekített részével:
Ha például a könyvjelző mérete növekszik, például a szöveges méretezés miatt, a képek oldalra szétoszlanak, és kellemetlen szünetet tárnak fel. Ezért meg kell becsülni egy elfogadható kiterjesztés méretét. Mennyiben nőhet az objektum, ha a szöveg a böngészőben skálázódik? Valóban számolni kell a 300% -os növekedés lehetőségével. Ennek a növekedésnek a kompenzálására meg kell szüntetnie a háttérképeket. Példánkban egy hátsó képet (jobb oldalt) készítünk, amelynek mérete 400x150 képpont, az első pedig - 9x150 képpont.
Ne felejtsük el, hogy a háttérképek csak azon elem "ajtóján" láthatók, amelyre alkalmazzák őket (az "ajtó" a tartalmi terület + behúzás). Mindkét képünk a hozzájuk tartozó elemek külső sarkához van csatolva. Ezeknek a képeknek a látható része egyesül az ajtó belsejében, és egy könyvjelző formáját alkotja:
Ha a könyvjelző meg van nagyítva, a képek egymástól távolodnak, szélesebb nyílást töltenek be, míg a látható képterület is nagyobb lesz:
Ugyanezt kell tenni egy fényképpel az aktuális könyvjelzőhöz. Miután így mind a 4 képet (1, 2, 3, 4) elkezdtük létrehozni a kódot és a CSS könyvjelzőinket.
Amint megismerkedsz azzal, hogy vízszintes listákat hozol létre a CSS-sel, akkor legalább kétféleképpen észlelheted egy objektumcsoport egy sorba rendezését. Mindenkinek van előnye és hátránya. Mindkettő megköveteli a CSS meglehetősen bonyolult szempontjainak elérését, ezért gyorsan össze tudsz zavarodni. Az első módszer a string elemeket használja, a második az úszó tulajdonság.
Az első módszer - talán a leggyakoribb - magában foglalja a megjelenítési tulajdonság "inline" (kisbetű) módosítását. A "string" módszer vonzó az egyszerűség kedvéért. Ez azonban problémákat okoz a csúszó kapu módszerének végrehajtásában néhány böngészőben. A másik mód, amelyre koncentráljuk figyelmünket, egy lebegő modellt használ a sorok sorainak vízszintes sorba rendezéséhez. A lebegő modell azonban csalódást okozhat. Ellentmondásos viselkedése néha sérti az elképzelhető logikát. De még mindig közös megértés arról, hogyan kell kezelni több lebegő elemet, és tudni kell, hogyan lehet megbízható úton "kilépni" egy lebegő sorból (vagy egy tartályba való bebörtönzés) csodákra.
Megpróbálunk több úszó elemet elhelyezni egy másik lebegő tartályelemen belül. Ezt úgy kell megtenni, hogy a külső oldali lebegő elem teljesen körülveszi a belső lebegő elemeket. Ezután felvehetünk háttérképet vagy háttérképet a könyvjelzők mögött. Fontos megjegyezni, hogy a könyvjelzők mögötti következő elem helyét vissza kell állítani a CSS tulajdonság egyértelműen. Ezután a lebegő könyvjelzők nem befolyásolhatják más oldalelemek elrendezését.
Kezdjük a következő kóddal:
A gyakorlatban a #header például egy másik logót és keresési űrlapot tartalmazhat. Példánkban az egyes hivatkozások href értékét "#" -ra csökkentjük. Nyilvánvaló, hogy a valós életben az ikon helyett a fájl vagy mappa elérési útja kerül meghatározásra.
Kezdjük kezelni a CSS-sel a float tulajdonságot a #header tárolóhoz rendelve. Ez garantálja, hogy a tároló ténylegesen "tartja" a lista elemeit, amelyek szintén lebegnek. Mivel a #header lebegett, meg kell adnunk annak 100% -os szélességét. Hozzáadunk egy ideiglenes sárga hátteret is, hogy megbizonyosodjunk arról, hogy ez a szülőelem a könyvjelzők mögött húzódik. Végül állítsunk be néhány alapvető betűtípus tulajdonságot, hogy biztosítsuk az elemek megjelenésének egységét:
# header #current a
Miután ezt megtettük, egy példát kapunk 4. Megjegyezzük, hogy az áttetsző sarkok létrehozásához szükséges lépések egy kis "halott" zóna megjelenését eredményezték a lap bal oldalán, ahol nem reagál az egér útmutatására. A halott zóna kívül esik a szövegen, de még mindig észrevehető. A könyvjelző mindkét oldalán átlátható képet nem kell használni. Ha nem szeretnénk, hogy "halott" webhelyünk legyen a könyvjelzőn, akkor csak a könyvjelzők mögött kell tömör kitöltést alkalmazni, nem gradiensnek, és ugyanolyan színű könyvjelzők sarkait kell létrehoznunk. Addig is megtartjuk a sarkok átláthatóságát. [IE / Win, az említett "halott" zóna létezett, és mielőtt a lépéseket, és minden oldalról a link szövegét. Ennek a problémának a megoldását a SlidingDoorsofCSS, PartII sorozat következő cikke tárgyalja. fordító]
Nos, végül a befejező érzés. Egyszerre: az egész szöveget félkövérré tesszük, a normál fülek szövege barna, az aktuális-sötét szürkén ugyanaz a szín van hozzárendelve a lebegési link állapotához, eltávolítja az aláhúzás hivatkozásait. Az ehhez a perchez hozzáadott összes kiegészítést és változtatást az 5. példában mutatjuk be.
Egy másik módszer a kompatibilitás biztosítására
Miután megvizsgálta a 2. példát, felismertük az IE5 / Mac problémáját, amely a könyvjelzõket az ablak teljes szélességébe fektette, és egymásba függõlegesen egymásba illesztette azokat. Nem éppen az a hatás, amit próbálunk elérni.
A legtöbb böngészőben egy úszó tulajdonság egy elem használatával a tömörítés a lehető legkisebb mérethez, amelyet annak tartalma határoz meg. Ha a lebegő elem egy képet tartalmaz (vagy maga a kép), akkor a kép szélességére csökken. Ha csak szöveget tartalmaz, akkor a szöveg leghosszabb vonalának szélességébe esik, amely nem tartalmaz kötőjeleket.
Problémák merülnek fel az IE5 / Mac rendszerben, amikor az automatikus szélességű blokkelemet a lebegő elem belsejébe helyezi. Ebben az esetben minden böngésző tömöríti a lebegő elemet a lehető legkisebb szélességre, figyelmen kívül hagyva a belső blokkelemet. De az IE5 / Mac ezt nem teszi meg a leírt helyzetben. Ehelyett kiterjeszti a lebegő és belső blokkelemeket a teljes szélességre. Ennek a viselkedésnek a meggondolásához float-ot kell alkalmazni a linkre, csak IE5 / Mac-re, anélkül, hogy más böngészőket is befolyásolnánk. Először hozzá kell rendelni egy újat egy meglévő szabályhoz. Ezután alkalmazza a "Backslash Method" -ot, hogy elrejtse az új szabályt az IE5 / Mac-ből, ami eltávolítja az újat más böngészők számára:
nem-ismétlés jobb felső;
párnázottság: 5px 15px 4px 6px;
/ * Hozzászólva Backslash Hack
elrejti az IE5-Mac szabályát \ * /
/ * End IE5-Mac hack * /
A 6. példával összhangban az IE5 / Mac mostantól a könyvjelzőket jeleníti meg. A többi böngésző számára semmi sem változott. Az IE5 / Mac számos olyan CSS-hibát tartalmaz, amelyeket az IE5.1-ben rögzítettek. Ezekből az IE5 / Mac hibákból és a "Tolóajtók" módszeréből ered. Számuk meghaladja az elképzelhető határértékeket, és nem fogok harcolni velük. És mivel az 5.1-es frissítés sokáig már elérhető mindenkinek, a cOS 9 és a telepített IE5 / Mac aránya folyamatosan csökken és közeledik a nulla értékhez.
Most elemeztük részletesebben a "csúszós ajtók" módszerét, amely lehetővé teszi, hogy egy számozatlan listán és linken, valamint több CSS-szabályon keresztül módosított oldalalapú navigációt hozzon létre egyszerű szöveggel. Ez a navigáció gyorsan betöltődik, könnyen karbantartható, és a benne lévő szöveg bármilyen irányban megdőlhet, anélkül, hogy megszakadna a tervezés. Mondanom sem kell, mennyire rugalmas ez a módszer a kifinomult kinézetű navigáció létrehozásához?
Ezt a technikát csak képzeletünk korlátozza. A végső példa csak egy opciót szemléltet. De ez a példa nem korlátozhatja az ötleteinket.
Az alkalmazott technikához más hatások is felvehetők, amit itt nem gondolunk. A mi példánkban megváltoztatta a színét a szöveget a status lebeg, de miért nem változtatja meg a háttérképet az egész érdekes élőpontokkal. Ha van egy kód két egymásba HTML elemek mindig tudunk használni CSS overlaying háttér képeket eredményez, és hatással, amit soha nem álmodott. Példánkban létrehoztunk egy vízszintes lapfülsor, de a módszer Tolóajtó lehet használni sok más esetben. Milyen alkalmazást javasol erre a módszerre?
Minden anyag a "Számítástechnika és programozás"